@kiwicom/orbit-components/es/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.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["component", "className", "children", "spaceAfter", "theme", "$width"],
      _excluded2 = ["type", "size", "theme", "error", "help", "inlineLabel", "dataAttrs"];
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import { SIZE_OPTIONS, TYPE_OPTIONS, TOKENS } from "./consts";
import FormFeedback from "../FormFeedback";
import DefaultFormLabel from "../../FormLabel";
import { StyledServiceLogo } from "../../ServiceLogo";
import { rtlSpacing } from "../../utils/rtl";
import InputTags from "./InputTags";
import getSpacingToken from "../../common/getSpacingToken";
import getFieldDataState from "../../common/getFieldDataState";
import randomID from "../../utils/randomID";
import formElementFocus from "./helpers/formElementFocus";
import { StyledButtonPrimitiveIconContainer } from "../../primitives/ButtonPrimitive/components/ButtonPrimitiveIconContainer";
import mq from "../../utils/mediaQuery";

const getToken = name => ({
  theme,
  size
}) => {
  const tokens = {
    [TOKENS.heightInput]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.heightInputSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.heightInputNormal
    },
    [TOKENS.fontSizeInput]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeInputSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeInputNormal
    },
    [TOKENS.iconSize]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.widthIconSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.widthIconMedium
    }
  };
  return tokens[name][size];
};

const getPadding = () => ({
  theme,
  size
}) => {
  const tokens = {
    [SIZE_OPTIONS.SMALL]: theme.orbit.paddingInputSmall,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingInputNormal
  };
  return rtlSpacing(tokens[size]);
};

const getDOMType = type => {
  if (type === TYPE_OPTIONS.PASSPORTID) {
    return TYPE_OPTIONS.TEXT;
  }

  return type;
};

const Field = styled( /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    component: Component,
    className,
    children,
    spaceAfter,
    theme,
    $width
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(Component, _extends({
    className: className,
    ref: ref
  }, props), children);
})).withConfig({
  displayName: "InputField__Field",
  componentId: "sc-18bxhkc-0"
})(["", ""], ({
  theme,
  $width
}) => css(["font-family:", ";position:relative;display:block;flex:1 1 100%;width:", ";margin-bottom:", ";"], theme.orbit.fontFamily, $width, getSpacingToken)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Field.defaultProps = {
  theme: defaultTheme
};
export const FakeInput = styled(({
  children,
  className
}) => /*#__PURE__*/React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__FakeInput",
  componentId: "sc-18bxhkc-1"
})(["", ""], ({
  theme,
  error,
  disabled
}) => 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(TOKENS.heightInput), `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, disabled ? theme.orbit.backgroundInputDisabled : theme.orbit.backgroundInput, getToken(TOKENS.fontSizeInput), theme.orbit.durationFast, mq.tablet(css(["border-radius:", ";"], theme.orbit.borderRadiusNormal)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

FakeInput.defaultProps = {
  theme: defaultTheme
};
export const InputContainer = styled(({
  children,
  className,
  labelRef
}) => /*#__PURE__*/React.createElement("div", {
  ref: labelRef,
  className: className
}, children)).withConfig({
  displayName: "InputField__InputContainer",
  componentId: "sc-18bxhkc-2"
})(["", ""], ({
  theme,
  disabled,
  error
}) => 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(TOKENS.heightInput), theme.orbit.borderRadiusNormal, disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, getToken(TOKENS.fontSizeInput), disabled ? "not-allowed" : "text", FakeInput, !disabled && `box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

InputContainer.defaultProps = {
  theme: defaultTheme
};
const StyledInlineLabel = styled.div.withConfig({
  displayName: "InputField__StyledInlineLabel",
  componentId: "sc-18bxhkc-3"
})(["", ""], ({
  theme,
  hasTags,
  hasFeedback
}) => css(["height:100%;display:flex;align-items:center;pointer-events:none;justify-content:center;padding:", ";"], rtlSpacing(`0 0 0 ${!hasTags && hasFeedback ? theme.orbit.spaceXXSmall : theme.orbit.spaceSmall}`))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledInlineLabel.defaultProps = {
  theme: defaultTheme
};
export const Prefix = styled(({
  children,
  className,
  iconRef
}) => /*#__PURE__*/React.createElement("div", {
  className: className,
  ref: iconRef
}, children)).withConfig({
  displayName: "InputField__Prefix",
  componentId: "sc-18bxhkc-4"
})(["", ""], ({
  theme
}) => 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, rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`), theme.orbit.colorIconInput, getToken(TOKENS.iconSize), getToken(TOKENS.iconSize), StyledButtonPrimitiveIconContainer, theme.orbit.colorIconSecondary)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Prefix.defaultProps = {
  theme: defaultTheme
};
const Suffix = styled(({
  children,
  className
}) => /*#__PURE__*/React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__Suffix",
  componentId: "sc-18bxhkc-5"
})(["", ""], ({
  theme
}) => css(["height:", ";color:", ";display:flex;flex-shrink:0;align-items:center;justify-content:center;pointer-events:", ";z-index:3;", "{color:", ";}", "{height:16px;padding:", ";}"], getToken(TOKENS.heightInput), theme.orbit.colorTextInputPrefix, ({
  disabled
}) => disabled && "none", StyledButtonPrimitiveIconContainer, theme.orbit.colorIconSecondary, StyledServiceLogo, rtlSpacing(`0 ${theme.orbit.spaceSmall} 0 0`))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Suffix.defaultProps = {
  theme: defaultTheme
};
export const Input = styled( /*#__PURE__*/React.forwardRef((_ref2, ref) => {
  let {
    type,
    size,
    theme,
    error,
    help,
    inlineLabel,
    dataAttrs
  } = _ref2,
      props = _objectWithoutProperties(_ref2, _excluded2);

  return /*#__PURE__*/React.createElement("input", _extends({
    type: getDOMType(type)
  }, props, dataAttrs, {
    ref: ref
  }));
})).withConfig({
  displayName: "InputField__Input",
  componentId: "sc-18bxhkc-6"
})(["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-input-placeholder{color:", ";}&::-ms-clear,&::-ms-reveal{display:none;}"], ({
  disabled
}) => disabled && "inherit", ({
  theme
}) => theme.orbit.fontFamily, getPadding(), ({
  inlineLabel,
  theme
}) => inlineLabel ? theme.orbit.fontWeightMedium : theme.orbit.fontWeightNormal, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  type
}) => type === TYPE_OPTIONS.PASSPORTID && "tabular-nums", ({
  type
}) => type === TYPE_OPTIONS.PASSPORTID && "2px", FakeInput, formElementFocus, ({
  theme
}) => theme.orbit.formElementForeground, ({
  theme
}) => theme.orbit.formElementForeground, ({
  theme
}) => theme.orbit.formElementForeground); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Input.defaultProps = {
  theme: defaultTheme
};

const FormLabel = ({
  label,
  isFilled,
  required
}) => /*#__PURE__*/React.createElement(DefaultFormLabel, {
  filled: isFilled,
  required: required
}, label);

const InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    disabled,
    size = SIZE_OPTIONS.NORMAL,
    type = 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 forID = React.useMemo(() => id || (label ? randomID("inputFieldID") : undefined), [id, label]);
  return /*#__PURE__*/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, null, tags), /*#__PURE__*/React.createElement(Input, {
    "data-test": dataTest,
    "data-state": getFieldDataState(!!error),
    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, {
    help: help,
    error: error
  }));
});
InputField.displayName = "InputField";
export default InputField;