vcc-ui/lib/components/select-input/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _reactFela = require("react-fela");

var _propTypes = require("prop-types");

var _block = require("../block");

var _spinner = require("../spinner");

var _getThemeStyle = require("../../get-theme-style");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var arrowColor = function arrowColor(_ref) {
  var theme = _ref.theme,
      disabled = _ref.disabled;
  return disabled ? theme.tokens.inputDisabledControl : theme.tokens.inputControl;
};

var styles = function styles(_ref2) {
  var disabled = _ref2.disabled,
      theme = _ref2.theme;
  return {
    appearance: "none",
    color: "#333",
    backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13 6' fill='".concat(encodeURIComponent(arrowColor({
      theme: theme,
      disabled: disabled
    })), "' %3E %3Cpath d='M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z'%3E %3C/path%3E %3C/svg%3E\")"),
    backgroundSize: "15px 15px",
    backgroundColor: theme.tokens.inputBackground,
    backgroundPosition: "right 18px center",
    backgroundRepeat: "no-repeat",
    userSelect: "none",
    overflow: "hidden",
    margin: "0",
    padding: "".concat(theme.tokens.inputPaddingVertical, "px ").concat(theme.tokens.inputPaddingHorizontal, "px"),
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    width: "100%",
    boxSizing: "border-box",
    borderRadius: 0,
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: theme.tokens.inputBorder,
    display: "block",
    fontSize: 16,
    fontWeight: 400,
    "[disabled]": {
      color: theme.tokens.inputDisabledForeground
    },
    "& option[disabled]": {
      color: theme.tokens.inputDisabledForeground
    },
    ":invalid": {
      color: theme.tokens.inputPlaceholder
    },
    ":focus:invalid": {
      color: theme.tokens.inputPlaceholder
    },
    "::-ms-expand": {
      display: "none"
    },
    "::-ms-value": {
      background: "none",
      color: "#333"
    },
    ":valid": {
      color: "#333"
    },
    "& option": {
      color: "#333"
    },
    ":-moz-focusring": {
      color: "transparent",
      textShadow: "0 0 0 #000"
    },
    outline: 0,
    cursor: disabled ? "not-allowed" : "pointer",
    ":focus": {
      borderColor: theme.tokens.inputBorderFocus
    }
  };
};

var isLoadingStyles = function isLoadingStyles() {
  return {
    background: "none",
    display: "flex",
    justifyContent: "center",
    width: "100%",
    padding: "15px 18px 14px 18px"
  };
};

var SelectInputComponent = function SelectInputComponent(_ref3) {
  var _ref3$as = _ref3.as,
      as = _ref3$as === void 0 ? "select" : _ref3$as,
      value = _ref3.value,
      placeholder = _ref3.placeholder,
      disabled = _ref3.disabled,
      options = _ref3.options,
      _ref3$loading = _ref3.loading,
      loading = _ref3$loading === void 0 ? false : _ref3$loading,
      props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options", "loading"]);

  var _useFela = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  if (loading) {
    return _react.default.createElement(_block.Block, {
      extend: [styles, isLoadingStyles, (0, _getThemeStyle.getThemeStyle)("selectInput", theme, {
        disabled: disabled
      })]
    }, _react.default.createElement(_spinner.Spinner, {
      size: 24
    }));
  }

  return _react.default.createElement(_block.Block, _extends({
    as: as,
    extend: [styles, (0, _getThemeStyle.getThemeStyle)("selectInput", theme, {
      disabled: disabled
    })],
    value: value || placeholder && "",
    required: true,
    disabled: disabled
  }, props), placeholder && _react.default.createElement(_block.Block, {
    as: "option",
    value: "",
    disabled: true,
    hidden: true
  }, placeholder), options.map(function (option) {
    return _react.default.createElement("option", {
      key: option.value,
      value: option.value,
      disabled: option.disabled
    }, option.label);
  }));
};

var propTypes = {
  onChange: _propTypes.func.isRequired,
  options: _propTypes.array.isRequired,
  placeholder: _propTypes.string,
  value: _propTypes.string,
  disabled: _propTypes.bool,
  loading: _propTypes.bool
};
SelectInputComponent.propTypes = propTypes;
SelectInputComponent.displayName = "SelectInput";
var SelectInput = (0, _reactFela.withTheme)(SelectInputComponent);
exports.SelectInput = SelectInput;