@lyra/form-builder/lib/inputs/BlockEditor/nodes/BlockExtras.js

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _blockMarkers = require('part:@lyra/form-builder/input/block-editor/block-markers');

var _blockMarkers2 = _interopRequireDefault(_blockMarkers);

var _BlockExtras = require('./styles/BlockExtras.css');

var _BlockExtras2 = _interopRequireDefault(_BlockExtras);

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

/*:: import type {Marker, SlateChange, SlateValue} from '../typeDefs'*/
/*:: type marker = {}*/
/*:: type Props = {
  editorValue: SlateValue,
  markers: marker[],
  onChange: (change: SlateChange) => void,
  onFocus: void => void,
  blockActions?: React.Node,
  renderCustomMarkers?: (Marker[]) => React.Node,
  highlightedMarkerId: ?string
}*/
class BlockExtras extends _react2.default.PureComponent /*:: <Props>*/ {

  getValidationMarkers() {
    const markers = this.props.markers;

    const validation = markers.filter(mrkr => mrkr.type === 'validation');
    return validation.map(mrkr => {
      if (mrkr.path.length <= 1) {
        return mrkr;
      }
      const level = mrkr.level === 'error' ? 'errors' : 'warnings';
      return Object.assign({}, mrkr, {
        item: mrkr.item.cloneWithMessage(`Contains ${level}`)
      });
    });
  }

  render() {
    var _props = this.props;
    const markers = _props.markers,
          onFocus = _props.onFocus,
          onChange = _props.onChange,
          editorValue = _props.editorValue,
          blockActions = _props.blockActions,
          renderCustomMarkers = _props.renderCustomMarkers,
          highlightedMarkerId = _props.highlightedMarkerId;

    const scopedValidation = this.getValidationMarkers();
    const errors = scopedValidation.filter(mrkr => mrkr.level === 'error');
    const warnings = scopedValidation.filter(mrkr => mrkr.level === 'warning');
    return _react2.default.createElement(
      'div',
      {
        id: highlightedMarkerId ? highlightedMarkerId : null,
        className: (0, _classnames2.default)([_BlockExtras2.default.root, (blockActions || markers.length > 0) && _BlockExtras2.default.withSomething, errors.length > 0 && _BlockExtras2.default.withError, warnings.length > 0 && !errors.length && _BlockExtras2.default.withWarning, highlightedMarkerId && _BlockExtras2.default.withMarkerHighlight]),
        suppressContentEditableWarning: true,
        contentEditable: 'false'
      },
      blockActions && _react2.default.createElement(
        'div',
        { className: _BlockExtras2.default.blockActions },
        blockActions
      ),
      markers.length > 0 && _react2.default.createElement(
        'div',
        { className: _BlockExtras2.default.markers },
        _react2.default.createElement(_blockMarkers2.default, {
          className: _BlockExtras2.default.markers,
          markers: markers,
          scopedValidation: scopedValidation,
          onFocus: onFocus,
          onChange: onChange,
          editorValue: editorValue,
          renderCustomMarkers: renderCustomMarkers
        })
      )
    );
  }
}
exports.default = BlockExtras;
BlockExtras.defaultProps = {
  markers: []
};