@lyra/form-builder/lib/inputs/OptionsArrayInput/OptionsArrayInput.js

Lyra form builder

'use strict';

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

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

var _get3 = _interopRequireDefault(_get2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _default2 = _interopRequireDefault(_default);

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

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

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

var _Item2 = _interopRequireDefault(_Item);

var _OptionsArrayInput = require('./styles/OptionsArrayInput.css');

var _OptionsArrayInput2 = _interopRequireDefault(_OptionsArrayInput);

var _resolveTypeName = require('../../utils/resolveTypeName');

var _legacyOptionsSupport = require('./legacyOptionsSupport');

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

function isEqual(item, otherItem) {
  if ((0, _legacyOptionsSupport.isLegacyOptionsItem)(item) || (0, _legacyOptionsSupport.isLegacyOptionsItem)(otherItem)) {
    return item.value === otherItem.value;
  }
  if (item === otherItem) {
    return true;
  }
  if (typeof item !== typeof otherItem) {
    return false;
  }
  if (typeof item !== 'object' && !Array.isArray(item)) {
    return item === otherItem;
  }
  if (item._key && item._key === otherItem._key) {
    return true;
  }
  if (Array.isArray(item)) {
    if (!item.length !== otherItem.length) {
      return false;
    }
    return item.every((it, i) => isEqual(item[i], otherItem[i]));
  }
  const keys = Object.keys(item);
  const otherKeys = Object.keys(item);
  if (keys.length !== otherKeys.length) {
    return false;
  }
  return keys.every(keyName => isEqual(item[keyName], otherItem[keyName]));
}

function inArray(array, candidate) {
  return array ? array.some(item => isEqual(item, candidate)) : false;
}

class OptionsArrayInput extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleChange = (isChecked, optionValue) => {
      var _props = this.props;
      const type = _props.type;
      var _props$value = _props.value;
      const value = _props$value === undefined ? [] : _props$value;


      const list = (0, _get3.default)(type.options, 'list');

      if (!isChecked && optionValue._key) {
        // This is an optimization that only works if list items are _keyed
        this.props.onChange(_PatchEvent2.default.from((0, _PatchEvent.unset)([{ _key: optionValue._key }])));
      }

      const nextValue = list.filter(item => isEqual(optionValue, item) ? isChecked : inArray(value, (0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(item))).map(_legacyOptionsSupport.resolveValueWithLegacyOptionsSupport);

      this.props.onChange(_PatchEvent2.default.from(nextValue.length > 0 ? (0, _PatchEvent.set)(nextValue) : (0, _PatchEvent.unset)()));
    }, _temp;
  }

  getMemberTypeOfItem(option) {
    const type = this.props.type;

    return type.of.find(memberType => memberType.name === (0, _resolveTypeName.resolveTypeName)((0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(option)));
  }

  render() {
    var _props2 = this.props;
    const type = _props2.type,
          markers = _props2.markers,
          value = _props2.value,
          level = _props2.level,
          readOnly = _props2.readOnly;


    const options = (0, _get3.default)(type.options, 'list');
    const direction = (0, _get3.default)(type.options, 'direction'); // vertical and horizontal

    return _react2.default.createElement(
      _default2.default,
      {
        legend: type.title,
        description: type.description,
        markers: markers,
        level: level
      },
      options.map((option, index) => {
        const optionType = this.getMemberTypeOfItem(option);
        if (!optionType) {
          const actualType = (0, _resolveTypeName.resolveTypeName)((0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(option));
          const validTypes = type.of.map(ofType => ofType.name);
          return _react2.default.createElement(
            'div',
            { key: option._key || index, className: _OptionsArrayInput2.default.error },
            'Invalid option type: Type ',
            _react2.default.createElement(
              'code',
              null,
              actualType
            ),
            ' not valid for array of [',
            validTypes.join(', '),
            ']. Check the list options of this field'
          );
        }
        const checked = inArray(value, (0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(option));
        return _react2.default.createElement(
          'div',
          {
            key: option._key || index,
            className: direction === 'vertical' ? _OptionsArrayInput2.default.itemWrapperVertical : _OptionsArrayInput2.default.itemWrapperHorizontal
          },
          _react2.default.createElement(_Item2.default, {
            layout: 'inline',
            type: optionType,
            readOnly: readOnly,
            value: option,
            checked: checked,
            onChange: this.handleChange
          })
        );
      })
    );
  }
}
exports.default = OptionsArrayInput;
OptionsArrayInput.propTypes = {
  type: _propTypes2.default.shape({
    options: _propTypes2.default.shape({
      list: _propTypes2.default.array,
      direction: _propTypes2.default.string
    }),
    name: _propTypes2.default.string,
    description: _propTypes2.default.string,
    of: _propTypes2.default.array
  }),
  markers: _propTypes2.default.array,
  value: _propTypes2.default.array,
  level: _propTypes2.default.number,
  readOnly: _propTypes2.default.bool,
  onChange: _propTypes2.default.func
};