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

Lyra form builder

'use strict';

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

var _uniqueId2 = require('lodash/uniqueId');

var _uniqueId3 = _interopRequireDefault(_uniqueId2);

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/selects/default');

var _default2 = _interopRequireDefault(_default);

var _radio = require('part:@lyra/components/selects/radio');

var _radio2 = _interopRequireDefault(_radio);

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

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

var _default3 = require('part:@lyra/components/formfields/default');

var _default4 = _interopRequireDefault(_default3);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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


const EMPTY_ITEM = { title: '', value: undefined };

function toSelectItems(list) {
  return typeof list[0] === 'string' ? list.map(item => ({ title: item, value: item })) : list;
}

/*:: type Props = {
  type: Type,
  level: number,
  value: ?string,
  readOnly: ?boolean,
  onChange: PatchEvent => void,
  markers: Array<Marker>
}*/
class StringSelect extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.name = (0, _uniqueId3.default)('RadioName'), this.handleChange = (item /*: Object*/) => {
      const onChange = this.props.onChange;


      onChange(_PatchEvent2.default.from((0, _PatchEvent.set)(typeof item === 'string' ? item : item.value)));
    }, this.setInput = (input /*: ?(RadioSelect | Select)*/) => {
      this._input = input;
    }, _temp;
  }

  focus() {
    if (this._input) {
      this._input.focus();
    }
  }

  render() {
    var _props = this.props;

    const value = _props.value,
          readOnly = _props.readOnly,
          markers = _props.markers,
          type = _props.type,
          level = _props.level,
          rest = _objectWithoutProperties(_props, ['value', 'readOnly', 'markers', 'type', 'level']);

    const items = toSelectItems(type.options.list || []);

    const currentItem = items.find(item => item.value === value);

    const isRadio = type.options && type.options.layout === 'radio';

    return _react2.default.createElement(
      _default4.default,
      {
        markers: markers,
        level: level,
        label: type.title,
        description: type.description
      },
      isRadio ?
      // todo: make separate inputs
      _react2.default.createElement(_radio2.default, _extends({}, rest, {
        name: this.name,
        legend: type.title,
        items: items,
        onChange: this.handleChange,
        value: currentItem,
        direction: type.options.direction || 'vertical',
        ref: this.setInput,
        readOnly: readOnly
      })) : _react2.default.createElement(_default2.default, _extends({}, rest, {
        label: type.title,
        value: currentItem,
        placeholder: type.placeholder,
        onChange: this.handleChange,
        items: [EMPTY_ITEM].concat(items),
        ref: this.setInput,
        readOnly: readOnly
      }))
    );
  }
}
exports.default = StringSelect;
StringSelect.defaultProps = {
  value: ''
};