Siklos
c81a6fe44b
All checks were successful
continuous-integration/drone/push Build is passing
Implement events for external use Rename interfaces with a I prefix Add some documentation Co-authored-by: Eric NGUYEN <enguyen@techform.fr> Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/26
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
|
|
import { truncateString } from '../../utils/stringtools';
|
|
|
|
interface ISidebarProps {
|
|
componentOptions: IAvailableContainer[]
|
|
isOpen: boolean
|
|
buttonOnClick: (type: string) => void
|
|
}
|
|
|
|
function handleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
|
|
event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id);
|
|
}
|
|
|
|
export const Sidebar: React.FC<ISidebarProps> = (props: ISidebarProps) => {
|
|
const listElements = props.componentOptions.map(componentOption =>
|
|
<button
|
|
className='justify-center transition-all sidebar-component'
|
|
key={componentOption.Type}
|
|
id={componentOption.Type}
|
|
title={componentOption.Type}
|
|
onClick={() => props.buttonOnClick(componentOption.Type)}
|
|
draggable={true}
|
|
onDragStart={(event) => handleDragStart(event)}
|
|
>
|
|
{truncateString(componentOption.Type, 5)}
|
|
</button>
|
|
);
|
|
|
|
const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
|
|
return (
|
|
<div className={`fixed z-10 bg-slate-200
|
|
text-gray-700 transition-all h-screen w-64
|
|
overflow-y-auto ${isOpenClasses}`}>
|
|
<div className='bg-slate-100 sidebar-title'>
|
|
Components
|
|
</div>
|
|
<div className='grid grid-cols-1 md:grid-cols-3 gap-2
|
|
m-2 md:text-xs font-bold'>
|
|
{listElements}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|