@cbinsights/fds/lib/components/TextInput/index.js

Form: A design system by CB Insights

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

var _classcat = _interopRequireDefault(require("classcat"));

var _IconInput = _interopRequireDefault(require("./IconInput"));

var _DecoratedInput = _interopRequireDefault(require("./DecoratedInput"));

var _excluded = ["label", "labelWidth", "isLabelBold", "labelPosition", "errorText", "hasError", "showRequired", "showLabel", "onChange", "type", "IconLeft", "IconRight", "after", "before", "aria-label"];

var TextInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var label = _ref.label,
      labelWidth = _ref.labelWidth,
      isLabelBold = _ref.isLabelBold,
      _ref$labelPosition = _ref.labelPosition,
      labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
      errorText = _ref.errorText,
      hasError = _ref.hasError,
      showRequired = _ref.showRequired,
      _ref$showLabel = _ref.showLabel,
      showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
      _ref$onChange = _ref.onChange,
      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'text' : _ref$type,
      IconLeft = _ref.IconLeft,
      IconRight = _ref.IconRight,
      after = _ref.after,
      before = _ref.before,
      ariaLabel = _ref['aria-label'],
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var Element = showLabel ? 'label' : 'div';
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Element, {
    className: (0, _classcat.default)(['fdsTextInput-root', "fdsTextInput-root--".concat(labelPosition, "Label")])
  }, showLabel && label && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)([{
      'fontWeight--bold': isLabelBold,
      'margin--bottom--xs': labelPosition === 'top'
    }, 'fdsTextInput-label']),
    style: labelWidth ? {
      width: labelWidth
    } : undefined
  }, label, showRequired && /*#__PURE__*/_react.default.createElement("span", {
    className: "color--red"
  }, "\xA0*")), /*#__PURE__*/_react.default.createElement(_DecoratedInput.default, {
    after: after,
    before: before
  }, /*#__PURE__*/_react.default.createElement(_IconInput.default, {
    IconLeft: IconLeft,
    IconRight: IconRight
  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
    ref: ref,
    "aria-label": ariaLabel || (showLabel ? label : undefined),
    "aria-invalid": errorText || hasError ? true : undefined,
    onChange: onChange,
    type: type,
    className: (0, _classcat.default)([{
      error: errorText || hasError
    }, 'fdsTextInput'])
  }))))), errorText && /*#__PURE__*/_react.default.createElement("div", {
    className: "color--red type--data"
  }, errorText));
});

TextInput.displayName = 'TextInput';
var _default = TextInput;
exports.default = _default;