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

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _status = require('part:@lyra/components/validation/status');

var _status2 = _interopRequireDefault(_status);

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

var _blockMarkersCustomDefault2 = _interopRequireDefault(_blockMarkersCustomDefault);

var _Markers = require('./styles/Markers.css');

var _Markers2 = _interopRequireDefault(_Markers);

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[],
  onFocus: void => void,
  onChange: (change: SlateChange) => void,
  renderCustomMarkers?: (Marker[]) => React.Node
}*/
class Markers extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleValidationMarkerClick = (event /*: SyntheticMouseEvent<*>*/) => {
      event.preventDefault();
      event.stopPropagation();
      var _props = this.props;
      const onFocus = _props.onFocus,
            onChange = _props.onChange,
            editorValue = _props.editorValue,
            markers = _props.markers;

      const validationMarkers = markers.filter(mrkr => mrkr.type === 'validation');
      const change = editorValue.change();
      change.blur();
      onChange(change, onFocus(validationMarkers[0].path));
    }, this.handleCancelEvent = event => {
      event.preventDefault();
      event.stopPropagation();
    }, _temp;
  }

  render() {
    var _props2 = this.props;
    const markers = _props2.markers,
          renderCustomMarkers = _props2.renderCustomMarkers;

    if (markers.length === 0) {
      return null;
    }
    const customMarkers = markers.filter(mrkr => mrkr.type !== 'validation');
    const validationMarkers = markers.filter(mrkr => mrkr.type === 'validation');

    return _react2.default.createElement(
      'div',
      { onClick: this.handleCancelEvent },
      validationMarkers.length > 0 && _react2.default.createElement(
        'div',
        {
          className: _Markers2.default.markerGroup,
          onClick: this.handleValidationMarkerClick
        },
        _react2.default.createElement(_status2.default, { markers: validationMarkers })
      ),
      customMarkers.length > 0 && _react2.default.createElement(
        'div',
        { className: _Markers2.default.markerGroup, onClick: this.handleCancelEvent },
        renderCustomMarkers && renderCustomMarkers(customMarkers),
        !renderCustomMarkers && _react2.default.createElement(_blockMarkersCustomDefault2.default, { markers: markers })
      )
    );
  }
}
exports.default = Markers;
Markers.defaultProps = {
  markers: []
};