@kiwicom/orbit-components/es/InputField/index.js

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import * as React from "react";
import styled 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 { StyledButtonLink } from "../ButtonLink/index";
import randomID from "../utils/randomID";

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((_ref) => {
  let {
    component: Component,
    className,
    children,
    spaceAfter,
    theme
  } = _ref,
      props = _objectWithoutProperties(_ref, ["component", "className", "children", "spaceAfter", "theme"]);

  return React.createElement(Component, _extends({
    className: className
  }, props), children);
}).withConfig({
  displayName: "InputField__Field",
  componentId: "sc-4opay-0"
})(["font-family:", ";position:relative;display:block;z-index:2;flex:1 1 100%;width:100%;margin-bottom:", ";"], ({
  theme
}) => theme.orbit.fontFamily, getSpacingToken);
Field.defaultProps = {
  theme: defaultTheme
};
export const FakeInput = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__FakeInput",
  componentId: "sc-4opay-1"
})(["width:100%;position:absolute;z-index:1;top:0;left:0;box-sizing:border-box;height:", ";border-radius:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";font-size:", ";transition:all ", " ease-in-out;"], getToken(TOKENS.heightInput), ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, ({
  disabled,
  theme
}) => disabled ? theme.orbit.backgroundInputDisabled : theme.orbit.backgroundInput, getToken(TOKENS.fontSizeInput), ({
  theme
}) => theme.orbit.durationFast);
FakeInput.defaultProps = {
  theme: defaultTheme
};
export const InputContainer = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__InputContainer",
  componentId: "sc-4opay-2"
})(["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 > ", "{", ";}", ":active{box-shadow:none;}"], getToken(TOKENS.heightInput), ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  disabled,
  theme
}) => disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, getToken(TOKENS.fontSizeInput), ({
  disabled
}) => disabled ? "not-allowed" : "text", FakeInput, ({
  disabled,
  theme,
  error
}) => !disabled && `box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`, StyledButtonLink);
InputContainer.defaultProps = {
  theme: defaultTheme
};
const StyledInlineLabel = styled.div.withConfig({
  displayName: "InputField__StyledInlineLabel",
  componentId: "sc-4opay-3"
})(["height:100%;display:flex;align-items:center;pointer-events:none;justify-content:center;padding:", ";", "{margin-bottom:0;font-size:", ";line-height:normal;z-index:3;white-space:nowrap;}"], ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`), DefaultFormLabel, getToken(TOKENS.fontSizeInput));
StyledInlineLabel.defaultProps = {
  theme: defaultTheme
};
export const Prefix = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__Prefix",
  componentId: "sc-4opay-4"
})(["height:100%;color:", ";display:flex;align-items:center;pointer-events:none;justify-content:center;padding:", ";z-index:3;& > svg{width:", ";height:", ";color:", ";}"], ({
  theme
}) => theme.orbit.colorTextInputPrefix, ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`), getToken(TOKENS.iconSize), getToken(TOKENS.iconSize), ({
  theme
}) => theme.orbit.colorIconInput);
Prefix.defaultProps = {
  theme: defaultTheme
};
const Suffix = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__Suffix",
  componentId: "sc-4opay-5"
})(["height:", ";color:", ";display:flex;flex-shrink:0;align-items:center;justify-content:center;pointer-events:", ";z-index:3;& svg{color:", ";}", "{height:16px;padding:", ";}"], getToken(TOKENS.heightInput), ({
  theme
}) => theme.orbit.colorTextInputPrefix, ({
  disabled
}) => disabled && "none", ({
  theme
}) => theme.orbit.colorIconSecondary, StyledServiceLogo, ({
  theme
}) => rtlSpacing(`0 ${theme.orbit.spaceSmall} 0 0`));
Suffix.defaultProps = {
  theme: defaultTheme
};
export const Input = styled( // $FlowExpected
React.forwardRef((_ref2, ref) => {
  let {
    type,
    size,
    theme,
    error,
    help,
    inlineLabel
  } = _ref2,
      props = _objectWithoutProperties(_ref2, ["type", "size", "theme", "error", "help", "inlineLabel"]);

  return React.createElement("input", _extends({
    type: getDOMType(type)
  }, props, {
    ref: ref
  }));
})).withConfig({
  displayName: "InputField__Input",
  componentId: "sc-4opay-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;& ~ ", "{box-shadow:inset 0 0 0 ", ";}}&::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, ({
  theme
}) => `${theme.orbit.borderWidthInputFocus} ${theme.orbit.borderColorInputFocus}`, ({
  theme
}) => theme.orbit.colorPlaceholderInput, ({
  theme
}) => theme.orbit.colorPlaceholderInput, ({
  theme
}) => theme.orbit.colorPlaceholderInput);
Input.defaultProps = {
  theme: defaultTheme
};

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


const InputField = React.forwardRef((props, ref) => {
  const {
    disabled,
    size = SIZE_OPTIONS.NORMAL,
    type = TYPE_OPTIONS.TEXT,
    label,
    inlineLabel,
    dataTest,
    required,
    error,
    name,
    prefix,
    onChange,
    onFocus,
    onBlur,
    onKeyUp,
    onKeyDown,
    placeholder,
    minValue,
    maxValue,
    minLength,
    maxLength,
    suffix,
    help,
    value,
    tags,
    tabIndex,
    readOnly,
    autoComplete,
    spaceAfter,
    id,
    inputMode
  } = props;
  const forID = id || (label ? React.useMemo(() => randomID("inputFieldID"), []) : undefined);
  return React.createElement(Field, {
    component: label ? "label" : "div",
    spaceAfter: spaceAfter,
    htmlFor: label ? forID : undefined
  }, label && !inlineLabel && React.createElement(FormLabel, {
    label: label,
    isFilled: !!value,
    required: required
  }), React.createElement(InputContainer, {
    size: size,
    disabled: disabled,
    error: error
  }, prefix && React.createElement(Prefix, {
    size: size
  }, prefix), label && inlineLabel && React.createElement(StyledInlineLabel, {
    size: size
  }, React.createElement(FormLabel, {
    label: label,
    isFilled: !!value,
    required: required
  })), tags && React.createElement(InputTags, null, tags), React.createElement(Input, {
    "data-test": dataTest,
    "data-state": getFieldDataState(!!error),
    onChange: onChange,
    onFocus: onFocus,
    onBlur: onBlur,
    onKeyUp: onKeyUp,
    onKeyDown: onKeyDown,
    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,
    id: forID,
    inputMode: inputMode
  }), suffix && React.createElement(Suffix, {
    size: size
  }, suffix), React.createElement(FakeInput, {
    size: size,
    disabled: disabled,
    error: error
  })), help && !error && React.createElement(FormFeedback, {
    type: "help"
  }, help), error && React.createElement(FormFeedback, {
    type: "error"
  }, error));
});
InputField.displayName = "InputField";
export default InputField;