@lyra/form-builder/lib/inputs/ArrayOfPrimitivesInput/Item.js

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _Item = require('./styles/Item.css');

var _Item2 = _interopRequireDefault(_Item);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _trashIcon = require('part:@lyra/base/trash-icon');

var _trashIcon2 = _interopRequireDefault(_trashIcon);

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

var _status2 = _interopRequireDefault(_status);

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

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

var _getEmptyValue = require('./getEmptyValue');

var _getEmptyValue2 = _interopRequireDefault(_getEmptyValue);

var _sortable = require('part:@lyra/components/lists/sortable');

var _barsIcon = require('part:@lyra/base/bars-icon');

var _barsIcon2 = _interopRequireDefault(_barsIcon);

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

/*:: import type {Type, Marker} from '../../typedefs'*/
/*:: import type {Path} from '../../typedefs/path'*/


const DragHandle = (0, _sortable.createDragHandle)(() => _react2.default.createElement(
  'span',
  { className: _Item2.default.dragHandle },
  _react2.default.createElement(_barsIcon2.default, null)
));

/*:: type Props = {
  type: Type,
  onChange: PatchEvent => void,
  onRemove: number => void,
  onEnterKey: number => void,
  onEscapeKey: number => void,
  onFocus: Path => void,
  onBlur: () => void,
  focusPath: Path,
  markers: Array<Marker>,
  index: number,
  value: string | number | boolean,
  isSortable: boolean,
  readOnly: ?boolean,
  level: number
}*/
class Item extends _react2.default.PureComponent /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleRemove = () => {
      var _props = this.props;
      const index = _props.index,
            onRemove = _props.onRemove;

      onRemove(index);
    }, this.handleKeyPress = event => {
      var _props2 = this.props;
      const index = _props2.index,
            onEnterKey = _props2.onEnterKey;

      if (event.key === 'Enter') {
        onEnterKey(index);
      }
    }, this.handleKeyUp = (event /*: SyntheticKeyEvent<*>*/) => {
      var _props3 = this.props;
      const index = _props3.index,
            onRemove = _props3.onRemove,
            onEscapeKey = _props3.onEscapeKey,
            value = _props3.value;

      if (event.shiftKey && event.key === 'Backspace' && value === '') {
        onRemove(index);
      }
      if (event.key === 'Escape') {
        onEscapeKey(index);
      }
    }, this.handleChange = (patchEvent /*: PatchEvent*/) => {
      var _props4 = this.props;
      const onChange = _props4.onChange,
            type = _props4.type,
            index = _props4.index;

      onChange(_PatchEvent2.default.from(patchEvent.patches.map(patch =>
      // Map direct unset patches to empty value instead in order to not *remove* elements as the user clears out the value
      patch.path.length === 0 && patch.type === 'unset' ? (0, _PatchEvent.set)((0, _getEmptyValue2.default)(type)) : patch)).prefixAll(index));
    }, _temp;
  }

  render() {
    var _props5 = this.props;
    const value = _props5.value,
          level = _props5.level,
          markers = _props5.markers,
          index = _props5.index,
          focusPath = _props5.focusPath,
          onFocus = _props5.onFocus,
          onBlur = _props5.onBlur,
          type = _props5.type,
          readOnly = _props5.readOnly,
          isSortable = _props5.isSortable;

    return _react2.default.createElement(
      'div',
      { className: _Item2.default.root },
      isSortable && !readOnly && _react2.default.createElement(DragHandle, { className: _Item2.default.dragHandle }),
      _react2.default.createElement(
        'div',
        { className: _Item2.default.input },
        _react2.default.createElement(_FormBuilderInput.FormBuilderInput, {
          value: value,
          path: [index],
          markers: markers,
          focusPath: focusPath,
          onFocus: onFocus,
          onBlur: onBlur,
          type: type,
          readOnly: readOnly || type.readOnly,
          onKeyUp: this.handleKeyUp,
          onKeyPress: this.handleKeyPress,
          onChange: this.handleChange,
          level: level
        })
      ),
      _react2.default.createElement(
        'div',
        { className: _Item2.default.functions },
        _react2.default.createElement(
          'div',
          { className: _Item2.default.validationStatus },
          _react2.default.createElement(_status2.default, { markers: markers })
        ),
        !readOnly && _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(_default2.default, {
            kind: 'simple',
            className: _Item2.default.deleteButton,
            icon: _trashIcon2.default,
            title: 'Delete',
            onClick: this.handleRemove
          })
        )
      )
    );
  }
}
exports.default = Item;