@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.

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import { SIZE_OPTIONS, TYPE_OPTIONS, TOKENS } from "./consts";
import FormFeedback from "../FormFeedback";
import DefaultFormLabel from "../FormLabel";
import { StyledServiceLogo } from "../ServiceLogo";

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.paddingInput]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.paddingInputSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingInputNormal
    },
    [TOKENS.iconSize]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.widthIconSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.widthIconMedium
    }
  };
  return tokens[name][size];
};

const Field = styled.label.withConfig({
  displayName: "InputField__Field",
  componentId: "sc-4opay-0"
})(["font-family:", ";position:relative;display:block;z-index:2;flex:1 1 100%;"], ({
  theme
}) => theme.orbit.fontFamily);
Field.defaultProps = {
  theme: defaultTokens
};
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: defaultTokens
};
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;width:100%;height:", ";border-radius:", ";color:", ";font-size:", ";cursor:", ";&:hover > ", "{", ";}"], 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}`);
InputContainer.defaultProps = {
  theme: defaultTokens
};
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-left:", ";", "{margin-bottom:0;font-size:", ";line-height:normal;z-index:3;white-space:nowrap;}"], ({
  theme
}) => theme.orbit.spaceSmall, DefaultFormLabel, getToken(TOKENS.fontSizeInput));
StyledInlineLabel.defaultProps = {
  theme: defaultTokens
};
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-left:", ";z-index:3;& > svg{width:", ";height:", ";color:", ";}"], ({
  theme
}) => theme.orbit.colorTextInputPrefix, ({
  theme
}) => theme.orbit.spaceSmall, getToken(TOKENS.iconSize), getToken(TOKENS.iconSize), ({
  theme
}) => theme.orbit.colorIconInput);
Prefix.defaultProps = {
  theme: defaultTokens
};
const Suffix = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputField__Suffix",
  componentId: "sc-4opay-5"
})(["height:", ";color:", ";display:flex;align-items:center;justify-content:center;pointer-events:", ";z-index:3;& svg{color:", ";}", "{height:16px;padding-right:", ";}"], getToken(TOKENS.heightInput), ({
  theme
}) => theme.orbit.colorIconInput, ({
  disabled
}) => disabled && "none", ({
  theme
}) => theme.orbit.colorIconSecondary, StyledServiceLogo, ({
  theme
}) => theme.orbit.spaceSmall);
Suffix.defaultProps = {
  theme: defaultTokens
};
export const Input = styled.input.withConfig({
  displayName: "InputField__Input",
  componentId: "sc-4opay-6"
})(["appearance:none;font-family:inherit;border:none;padding:", ";font-size:inherit;color:inherit;background-color:transparent;cursor:inherit;flex:1 auto;width:100%;height:100%;line-height:", ";border-radius:", ";z-index:2;&:focus{outline:none;& ~ ", "{box-shadow:inset 0 0 0 ", ";}}&::placeholder{color:", ";opacity:1;}&:-ms-input-placeholder{color:", ";}&::-ms-input-placeholder{color:", ";}&::-ms-clear{display:none;}"], getToken(TOKENS.paddingInput), getToken(TOKENS.heightInput), ({
  theme
}) => theme.orbit.borderRadiusNormal, FakeInput, ({
  theme
}) => `${theme.orbit.borderWidthInputFocus} ${theme.orbit.borderColorInputFocus}`, ({
  theme
}) => theme.orbit.colorPlaceholderInput, ({
  theme
}) => theme.orbit.colorPlaceholderInput, ({
  theme
}) => theme.orbit.colorPlaceholderInput);
Input.defaultProps = {
  theme: defaultTokens
};

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
  } = props;
  return React.createElement(Field, {
    "data-test": dataTest
  }, 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
  })), React.createElement(Input, {
    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
  }), 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;