schlechtenburg/packages/core/lib/components/TreeBlockSelect.tsx

68 lines
1.6 KiB
TypeScript

import {
defineComponent,
PropType,
} from 'vue';
import {
Block,
BlockTree,
} from '../blocks';
import { useBlockTree } from '../use-block-tree';
import { useActivation } from '../use-activation';
import { SbContextMenu } from './ContextMenu';
import { SbButton } from './Button';
import './TreeBlockSelect.scss';
interface TreeBlockSelectProps {
block: Block;
}
export const SbTreeBlockSelect = defineComponent({
name: 'sb-main-menu',
setup() {
const { blockTree } = useBlockTree();
const {
activate,
activeBlockId,
} = useActivation();
const treeToHtml = (tree: BlockTree, 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: BlockTree) => treeToHtml(child, close))}
</ul>
: null
}
</li>;
return () => (
blockTree.value
? <SbContextMenu
class="sb-tree-block-select"
v-slots={{
context: ({ toggle }) => <SbButton onClick={toggle}>Tree</SbButton>,
default: ({ close }) => <ul
class="sb-tree-block-select__list sb-tree-block-select__list_base"
>{treeToHtml(blockTree.value, close)}</ul>,
}}
/>
: ''
);
},
});