@lyra/form-builder/lib/inputs/BlockEditor/Toolbar/ListItemButtons.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 _changes = require('../utils/changes');

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

var _CustomIcon2 = _interopRequireDefault(_CustomIcon);

var _formatListBulletedIcon = require('part:@lyra/base/format-list-bulleted-icon');

var _formatListBulletedIcon2 = _interopRequireDefault(_formatListBulletedIcon);

var _formatListNumberedIcon = require('part:@lyra/base/format-list-numbered-icon');

var _formatListNumberedIcon2 = _interopRequireDefault(_formatListNumberedIcon);

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

var _ListItemButtons2 = _interopRequireDefault(_ListItemButtons);

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

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


function getIcon(type /*: string*/) {
  switch (type) {
    case 'number':
      return _formatListNumberedIcon2.default;
    case 'bullet':
      return _formatListBulletedIcon2.default;
    default:
      return _lyraLogoIcon2.default;
  }
}

const NOOP = () => {};

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

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

      const change = editorValue.change();
      change.call(_changes.toggleListItem, item.value);
      onChange(change);
    }, this.renderListItemButton = (item /*: ListItem*/) => {
      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);
      const onAction = () => this.handleClick(item);
      return _react2.default.createElement(
        _ToolbarClickAction2.default,
        {
          onAction: onAction,
          editorValue: editorValue,
          key: `listItemButton${item.value}`
        },
        _react2.default.createElement(_button2.default, {
          selected: item.active,
          disabled: item.disabled,
          onClick: NOOP,
          title: item.title,
          className: _ListItemButtons2.default.button,
          icon: Icon
        })
      );
    }, _temp;
  }

  hasListItem(listItemName /*: string*/) {
    const editorValue = this.props.editorValue;

    return editorValue.blocks.some(block => {
      return block.data.get('listItem') === listItemName;
    });
  }

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

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

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