137 lines
4.1 KiB
TypeScript
137 lines
4.1 KiB
TypeScript
import clsx from 'clsx';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
|
|
|
import { animateSideAppear } from '@/styling/animations';
|
|
import { globals } from '@/utils/constants';
|
|
|
|
import { IconDropArrow, IconPageRight } from '../Icons';
|
|
import { CProps } from '../props';
|
|
import MiniButton from './MiniButton';
|
|
import Overlay from './Overlay';
|
|
|
|
interface SelectTreeProps<ItemType> extends CProps.Styling {
|
|
/** Current value. */
|
|
value: ItemType;
|
|
|
|
/** List of available items. */
|
|
items: ItemType[];
|
|
|
|
/** Prefix for the ids of the elements. */
|
|
prefix: string;
|
|
|
|
/** Callback to be called when the value changes. */
|
|
onChangeValue: (newItem: ItemType) => void;
|
|
|
|
/** Callback providing the parent of the item. */
|
|
getParent: (item: ItemType) => ItemType;
|
|
|
|
/** Callback providing the label of the item. */
|
|
getLabel: (item: ItemType) => string;
|
|
|
|
/** Callback providing the description of the item. */
|
|
getDescription: (item: ItemType) => string;
|
|
}
|
|
|
|
/**
|
|
* Displays a tree of items and allows user to select one.
|
|
*/
|
|
function SelectTree<ItemType>({
|
|
items,
|
|
value,
|
|
getParent,
|
|
getLabel,
|
|
getDescription,
|
|
onChangeValue,
|
|
prefix,
|
|
...restProps
|
|
}: SelectTreeProps<ItemType>) {
|
|
const foldable = useMemo(
|
|
() => new Set(items.filter(item => getParent(item) !== item).map(item => getParent(item))),
|
|
[items, getParent]
|
|
);
|
|
const [folded, setFolded] = useState<ItemType[]>(items);
|
|
|
|
useLayoutEffect(() => {
|
|
setFolded(items.filter(item => getParent(value) !== item && getParent(getParent(value)) !== item));
|
|
}, [value, getParent, items]);
|
|
|
|
const onFoldItem = useCallback(
|
|
(target: ItemType, showChildren: boolean) => {
|
|
setFolded(prev =>
|
|
items.filter(item => {
|
|
if (item === target) {
|
|
return !showChildren;
|
|
}
|
|
if (!showChildren && (getParent(item) === target || getParent(getParent(item)) === target)) {
|
|
return true;
|
|
} else {
|
|
return prev.includes(item);
|
|
}
|
|
})
|
|
);
|
|
},
|
|
[items, getParent]
|
|
);
|
|
|
|
const handleClickFold = useCallback(
|
|
(event: CProps.EventMouse, target: ItemType, showChildren: boolean) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onFoldItem(target, showChildren);
|
|
},
|
|
[onFoldItem]
|
|
);
|
|
|
|
const handleSetValue = useCallback(
|
|
(event: CProps.EventMouse, target: ItemType) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onChangeValue(target);
|
|
},
|
|
[onChangeValue]
|
|
);
|
|
|
|
return (
|
|
<div {...restProps}>
|
|
<AnimatePresence initial={false}>
|
|
{items.map((item, index) =>
|
|
getParent(item) === item || !folded.includes(getParent(item)) ? (
|
|
<motion.div
|
|
tabIndex={-1}
|
|
key={`${prefix}${index}`}
|
|
className={clsx(
|
|
'pr-3 pl-6 py-1',
|
|
'cc-scroll-row',
|
|
'clr-controls clr-hover',
|
|
'cursor-pointer',
|
|
value === item && 'clr-selected'
|
|
)}
|
|
data-tooltip-id={globals.tooltip}
|
|
data-tooltip-html={getDescription(item)}
|
|
onClick={event => handleSetValue(event, item)}
|
|
initial={{ ...animateSideAppear.initial }}
|
|
animate={{ ...animateSideAppear.animate }}
|
|
exit={{ ...animateSideAppear.exit }}
|
|
>
|
|
{foldable.has(item) ? (
|
|
<Overlay position='left-[-1.3rem]' className={clsx(!folded.includes(item) && 'top-[0.1rem]')}>
|
|
<MiniButton
|
|
noPadding
|
|
noHover
|
|
icon={!folded.includes(item) ? <IconDropArrow size='1rem' /> : <IconPageRight size='1.25rem' />}
|
|
onClick={event => handleClickFold(event, item, folded.includes(item))}
|
|
/>
|
|
</Overlay>
|
|
) : null}
|
|
{getParent(item) === item ? getLabel(item) : `- ${getLabel(item).toLowerCase()}`}
|
|
</motion.div>
|
|
) : null
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SelectTree;
|