terra-form/lib/Control.js

Components for building forms

'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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

require('terra-base/lib/baseStyles');

var _Control = require('./Control.scss');

var _Control2 = _interopRequireDefault(_Control);

var _Input = require('./Input');

var _Input2 = _interopRequireDefault(_Input);

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

var cx = _bind2.default.bind(_Control2.default);

var propTypes = {
  /**
   * The input type.
   */
  type: _propTypes2.default.oneOf(['checkbox', 'radio']).isRequired,
  /**
   * The checked property of the Input element. Use this to generate a controlled Control Element.
   */
  checked: _propTypes2.default.bool,
  /**
   * The checked property of the Input element. Use this to generate an uncontrolled Control Element.
   */
  defaultChecked: _propTypes2.default.bool,
  /**
   * The id of the input field.
   */
  id: _propTypes2.default.string,
  /**
   * Additional attributes for the input object.
   */
  inputAttrs: _propTypes2.default.object,
  /**
   * Whether the form element is inline or not.
   */
  isInline: _propTypes2.default.bool,
  /**
   * Text of the label.
   */
  labelText: _propTypes2.default.node,
  /**
   * Additional objects for the text object.
   */
  labelTextAttrs: _propTypes2.default.object,
  /**
   * Name of the input attribute.
   */
  name: _propTypes2.default.string,
  /**
   * Function to trigger when user clicks on the input. Provide a function to create a controlled input.
   */
  onChange: _propTypes2.default.func,
  /**
   * The value of the input element.
   */
  value: _propTypes2.default.string
};

var defaultProps = {
  type: null,
  checked: undefined,
  defaultChecked: undefined,
  id: undefined,
  inputAttrs: {},
  isInline: false,
  labelText: null,
  labelTextAttrs: {},
  name: null,
  onChange: undefined,
  value: undefined
};

var Control = function Control(_ref) {
  var type = _ref.type,
      checked = _ref.checked,
      defaultChecked = _ref.defaultChecked,
      inputAttrs = _ref.inputAttrs,
      id = _ref.id,
      isInline = _ref.isInline,
      labelText = _ref.labelText,
      labelTextAttrs = _ref.labelTextAttrs,
      name = _ref.name,
      onChange = _ref.onChange,
      value = _ref.value,
      customProps = _objectWithoutProperties(_ref, ['type', 'checked', 'defaultChecked', 'inputAttrs', 'id', 'isInline', 'labelText', 'labelTextAttrs', 'name', 'onChange', 'value']);

  var labelClassNames = cx(['control', { 'control-inline': isInline }, customProps.className]);

  var labelTextClasses = cx(['control-label-text', labelTextAttrs.className]);

  var controlInputClasses = cx(['input', inputAttrs.className]);

  var controlInputAttrs = _extends({}, inputAttrs);

  if (checked !== undefined) {
    controlInputAttrs.checked = checked;
  } else {
    controlInputAttrs.defaultChecked = defaultChecked;
  }

  return _react2.default.createElement(
    'label',
    _extends({ htmlFor: id }, customProps, { className: labelClassNames }),
    _react2.default.createElement(_Input2.default, _extends({
      id: id,
      name: name,
      value: value,
      type: type,
      onChange: onChange
    }, controlInputAttrs, {
      className: controlInputClasses
    })),
    _react2.default.createElement(
      'span',
      _extends({}, labelTextAttrs, { className: labelTextClasses }),
      labelText
    )
  );
};

Control.propTypes = propTypes;
Control.defaultProps = defaultProps;

exports.default = Control;