@lyra/form-builder/lib/inputs/ArrayInput/ArrayFunctions.js

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _dropdown = require('part:@lyra/components/buttons/dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

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

var _default2 = _interopRequireDefault(_default);

var _buttonCollection = require('part:@lyra/components/buttons/button-collection');

var _buttonCollection2 = _interopRequireDefault(_buttonCollection);

var _ArrayInput = require('./styles/ArrayInput.css');

var _ArrayInput2 = _interopRequireDefault(_ArrayInput);

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

/*:: import type {Node} from 'react'*/
/*:: import type {Type} from '../../typedefs'*/
/*:: import type {ArrayType, ItemValue} from './typedefs'*/
/*:: type Props = {
  type: ArrayType,
  children: ?Node,
  value: Array<ItemValue>,
  readOnly: ?boolean,
  onAppendItem: (itemValue: ItemValue) => void,
  onPrependItem: (itemValue: ItemValue) => void,
  onFocusItem: (item: ItemValue) => void,
  onCreateValue: (type: Type) => ItemValue,
  onChange: (event: PatchEvent) => void
}*/
class ArrayFunctions extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleDropDownAction = (menuItem /*: {type: Type}*/) => {
      this.handleInsertItem(menuItem.type);
    }, this.handleAddBtnClick = () => {
      this.handleInsertItem(this.props.type.of[0]);
    }, this.handleInsertItem = type => {
      var _props = this.props;
      const onCreateValue = _props.onCreateValue,
            onAppendItem = _props.onAppendItem;

      const item = onCreateValue(type);
      onAppendItem(item);
    }, _temp;
  }

  renderSelectType() {
    const items = this.props.type.of.map(memberDef => ({
      title: memberDef.title || memberDef.type.name,
      type: memberDef
    }));

    return _react2.default.createElement(
      _dropdown2.default,
      { items: items, onAction: this.handleDropDownAction },
      'Add'
    );
  }

  render() {
    var _props2 = this.props;
    const type = _props2.type,
          readOnly = _props2.readOnly,
          children = _props2.children;

    if (readOnly) {
      return null;
    }

    return _react2.default.createElement(
      'div',
      { className: _ArrayInput2.default.functions },
      _react2.default.createElement(
        _buttonCollection2.default,
        { align: 'start' },
        type.of.length === 1 ? _react2.default.createElement(
          _default2.default,
          {
            onClick: this.handleAddBtnClick,
            className: _ArrayInput2.default.addButton
          },
          'Add'
        ) : this.renderSelectType(),
        children || null
      )
    );
  }
}
exports.default = ArrayFunctions;