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

58 lines
1.6 KiB
TypeScript
Raw Normal View History

2021-03-08 15:29:35 +00:00
import { defineComponent } from 'vue';
import { ITreeNode } from '../types';
2021-03-07 17:47:28 +00:00
import { useBlockTree } from '../use-block-tree';
import { useActivation } from '../use-activation';
2021-02-22 23:12:06 +00:00
2021-02-22 18:13:37 +00:00
import { SbContextMenu } from './ContextMenu';
import { SbButton } from './Button';
import './TreeBlockSelect.scss';
export const SbTreeBlockSelect = defineComponent({
name: 'sb-main-menu',
2021-03-07 17:47:28 +00:00
setup() {
const { blockTree } = useBlockTree();
const {
activate,
activeBlockId,
} = useActivation();
2021-02-22 23:12:06 +00:00
const treeToHtml = (tree: ITreeNode, close: Function) => <li
2021-03-07 17:47:28 +00:00
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();
}}
2021-03-08 15:29:35 +00:00
onMouseenter={() => activate(tree.id)}
2021-03-07 17:47:28 +00:00
>{tree.name}</button>
2021-03-08 15:29:35 +00:00
{tree.children?.length
2021-03-07 17:47:28 +00:00
? <ul class="sb-tree-block-select__list">
{tree.children?.map((child: ITreeNode) => treeToHtml(child, close))}
2021-03-07 17:47:28 +00:00
</ul>
: null
}
2021-02-22 23:12:06 +00:00
</li>;
2021-02-22 18:13:37 +00:00
return () => (
2021-03-07 17:47:28 +00:00
blockTree.value
? <SbContextMenu
class="sb-tree-block-select"
v-slots={{
2021-03-08 15:29:35 +00:00
context: ({ toggle }: { toggle: Function }) => <SbButton {...{ onClick: toggle }}>Tree</SbButton>,
default: ({ close }: { close: Function }) => <ul
2021-03-07 17:47:28 +00:00
class="sb-tree-block-select__list sb-tree-block-select__list_base"
>{treeToHtml(blockTree.value as ITreeNode, close)}</ul>,
2021-03-07 17:47:28 +00:00
}}
/>
: ''
2021-02-22 18:13:37 +00:00
);
},
});