schlechtenburg/packages/core/lib/components/BlockPicker.tsx
2021-03-22 20:58:25 +01:00

59 lines
1.6 KiB
TypeScript

import {
computed,
ref,
defineComponent,
} from 'vue';
import { useDynamicBlocks } from '../use-dynamic-blocks';
import { BlockDefinition } from '../types';
import { SbButton } from './Button';
import { SbContextMenu } from './ContextMenu';
import './BlockPicker.scss';
export const SbBlockPicker = defineComponent({
name: 'sb-block-picker',
props: {
onPickedBlock: { type: Function, default: () => {} },
},
setup(props, context) {
const { customBlocks } = useDynamicBlocks();
const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
const selectBlock = (block: BlockDefinition<any>) => () => {
open.value = false;
props.onPickedBlock({
name: block.name,
id: `${+(new Date())}`,
data: block.getDefaultData(),
});
};
return () => (
<div class="sb-block-picker">
<SbContextMenu
class="sb-tree-block-select"
v-slots={{
context: (slotContext) => context.slots.context
? context.slots.context(slotContext)
: <SbButton {...{ onClick: slotContext.toggle }}>Insert a block</SbButton>,
default: ({ close }: { close: Function }) => blockList.value.map((block: BlockDefinition<any>) => (
<SbButton
{...{
type: 'button',
onClick: () => {
selectBlock(block);
close();
},
}}
>{block.name}</SbButton>)),
}}
></SbContextMenu>
</div>
);
},
});