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

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _slate = require('slate');

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

var _ContentBlock = require('../nodes/ContentBlock');

var _ContentBlock2 = _interopRequireDefault(_ContentBlock);

var _style = require('part:@lyra/components/selects/style');

var _style2 = _interopRequireDefault(_style);

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

/*:: import type {
  BlockContentFeature,
  BlockContentFeatures,
  SlateChange,
  SlateValue
} from '../typeDefs'*/
/*:: export type BlockStyleItem = {
  key: string,
  active: boolean,
  title: string,
  style: string,
  preview: Node
}*/
/*:: type Props = {
  blockContentFeatures: BlockContentFeatures,
  editorValue: SlateValue,
  onChange: (change: SlateChange) => void
}*/
class BlockStyleSelect extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

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

      const change = editorValue.change();
      change.call(_changes.setBlockStyle, item.style);
      change.focus();
      onChange(change);
    }, this.renderItem = (item /*: BlockStyleItem*/) => {
      return item.preview;
    }, _temp;
  }

  hasStyle(styleName /*: string*/) {
    const editorValue = this.props.editorValue;

    return editorValue.blocks.some(block => block.data.get('style') === styleName);
  }

  getItemsAndValue() {
    const blockContentFeatures = this.props.blockContentFeatures;

    const items = blockContentFeatures.styles.map((style /*: BlockContentFeature*/) => {
      const block = _slate.Block.create({
        type: 'contentBlock',
        data: { style: style.value }
      });
      const preview = _react2.default.createElement(
        _ContentBlock2.default,
        {
          node: block,
          blockContentFeatures: blockContentFeatures
        },
        style.title
      );
      return {
        key: `style-${style.value}`,
        style: style.value,
        preview: preview,
        title: ` ${style.title}`,
        active: this.hasStyle(style.value)
      };
    });
    let value = items.filter(item => item.active);
    if (value.length === 0) {
      items.push({
        key: 'style-none',
        style: null,
        preview: _react2.default.createElement(
          'div',
          null,
          'No style'
        ),
        title: ' No style',
        active: true
      });
      value = items.slice(-1);
    }
    return {
      items: items,
      value: value
    };
  }

  render() {
    var _getItemsAndValue = this.getItemsAndValue();

    const items = _getItemsAndValue.items,
          value = _getItemsAndValue.value;

    if (!items || items.length === 0) {
      return null;
    }
    const editorValue = this.props.editorValue;
    const focusBlock = editorValue.focusBlock;

    const disabled = focusBlock ? focusBlock.isVoid : false;
    return _react2.default.createElement(
      'label',
      null,
      _react2.default.createElement(
        'span',
        { style: { display: 'none' } },
        'Text'
      ),
      _react2.default.createElement(_style2.default, {
        items: items,
        value: value,
        disabled: disabled,
        onChange: this.handleChange,
        renderItem: this.renderItem,
        transparent: true
      })
    );
  }
}
exports.default = BlockStyleSelect;