optimizely-oui/dist/js/components/Select/index.js

Optimizely's Component Library.

"use strict";

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _Label = _interopRequireDefault(require("../Label"));

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; }

/**
 * Generates an <select> element
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */
var Select = function Select(_ref) {
  var children = _ref.children,
      className = _ref.className,
      displayError = _ref.displayError,
      id = _ref.id,
      isDisabled = _ref.isDisabled,
      isFullWidth = _ref.isFullWidth,
      isOptional = _ref.isOptional,
      isRequired = _ref.isRequired,
      label = _ref.label,
      onChange = _ref.onChange,
      name = _ref.name,
      note = _ref.note,
      testSection = _ref.testSection,
      props = _objectWithoutProperties(_ref, ["children", "className", "displayError", "id", "isDisabled", "isFullWidth", "isOptional", "isRequired", "label", "onChange", "name", "note", "testSection"]);

  var renderSelect = _react["default"].createElement("select", _extends({
    "data-oui-component": true,
    "data-test-section": testSection,
    disabled: isDisabled,
    required: isRequired,
    name: name,
    id: id,
    className: (0, _classnames["default"])("oui-select", {
      "width--1-1": isFullWidth
    }, className),
    onChange: onChange
  }, props), isRequired && _react["default"].createElement("option", {
    value: ""
  }, "Please select an option"), children);

  if (label) {
    return _react["default"].createElement("div", {
      "data-oui-component": true,
      className: (0, _classnames["default"])({
        "oui-form-bad-news": displayError
      })
    }, _react["default"].createElement(_Label["default"], {
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderSelect, note && _react["default"].createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + "-note"
    }, note));
  }

  return renderSelect;
};

Select.propTypes = {
  /** options elements */
  children: _propTypes["default"].node,

  /** CSS class names. */
  className: _propTypes["default"].string,

  /** Whether or not this Select should be in an error state */
  displayError: _propTypes["default"].bool,

  /** Select ID */
  id: _propTypes["default"].string,

  /** Boolean for when Select is disabled */
  isDisabled: _propTypes["default"].bool,

  /** Boolean to make Select take up 100% width of container */
  isFullWidth: _propTypes["default"].bool,

  /** Boolean to indicate this Select is optional */
  isOptional: _propTypes["default"].bool,

  /** Boolean to indicate this Select is required */
  isRequired: _propTypes["default"].bool,

  /** The label for the Select */
  label: _propTypes["default"].string,

  /** Select name */
  name: _propTypes["default"].string,

  /** Message to show underneath the Select */
  note: _propTypes["default"].string,

  /** Function that fires when value of the select changes */
  onChange: _propTypes["default"].func,

  /** Hook for automated JavaScript tests */
  testSection: _propTypes["default"].string
};
Select.displayName = "Select";
var _default = Select;
exports["default"] = _default;