@lyra/components/lib/validation/ValidationList.js

Basic UX components

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ValidationList = require('./styles/ValidationList.css');

var _ValidationList2 = _interopRequireDefault(_ValidationList);

var _ValidationListItem = require('./ValidationListItem');

var _ValidationListItem2 = _interopRequireDefault(_ValidationListItem);

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

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

    return _temp = super(...args), this.handleClick = (event, path) => {
      var _props = this.props;
      const onFocus = _props.onFocus,
            onClose = _props.onClose;

      const pathString = path[0];
      const element = document.querySelector(`[data-focus-path="${pathString}"]`);

      if (element) {
        element.scrollIntoView({
          behavior: 'smooth',
          alignToTop: false,
          inline: 'center'
        });
        this.scrollTimeout = setTimeout(() => {
          onFocus(path);
        }, 300);
      } else {
        onFocus(path);
      }
      onClose();
    }, _temp;
  }

  componentWillUnmount() {
    if (this.scrollTimeout) {
      clearTimeout(this.scrollTimeout);
    }
  }

  resolvePathTitle(path) {
    const type = this.props.documentType;
    const fields = type && type.fields;
    const field = fields && fields.find(curr => curr.name === path[0]);
    return field ? field.type.title : '';
  }

  render() {
    var _props2 = this.props;
    const markers = _props2.markers,
          showLink = _props2.showLink,
          isOpen = _props2.isOpen;

    const validation = markers.filter(marker => marker.type === 'validation');
    const errors = validation.filter(marker => marker.level === 'error');
    const warnings = validation.filter(marker => marker.level === 'warning');

    if (errors.length === 0 && warnings.length === 0) {
      return _react2.default.createElement('div', null);
    }

    return _react2.default.createElement(
      'div',
      { className: _ValidationList2.default.root },
      _react2.default.createElement(
        'div',
        { className: _ValidationList2.default.items },
        _react2.default.createElement(
          'ul',
          null,
          errors.length > 0 && errors.map((error, i) => _react2.default.createElement(_ValidationListItem2.default, {
            key: i
            // focus is not ready yet
            // hasFocus={i === 0 && isOpen}
            , path: this.resolvePathTitle(error.path),
            marker: error,
            onClick: this.handleClick,
            showLink: showLink
          })),
          warnings.length > 0 && warnings.map((warning, i) => _react2.default.createElement(_ValidationListItem2.default, {
            key: i
            // focus is not ready yet
            // hasFocus={i === 0 && isOpen}
            , path: this.resolvePathTitle(warning.path),
            marker: warning,
            onClick: this.handleClick,
            showLink: showLink
          }))
        )
      )
    );
  }
}
exports.default = ValidationList;
ValidationList.propTypes = {
  onFocus: _propTypes2.default.func,
  onClose: _propTypes2.default.func,
  showLink: _propTypes2.default.bool,
  isOpen: _propTypes2.default.bool,
  documentType: _propTypes2.default.shape({
    fields: _propTypes2.default.arrayOf(_propTypes2.default.shape({ name: _propTypes2.default.string.isRequired }))
  }),
  markers: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    path: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.shape({ _key: _propTypes2.default.string })])),
    type: _propTypes2.default.string,
    level: _propTypes2.default.string,
    item: _propTypes2.default.any
  }))
};
ValidationList.defaultProps = {
  markers: [],
  documentType: null,
  onClose: () => undefined,
  showLink: false,
  onFocus: () => undefined
};