optimizely-oui/module/js/components/Dropdown/DropdownListItem/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 classNames from "classnames";
import PropTypes from "prop-types";
export default function DropdownListItem(_ref) {
  var children = _ref.children,
      className = _ref.className,
      hardSides = _ref.hardSides,
      hardTop = _ref.hardTop,
      ignoreToggle = _ref.ignoreToggle,
      removeBorderTop = _ref.removeBorderTop,
      role = _ref.role,
      props = _objectWithoutProperties(_ref, ["children", "className", "hardSides", "hardTop", "ignoreToggle", "removeBorderTop", "role"]);

  var classes = classNames({
    "hard--sides": hardSides,
    "hard--top": hardTop,
    "soft--sides": role === "separator",
    "oui-dropdown__item--separator": role === "separator",
    "oui-dropdown__item": true,
    "no-border": removeBorderTop
  }, className);

  function handleMouseDownCapture(event) {
    // Make the mousedown event a no-op for separators.
    // This prevents clicks on them from stealing focus.
    if (role === "separator") {
      event.preventDefault();
      event.stopPropagation();
    }
  }

  function handleOnClick(event) {
    if (role === "separator") {
      event.preventDefault();
      event.stopPropagation();
    } else if (ignoreToggle) {
      event.ignoreToggle = true;
      event.persist();
    }
  }

  return React.createElement("li", _extends({
    className: classes,
    onClick: handleOnClick,
    onMouseDownCapture: handleMouseDownCapture,
    role: role
  }, props), children);
}
DropdownListItem.propTypes = {
  /** Nodes to display within */
  children: PropTypes.node,

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

  /** Remove padding from sides */
  hardSides: PropTypes.bool,

  /** Remove padding from top */
  hardTop: PropTypes.bool,

  /** Instructs the Dropdown parent to ignore clicks for toggle purposes. */
  ignoreToggle: PropTypes.bool,

  /** Removes border if true */
  removeBorderTop: PropTypes.bool,

  /**
   * Aria role for this list item. See roles here:
   * https://www.w3.org/WAI/PF/aria/roles
   */
  role: PropTypes.string
};