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

64 lines
1.5 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';
2020-05-25 21:10:21 +00:00
import {
useDynamicBlocks,
BlockDefinition,
2020-12-30 13:34:23 +00:00
} from '../use-dynamic-blocks';
2020-05-24 20:00:14 +00:00
2020-12-30 20:17:34 +00:00
import { SbButton } from './Button';
import { SbModal } from './Modal';
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',
2020-05-24 15:33:25 +00:00
props: {},
2020-05-20 14:21:08 +00:00
2020-05-25 21:10:21 +00:00
setup(props, context) {
2020-05-27 13:57:57 +00:00
const open = ref(false);
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
2020-05-27 13:57:57 +00:00
const selectBlock = (block: BlockDefinition) => () => {
open.value = false;
context.emit('picked-block', {
name: block.name,
blockId: `${+(new Date())}`,
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">
2020-05-27 13:57:57 +00:00
<SbButton
2020-05-27 18:36:46 +00:00
class="sb-block-picker__add-button"
2020-05-27 13:57:57 +00:00
type="button"
2020-05-27 15:06:14 +00:00
onClick={($event: MouseEvent) => {
2020-05-27 13:57:57 +00:00
open.value = true;
2020-05-27 15:06:14 +00:00
$event.stopPropagation();
2020-05-27 13:57:57 +00:00
}}
>Add a block</SbButton>
<SbModal
open={open.value}
2020-05-27 15:06:14 +00:00
onClick={($event: MouseEvent) => $event.stopPropagation()}
2020-05-27 13:57:57 +00:00
eventClose={() => {
open.value = false;
}}
>
{...blockList.value.map((block: BlockDefinition) => (
<SbButton
type="button"
onClick={selectBlock(block)}
>{block.name}</SbButton>
))}
</SbModal>
2020-05-20 14:21:08 +00:00
</div>
);
},
});