@kiwicom/orbit-components/lib/deprecated/InputField/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.Prefix = exports.InputContainer = exports.Input = exports.FakeInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _consts = require("./consts");
var _FormFeedback = _interopRequireDefault(require("../FormFeedback"));
var _FormLabel = _interopRequireDefault(require("../../FormLabel"));
var _ServiceLogo = require("../../ServiceLogo");
var _rtl = require("../../utils/rtl");
var _InputTags = _interopRequireDefault(require("./InputTags"));
var _getSpacingToken = _interopRequireDefault(require("../../common/getSpacingToken"));
var _getFieldDataState = _interopRequireDefault(require("../../common/getFieldDataState"));
var _useRandomId = require("../../hooks/useRandomId");
var _formElementFocus = _interopRequireDefault(require("./helpers/formElementFocus"));
var _ButtonPrimitiveIconContainer = require("../../primitives/ButtonPrimitive/components/ButtonPrimitiveIconContainer");
var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));
const FormLabel = ({
  label,
  isFilled,
  required
}) => /*#__PURE__*/React.createElement(_FormLabel.default, {
  filled: isFilled,
  required: required
}, label);
const getToken = name => ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.TOKENS.heightInput]: {
      [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.heightInputSmall,
      [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.heightInputNormal
    },
    [_consts.TOKENS.fontSizeInput]: {
      [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeInputSmall,
      [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeInputNormal
    },
    [_consts.TOKENS.iconSize]: {
      [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.widthIconSmall,
      [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.widthIconMedium
    }
  };
  if (!size) return null;
  return tokens[name][size];
};
const getPadding = ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.paddingInputSmall,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.paddingInputNormal
  };
  return (0, _rtl.rtlSpacing)(tokens[size]);
};
const getDOMType = type => {
  if (type === _consts.TYPE_OPTIONS.PASSPORTID) {
    return _consts.TYPE_OPTIONS.TEXT;
  }
  return type;
};
const Field = (0, _styledComponents.default)( /*#__PURE__*/React.forwardRef(
// @ts-expect-error ts-migrate deprecated
({
  component: Component,
  className,
  children,
  spaceAfter,
  theme,
  $width,
  ...props
}, ref) => {
  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
    className: className,
    ref: ref
  }, props), children);
})).withConfig({
  displayName: "InputField__Field",
  componentId: "sc-f1p486-0"
})(["", ""], ({
  theme,
  $width
}) => (0, _styledComponents.css)(["font-family:", ";position:relative;display:block;flex:1 1 100%;width:", ";margin-bottom:", ";"], theme.orbit.fontFamily, $width, _getSpacingToken.default));
Field.defaultProps = {
  theme: _defaultTheme.default
};
const FakeInput = (0, _styledComponents.default)(({
  children,
  className
}) => /*#__PURE__*/React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__FakeInput",
  componentId: "sc-f1p486-1"
})(["", ""], ({
  theme,
  error,
  disabled
}) => (0, _styledComponents.css)(["width:100%;position:absolute;z-index:1;top:0;left:0;box-sizing:border-box;height:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";font-size:", ";transition:all ", " ease-in-out;border-radius:6px;", ";"], getToken(_consts.TOKENS.heightInput), `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, disabled ? theme.orbit.backgroundInputDisabled : theme.orbit.backgroundInput, getToken(_consts.TOKENS.fontSizeInput), theme.orbit.durationFast, _mediaQuery.default.tablet((0, _styledComponents.css)(["border-radius:", ";"], theme.orbit.borderRadiusNormal))));
exports.FakeInput = FakeInput;
FakeInput.defaultProps = {
  theme: _defaultTheme.default
};
const InputContainer = (0, _styledComponents.default)(({
  children,
  className,
  labelRef
}) => /*#__PURE__*/React.createElement("div", {
  ref: labelRef,
  className: className
}, children)).withConfig({
  displayName: "InputField__InputContainer",
  componentId: "sc-f1p486-2"
})(["", ""], ({
  theme,
  disabled,
  error
}) => (0, _styledComponents.css)(["display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:", ";border-radius:", ";color:", ";font-size:", ";cursor:", ";&:hover > ", "{", ";}"], getToken(_consts.TOKENS.heightInput), theme.orbit.borderRadiusNormal, disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, getToken(_consts.TOKENS.fontSizeInput), disabled ? "not-allowed" : "text", FakeInput, !disabled && `box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`));
exports.InputContainer = InputContainer;
InputContainer.defaultProps = {
  theme: _defaultTheme.default
};
const StyledInlineLabel = _styledComponents.default.div.withConfig({
  displayName: "InputField__StyledInlineLabel",
  componentId: "sc-f1p486-3"
})(["", ""], ({
  theme,
  hasTags,
  size,
  hasFeedback
}) => (0, _styledComponents.css)(["height:100%;display:flex;align-items:center;pointer-events:none;justify-content:center;padding:", ";", "{margin-bottom:0;font-size:", ";line-height:", ";z-index:3;white-space:nowrap;}"], (0, _rtl.rtlSpacing)(`0 0 0 ${!hasTags && hasFeedback ? theme.orbit.spaceXXSmall : theme.orbit.spaceSmall}`), _FormLabel.default, getToken(_consts.TOKENS.fontSizeInput)({
  theme,
  size
}), theme.orbit.lineHeightTextNormal));
StyledInlineLabel.defaultProps = {
  theme: _defaultTheme.default
};
const Prefix = (0, _styledComponents.default)(({
  children,
  className,
  iconRef
}) => /*#__PURE__*/React.createElement("div", {
  className: className,
  ref: iconRef
}, children)).withConfig({
  displayName: "InputField__Prefix",
  componentId: "sc-f1p486-4"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["height:100%;color:", ";display:flex;align-items:center;pointer-events:none;justify-content:center;padding:", ";z-index:3;& > svg{color:", ";}& * svg,& > svg{width:", ";height:", ";}", "{color:", ";}"], theme.orbit.colorTextInputPrefix, (0, _rtl.rtlSpacing)(`0 0 0 ${theme.orbit.spaceSmall}`), theme.orbit.colorIconInput, getToken(_consts.TOKENS.iconSize), getToken(_consts.TOKENS.iconSize), _ButtonPrimitiveIconContainer.StyledButtonPrimitiveIconContainer, theme.orbit.colorIconSecondary));
exports.Prefix = Prefix;
Prefix.defaultProps = {
  theme: _defaultTheme.default
};
const Suffix = (0, _styledComponents.default)(({
  children,
  className
}) => /*#__PURE__*/React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__Suffix",
  componentId: "sc-f1p486-5"
})(["", ""], ({
  theme,
  disabled
}) => (0, _styledComponents.css)(["height:", ";color:", ";display:flex;flex-shrink:0;align-items:center;justify-content:center;pointer-events:", ";z-index:3;", "{color:", ";}", "{height:16px;padding:", ";}"], getToken(_consts.TOKENS.heightInput), theme.orbit.colorTextInputPrefix, disabled && "none", _ButtonPrimitiveIconContainer.StyledButtonPrimitiveIconContainer, theme.orbit.colorIconSecondary, _ServiceLogo.StyledServiceLogo, (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceSmall} 0 0`)));
Suffix.defaultProps = {
  theme: _defaultTheme.default
};
const Input = (0, _styledComponents.default)(
/*#__PURE__*/
// @ts-expect-error it's deprecated suppressed until removed
React.forwardRef(({
  type,
  size,
  theme,
  error,
  help,
  inlineLabel,
  dataAttrs,
  ...props
}, ref) => /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
  type: getDOMType(type)
}, props, dataAttrs, {
  ref: ref
})))).withConfig({
  displayName: "InputField__Input",
  componentId: "sc-f1p486-6"
})(["", ""], ({
  theme,
  size,
  inlineLabel,
  error,
  disabled,
  type
}) => (0, _styledComponents.css)(["appearance:none;-webkit-text-fill-color:", ";font-family:", ";border:none;padding:", ";font-size:inherit;font-weight:", ";color:inherit;background-color:transparent;cursor:inherit;flex:1 1 20%;width:100%;height:100%;box-sizing:border-box;border-radius:", ";z-index:2;min-width:0;font-variant-numeric:", ";letter-spacing:", ";&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&[data-com-onepassword-filled]{background-color:inherit !important;}&:focus{outline:none;& ~ ", "{", ";}}&::placeholder{color:", ";opacity:1;}&::-ms-input-placeholder{color:", ";}&::-ms-clear,&::-ms-reveal{display:none;}"], disabled && "inherit", theme.orbit.fontFamily, getPadding({
  theme,
  size
}), inlineLabel ? theme.orbit.fontWeightMedium : theme.orbit.fontWeightNormal, theme.orbit.borderRadiusNormal, type === _consts.TYPE_OPTIONS.PASSPORTID && "tabular-nums", type === _consts.TYPE_OPTIONS.PASSPORTID && "2px", FakeInput, (0, _formElementFocus.default)({
  theme,
  error
}), theme.orbit.colorPlaceholderInput, theme.orbit.colorPlaceholderInput));
exports.Input = Input;
Input.defaultProps = {
  theme: _defaultTheme.default
};
const InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    disabled,
    size = _consts.SIZE_OPTIONS.NORMAL,
    type = _consts.TYPE_OPTIONS.TEXT,
    label,
    inlineLabel,
    dataTest,
    required,
    error,
    name,
    prefix,
    onChange,
    onFocus,
    onBlur,
    onSelect,
    onMouseUp,
    onMouseDown,
    onKeyUp,
    onKeyDown,
    placeholder,
    minValue,
    maxValue,
    minLength,
    maxLength,
    suffix,
    help,
    value,
    tags,
    tabIndex,
    readOnly,
    autoComplete,
    autoFocus,
    spaceAfter,
    id,
    inputMode,
    dataAttrs
  } = props;
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  const forID = id || (label ? randomId("inputFieldID") : undefined);
  return (
    /*#__PURE__*/
    // @ts-expect-error suppressed until removed
    React.createElement(Field, {
      component: label ? "label" : "div",
      spaceAfter: spaceAfter,
      htmlFor: label ? forID : undefined
    }, label && !inlineLabel && /*#__PURE__*/React.createElement(FormLabel, {
      label: label,
      isFilled: !!value,
      required: required
    }), /*#__PURE__*/React.createElement(InputContainer, {
      size: size,
      disabled: disabled,
      error: error
    }, prefix && /*#__PURE__*/React.createElement(Prefix, {
      size: size
    }, prefix), label && inlineLabel && /*#__PURE__*/React.createElement(StyledInlineLabel, {
      size: size
    }, /*#__PURE__*/React.createElement(FormLabel, {
      label: label,
      isFilled: !!value,
      required: required
    })), tags && /*#__PURE__*/React.createElement(_InputTags.default, null, tags), /*#__PURE__*/React.createElement(Input, {
      "data-test": dataTest,
      "data-state": (0, _getFieldDataState.default)(!!error)
      // @ts-expect-error suppressed until removed
      ,
      onChange: onChange,
      onFocus: onFocus,
      onBlur: onBlur,
      onKeyUp: onKeyUp,
      onKeyDown: onKeyDown,
      onSelect: onSelect,
      onMouseUp: onMouseUp,
      onMouseDown: onMouseDown,
      name: name,
      type: type,
      value: value,
      placeholder: placeholder,
      disabled: disabled,
      min: minValue,
      max: maxValue,
      minLength: minLength,
      maxLength: maxLength,
      size: size,
      error: error,
      ref: ref,
      tabIndex: tabIndex,
      inlineLabel: inlineLabel,
      readOnly: readOnly,
      autoComplete: autoComplete,
      autoFocus: autoFocus,
      id: forID,
      inputMode: inputMode,
      dataAttrs: dataAttrs
    }), suffix && /*#__PURE__*/React.createElement(Suffix, {
      size: size
    }, suffix), /*#__PURE__*/React.createElement(FakeInput, {
      size: size,
      disabled: disabled,
      error: error
    })), /*#__PURE__*/React.createElement(_FormFeedback.default, {
      help: help,
      error: error
    }))
  );
});
InputField.displayName = "InputField";
var _default = InputField;
exports.default = _default;