@lyra/components/lib/formfields/DefaultFormField.js

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _defaultStyle = require('part:@lyra/components/formfields/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

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

var _default2 = _interopRequireDefault(_default);

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

/* eslint-disable complexity */
class DefaultFormField extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      showValidationMessages: false
    }, this.handleToggleShowValidation = event => {
      this.setState(prevState => ({
        showValidationMessages: !prevState.showValidationMessages
      }));
    }, _temp;
  }

  render() {
    var _props = this.props;
    const level = _props.level,
          label = _props.label,
          labelFor = _props.labelFor,
          description = _props.description,
          children = _props.children,
          inline = _props.inline,
          wrapped = _props.wrapped,
          className = _props.className,
          markers = _props.markers;
    const showValidationMessages = this.state.showValidationMessages;


    const levelClass = `level_${level}`;

    return _react2.default.createElement(
      'div',
      {
        className: `
          ${inline ? _defaultStyle2.default.inline : _defaultStyle2.default.block}
          ${_defaultStyle2.default[levelClass] || ''}
          ${wrapped ? _defaultStyle2.default.wrapped : ''}
          ${className || ''}`
      },
      _react2.default.createElement(
        'label',
        { className: _defaultStyle2.default.inner, htmlFor: labelFor },
        label && _react2.default.createElement(
          'div',
          { className: _defaultStyle2.default.header },
          _react2.default.createElement(
            'div',
            { className: _defaultStyle2.default.headerMain },
            label && _react2.default.createElement(
              _default2.default,
              { className: _defaultStyle2.default.label, level: level },
              label
            ),
            description && _react2.default.createElement(
              'div',
              { className: _defaultStyle2.default.description },
              description
            )
          ),
          _react2.default.createElement(
            'div',
            { className: _defaultStyle2.default.headerStatus },
            _react2.default.createElement(
              'div',
              {
                onClick: this.handleToggleShowValidation,
                className: _defaultStyle2.default.validationStatus
              },
              _react2.default.createElement(_status2.default, { markers: markers })
            )
          )
        ),
        _react2.default.createElement(
          'div',
          {
            className: showValidationMessages ? _defaultStyle2.default.validationList : _defaultStyle2.default.validationListClosed
          },
          _react2.default.createElement(_list2.default, { markers: markers })
        ),
        _react2.default.createElement(
          'div',
          { className: _defaultStyle2.default.content },
          children
        )
      )
    );
  }
}
exports.default = DefaultFormField;
DefaultFormField.propTypes = {
  label: _propTypes2.default.string,
  className: _propTypes2.default.string,
  inline: _propTypes2.default.bool,
  description: _propTypes2.default.string,
  level: _propTypes2.default.number,
  children: _propTypes2.default.node,
  wrapped: _propTypes2.default.bool,
  labelFor: _propTypes2.default.string,
  markers: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    type: _propTypes2.default.string
  }))
};
DefaultFormField.defaultProps = {
  level: 1,
  markers: []
};