@kiwicom/orbit-components
Version:
<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"
197 lines (175 loc) • 7.8 kB
JavaScript
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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"
})(["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"
})(["width:100%;position:absolute;z-index:1;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"
})(["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"
})(["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
};
const Prefix = styled(({ children, className }) => React.createElement(
"div",
{ className: className },
children
)).withConfig({
displayName: "InputField__Prefix"
})(["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"
})(["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
};
const Input = styled((_ref) => {
let { theme, size, suffix, error, help } = _ref,
props = _objectWithoutProperties(_ref, ["theme", "size", "suffix", "error", "help"]);
return React.createElement("input", props);
}).withConfig({
displayName: "InputField__Input"
})(["appearance:none;font-family:inherit;border:none;padding:0 0 ", ";font-size:inherit;color:inherit;background-color:inherit;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:", ";}"], 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);
export { Input };
Input.defaultProps = {
theme: defaultTokens
};
const FormLabel = ({
label,
isFilled,
required
}) => React.createElement(
DefaultFormLabel,
{ filled: isFilled, required: required },
label
);
const InputField = ({
disabled,
size = SIZE_OPTIONS.NORMAL,
type = TYPE_OPTIONS.TEXT,
label,
inlineLabel,
dataTest,
required,
error,
name,
prefix,
onChange,
onFocus,
onBlur,
placeholder,
minValue,
maxValue,
minLength,
maxLength,
suffix,
help,
value
}) => 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
),
inlineLabel && React.createElement(
StyledInlineLabel,
{ size: size },
React.createElement(FormLabel, { label: label, isFilled: !!value, required: required })
),
React.createElement(Input, {
onChange: onChange,
onFocus: onFocus,
onBlur: onBlur,
name: name,
type: type,
value: value,
placeholder: placeholder,
disabled: disabled,
min: minValue,
max: maxValue,
minLength: minLength,
maxLength: maxLength,
size: size,
error: error
}),
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
)
);
export default InputField;