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 _propTypes = require("prop-types");

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

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 = "cornflowerblue";

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

  return _react.default.createElement(_block.Block, _extends({
    as: as,
    extend: {
      appearance: "none",
      color: "#333",
      background: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13 6' fill='".concat(arrowColor, "'%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\") no-repeat right 18px center"),
      backgroundSize: "15px 15px",
      userSelect: "none",
      overflow: "hidden",
      margin: "0",
      padding: "18px 18px",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      width: "100%",
      boxSizing: "border-box",
      borderRadius: 0,
      border: "1px solid #f0f0f0",
      display: "block",
      fontSize: 15,
      backgroundColor: "white",
      cursor: "pointer",
      fontFamily: "Volvo Novum Regular, sans-serif",
      "& option[disabled]": {
        color: "#aaa"
      },
      ":invalid": {
        color: "#aaa"
      },
      ":focus:invalid": {
        color: "#aaa"
      },
      "::-ms-expand": {
        display: "none"
      },
      "::-ms-value": {
        background: "none",
        color: "#333"
      },
      ":valid": {
        color: "#333"
      },
      "& option": {
        color: "#333"
      },
      ":hover": {
        border: "1px solid #e1e1e1"
      },
      ":-moz-focusring": {
        color: "transparent",
        textShadow: "0 0 0 #000"
      }
    },
    value: value || placeholder && "",
    required: true
  }, 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
};
SelectInputComponent.propTypes = propTypes;
SelectInputComponent.displayName = "SelectInput";
var SelectInput = SelectInputComponent;
exports.SelectInput = SelectInput;