@wix/design-system/dist/cjs/InputWithLabel/InputWithLabel.js

@wix/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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _LabelledElement = _interopRequireDefault(require("../LabelledElement/LabelledElement"));
var _Input = _interopRequireDefault(require("../Input"));
var _Text = _interopRequireDefault(require("../Text"));
var _InputWithLabelSt = require("./InputWithLabel.st.css.js");
var _InputWithLabel = require("./InputWithLabel.constants");
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _excluded = ["label", "suffix", "value", "dataHook", "status", "statusMessage", "onChange", "onFocus", "onBlur", "name", "type", "ariaLabel", "autoFocus", "autocomplete", "disabled", "className", "maxLength", "placeholder", "customInput", "border"],
  _excluded2 = ["onChange", "onFocus", "onBlur", "className", "getPlaceholder"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/InputWithLabel/InputWithLabel.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var getSuffixContainer = suffix => suffix.map((item, index) => {
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "suffix-container",
    key: "suffix-container-".concat(index),
    className: _InputWithLabelSt.classes.groupIcon,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18,
      columnNumber: 7
    }
  }, item);
});
var InputWithLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  var label = _ref.label,
    suffix = _ref.suffix,
    value = _ref.value,
    dataHook = _ref.dataHook,
    status = _ref.status,
    _ref$statusMessage = _ref.statusMessage,
    statusMessage = _ref$statusMessage === void 0 ? '' : _ref$statusMessage,
    _onChange = _ref.onChange,
    _onFocus = _ref.onFocus,
    _onBlur = _ref.onBlur,
    name = _ref.name,
    type = _ref.type,
    ariaLabel = _ref.ariaLabel,
    autoFocus = _ref.autoFocus,
    autocomplete = _ref.autocomplete,
    disabled = _ref.disabled,
    className = _ref.className,
    maxLength = _ref.maxLength,
    placeholder = _ref.placeholder,
    customInput = _ref.customInput,
    border = _ref.border,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('InputWithLabel', {
    StatusAlertSmall: _wixUiIconsCommon.StatusAlertSmall,
    StatusWarningSmall: _wixUiIconsCommon.StatusWarningSmall
  });
  var isBottomLineBorder = border === 'bottomLine';
  var isWarning = status === _Input.default.StatusWarning;
  var showStatusSection = (status === _Input.default.StatusError || isWarning) && statusMessage;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    className: status ? undefined : _InputWithLabelSt.classes.statusMessagePlaceholder,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_LabelledElement.default, {
    value: value,
    label: label,
    dataHook: _InputWithLabel.DATA_HOOKS.labelledElement,
    topLabelGray: isBottomLineBorder,
    disabled: disabled,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 9
    }
  }, _ref2 => {
    var inputOnChange = _ref2.onChange,
      inputOnFocus = _ref2.onFocus,
      inputOnBlur = _ref2.onBlur,
      inputClassName = _ref2.className,
      getPlaceholder = _ref2.getPlaceholder,
      restInputProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
    return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
      className: (0, _InputWithLabelSt.st)(_InputWithLabelSt.classes.root, inputClassName, className),
      ref: ref,
      name: name,
      type: type,
      ariaLabel: ariaLabel,
      autoFocus: autoFocus,
      autocomplete: autocomplete,
      disabled: disabled,
      maxLength: maxLength,
      placeholder: getPlaceholder(placeholder),
      onChange: e => {
        inputOnChange(e);
        _onChange == null || _onChange(e);
      },
      onFocus: e => {
        inputOnFocus();
        _onFocus == null || _onFocus(e);
      },
      onBlur: e => {
        inputOnBlur();
        _onBlur == null || _onBlur(e);
      },
      dataHook: _InputWithLabel.DATA_HOOKS.input,
      size: "large",
      value: value,
      suffix: suffix && getSuffixContainer(suffix),
      status: status,
      statusMessage: /*#__PURE__*/_react.default.createElement("span", {
        style: {
          color: '#fff'
        },
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 113,
          columnNumber: 17
        }
      }, statusMessage),
      customInput: customInput,
      border: border,
      hideStatusSuffix: true
    }, rest, restInputProps, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 84,
        columnNumber: 13
      }
    }));
  }), showStatusSection && /*#__PURE__*/_react.default.createElement(_Text.default, {
    skin: isWarning ? 'standard' : 'error',
    size: "small",
    weight: isWarning ? 'thin' : 'normal',
    className: _InputWithLabelSt.classes.statusMessage,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 124,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _InputWithLabelSt.st)(_InputWithLabelSt.classes.statusMessageIcon, {
      warning: isWarning
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 130,
      columnNumber: 13
    }
  }, isWarning ? /*#__PURE__*/_react.default.createElement(icons.StatusWarningSmall, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 17
    }
  }) : /*#__PURE__*/_react.default.createElement(icons.StatusAlertSmall, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 17
    }
  })), /*#__PURE__*/_react.default.createElement("span", {
    "data-hook": _InputWithLabel.DATA_HOOKS.errorMessage,
    className: _InputWithLabelSt.classes.errorMessageContent,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 139,
      columnNumber: 13
    }
  }, statusMessage)));
});
InputWithLabel.displayName = 'InputWithLabel';
var _default = exports.default = InputWithLabel;
//# sourceMappingURL=InputWithLabel.js.map