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

<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"

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 Label = styled.label.withConfig({
  displayName: "Select__Label"
})(["width:100%;"]);

const StyledSelect = styled(({ className, children, value, disabled, onChange, onFocus, onBlur }) => React.createElement(
  "select",
  {
    value: value,
    className: className,
    onChange: onChange,
    onFocus: onFocus,
    onBlur: onBlur,
    disabled: disabled
  },
  children
)).withConfig({
  displayName: "Select__StyledSelect"
})(["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;}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, ({ theme, size }) => size === SIZE_OPTIONS.SMALL ? theme.orbit.heightInputSmall : theme.orbit.heightInputNormal, ({ 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, ({ 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"
})(["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"
})(["display:flex;align-items:center;position:absolute;padding:", ";pointer-events:none;z-index:3;"], ({ theme }) => `0 ${theme.orbit.spaceSmall}`);

SelectPrefix.defaultProps = {
  theme: defaultTokens
};

const SelectSuffix = styled(({ children, className }) => React.createElement(
  "div",
  { className: className },
  children
)).withConfig({
  displayName: "Select__SelectSuffix"
})(["position:absolute;right:", ";color:", ";pointer-events:none;z-index:3;& > *{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
};

const Select = ({
  size = SIZE_OPTIONS.NORMAL,
  label,
  placeholder,
  value,
  disabled = false,
  error,
  help,
  onChange,
  onBlur,
  onFocus,
  options,
  dataTest,
  prefix
}) => {
  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 },
        prefix
      ),
      React.createElement(
        StyledSelect,
        {
          size: size,
          disabled: disabled,
          error: error,
          value: value,
          prefix: prefix,
          onFocus: onFocus,
          onBlur: onBlur,
          onChange: onChange,
          filled: filled
        },
        placeholder && React.createElement(
          "option",
          { label: placeholder, value: "", selected: true, disabled: true },
          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
    )
  );
};

export default Select;