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

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Details = require('../common/Details');

var _Details2 = _interopRequireDefault(_Details);

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

var _default2 = _interopRequireDefault(_default);

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

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

var _UnknownFields = require('./styles/UnknownFields.css');

var _UnknownFields2 = _interopRequireDefault(_UnknownFields);

var _activateOnFocus = require('part:@lyra/components/utilities/activate-on-focus');

var _activateOnFocus2 = _interopRequireDefault(_activateOnFocus);

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

/*:: type Props = {
  fieldNames: string[],
  value: Object,
  onChange: PatchEvent => void,
  readOnly?: boolean
}*/
class UnknownFields extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleUnsetClick = fieldName => {
      this.props.onChange(_PatchEvent2.default.from((0, _PatchEvent.unset)([fieldName])));
    }, _temp;
  }

  render() {
    var _props = this.props;
    const fieldNames = _props.fieldNames,
          value = _props.value,
          readOnly = _props.readOnly;

    return _react2.default.createElement(
      'div',
      { className: _UnknownFields2.default.root },
      _react2.default.createElement(
        'h2',
        { className: _UnknownFields2.default.heading },
        'Found ',
        fieldNames.length,
        ' unknown fields'
      ),
      _react2.default.createElement(
        'div',
        { className: _UnknownFields2.default.content },
        _react2.default.createElement(
          _Details2.default,
          null,
          'These are not defined in the current schema as valid fields for this value. This could mean that the field has been removed, or that someone else has added it to their own local schema that is not yet deployed.',
          fieldNames.map(fieldName => {
            return _react2.default.createElement(
              'div',
              { key: fieldName },
              _react2.default.createElement(
                'h4',
                null,
                fieldName
              ),
              _react2.default.createElement(
                _activateOnFocus2.default,
                null,
                _react2.default.createElement(
                  'pre',
                  { className: _UnknownFields2.default.inspectValue },
                  JSON.stringify(value[fieldName], null, 2)
                )
              ),
              readOnly ? _react2.default.createElement(
                'div',
                null,
                'This value is ',
                _react2.default.createElement(
                  'em',
                  null,
                  'read only'
                ),
                ' according to its enclosing schema type and cannot be unset. If you want to unset, make sure you remove the ',
                _react2.default.createElement(
                  'strong',
                  null,
                  'readOnly'
                ),
                ' ',
                'property from the enclosing type'
              ) : _react2.default.createElement(
                _default2.default,
                {
                  onClick: () => this.handleUnsetClick(fieldName),
                  color: 'danger'
                },
                'Unset ',
                fieldName
              )
            );
          })
        )
      )
    );
  }
}
exports.default = UnknownFields;