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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SelectContainer = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

var _FormLabel = _interopRequireDefault(require("../FormLabel"));

var _ChevronDown = _interopRequireDefault(require("../icons/ChevronDown"));

var _FormFeedback = _interopRequireDefault(require("../FormFeedback"));

var _consts = _interopRequireDefault(require("../FormFeedback/consts"));

var _consts2 = _interopRequireDefault(require("./consts"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getSelectSize = function getSelectSize(_ref) {
  var _tokens;

  var theme = _ref.theme,
      size = _ref.size;
  var tokens = (_tokens = {}, _defineProperty(_tokens, _consts2.default.SMALL, theme.orbit.heightInputSmall), _defineProperty(_tokens, _consts2.default.NORMAL, theme.orbit.heightInputNormal), _tokens);
  return tokens[size];
};

var Label = _styledComponents.default.label.withConfig({
  displayName: "Select__Label",
  componentId: "sc-6agypz-0"
})(["position:relative;display:block;flex:1 1 100%;"]);

var StyledSelect = (0, _styledComponents.default)( // $FlowExpected
React.forwardRef(function (_ref2, ref) {
  var className = _ref2.className,
      children = _ref2.children,
      value = _ref2.value,
      disabled = _ref2.disabled,
      name = _ref2.name,
      onChange = _ref2.onChange,
      onFocus = _ref2.onFocus,
      onBlur = _ref2.onBlur;
  return 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 ", ";}}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.backgroundInput;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme,
      filled = _ref5.filled;
  return filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.fontFamily;
}, function (_ref7) {
  var theme = _ref7.theme,
      size = _ref7.size;
  return size === _consts2.default.SMALL ? theme.orbit.fontSizeInputSmall : theme.orbit.fontSizeInputNormal;
}, getSelectSize, function (_ref8) {
  var theme = _ref8.theme,
      size = _ref8.size;
  return size === _consts2.default.SMALL ? "0 ".concat(theme.orbit.spaceXLarge, " 0 ").concat(theme.orbit.spaceSmall) : "0 ".concat(theme.orbit.spaceXXLarge, " 0 ").concat(theme.orbit.spaceSmall);
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.durationFast;
}, function (_ref10) {
  var theme = _ref10.theme,
      filled = _ref10.filled;
  return filled ? theme.orbit.colorTextInput : theme.orbit.colorPlaceholderInput;
}, function (_ref11) {
  var prefix = _ref11.prefix,
      theme = _ref11.theme;
  return prefix && theme.orbit.paddingLeftSelectPrefix;
}, function (_ref12) {
  var theme = _ref12.theme,
      error = _ref12.error;
  return "".concat(theme.orbit.borderWidthInput, " ").concat(error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput);
}, function (_ref13) {
  var theme = _ref13.theme,
      error = _ref13.error;
  return "".concat(theme.orbit.borderWidthInput, " ").concat(error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover);
}, function (_ref14) {
  var theme = _ref14.theme;
  return "".concat(theme.orbit.borderWidthInputFocus, " ").concat(theme.orbit.borderColorInputFocus);
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.colorTextInputDisabled;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.backgroundInputDisabled;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.borderColorInput;
});
StyledSelect.defaultProps = {
  theme: _defaultTokens.default
};
var SelectContainer = (0, _styledComponents.default)(function (_ref18) {
  var className = _ref18.className,
      children = _ref18.children;
  return 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;"], function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.backgroundInput;
});
exports.SelectContainer = SelectContainer;
SelectContainer.defaultProps = {
  theme: _defaultTokens.default
};
var SelectPrefix = (0, _styledComponents.default)(function (_ref20) {
  var className = _ref20.className,
      children = _ref20.children;
  return 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:", ";"], function (_ref21) {
  var theme = _ref21.theme;
  return "0 ".concat(theme.orbit.spaceSmall);
}, getSelectSize);
SelectPrefix.defaultProps = {
  theme: _defaultTokens.default
};
var SelectSuffix = (0, _styledComponents.default)(function (_ref22) {
  var children = _ref22.children,
      className = _ref22.className;
  return 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:", ";}"], function (_ref23) {
  var theme = _ref23.theme;
  return theme.orbit.spaceXSmall;
}, function (_ref24) {
  var theme = _ref24.theme,
      disabled = _ref24.disabled;
  return disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput;
}, function (_ref25) {
  var theme = _ref25.theme,
      size = _ref25.size;
  return size === _consts2.default.SMALL && theme.orbit.widthIconSmall;
}, function (_ref26) {
  var theme = _ref26.theme,
      size = _ref26.size;
  return size === _consts2.default.SMALL && theme.orbit.heightIconSmall;
}, function (_ref27) {
  var size = _ref27.size,
      theme = _ref27.theme;
  return size === _consts2.default.SMALL && theme.orbit.spaceXXXSmall;
});
SelectSuffix.defaultProps = {
  theme: _defaultTokens.default
}; // $FlowExpected

var Select = React.forwardRef(function (props, ref) {
  var _props$size = props.size,
      size = _props$size === void 0 ? _consts2.default.NORMAL : _props$size,
      label = props.label,
      placeholder = props.placeholder,
      value = props.value,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      error = props.error,
      help = props.help,
      name = props.name,
      onChange = props.onChange,
      onBlur = props.onBlur,
      onFocus = props.onFocus,
      options = props.options,
      dataTest = props.dataTest,
      prefix = props.prefix;
  var filled = !!value;
  return React.createElement(Label, {
    "data-test": dataTest
  }, label && React.createElement(_FormLabel.default, {
    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(function (option) {
    return React.createElement("option", {
      key: "option-".concat(option.value),
      value: option.value,
      disabled: option.disabled
    }, option.label);
  })), React.createElement(SelectSuffix, {
    size: size,
    disabled: disabled
  }, React.createElement(_ChevronDown.default, null))), help && !error && React.createElement(_FormFeedback.default, {
    type: _consts.default.HELP
  }, help), error && React.createElement(_FormFeedback.default, {
    type: _consts.default.ERROR
  }, error));
}); // otherwise Unknown in storybook

Select.displayName = "Select";
var _default = Select;
exports.default = _default;