@lyra/form-builder/lib/inputs/Slug/SlugInput.js

Lyra form builder

'use strict';

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

var _get2 = require('lodash/get');

var _get3 = _interopRequireDefault(_get2);

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 _class, _temp2;

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _speakingurl = require('speakingurl');

var _speakingurl2 = _interopRequireDefault(_speakingurl);

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

var _default2 = _interopRequireDefault(_default);

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

var _default4 = _interopRequireDefault(_default3);

var _default5 = require('part:@lyra/components/textinputs/default');

var _default6 = _interopRequireDefault(_default5);

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

var _FormBuilderPropTypes2 = _interopRequireDefault(_FormBuilderPropTypes);

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

var _withDocument = require('../../utils/withDocument');

var _withDocument2 = _interopRequireDefault(_withDocument);

var _withValuePath = require('../../utils/withValuePath');

var _withValuePath2 = _interopRequireDefault(_withValuePath);

var _SlugInput = require('./styles/SlugInput.css');

var _SlugInput2 = _interopRequireDefault(_SlugInput);

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; }

// Fallback slugify function if not defined in field options
function defaultSlugify(value, type) {
  const maxLength = type.options && type.options.maxLength || 200;
  const slugifyOpts = { truncate: maxLength, symbols: true };
  return value ? (0, _speakingurl2.default)(value, slugifyOpts) : '';
}

const defaultState = {
  inputText: undefined,
  loading: false
};

exports.default = (0, _withValuePath2.default)((0, _withDocument2.default)((_temp2 = _class = class SlugInput extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = defaultState, this.setTextInput = input => {
      this._textInput = input;
    }, this.handleChange = event => {
      this.updateCurrent(event.target.value);
    }, this.handleFocusCurrent = event => {
      this.props.onFocus(['current']);
    }, this.handleGenerateSlug = () => {
      const type = this.props.type;

      const source = (0, _get3.default)(type, 'options.source');

      if (!source) {
        // eslint-disable-next-line no-console
        console.error(`Source is missing. Check source on type "${type.name}" in schema`);
        return;
      }

      const newFromSource = this.getNewFromSource();

      this.setState({ loading: true });
      this.slugify(newFromSource || '').then(newSlug => this.updateCurrent(newSlug)).catch(err => {
        // eslint-disable-next-line no-console
        console.error(`An error occured while slugifying "${newFromSource}":\n${err.message}\n${err.stack}`);
      }).then(() => this._isMounted && this.setState({ loading: false }));
    }, this.getNewFromSource = () => {
      var _props = this.props;
      const getValuePath = _props.getValuePath,
            type = _props.type,
            document = _props.document;

      const parentPath = getValuePath().slice(0, -1);
      const source = (0, _get3.default)(type, 'options.source');
      return typeof source === 'function' ? source(document, { parentPath }) : (0, _get3.default)(document, source);
    }, _temp;
  }

  componentDidMount() {
    this._isMounted = true;
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  updateCurrent(current) {
    var _props2 = this.props;
    const onChange = _props2.onChange,
          type = _props2.type;

    if (!current) {
      onChange(_PatchEvent.PatchEvent.from((0, _PatchEvent.unset)(['current'])));
      return;
    }
    onChange(_PatchEvent.PatchEvent.from((0, _PatchEvent.setIfMissing)({ _type: type.name }), (0, _PatchEvent.set)(current, ['current'])));
  }

  slugify(sourceValue) {
    if (!sourceValue) {
      return Promise.resolve(sourceValue);
    }

    const type = this.props.type;

    const slugify = (0, _get3.default)(type, 'options.slugify', defaultSlugify);
    return Promise.resolve(slugify(sourceValue, type));
  }

  componentWillReceiveProps(nextProps) {
    const document = nextProps.document;

    // Reset state if document is changed

    const oldDocId = this.props.document._id;
    const newDocId = document._id;
    if (oldDocId !== newDocId) {
      this.setState(defaultState);
    }
  }

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

  render() {
    var _props3 = this.props;

    const value = _props3.value,
          type = _props3.type,
          level = _props3.level,
          markers = _props3.markers,
          onFocus = _props3.onFocus,
          document = _props3.document,
          getValuePath = _props3.getValuePath,
          rest = _objectWithoutProperties(_props3, ['value', 'type', 'level', 'markers', 'onFocus', 'document', 'getValuePath']);

    var _state = this.state;
    const loading = _state.loading,
          inputText = _state.inputText;


    const hasSourceField = type.options && type.options.source;
    const formFieldProps = {
      label: type.title,
      description: type.description,
      level: level,
      markers
    };

    const validation = markers.filter(marker => marker.type === 'validation');
    const errors = validation.filter(marker => marker.level === 'error');
    const hasSource = Boolean(this.getNewFromSource());

    return _react2.default.createElement(
      _default4.default,
      formFieldProps,
      _react2.default.createElement(
        'div',
        { className: _SlugInput2.default.wrapper },
        _react2.default.createElement(
          'div',
          { className: _SlugInput2.default.input },
          _react2.default.createElement(_default6.default, _extends({}, rest, {
            ref: this.setTextInput,
            customValidity: errors.length > 0 ? errors[0].item.message : '',
            disabled: loading,
            placeholder: type.placeholder,
            onChange: this.handleChange,
            onFocus: this.handleFocusCurrent,
            value: typeof inputText === 'string' ? inputText : value.current
          }))
        ),
        _react2.default.createElement(
          'div',
          { className: _SlugInput2.default.button },
          hasSourceField && _react2.default.createElement(
            _default2.default,
            {
              disabled: loading || !hasSource,
              loading: loading,
              onClick: this.handleGenerateSlug
            },
            'Generate slug'
          )
        )
      )
    );
  }
}, _class.propTypes = {
  type: _FormBuilderPropTypes2.default.type.isRequired,
  level: _propTypes2.default.number.isRequired,
  value: _propTypes2.default.shape({
    current: _propTypes2.default.string
  }),
  document: _propTypes2.default.shape({ _id: _propTypes2.default.string }).isRequired,
  onChange: _propTypes2.default.func,
  onFocus: _propTypes2.default.func.isRequired,
  getValuePath: _propTypes2.default.func.isRequired,
  markers: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    type: _propTypes2.default.string.isRequired
  }))
}, _class.defaultProps = {
  value: { current: undefined },
  onChange() {},
  markers: []
}, _temp2)));