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

var _deprecate = require("../../deprecate");

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 loading = _ref2.loading,
      disabled = _ref2.disabled,
      theme = _ref2.theme,
      isValid = _ref2.isValid;
  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: isValid ? theme.tokens.inputBorder : theme.color.foreground.alert,
    display: 'block',
    ':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: theme.tokens.inputForeground
    },
    ':valid': {
      color: theme.tokens.inputForeground
    },
    '& option': {
      color: theme.tokens.inputForeground
    },
    ':-moz-focusring': {
      color: 'transparent',
      textShadow: '0 0 0 #000'
    },
    outline: 0,
    cursor: disabled ? 'not-allowed' : 'pointer',
    ':focus': {
      borderColor: theme.tokens.inputBorderFocus
    },
    extend: [{
      condition: loading,
      style: {
        backgroundImage: 'none',
        display: 'flex',
        justifyContent: 'center',
        width: '100%'
      }
    }]
  };
};

var SelectInput = _react.default.forwardRef(function (_ref3, ref) {
  var children = _ref3.children,
      value = _ref3.value,
      placeholder = _ref3.placeholder,
      disabled = _ref3.disabled,
      options = _ref3.options,
      _ref3$isValid = _ref3.isValid,
      isValid = _ref3$isValid === void 0 ? true : _ref3$isValid,
      _ref3$loading = _ref3.loading,
      loading = _ref3$loading === void 0 ? false : _ref3$loading,
      props = _objectWithoutProperties(_ref3, ["children", "value", "placeholder", "disabled", "options", "isValid", "loading"]);

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

  var renderOptions = function renderOptions(options) {
    return options.map(function (option) {
      return _react.default.createElement("option", {
        key: option.value,
        value: option.value,
        disabled: option.disabled
      }, option.label);
    });
  };

  var renderOptGroups = function renderOptGroups(options) {
    return Object.keys(options).map(function (name) {
      return _react.default.createElement("optgroup", {
        label: name,
        key: name
      }, renderOptions(options[name]));
    });
  }; // TODO: remove in 2.0.0


  (0, _deprecate.deprecate)('The `options` prop on has been deprecated in favor of passing children. It will be removed with version 2.0.0.', !!options);

  if (loading) {
    return _react.default.createElement(_block.Block, {
      ref: ref,
      extend: [styles({
        loading: loading,
        disabled: disabled,
        theme: theme,
        isValid: isValid
      }), (0, _getThemeStyle.getThemeStyle)('selectInput', theme, {
        disabled: disabled
      })]
    }, _react.default.createElement(_spinner.Spinner, {
      color: theme.tokens.inputForeground,
      size: 27
    }));
  }

  return _react.default.createElement(_block.Block, _extends({
    ref: ref,
    as: "select",
    extend: [styles({
      loading: loading,
      disabled: disabled,
      theme: theme,
      isValid: isValid
    }), (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), children ? children : Array.isArray(options) ? renderOptions(options) : renderOptGroups(options));
});

exports.SelectInput = SelectInput;
SelectInput.propTypes = {
  onChange: _propTypes.func.isRequired,
  options: (0, _propTypes.oneOfType)([_propTypes.array, _propTypes.object]),
  placeholder: _propTypes.string,
  value: _propTypes.string,
  disabled: _propTypes.bool,
  loading: _propTypes.bool,
  children: _propTypes.node,
  isValid: _propTypes.bool
};
SelectInput.displayName = 'SelectInput';