@lyra/components/lib/validation/ValidationListItem.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 _ValidationListItem = require('./styles/ValidationListItem.css');

var _ValidationListItem2 = _interopRequireDefault(_ValidationListItem);

var _warningIcon = require('part:@lyra/base/warning-icon');

var _warningIcon2 = _interopRequireDefault(_warningIcon);

var _linkIcon = require('part:@lyra/base/link-icon');

var _linkIcon2 = _interopRequireDefault(_linkIcon);

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

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

    return _temp = super(...args), this.handleKeyPress = event => {
      if (event.key === 'Enter') {
        this.handleClick(event);
      }
    }, this.handleClick = event => {
      var _props = this.props;
      const marker = _props.marker,
            onClick = _props.onClick;

      if (onClick) {
        onClick(event, marker.path);
      }
    }, this.setElement = element => {
      this._element = element;
    }, _temp;
  }

  componentDidMount() {
    if (this.props.hasFocus) {
      this.focus();
    }
  }

  focus() {
    setTimeout(() => {
      this._element.focus();
    }, 200);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.hasFocus) {
      this.focus();
    }
  }

  render() {
    var _props2 = this.props;
    const marker = _props2.marker,
          onClick = _props2.onClick,
          path = _props2.path,
          showLink = _props2.showLink;

    const shouldRenderLink = onClick && showLink;

    return _react2.default.createElement(
      'a',
      {
        ref: this.setElement,
        tabIndex: 0,
        onClick: this.handleClick,
        onKeyPress: this.handleKeyPress,
        className: `
          ${onClick ? _ValidationListItem2.default.interactiveItem : _ValidationListItem2.default.item}
          ${_ValidationListItem2.default[marker.level]}
        `
      },
      _react2.default.createElement(
        'span',
        { className: _ValidationListItem2.default.icon },
        _react2.default.createElement(_warningIcon2.default, null)
      ),
      _react2.default.createElement(
        'div',
        { className: _ValidationListItem2.default.content },
        _react2.default.createElement(
          'span',
          { className: _ValidationListItem2.default.path },
          path
        ),
        _react2.default.createElement(
          'span',
          { className: _ValidationListItem2.default.message },
          marker.item.message
        )
      ),
      shouldRenderLink && _react2.default.createElement(
        'span',
        { className: _ValidationListItem2.default.link, title: 'View' },
        _react2.default.createElement(_linkIcon2.default, null)
      )
    );
  }
}
exports.default = ValidationListItem;
ValidationListItem.propTypes = {
  onClick: _propTypes2.default.func,
  showLink: _propTypes2.default.bool,
  path: _propTypes2.default.string,
  hasFocus: _propTypes2.default.bool,
  marker: _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
  }).isRequired
};
ValidationListItem.defaultProps = {
  path: '',
  onClick: undefined,
  showLink: false
};