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

Optimizely's Component Library.

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import PropTypes from "prop-types";
import React from "react";
import classNames from "classnames";
import Button from "../Button";
import Dropdown from "../Dropdown";
import Link from "../Link";

var SelectDropdown =
/*#__PURE__*/
function (_React$Component) {
  _inherits(SelectDropdown, _React$Component);

  function SelectDropdown() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, SelectDropdown);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SelectDropdown)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "renderActivator", function (_ref) {
      var _classNames;

      var buttonRef = _ref.buttonRef,
          onClick = _ref.onClick,
          onBlur = _ref.onBlur;
      var _this$props = _this.props,
          buttonContent = _this$props.buttonContent,
          buttonStyle = _this$props.buttonStyle,
          value = _this$props.value,
          width = _this$props.width,
          isRequired = _this$props.isRequired,
          label = _this$props.label,
          maxWidth = _this$props.maxWidth,
          note = _this$props.note,
          isDisabled = _this$props.isDisabled,
          initialPlaceholder = _this$props.initialPlaceholder,
          trackId = _this$props.trackId,
          testSection = _this$props.testSection;
      var selectedItem;

      _this.props.items.forEach(function (item) {
        if (item.value === value) {
          selectedItem = item;
        }
      });

      var outerClass = classNames((_classNames = {}, _defineProperty(_classNames, "oui-form-bad-news", _this.props.displayError), _defineProperty(_classNames, "oui-dropdown-group__activator", true), _classNames));
      var activatorLabel = "";

      if (selectedItem) {
        activatorLabel = selectedItem.activatorLabel || selectedItem.label;
      } else if (initialPlaceholder) {
        activatorLabel = initialPlaceholder;
      }

      return React.createElement("div", {
        style: {
          width: width,
          maxWidth: maxWidth
        },
        className: outerClass
      }, label && React.createElement("p", {
        className: "oui-label"
      }, label, isRequired && React.createElement("span", {
        className: "oui-label--required"
      })), React.createElement(Button, {
        title: activatorLabel,
        ariaHasPopup: true,
        isDisabled: isDisabled,
        style: buttonStyle,
        size: "narrow",
        testSection: testSection,
        width: "full",
        buttonRef: buttonRef,
        onClick: onClick,
        onBlur: onBlur
      }, React.createElement("div", {
        className: "flex flex-align--center",
        "data-track-id": trackId
      }, React.createElement("span", {
        className: "oui-dropdown-group__activator-label flex--1"
      }, buttonContent && buttonContent.label ? React.createElement("div", {
        className: "line--tight text--left push--right"
      }, React.createElement("div", {
        className: "micro muted"
      }, buttonContent.label, React.createElement("span", {
        className: "oui-assistive-text"
      }, ":")), React.createElement("div", null, buttonContent.content)) : activatorLabel), React.createElement("span", {
        className: "push--left oui-arrow-inline--down"
      }))), note && React.createElement("div", {
        className: "oui-form-note",
        "data-test-section": testSection && testSection + "-note"
      }, note));
    });

    _defineProperty(_assertThisInitialized(_this), "handleLinkClick", function (e) {
      e.stopPropagation();
    });

    _defineProperty(_assertThisInitialized(_this), "renderContents", function () {
      var _this$props2 = _this.props,
          buttonContent = _this$props2.buttonContent,
          isMultiSelect = _this$props2.isMultiSelect,
          items = _this$props2.items,
          label = _this$props2.label,
          onChange = _this$props2.onChange,
          value = _this$props2.value,
          minDropdownWidth = _this$props2.minDropdownWidth,
          dropdownDirection = _this$props2.dropdownDirection;
      return React.createElement(Dropdown.Contents, {
        minWidth: minDropdownWidth,
        direction: dropdownDirection,
        ariaLabel: buttonContent && buttonContent.label || label
      }, items.map(function (entry, index) {
        return React.createElement(Dropdown.ListItem, {
          key: entry.value
        }, React.createElement(Dropdown.BlockLink, {
          value: entry.value,
          onClick: onChange,
          isLink: entry.value !== value,
          isItemSelected: entry.isSelected,
          isMultiSelect: isMultiSelect,
          testSection: "dropdown-block-link-" + entry.value
        }, entry.label, entry.description && React.createElement("div", {
          className: "micro muted"
        }, entry.description)), entry.linkText && entry.linkURL && React.createElement("div", {
          className: "micro muted"
        }, React.createElement(Link, {
          title: entry.linkText,
          onClick: _this.handleLinkClick,
          newWindow: entry.linkNewWindow,
          href: entry.linkURL
        }, entry.linkText)));
      }));
    });

    return _this;
  }

  _createClass(SelectDropdown, [{
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          buttonContent = _this$props3.buttonContent,
          buttonStyle = _this$props3.buttonStyle,
          className = _this$props3.className,
          displayError = _this$props3.displayError,
          dropdownDirection = _this$props3.dropdownDirection,
          fullWidth = _this$props3.fullWidth,
          initialPlaceholder = _this$props3.initialPlaceholder,
          isDisabled = _this$props3.isDisabled,
          isMultiSelect = _this$props3.isMultiSelect,
          isRequired = _this$props3.isRequired,
          items = _this$props3.items,
          label = _this$props3.label,
          maxWidth = _this$props3.maxWidth,
          minDropdownWidth = _this$props3.minDropdownWidth,
          note = _this$props3.note,
          onChange = _this$props3.onChange,
          placement = _this$props3.placement,
          testSection = _this$props3.testSection,
          trackId = _this$props3.trackId,
          value = _this$props3.value,
          width = _this$props3.width,
          zIndex = _this$props3.zIndex,
          props = _objectWithoutProperties(_this$props3, ["buttonContent", "buttonStyle", "className", "displayError", "dropdownDirection", "fullWidth", "initialPlaceholder", "isDisabled", "isMultiSelect", "isRequired", "items", "label", "maxWidth", "minDropdownWidth", "note", "onChange", "placement", "testSection", "trackId", "value", "width", "zIndex"]);

      return React.createElement(Dropdown, _extends({}, zIndex ? {
        zIndex: zIndex
      } : {}, {
        className: className,
        placement: placement,
        isDisabled: isDisabled,
        fullWidth: fullWidth,
        renderActivator: this.renderActivator,
        shouldHideChildrenOnClick: !isMultiSelect
      }, props), this.renderContents());
    }
  }]);

  return SelectDropdown;
}(React.Component);

