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

59 lines
1.6 KiB
TypeScript
Raw Normal View History

2020-05-27 13:57:57 +00:00
import {
computed,
ref,
2020-12-27 21:32:43 +00:00
defineComponent,
} from 'vue';
2021-03-08 15:29:35 +00:00
import { useDynamicBlocks } from '../use-dynamic-blocks';
import { BlockDefinition } from '../types';
2020-05-24 20:00:14 +00:00
2020-12-30 20:17:34 +00:00
import { SbButton } from './Button';
2021-03-22 19:58:25 +00:00
import { SbContextMenu } from './ContextMenu';
2020-05-27 13:57:57 +00:00
2020-05-24 20:00:14 +00:00
import './BlockPicker.scss';
2020-05-20 14:21:08 +00:00
2020-12-30 13:34:23 +00:00
export const SbBlockPicker = defineComponent({
2020-05-25 21:10:21 +00:00
name: 'sb-block-picker',
2021-03-08 15:29:35 +00:00
props: {
onPickedBlock: { type: Function, default: () => {} },
},
2020-05-20 14:21:08 +00:00
2021-03-22 19:58:25 +00:00
setup(props, context) {
2020-05-24 20:00:14 +00:00
const { customBlocks } = useDynamicBlocks();
const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
2020-05-20 14:21:08 +00:00
2021-03-08 15:29:35 +00:00
const selectBlock = (block: BlockDefinition<any>) => () => {
2020-05-27 13:57:57 +00:00
open.value = false;
2021-03-08 15:29:35 +00:00
props.onPickedBlock({
2020-05-27 13:57:57 +00:00
name: block.name,
2021-03-07 17:47:28 +00:00
id: `${+(new Date())}`,
2020-05-27 13:57:57 +00:00
data: block.getDefaultData(),
});
};
2020-05-25 21:10:21 +00:00
return () => (
2020-05-27 18:36:46 +00:00
<div class="sb-block-picker">
2021-03-22 19:58:25 +00:00
<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>) => (
2020-05-27 13:57:57 +00:00
<SbButton
2021-03-08 15:29:35 +00:00
{...{
type: 'button',
2021-03-22 19:58:25 +00:00
onClick: () => {
selectBlock(block);
close();
},
2021-03-08 15:29:35 +00:00
}}
2021-03-22 19:58:25 +00:00
>{block.name}</SbButton>)),
}}
></SbContextMenu>
2020-05-20 14:21:08 +00:00
</div>
);
},
});