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

Optimizely's Component Library.

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

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import Label from "../Label";
/**
 * 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.createElement("select", _extends({
    "data-oui-component": true,
    "data-test-section": testSection,
    disabled: isDisabled,
    required: isRequired,
    name: name,
    id: id,
    className: classNames("oui-select", {
      "width--1-1": isFullWidth
    }, className),
    onChange: onChange
  }, props), isRequired && React.createElement("option", {
    value: ""
  }, "Please select an option"), children);

  if (label) {
    return React.createElement("div", {
      "data-oui-component": true,
      className: classNames({
        "oui-form-bad-news": displayError
      })
    }, React.createElement(Label, {
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderSelect, note && React.createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + "-note"
    }, note));
  }

  return renderSelect;
};

Select.propTypes = {
  /** options elements */
  children: PropTypes.node,

  /** CSS class names. */
  className: PropTypes.string,

  /** Whether or not this Select should be in an error state */
  displayError: PropTypes.bool,

  /** Select ID */
  id: PropTypes.string,

  /** Boolean for when Select is disabled */
  isDisabled: PropTypes.bool,

  /** Boolean to make Select take up 100% width of container */
  isFullWidth: PropTypes.bool,

  /** Boolean to indicate this Select is optional */
  isOptional: PropTypes.bool,

  /** Boolean to indicate this Select is required */
  isRequired: PropTypes.bool,

  /** The label for the Select */
  label: PropTypes.string,

  /** Select name */
  name: PropTypes.string,

  /** Message to show underneath the Select */
  note: PropTypes.string,

  /** Function that fires when value of the select changes */
  onChange: PropTypes.func,

  /** Hook for automated JavaScript tests */
  testSection: PropTypes.string
};
Select.displayName = "Select";
export default Select;