_defineProperty(SelectDropdown, "propTypes", {
  /**
   * Button text object with label and content value
   * When this prop is defined, value and initialPlaceholder
   * are not used.
   */
  buttonContent: PropTypes.shape({
    label: PropTypes.string,
    content: PropTypes.string
  }),

  /**
   * Style value that is passed to the OUI button that controls the dropdown.
   */
  buttonStyle: PropTypes.string,

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

  /**
   * Show error by default.
   */
  displayError: PropTypes.bool,

  /**
   * Dropdown direction.
   */
  dropdownDirection: PropTypes.oneOf(["right", "left", "up"]),

  /**
   * Should activator and dropdown be full width of container
   */
  fullWidth: PropTypes.bool,

  /**
   * An initial value for the dropdown before anything is selected
   */
  initialPlaceholder: PropTypes.node,

  /**
   * The select is greyed out if it is disabled.
   */
  isDisabled: PropTypes.bool,

  /**
   * Whether this dropdown supports Multi Select
   * If true, automatically sets shouldHideChildrenOnClick to false
   */
  isMultiSelect: PropTypes.bool,

  /**
   * Whether this dropdown is required
   * Only applies if "label" prop is supplied
   */
  isRequired: PropTypes.bool,

  /**
   * Dropdown items that can be selected from the select dropdown.
   */
  items: PropTypes.arrayOf(PropTypes.shape({
    activatorLabel: PropTypes.node,
    description: PropTypes.string,
    isSelected: PropTypes.bool,
    label: PropTypes.node.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
    linkNewWindow: PropTypes.bool,
    linkText: PropTypes.string,
    linkURL: PropTypes.string
  })).isRequired,

  /**
   * Label to use above the activator
   */
  label: PropTypes.string,

  /**
   * Max width of the activator container.
   */
  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /**
   * The minimum width of the dropdown list; any valid CSS width value.
   */
  minDropdownWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /**
   * Note to use below the activator
   */
  note: PropTypes.string,

  /**
   * Function that is called when user selects
   * an item from dropdown list.
   */
  onChange: PropTypes.func.isRequired,

  /** Control the placement of the dropdown */
  placement: PropTypes.oneOf(["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),

  /**
   * Identifier used to create data-test-section attributes for testing.
   */
  testSection: PropTypes.string,

  /**
   * Identifier used to create data-track-id attributes for Heap testing.
   */
  trackId: PropTypes.string,

  /**
   * Value of currently selected item.
   */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),

  /**
   * Width of the activator container.
   */
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /**
   * zIndex of dropdown group
   */
  zIndex: PropTypes.number
});

_defineProperty(SelectDropdown, "defaultProps", {
  buttonStyle: "outline",
  initialPlaceholder: "",
  displayError: false,
  dropdownDirection: "right",
  fullWidth: false,
  width: "100%",
  trackId: "",
  testSection: "",
  value: ""
});

export default SelectDropdown;