schlechtenburg/packages/core/lib/components/TreeBlockSelect.tsx
2021-03-08 16:29:35 +01:00

58 lines
1.6 KiB
TypeScript

import { defineComponent } from 'vue';
import { TreeNode } from '../types';
import { useBlockTree } from '../use-block-tree';
import { useActivation } from '../use-activation';
import { SbContextMenu } from './ContextMenu';
import { SbButton } from './Button';
import './TreeBlockSelect.scss';
export const SbTreeBlockSelect = defineComponent({
name: 'sb-main-menu',
setup() {
const { blockTree } = useBlockTree();
const {
activate,
activeBlockId,
} = useActivation();
const treeToHtml = (tree: TreeNode, close: Function) => <li
class={{
'sb-tree-block-select__block': true,
'sb-tree-block-select__block_active': activeBlockId.value === tree.id,
}}
>
<button
class="sb-tree-block-select__block-name"
onClick={() => {
activate(tree.id);
close();
}}
onMouseenter={() => activate(tree.id)}
>{tree.name}</button>
{tree.children?.length
? <ul class="sb-tree-block-select__list">
{tree.children?.map((child: TreeNode) => treeToHtml(child, close))}
</ul>
: null
}
</li>;
return () => (
blockTree.value
? <SbContextMenu
class="sb-tree-block-select"
v-slots={{
context: ({ toggle }: { toggle: Function }) => <SbButton {...{ onClick: toggle }}>Tree</SbButton>,
default: ({ close }: { close: Function }) => <ul
class="sb-tree-block-select__list sb-tree-block-select__list_base"
>{treeToHtml(blockTree.value as TreeNode, close)}</ul>,
}}
/>
: ''
);
},
});