65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import { PanelSection, Icon, Tooltip } from '../../components';
|
||
|
|
import ToolSettings from './ToolSettings';
|
||
|
|
|
||
|
|
const AdvancedToolbox = ({ title, items }) => {
|
||
|
|
const [activeItemName, setActiveItemName] = useState(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// see if any of the items are active from the outside
|
||
|
|
const activeItem = items?.find(item => item.active);
|
||
|
|
setActiveItemName(activeItem ? activeItem.name : null);
|
||
|
|
}, [items]);
|
||
|
|
|
||
|
|
const activeItemOptions = items?.find(item => item.name === activeItemName)?.options;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PanelSection title={title}>
|
||
|
|
<div className="flex flex-col bg-black">
|
||
|
|
<div className="bg-primary-dark mt-0.5 flex flex-wrap py-2">
|
||
|
|
{items?.map(item => {
|
||
|
|
return (
|
||
|
|
<Tooltip
|
||
|
|
position="bottom"
|
||
|
|
content={<span className="text-white">{item.name}</span>}
|
||
|
|
key={item.name}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="ml-2 mb-2"
|
||
|
|
onClick={() => {
|
||
|
|
if (item.disabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setActiveItemName(item.name);
|
||
|
|
item.onClick(item.name);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={classnames(
|
||
|
|
'text-primary-active grid h-[40px] w-[40px] place-items-center rounded-md bg-black ',
|
||
|
|
activeItemName === item.name && 'bg-primary-light text-black',
|
||
|
|
item.disabled && 'opacity-50',
|
||
|
|
!item.disabled &&
|
||
|
|
'hover:bg-primary-light cursor-pointer hover:cursor-pointer hover:text-black'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon name={item.icon} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
<div className="bg-primary-dark h-auto px-2">
|
||
|
|
<ToolSettings options={activeItemOptions} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</PanelSection>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
AdvancedToolbox.propTypes = {};
|
||
|
|
|
||
|
|
export default AdvancedToolbox;
|