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

import debounce from 'lodash/debounce';
import {
  watch,
  reactive,
  computed,
  defineComponent,
} from 'vue';
import { useBlockSizing } from '../use-resize-observer';

import { SbButton } from './Button';

import './BlockOrdering.scss';

export const SbBlockOrdering = defineComponent({
  name: 'sb-block-ordering',

  props: {
    orientation: {
      type: String,
      default: null,
    },
    eventRemove: { type: Function, default: () => {} },
    eventMoveBackward: { type: Function, default: () => {} },
    eventMoveForward: { type: Function, default: () => {} },
  },

  setup(props) {
    const styles = reactive({
      top: '',
      right: '',
    });

    const classes = computed(() => ({
      'sb-block-ordering': true,
      [`sb-block-ordering_${props.orientation}`]: !!props.orientation,
    }));

    const { editorDimensions, blockDimensions } = useBlockSizing();
    const resetStyles = debounce(() => {
      if (!editorDimensions.value || !blockDimensions.value) {
        return;
      }

      const right = editorDimensions.value.width - blockDimensions.value.left;
      styles.top = `${blockDimensions.value.top}px`;
      styles.right = `${right}px`;
    });
    watch(editorDimensions, resetStyles);
    watch(blockDimensions, resetStyles);
    watch(() => props.orientation, resetStyles);

    return () => (
      <div
        class={classes.value}
        style={styles}
        onClick={($event: MouseEvent) => $event.stopPropagation()}
      >
        <SbButton {...{onClick: props.eventMoveBackward}}>{props.orientation === 'vertical' ? '↑' : '←'}</SbButton>
        <SbButton {...{onClick: props.eventRemove}}>x</SbButton>
        <SbButton {...{onClick: props.eventMoveForward}}>{props.orientation === 'vertical' ? '↓' : '→'}</SbButton>
      </div>
    );
  },
});