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

Lyra form builder

'use strict';

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

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _default2 = _interopRequireDefault(_default);

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

var _Details2 = _interopRequireDefault(_Details);

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

var _InvalidValueInput2 = _interopRequireDefault(_InvalidValueInput);

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

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

var _converters = require('./converters');

var _converters2 = _interopRequireDefault(_converters);

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

const setAutoHeight = el => {
  if (el) {
    el.style.height = `${Math.min(300, el.scrollHeight)}px`;
    el.style.padding = `${4}px`;
    el.style.overflow = 'auto';
  }
};

function getConverters(value, actualType, validTypes) {
  if (!(actualType in _converters2.default)) {
    return [];
  }
  return Object.keys(_converters2.default[actualType]).filter(targetType => validTypes.includes(targetType)).map(targetType => _extends({
    from: actualType,
    to: targetType
  }, _converters2.default[actualType][targetType])).filter(converter => converter.test(value));
}

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

    return _temp = super(...args), this.handleClearClick = () => {
      this.props.onChange(_PatchEvent2.default.from((0, _PatchEvent.unset)()));
    }, this.handleConvertTo = converted => {
      this.props.onChange(_PatchEvent2.default.from((0, _PatchEvent.set)(converted)));
    }, this.setElement = element => {
      this.element = element;
    }, _temp;
  }

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

  renderValidTypes() {
    const validTypes = this.props.validTypes;

    if (validTypes.length === 1) {
      return _react2.default.createElement(
        'div',
        null,
        'Only content of type ',
        _react2.default.createElement(
          'code',
          null,
          validTypes[0]
        ),
        ' are valid here according to schema'
      );
    }
    return _react2.default.createElement(
      'div',
      null,
      'Only the following types are valid here according to schema:',
      ' ',
      validTypes.map(validType => _react2.default.createElement(
        'li',
        { key: validType },
        _react2.default.createElement(
          'code',
          null,
          validType
        )
      ))
    );
  }

  render() {
    var _props = this.props;
    const value = _props.value,
          actualType = _props.actualType,
          validTypes = _props.validTypes;

    const converters = getConverters(value, actualType, validTypes);
    return _react2.default.createElement(
      'div',
      { className: _InvalidValueInput2.default.root, tabIndex: 0, ref: this.setElement },
      _react2.default.createElement(
        'h3',
        null,
        'Content has invalid type: ',
        _react2.default.createElement(
          'code',
          null,
          actualType
        )
      ),
      _react2.default.createElement(
        _Details2.default,
        null,
        'Encountered a value of type ',
        _react2.default.createElement(
          'code',
          null,
          actualType
        ),
        '.',
        this.renderValidTypes(),
        _react2.default.createElement(
          'h4',
          null,
          'The current value is:'
        ),
        _react2.default.createElement('textarea', {
          ref: setAutoHeight,
          className: _InvalidValueInput2.default.currentValueDump,
          onFocus: e => e.target.select(),
          readOnly: true,
          value: value && typeof value === 'object' ? JSON.stringify(value, null, 2) : value
        }),
        converters.map(converter => _react2.default.createElement(
          _default2.default,
          {
            key: `${converter.from}-${converter.to}`,
            onClick: () => this.handleConvertTo(converter.convert(value)),
            color: 'primary'
          },
          'Convert value to ',
          converter.to
        ))
      ),
      _react2.default.createElement(
        'div',
        { className: _InvalidValueInput2.default.removeButtonWrapper },
        _react2.default.createElement(
          _default2.default,
          { onClick: this.handleClearClick, color: 'danger' },
          'Remove value'
        )
      )
    );
  }
}
exports.default = InvalidValue;
InvalidValue.propTypes = {
  actualType: _propTypes2.default.string,
  validTypes: _propTypes2.default.array,
  value: _propTypes2.default.any,
  onChange: _propTypes2.default.func
};