@lyra/form-builder/lib/inputs/BlockEditor/Toolbar/InsertMenu.js

Lyra form builder

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _dropdown = require('part:@lyra/components/buttons/dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

var _pathUtils = require('../../../utils/pathUtils');

var _changes = require('../utils/changes');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/*:: import type {Type, SlateChange, SlateValue} from '../typeDefs'*/
/*:: type Props = {
  blockTypes: Type[],
  editorValue: SlateValue,
  inlineTypes: Type[],
  onChange: (change: SlateChange) => void,
  onFocus: (nextPath: []) => void,
  type: Type
}*/
/*:: type BlockItem = {
  title: string,
  value: Type
}*/
class InsertMenu extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleOnAction = (item /*: BlockItem*/) => {
      var _props = this.props;
      const editorValue = _props.editorValue,
            onChange = _props.onChange,
            onFocus = _props.onFocus,
            type = _props.type;

      const change = editorValue.change();
      const focusKey = change.value.selection.focusKey;
      const focusBlock = change.value.document.getClosestBlock(focusKey);
      let focusPath = [{ _key: focusBlock.key }];
      if (item.isInline) {
        change.call(_changes.insertInlineObject, item.value, type);
        focusPath = [{ _key: focusBlock.key }, 'children', { _key: change.value.focusInline.key }, _pathUtils.FOCUS_TERMINATOR];
      } else {
        change.call(_changes.insertBlockObject, item.value).focus();
        focusPath = [{ _key: change.value.focusBlock.key }, _pathUtils.FOCUS_TERMINATOR];
      }
      onChange(change, () => setTimeout(() => onFocus(focusPath), 200));
    }, _temp;
  }

  shouldComponentUpdate(nextProps /*: Props*/) {
    return this.props.blockTypes !== nextProps.blockTypes || this.props.inlineTypes !== nextProps.inlineTypes || this.props.editorValue.focusBlock !== nextProps.editorValue.focusBlock;
  }

  getItems() {
    const editorValue = this.props.editorValue;

    const blockItems = this.props.blockTypes.map(type => ({
      title: `${type.title} ¶`,
      value: type,
      isInline: false,
      isDisabled: false
    }));
    const inlineItems = this.props.inlineTypes.map(type => ({
      title: type.title,
      value: type,
      isInline: true,
      isDisabled: editorValue.focusBlock ? editorValue.focusBlock.isVoid : true
    }));
    return blockItems.concat(inlineItems);
  }

  render() {
    return _react2.default.createElement(
      _dropdown2.default,
      {
        items: this.getItems(),
        onAction: this.handleOnAction,
        kind: 'simple',
        origin: 'right'
      },
      'Insert'
    );
  }
}
exports.default = InsertMenu;