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

Lyra form builder

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _slate = require('slate');

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

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

var _randomKey = require('../utils/randomKey');

var _randomKey2 = _interopRequireDefault(_randomKey);

var _CustomIcon = require('./CustomIcon');

var _CustomIcon2 = _interopRequireDefault(_CustomIcon);

var _linkIcon = require('part:@lyra/base/link-icon');

var _linkIcon2 = _interopRequireDefault(_linkIcon);

var _lyraLogoIcon = require('part:@lyra/base/lyra-logo-icon');

var _lyraLogoIcon2 = _interopRequireDefault(_lyraLogoIcon);

var _button = require('part:@lyra/components/toggles/button');

var _button2 = _interopRequireDefault(_button);

var _ToolbarClickAction = require('./ToolbarClickAction');

var _ToolbarClickAction2 = _interopRequireDefault(_ToolbarClickAction);

var _AnnotationButtons = require('./styles/AnnotationButtons.css');

var _AnnotationButtons2 = _interopRequireDefault(_AnnotationButtons);

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

/*:: import type {BlockContentFeature, BlockContentFeatures} from '../typeDefs'*/
/*:: type AnnotationItem = BlockContentFeature & {
  active: boolean,
  disabled: boolean
}*/
/*:: type Props = {
  blockContentFeatures: BlockContentFeatures,
  editorValue: SlateValue,
  focusPath: [],
  onChange: Change => void,
  onFocus: (nextPath: []) => void
}*/


function getIcon(type /*: string*/) {
  switch (type) {
    case 'link':
      return _linkIcon2.default;
    default:
      return _lyraLogoIcon2.default;
  }
}

const NOOP = () => {};

class AnnotationButtons extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleClick = (item /*: AnnotationItem*/, originalSelection /*: Range*/) => {
      var _props = this.props;
      const editorValue = _props.editorValue,
            onChange = _props.onChange,
            onFocus = _props.onFocus,
            focusPath = _props.focusPath;

      const change = editorValue.change();
      if (item.active) {
        const spans = editorValue.inlines.filter(inline => inline.type === 'span');
        spans.forEach(span => {
          change.call(_changes.removeAnnotationFromSpan, span, item.value);
        });
        onChange(change);
        return;
      }
      const key = (0, _randomKey2.default)(12);
      change.call(_changes.createFormBuilderSpan, item.value, key, originalSelection);
      change.collapseToEndOf(change.value.inlines.first()).extendToStartOf(change.value.inlines.first()).blur();
      onChange(change, () => setTimeout(() => onFocus([focusPath[0], 'markDefs', { _key: key }, _pathUtils.FOCUS_TERMINATOR]), 200));
    }, this.renderAnnotationButton = (item /*: AnnotationItem*/) => {
      const editorValue = this.props.editorValue;

      let Icon;
      const icon = item.blockEditor ? item.blockEditor.icon : null;
      if (icon) {
        if (typeof icon === 'string') {
          Icon = () => _react2.default.createElement(_CustomIcon2.default, { icon: icon, active: !!item.active });
        } else if (typeof icon === 'function') {
          Icon = icon;
        }
      }
      Icon = Icon || getIcon(item.value);
      // We must not do a click-event here, because that messes with the editor focus!
      const onAction = (originalSelection /*: Range*/) => {
        this.handleClick(item, originalSelection);
      };
      return _react2.default.createElement(
        _ToolbarClickAction2.default,
        {
          onAction: onAction,
          editorValue: editorValue,
          key: `annotationButton${item.value}`
        },
        _react2.default.createElement(_button2.default, {
          selected: !!item.active,
          disabled: item.disabled,
          onClick: NOOP,
          title: item.title,
          className: _AnnotationButtons2.default.button,
          icon: Icon
        })
      );
    }, _temp;
  }

  hasAnnotation(annotationName /*: string*/) {
    const editorValue = this.props.editorValue;

    const spans = editorValue.inlines.filter(inline => inline.type === 'span');
    return spans.some(span => {
      const annotations = span.data.get('annotations') || {};
      return Object.keys(annotations).find(key => annotations[key] && annotations[key]._type === annotationName);
    });
  }

  getItems() {
    var _props2 = this.props;
    const blockContentFeatures = _props2.blockContentFeatures,
          editorValue = _props2.editorValue;
    const inlines = editorValue.inlines,
          focusBlock = editorValue.focusBlock,
          focusText = editorValue.focusText,
          selection = editorValue.selection;
    const isCollapsed = selection.isCollapsed;

    const hasCharLeftOrRight = isCollapsed && focusText && focusText.text.substring(selection.focusOffset - 1, selection.focusOffset).trim() === '' && focusText.text.substring(selection.focusOffset, selection.focusOffset + 1).trim() === '';

    const disabled = inlines.some(inline => inline.type !== 'span') || (focusBlock ? focusBlock.isVoid || focusBlock.text === '' : false) || hasCharLeftOrRight;
    return blockContentFeatures.annotations.map((annotation /*: BlockContentFeature*/) => {
      return _extends({}, annotation, {
        active: this.hasAnnotation(annotation.value),
        disabled
      });
    });
  }

  render() {
    const items = this.getItems();
    return _react2.default.createElement(
      'div',
      { className: _AnnotationButtons2.default.root },
      items.map(this.renderAnnotationButton)
    );
  }
}
exports.default = AnnotationButtons;