@lyra/form-builder/lib/inputs/BlockEditor/Toolbar/DecoratorButtons.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 _SetMarksOnKeyComboPlugin = require('../plugins/SetMarksOnKeyComboPlugin');

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

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

var _CustomIcon2 = _interopRequireDefault(_CustomIcon);

var _formatBoldIcon = require('part:@lyra/base/format-bold-icon');

var _formatBoldIcon2 = _interopRequireDefault(_formatBoldIcon);

var _formatItalicIcon = require('part:@lyra/base/format-italic-icon');

var _formatItalicIcon2 = _interopRequireDefault(_formatItalicIcon);

var _formatStrikethroughIcon = require('part:@lyra/base/format-strikethrough-icon');

var _formatStrikethroughIcon2 = _interopRequireDefault(_formatStrikethroughIcon);

var _formatUnderlinedIcon = require('part:@lyra/base/format-underlined-icon');

var _formatUnderlinedIcon2 = _interopRequireDefault(_formatUnderlinedIcon);

var _formatCodeIcon = require('part:@lyra/base/format-code-icon');

var _formatCodeIcon2 = _interopRequireDefault(_formatCodeIcon);

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 _DecoratorButtons = require('./styles/DecoratorButtons.css');

var _DecoratorButtons2 = _interopRequireDefault(_DecoratorButtons);

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

/*:: import type {
  BlockContentFeature,
  BlockContentFeatures,
  SlateChange,
  SlateValue
} from '../typeDefs'*/
/*:: type DecoratorItem = BlockContentFeature & {active: boolean, disabled: boolean}*/
/*:: type Props = {
  blockContentFeatures: BlockContentFeatures,
  editorValue: SlateValue,
  onChange: (change: SlateChange) => void
}*/


function getIcon(type /*: string*/) {
  switch (type) {
    case 'strong':
      return _formatBoldIcon2.default;
    case 'em':
      return _formatItalicIcon2.default;
    case 'underline':
      return _formatUnderlinedIcon2.default;
    case 'strike-through':
      return _formatStrikethroughIcon2.default;
    case 'code':
      return _formatCodeIcon2.default;
    default:
      return _lyraLogoIcon2.default;
  }
}

const NOOP = () => {};

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

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

      const change = editorValue.change();
      change.call(_changes.toggleMark, item.value);
      onChange(change);
    }, this.renderDecoratorButton = (item /*: DecoratorItem*/) => {
      const editorValue = this.props.editorValue;

      const icon = item.blockEditor ? item.blockEditor.icon : null;
      const Icon = icon || getIcon(item.value);
      // We must not do a click-event here, because that messes with the editor focus!
      const onAction = () => {
        this.handleClick(item);
      };
      const shortCut = _SetMarksOnKeyComboPlugin.keyMaps[item.value] ? `(${_SetMarksOnKeyComboPlugin.keyMaps[item.value]})` : '';
      const title = `${item.title} ${shortCut}`;
      return _react2.default.createElement(
        'span',
        { className: _DecoratorButtons2.default.buttonWrapper, key: item.value },
        _react2.default.createElement(
          _ToolbarClickAction2.default,
          {
            onAction: onAction,
            editorValue: editorValue,
            key: `decoratorButton${item.value}`
          },
          _react2.default.createElement(_button2.default, {
            selected: !!item.active,
            disabled: item.disabled,
            onClick: NOOP,
            title: title,
            className: _DecoratorButtons2.default.button,
            icon: Icon
          })
        )
      );
    }, _temp;
  }

  hasDecorator(decoratorName /*: string*/) {
    const editorValue = this.props.editorValue;

    return editorValue.marks.some(mark => mark.type === decoratorName);
  }

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

    const disabled = focusBlock ? focusBlock.isVoid : false;
    return blockContentFeatures.decorators.map((decorator /*: BlockContentFeature*/) => {
      return _extends({}, decorator, {
        active: this.hasDecorator(decorator.value),
        disabled
      });
    });
  }

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