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

var _ValidationStatus2 = _interopRequireDefault(_ValidationStatus);

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

var _warningIcon2 = _interopRequireDefault(_warningIcon);

var _checkIcon = require('part:@lyra/base/check-icon');

var _checkIcon2 = _interopRequireDefault(_checkIcon);

var _reactTippy = require('react-tippy');

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

/* eslint-disable complexity */
class ValidationStatus extends _react2.default.PureComponent {

  render() {
    var _props = this.props;
    const markers = _props.markers,
          onClick = _props.onClick;

    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',
        { className: _ValidationStatus2.default.ok },
        _react2.default.createElement(_checkIcon2.default, null)
      );
    }

    const errorDef = `error${errors.length === 1 ? '' : 's'}`;
    const errorText = errors.length > 0 && `${errors.length} ${errorDef}`;
    const warningDef = `warning${warnings.length === 1 ? '' : 's'}`;
    const warningText = warnings.length > 0 && `${warnings.length} ${warningDef}`;

    let tooltipText = errorText;

    if (errorText && warningText) {
      tooltipText = `${errorText} and ${warningText}`;
    }

    if (warningText && !errorText) {
      tooltipText = warningText;
    }

    if (errors.length === 1 && warnings.length === 0) {
      tooltipText = errors[0].item.message;
    }

    if (warnings.length === 1 && errors.length === 0) {
      tooltipText = warnings[0].item.message;
    }

    return _react2.default.createElement(
      _reactTippy.Tooltip,
      {
        title: tooltipText,
        tabIndex: 0,
        trigger: 'mouseenter focus',
        animation: 'scale',
        arrow: true,
        theme: 'light',
        distance: '2',
        duration: 50,
        className: _ValidationStatus2.default.root,
        onClick: onClick
      },
      _react2.default.createElement(
        'div',
        null,
        errors && errors.length > 0 && _react2.default.createElement(
          'div',
          { className: _ValidationStatus2.default.error },
          _react2.default.createElement(_warningIcon2.default, null)
        ),
        warnings && warnings.length > 0 && _react2.default.createElement(
          'div',
          { className: _ValidationStatus2.default.warning },
          _react2.default.createElement(_warningIcon2.default, null)
        )
      )
    );
  }
}
exports.default = ValidationStatus;
ValidationStatus.propTypes = {
  onClick: _propTypes2.default.func,
  markers: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    path: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string, _propTypes2.default.number])),
    type: _propTypes2.default.string,
    level: _propTypes2.default.string,
    item: _propTypes2.default.any
  }))
};
ValidationStatus.defaultProps = {
  onClick: () => {},
  markers: []
};