react-lightning-design-system/lib/scripts/Input.js

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Input = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _keycoder = _interopRequireDefault(require("keycoder"));
var _Icon = require("./Icon");
var _FormElement = require("./FormElement");
var _Text = require("./Text");
var _FieldSet = require("./FieldSet");
var _util = require("./util");
var _hooks = require("./hooks");
var _common = require("./common");
var _excluded = ["id", "className", "label", "required", "error", "readOnly", "cols", "type", "bare", "value", "defaultValue", "htmlReadOnly", "iconLeft", "iconRight", "addonLeft", "addonRight", "symbolPattern", "tooltip", "tooltipIcon", "elementRef", "inputRef", "onKeyDown", "onChange", "onValueChange"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
 *
 */
function useInitComponentStyle() {
  (0, _react.useEffect)(function () {
    (0, _util.registerStyle)('input-icons', [
    // fix styles of double-iconed input
    ['.slds-input-has-icon_left-right .react-slds-icon.slds-input__icon_right', '{ left: auto; }']]);
  }, []);
}

/**
 *
 */
var InputAddon = function InputAddon(_ref) {
  var content = _ref.content;
  return /*#__PURE__*/_react["default"].createElement(_Text.Text, {
    tag: "span",
    className: "slds-form-element__addon",
    category: "body",
    type: "regular"
  }, content);
};

/**
 *
 */
var InputIcon = function InputIcon(_ref2) {
  var icon = _ref2.icon,
    align = _ref2.align;
  return /*#__PURE__*/_react["default"].isValidElement(icon) ? icon : typeof icon === 'string' ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
    icon: typeof icon === 'string' ? icon : '',
    className: (0, _classnames["default"])('slds-input__icon', "slds-input__icon_".concat(align), 'slds-icon-text-default')
  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
};

/**
 *
 */

/**
 *
 */
var Input = exports.Input = (0, _common.createFC)(function (props) {
  var id = props.id,
    className = props.className,
    label = props.label,
    required = props.required,
    error = props.error,
    readOnly = props.readOnly,
    cols = props.cols,
    type = props.type,
    bare = props.bare,
    value = props.value,
    defaultValue = props.defaultValue,
    htmlReadOnly = props.htmlReadOnly,
    iconLeft = props.iconLeft,
    iconRight = props.iconRight,
    addonLeft = props.addonLeft,
    addonRight = props.addonRight,
    symbolPattern = props.symbolPattern,
    tooltip = props.tooltip,
    tooltipIcon = props.tooltipIcon,
    elementRef = props.elementRef,
    inputRef = props.inputRef,
    onKeyDown_ = props.onKeyDown,
    onChange_ = props.onChange,
    onValueChange = props.onValueChange,
    rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
  useInitComponentStyle();
  var prevValueRef = (0, _react.useRef)();
  var onKeyDown = (0, _hooks.useEventCallback)(function (e) {
    if (symbolPattern) {
      var keyCode = e.keyCode,
        shiftKey = e.shiftKey;
      var _value = _keycoder["default"].toCharacter(keyCode, shiftKey);
      if (_value && !_value.match(new RegExp(symbolPattern))) {
        e.preventDefault();
        return;
      }
    }
    onKeyDown_ === null || onKeyDown_ === void 0 || onKeyDown_(e);
  });
  var onChange = (0, _hooks.useEventCallback)(function (e) {
    onChange_ === null || onChange_ === void 0 || onChange_(e);
    onValueChange === null || onValueChange === void 0 || onValueChange(e.target.value, prevValueRef.current);
    prevValueRef.current = e.target.value;
  });
  var prefix = (0, _react.useId)();
  var rawTextId = id !== null && id !== void 0 ? id : "".concat(prefix, "-raw-text-id");
  var inputId = id !== null && id !== void 0 ? id : "".concat(prefix, "-input-id");
  var labelForId = readOnly ? rawTextId : inputId;
  var errorId = "".concat(prefix, "-error-id");
  var _useContext = (0, _react.useContext)(_FieldSet.FieldSetColumnContext),
    isFieldSetColumn = _useContext.isFieldSetColumn;
  var inputClassNames = (0, _classnames["default"])(className, bare ? 'slds-input_bare' : 'slds-input');
  var inputElem = readOnly ? /*#__PURE__*/_react["default"].createElement(_Text.Text, {
    id: rawTextId,
    type: "regular",
    category: "body"
  }, value) : /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
    ref: inputRef,
    className: inputClassNames,
    id: inputId,
    type: type,
    value: value,
    defaultValue: defaultValue,
    readOnly: htmlReadOnly
  }, rprops, {
    onChange: onChange,
    onKeyDown: onKeyDown,
    "aria-describedby": error ? errorId : undefined,
    "aria-invalid": error ? true : undefined
  }));
  var contentElem = inputElem;
  if (iconLeft || iconRight || addonLeft || addonRight) {
    var wrapperClassName = (0, _classnames["default"])('slds-form-element__control', {
      'slds-input-has-icon': iconLeft || iconRight
    }, {
      'slds-input-has-icon_left-right': iconLeft && iconRight
    }, {
      'slds-input-has-icon_left': iconLeft
    }, {
      'slds-input-has-icon_right': iconRight
    }, {
      'slds-input-has-fixed-addon': addonLeft || addonRight
    });
    contentElem = /*#__PURE__*/_react["default"].createElement("div", {
      className: wrapperClassName
    }, addonLeft ? /*#__PURE__*/_react["default"].createElement(InputAddon, {
      content: addonLeft
    }) : undefined, iconLeft ? /*#__PURE__*/_react["default"].createElement(InputIcon, {
      icon: iconLeft,
      align: "left"
    }) : undefined, inputElem, iconRight ? /*#__PURE__*/_react["default"].createElement(InputIcon, {
      icon: iconRight,
      align: "right"
    }) : undefined, addonRight ? /*#__PURE__*/_react["default"].createElement(InputAddon, {
      content: addonRight
    }) : undefined);
  }
  if (isFieldSetColumn || label || required || error || cols) {
    var formElemProps = {
      controlId: labelForId,
      label: label,
      required: required,
      error: error,
      errorId: errorId,
      readOnly: readOnly,
      cols: cols,
      tooltip: tooltip,
      tooltipIcon: tooltipIcon,
      elementRef: elementRef
    };
    return /*#__PURE__*/_react["default"].createElement(_FormElement.FormElement, formElemProps, contentElem);
  }
  return contentElem;
}, {
  isFormElement: true
});
//# sourceMappingURL=Input.js.map