@lyra/components/lib/fieldsets/DefaultFieldset.js

Basic UX components

'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 _defaultStyle = require('part:@lyra/components/fieldsets/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _arrowDropDown = require('part:@lyra/base/arrow-drop-down');

var _arrowDropDown2 = _interopRequireDefault(_arrowDropDown);

var _status = require('part:@lyra/components/validation/status');

var _status2 = _interopRequireDefault(_status);

var _list = require('part:@lyra/components/validation/list');

var _list2 = _interopRequireDefault(_list);

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; } /* eslint-disable react/no-multi-comp, complexity*/

class Fieldset extends _react2.default.Component {

  constructor(props) {
    super();

    this.handleToggle = () => {
      this.setState(prevState => ({ isCollapsed: !prevState.isCollapsed }));
    };

    this.handleFocus = event => {
      if (event.target === this._focusElement) {
        // Make sure we don't trigger onFocus for child elements
        this.props.onFocus(event);
      }
    };

    this.setFocusElement = el => {
      this._focusElement = el;
    };

    this.handleToggleValidationList = event => {
      this.setState({
        showValidationList: !this.state.showValidationList
      });
    };

    this.state = {
      isCollapsed: props.isCollapsed,
      showValidationList: false
    };
  }

  focus() {
    this._focusElement.focus();
  }

  render() {
    var _props = this.props;

    const fieldset = _props.fieldset,
          legend = _props.legend,
          description = _props.description,
          columns = _props.columns,
          level = _props.level,
          className = _props.className,
          isCollapsible = _props.isCollapsible,
          _ignore = _props.isCollapsed,
          children = _props.children,
          tabIndex = _props.tabIndex,
          transparent = _props.transparent,
          markers = _props.markers,
          rest = _objectWithoutProperties(_props, ['fieldset', 'legend', 'description', 'columns', 'level', 'className', 'isCollapsible', 'isCollapsed', 'children', 'tabIndex', 'transparent', 'markers']);

    var _state = this.state;
    const isCollapsed = _state.isCollapsed,
          showValidationList = _state.showValidationList;


    const styles = _extends({}, _defaultStyle2.default, this.props.styles);

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

    const rootClassName = [styles.root, errors.length > 0 && styles.hasErrors, styles[`columns${columns}`], styles[`level${level}`], transparent && styles.transparent, this.props.onFocus && styles.canFocus, className].filter(Boolean).join(' ');

    return _react2.default.createElement(
      'div',
      _extends({}, rest, {
        onFocus: this.handleFocus,
        tabIndex: tabIndex,
        ref: this.setFocusElement,
        className: rootClassName
      }),
      _react2.default.createElement(
        'fieldset',
        { className: styles.fieldset },
        _react2.default.createElement(
          'div',
          { className: styles.inner },
          _react2.default.createElement(
            'div',
            { className: styles.header },
            _react2.default.createElement(
              'div',
              { className: styles.headerMain },
              _react2.default.createElement(
                'legend',
                {
                  className: `${styles.legend} ${isCollapsed ? '' : styles.isOpen}`,
                  onClick: isCollapsible ? this.handleToggle : undefined
                },
                isCollapsible && _react2.default.createElement(
                  'div',
                  {
                    className: `${styles.arrow} ${isCollapsed ? '' : styles.isOpen}`
                  },
                  _react2.default.createElement(_arrowDropDown2.default, null)
                ),
                legend || fieldset.legend
              ),
              (description || fieldset.description) && _react2.default.createElement(
                'p',
                {
                  className: `${styles.description} ${isCollapsed ? '' : styles.isOpen}`
                },
                description || fieldset.description
              )
            ),
            _react2.default.createElement(
              'div',
              { className: styles.headerStatus },
              _react2.default.createElement(_status2.default, {
                markers: markers,
                onClick: this.handleToggleValidationList
              })
            )
          ),
          showValidationList && _react2.default.createElement(
            'div',
            { className: styles.validationList },
            _react2.default.createElement(_list2.default, { markers: markers })
          ),
          _react2.default.createElement(
            'div',
            {
              className: `${styles.content} ${isCollapsed ? '' : styles.isOpen}`
            },
            _react2.default.createElement(
              'div',
              { className: styles.fieldWrapper },
              !isCollapsed && children
            )
          )
        )
      )
    );
  }
}
exports.default = Fieldset;
Fieldset.propTypes = {
  description: _propTypes2.default.string,
  legend: _propTypes2.default.string.isRequired,
  columns: _propTypes2.default.number,
  isCollapsible: _propTypes2.default.bool,
  onFocus: _propTypes2.default.func,
  isCollapsed: _propTypes2.default.bool,
  fieldset: _propTypes2.default.shape({
    description: _propTypes2.default.string,
    legend: _propTypes2.default.string
  }),
  children: _propTypes2.default.node,
  level: _propTypes2.default.number,
  className: _propTypes2.default.string,
  tabIndex: _propTypes2.default.number,
  transparent: _propTypes2.default.bool,
  styles: _propTypes2.default.object,
  markers: _propTypes2.default.array
};
Fieldset.defaultProps = {
  level: 1,
  fieldset: {},
  markers: [],
  className: '',
  isCollapsed: false,
  isCollapsible: false // can collapsing be toggled by user?
};