@lyra/form-builder/lib/inputs/ObjectInput/Field.js

Lyra form builder

'use strict';

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

var _FormBuilderPropTypes = require('../../FormBuilderPropTypes');

var _FormBuilderPropTypes2 = _interopRequireDefault(_FormBuilderPropTypes);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _default2 = _interopRequireDefault(_default);

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

var _InvalidValueInput = require('../InvalidValueInput');

var _InvalidValueInput2 = _interopRequireDefault(_InvalidValueInput);

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

var _Field = require('./styles/Field.css');

var _Field2 = _interopRequireDefault(_Field);

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

// This component renders a single type in an object type. It emits onChange events telling the owner about the name of the type
// that changed. This gives the owner an opportunity to use the same event handler function for all of its fields
class Field extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleChange = event => {
      var _props = this.props;
      const field = _props.field,
            onChange = _props.onChange;

      if (!field.type.readOnly) {
        onChange(event, field);
      }
    }, this.setInput = input => {
      this._input = input;
    }, _temp;
  }

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

  render() {
    var _props2 = this.props;
    const value = _props2.value,
          readOnly = _props2.readOnly,
          field = _props2.field,
          level = _props2.level,
          onFocus = _props2.onFocus,
          onBlur = _props2.onBlur,
          markers = _props2.markers,
          focusPath = _props2.focusPath;


    if (typeof value !== 'undefined') {
      const expectedType = field.type.name;
      const actualType = (0, _resolveTypeName.resolveTypeName)(value);

      // todo: we should consider removing this, and not allow aliasing native types
      // + ensure custom object types always gets annotated with _type
      const isCompatible = actualType === field.type.jsonType;

      if (expectedType !== actualType && !isCompatible) {
        return _react2.default.createElement(
          'div',
          { className: _Field2.default.root },
          _react2.default.createElement(
            _default2.default,
            { legend: field.type.title, level: level },
            _react2.default.createElement(_InvalidValueInput2.default, {
              value: value,
              onChange: this.handleChange,
              validTypes: [field.type.name],
              actualType: actualType,
              ref: this.setInput
            })
          )
        );
      }
    }

    return _react2.default.createElement(
      'div',
      { className: _Field2.default.root },
      _react2.default.createElement(_FormBuilderInput.FormBuilderInput, {
        value: value,
        type: field.type,
        onChange: this.handleChange,
        path: [field.name],
        onFocus: onFocus,
        onBlur: onBlur,
        readOnly: readOnly || field.type.readOnly,
        focusPath: focusPath,
        markers: markers,
        level: level,
        ref: this.setInput
      })
    );
  }
}
exports.default = Field;
Field.propTypes = {
  field: _FormBuilderPropTypes2.default.field.isRequired,
  value: _propTypes2.default.any,
  onChange: _propTypes2.default.func.isRequired,
  onFocus: _propTypes2.default.func.isRequired,
  onBlur: _propTypes2.default.func.isRequired,
  focusPath: _propTypes2.default.array,
  readOnly: _propTypes2.default.bool,
  markers: _propTypes2.default.array,
  level: _propTypes2.default.number
};
Field.defaultProps = {
  level: 0,
  focusPath: []
};