@lyra/form-builder/lib/inputs/BlockEditor/EditNode.js

Lyra form builder

'use strict';

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

var _isEqual2 = require('lodash/isEqual');

var _isEqual3 = _interopRequireDefault(_isEqual2);

var _get2 = require('lodash/get');

var _get3 = _interopRequireDefault(_get2);

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 _default = require('part:@lyra/components/dialogs/default');

var _default2 = _interopRequireDefault(_default);

var _fullscreen = require('part:@lyra/components/dialogs/fullscreen');

var _fullscreen2 = _interopRequireDefault(_fullscreen);

var _popover = require('part:@lyra/components/dialogs/popover');

var _popover2 = _interopRequireDefault(_popover);

var _fold = require('part:@lyra/components/edititem/fold');

var _fold2 = _interopRequireDefault(_fold);

var _FormBuilderInput = require('../../FormBuilderInput');

var _PatchEvent = require('../../PatchEvent');

var _EditNode = require('./styles/EditNode.css');

var _EditNode2 = _interopRequireDefault(_EditNode);

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

/*:: import type {Block, Marker} from './typeDefs'*/
/*:: type Props = {
  focusPath: [],
  markers: Marker[],
  nodeValue: Block,
  onFocus: (nextPath: []) => void,
  onPatch: (event: PatchEvent) => void,
  path: [],
  type: Type,
  value: Block[]
}*/
class EditNode extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleChange = patchEvent => {
      var _props = this.props;
      const onPatch = _props.onPatch,
            path = _props.path,
            value = _props.value,
            onFocus = _props.onFocus,
            focusPath = _props.focusPath;

      let _patchEvent = patchEvent;
      path.reverse().forEach(segment => {
        _patchEvent = _patchEvent.prefixAll(segment);
      });
      // Intercept patches that unsets markDefs.
      // The child using the markDef must have that mark removed,
      // so insert patches that rewrite that block without the mark
      _patchEvent.patches.forEach((patch, index) => {
        if (patch.path.length === 3 && patch.path[1] === 'markDefs' && patch.type === 'unset') {
          const block = value.find(blk => blk._key === patch.path[0]._key);
          const _block = _extends({}, block);
          const markKey = patch.path[2]._key;
          _block.children.forEach(child => {
            child.marks = child.marks.filter(mark => mark !== markKey);
          });
          const blockPath = [{ _key: _block._key }];
          _block.markDefs = _block.markDefs.filter(def => def._key !== markKey);
          _patchEvent.patches.splice(index + 1, 0, (0, _PatchEvent.set)(_block, blockPath));
          // Set focus away from the annotation, and to the block itself
          if (focusPath && (0, _isEqual3.default)(patch.path, focusPath.slice(0, patch.path.length))) {
            onFocus(blockPath);
          }
        }
      });
      onPatch(_patchEvent);
    }, this.handleClose = () => {
      var _props2 = this.props;
      const focusPath = _props2.focusPath,
            onFocus = _props2.onFocus;

      onFocus(focusPath.slice(0, 1));
    }, _temp;
  }

  render() {
    var _props3 = this.props;
    const nodeValue = _props3.nodeValue,
          type = _props3.type,
          onFocus = _props3.onFocus,
          readOnly = _props3.readOnly,
          focusPath = _props3.focusPath,
          path = _props3.path,
          markers = _props3.markers;

    if (!nodeValue) {
      return _react2.default.createElement(
        'div',
        null,
        'No value???'
      );
    }
    const editModalLayout = (0, _get3.default)(type.options, 'editModal');

    const input = _react2.default.createElement(
      'div',
      { style: { minWidth: '30rem', padding: '1rem' } },
      _react2.default.createElement(_FormBuilderInput.FormBuilderInput, {
        type: type,
        level: 1,
        readOnly: readOnly || type.readOnly,
        value: nodeValue,
        onChange: this.handleChange,
        onFocus: onFocus,
        focusPath: focusPath,
        path: path,
        markers: markers
      })
    );

    if (editModalLayout === 'fullscreen') {
      return _react2.default.createElement(
        _fullscreen2.default,
        { isOpen: true, title: 'Edit', onClose: this.handleClose },
        input
      );
    }

    if (editModalLayout === 'fold') {
      return _react2.default.createElement(
        'div',
        { className: _EditNode2.default.editBlockContainerFold },
        _react2.default.createElement(
          _fold2.default,
          { isOpen: true, title: 'Edit', onClose: this.handleClose },
          input
        )
      );
    }

    if (editModalLayout === 'popover') {
      return _react2.default.createElement(
        'div',
        { className: _EditNode2.default.editBlockContainerPopOver },
        _react2.default.createElement(
          _popover2.default,
          {
            title: '@@todo',
            onClose: this.handleClose,
            onAction: this.handleDialogAction
          },
          input
        )
      );
    }
    return _react2.default.createElement(
      _default2.default,
      {
        isOpen: true,
        title: 'Edit',
        onClose: this.handleClose,
        showCloseButton: true,
        onAction: this.handleDialogAction
      },
      input
    );
  }
}
exports.default = EditNode;