@helpscout/hsds-react/components/FormLabel/FormLabel.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Context = _interopRequireDefault(require("./Context"));

var _HelpText = _interopRequireDefault(require("../HelpText"));

var _Label = _interopRequireDefault(require("../Label"));

var _classnames = _interopRequireDefault(require("classnames"));

var _id = require("../../utilities/id");

var _FormLabel = require("./FormLabel.css");

var _jsxRuntime = require("react/jsx-runtime");

var uniqueID = (0, _id.createUniqueIDFactory)('FormControl');

var FormLabel = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(FormLabel, _React$Component);

  function FormLabel(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.getContextProps = function () {
      var id = _this.state.id;
      return {
        id: id
      };
    };

    _this.getLabelMarkup = function () {
      var label = _this.props.label;
      return label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
        className: "c-FormLabel__label",
        for: _this.state.id,
        children: label
      });
    };

    _this.getHelpTextMarkup = function () {
      var helpText = _this.props.helpText;
      return helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.FormLabelHelpTextUI, {
        className: "c-FormLabel__helpTextWrapper",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpText.default, {
          isCompact: true,
          className: "c-FormLabel__helpText",
          children: helpText
        })
      });
    };

    _this.state = {
      id: props.for || props.id || uniqueID()
    };
    return _this;
  }

  var _proto = FormLabel.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        isInline = _this$props.isInline,
        htmlFor = _this$props.for,
        idProp = _this$props.id,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "children", "isInline", "for", "id"]);
    var componentClassName = (0, _classnames.default)('c-FormLabel', isInline && 'is-inline', className);
    var labelMarkup = this.getLabelMarkup();
    var helpTextMarkup = this.getHelpTextMarkup();
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.default.Provider, {
      value: this.getContextProps(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormLabel.FormLabelUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        className: componentClassName,
        isHelpTextPresent: !!helpTextMarkup,
        isInline: isInline,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "c-FormLabel__label",
          children: [labelMarkup, helpTextMarkup]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "c-FormLabel__content",
          children: children
        })]
      }))
    });
  };

  return FormLabel;
}(_react.default.Component);

FormLabel.defaultProps = {
  isInline: false
};
FormLabel.defaultProps = {
  'data-cy': 'FormLabel'
};
FormLabel.propTypes = {
  /** Content to render. */
  children: _propTypes.default.any,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Determines what the `label` is associated with. */
  for: _propTypes.default.string,

  /** Content to render a `HelpText` */
  helpText: _propTypes.default.any,

  /** Custom ID to bind the `label` with the Control component. */
  id: _propTypes.default.string,

  /** Content to render a `Label` */
  label: _propTypes.default.any,

  /** Determines whether to render the label and form input inline (made specially for checkboxes or `Switch`) */
  isInline: _propTypes.default.bool,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = FormLabel;
exports.default = _default;