@kiwicom/orbit-components/es/Select/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 FormLabel from "../FormLabel";
import ChevronDown from "../icons/ChevronDown";
import FormFeedback from "../FormFeedback";
import TYPE_OPTIONS from "../FormFeedback/consts";
import SIZE_OPTIONS from "./consts";

const getSelectSize = ({
  theme,
  size
}) => {
  const tokens = {
    [SIZE_OPTIONS.SMALL]: theme.orbit.heightInputSmall,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.heightInputNormal
  };
  return tokens[size];
};

const Label = styled.label.withConfig({
  displayName: "Select__Label",
  componentId: "sc-6agypz-0"
})(["position:relative;display:block;flex:1 1 100%;"]);
const StyledSelect = styled( // $FlowExpected
React.forwardRef(({
  className,
  children,
  value,
  disabled,
  name,
  onChange,
  onFocus,
  onBlur
}, ref) => React.createElement("select", {
  value: value,
  className: className,
  onChange: onChange,
  onFocus: onFocus,
  onBlur: onBlur,
  disabled: disabled,
  name: name,
  ref: ref
}, children))).withConfig({
  displayName: "Select__StyledSelect",
  componentId: "sc-6agypz-1"
})(["appearance:none;background:", ";border-radius:", ";cursor:pointer;color:", ";font-family:", ";font-size:", ";height:", ";padding:", ";outline:none;width:100%;transition:box-shadow ", " ease-in-out;z-index:2;&::-ms-expand{display:none;}&::-ms-value{background:transparent;color:", ";}padding-left:", ";border:0;box-shadow:inset 0 0 0 ", ";&:hover{box-shadow:inset 0 0 0 ", ";}&:focus{box-shadow:inset 0 0 0 ", ";}&:disabled{color:", ";background:", ";cursor:default;&:hover{box-shadow:inset 0 0 0 1px ", ";}}"], ({
  theme
}) => theme.orbit.backgroundInput, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme,
  filled
}) => filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput, ({
  theme
}) => theme.orbit.fontFamily, ({
  theme,
  size
}) => size === SIZE_OPTIONS.SMALL ? theme.orbit.fontSizeInputSmall : theme.orbit.fontSizeInputNormal, getSelectSize, ({
  theme,
  size
}) => size === SIZE_OPTIONS.SMALL ? `0 ${theme.orbit.spaceXLarge} 0 ${theme.orbit.spaceSmall}` : `0 ${theme.orbit.spaceXXLarge} 0 ${theme.orbit.spaceSmall}`, ({
  theme
}) => theme.orbit.durationFast, ({
  theme,
  filled
}) => filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput, ({
  prefix,
  theme
}) => prefix && theme.orbit.paddingLeftSelectPrefix, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`, ({
  theme
}) => `${theme.orbit.borderWidthInputFocus} ${theme.orbit.borderColorInputFocus}`, ({
  theme
}) => theme.orbit.colorTextInputDisabled, ({
  theme
}) => theme.orbit.backgroundInputDisabled, ({
  theme
}) => theme.orbit.borderColorInput);
StyledSelect.defaultProps = {
  theme: defaultTokens
};
export const SelectContainer = styled(({
  className,
  children
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "Select__SelectContainer",
  componentId: "sc-6agypz-2"
})(["position:relative;display:flex;align-items:center;background:", ";width:100%;box-sizing:border-box;cursor:pointer;"], ({
  theme
}) => theme.orbit.backgroundInput);
SelectContainer.defaultProps = {
  theme: defaultTokens
};
const SelectPrefix = styled(({
  className,
  children
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "Select__SelectPrefix",
  componentId: "sc-6agypz-3"
})(["display:flex;align-items:center;position:absolute;padding:", ";pointer-events:none;z-index:3;top:0;height:", ";"], ({
  theme
}) => `0 ${theme.orbit.spaceSmall}`, getSelectSize);
SelectPrefix.defaultProps = {
  theme: defaultTokens
};
const SelectSuffix = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "Select__SelectSuffix",
  componentId: "sc-6agypz-4"
})(["position:absolute;display:flex;justify-content:center;align-items:center;top:0;right:", ";color:", ";pointer-events:none;z-index:3;height:100%;& > *{width:", ";height:", ";margin-bottom:", ";}"], ({
  theme
}) => theme.orbit.spaceXSmall, ({
  theme,
  disabled
}) => disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, ({
  theme,
  size
}) => size === SIZE_OPTIONS.SMALL && theme.orbit.widthIconSmall, ({
  theme,
  size
}) => size === SIZE_OPTIONS.SMALL && theme.orbit.heightIconSmall, ({
  size,
  theme
}) => size === SIZE_OPTIONS.SMALL && theme.orbit.spaceXXXSmall);
SelectSuffix.defaultProps = {
  theme: defaultTokens
}; // $FlowExpected

const Select = React.forwardRef((props, ref) => {
  const {
    size = SIZE_OPTIONS.NORMAL,
    label,
    placeholder,
    value,
    disabled = false,
    error,
    help,
    name,
    onChange,
    onBlur,
    onFocus,
    options,
    dataTest,
    prefix
  } = props;
  const filled = !!value;
  return React.createElement(Label, {
    "data-test": dataTest
  }, label && React.createElement(FormLabel, {
    filled: filled,
    disabled: disabled
  }, label), React.createElement(SelectContainer, {
    disabled: disabled
  }, prefix && React.createElement(SelectPrefix, {
    prefix: prefix,
    size: size
  }, prefix), React.createElement(StyledSelect, {
    size: size,
    disabled: disabled,
    error: error,
    value: value || "",
    prefix: prefix,
    name: name,
    onFocus: onFocus,
    onBlur: onBlur,
    onChange: onChange,
    filled: filled,
    ref: ref
  }, placeholder && React.createElement("option", {
    label: placeholder,
    value: ""
  }, placeholder), options.map(option => React.createElement("option", {
    key: `option-${option.value}`,
    value: option.value,
    disabled: option.disabled
  }, option.label))), React.createElement(SelectSuffix, {
    size: size,
    disabled: disabled
  }, React.createElement(ChevronDown, null))), help && !error && React.createElement(FormFeedback, {
    type: TYPE_OPTIONS.HELP
  }, help), error && React.createElement(FormFeedback, {
    type: TYPE_OPTIONS.ERROR
  }, error));
}); // otherwise Unknown in storybook

Select.displayName = "Select";
export default Select;