@fluentui/react-northstar/dist/commonjs/components/Dropdown/DropdownItem.js

A themable React component library.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.dropdownItemSlotClassNames = exports.dropdownItemClassName = exports.DropdownItem = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var _accessibility = require("@fluentui/accessibility");
var React = _interopRequireWildcard(require("react"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var _reactBindings = require("@fluentui/react-bindings");
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../../utils");
var _Image = require("../Image/Image");
var _Box = require("../Box/Box");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var dropdownItemClassName = 'ui-dropdown__item';
exports.dropdownItemClassName = dropdownItemClassName;
var dropdownItemSlotClassNames = {
  main: dropdownItemClassName + "__main",
  content: dropdownItemClassName + "__content",
  header: dropdownItemClassName + "__header",
  image: dropdownItemClassName + "__image",
  checkableIndicator: dropdownItemClassName + "__checkable-indicator"
};

/**
 * A DropdownItem represents an option of Dropdown list.
 * Displays an item with optional rich media metadata.
 */
exports.dropdownItemSlotClassNames = dropdownItemSlotClassNames;
var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var context = (0, _reactBindings.useFluentContext)();
  var _useTelemetry = (0, _reactBindings.useTelemetry)(DropdownItem.displayName, context.telemetry),
    setStart = _useTelemetry.setStart,
    setEnd = _useTelemetry.setEnd;
  setStart();
  var active = props.active,
    accessibilityItemProps = props.accessibilityItemProps,
    className = props.className,
    content = props.content,
    design = props.design,
    header = props.header,
    image = props.image,
    isFromKeyboard = props.isFromKeyboard,
    styles = props.styles,
    checkable = props.checkable,
    checkableIndicator = props.checkableIndicator,
    selected = props.selected,
    variables = props.variables;
  var _useStyles = (0, _reactBindings.useStyles)(DropdownItem.displayName, {
      className: dropdownItemClassName,
      mapPropsToStyles: function mapPropsToStyles() {
        return {
          active: active,
          isFromKeyboard: isFromKeyboard,
          selected: selected,
          hasContent: !!content,
          hasHeader: !!header
        };
      },
      mapPropsToInlineStyles: function mapPropsToInlineStyles() {
        return {
          className: className,
          design: design,
          styles: styles,
          variables: variables
        };
      },
      rtl: context.rtl
    }),
    classes = _useStyles.classes,
    resolvedStyles = _useStyles.styles;
  var ElementType = (0, _reactBindings.getElementType)(props);
  var unhandledProps = (0, _reactBindings.useUnhandledProps)(DropdownItem.handledProps, props);
  var handleClick = function handleClick(e) {
    (0, _invoke2.default)(props, 'onClick', e, props);
  };
  var contentElement = _Box.Box.create(content, {
    defaultProps: function defaultProps() {
      return {
        className: dropdownItemSlotClassNames.content,
        styles: resolvedStyles.content
      };
    }
  });
  var headerElement = _Box.Box.create(header, {
    defaultProps: function defaultProps() {
      return {
        className: dropdownItemSlotClassNames.header,
        styles: resolvedStyles.header
      };
    }
  });
  var endMediaElement = selected && checkable ? _Box.Box.create(checkableIndicator, {
    defaultProps: function defaultProps() {
      return {
        className: dropdownItemSlotClassNames.checkableIndicator,
        styles: resolvedStyles.checkableIndicator,
        accessibility: _accessibility.indicatorBehavior
      };
    }
  }) : null;
  var imageElement = _Box.Box.create(_Image.Image.create(image, {
    defaultProps: function defaultProps() {
      return {
        avatar: true,
        className: dropdownItemSlotClassNames.image,
        styles: resolvedStyles.image
      };
    }
  }), {
    defaultProps: function defaultProps() {
      return {
        className: dropdownItemSlotClassNames.image,
        styles: resolvedStyles.media
      };
    }
  });
  var element = /*#__PURE__*/React.createElement(ElementType, (0, _extends2.default)({
    ref: ref,
    className: classes.root,
    onClick: handleClick
  }, accessibilityItemProps, unhandledProps), imageElement, /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames.default)(dropdownItemSlotClassNames.main, classes.main)
  }, headerElement, contentElement), endMediaElement);
  setEnd();
  return element;
});
exports.DropdownItem = DropdownItem;
DropdownItem.displayName = 'DropdownItem';
DropdownItem.defaultProps = {
  as: 'li',
  checkableIndicator: {}
};
DropdownItem.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
  accessibility: false,
  children: false,
  content: false
}), {
  accessibilityItemProps: PropTypes.object,
  active: PropTypes.bool,
  content: customPropTypes.itemShorthand,
  checkable: PropTypes.bool,
  checkableIndicator: customPropTypes.shorthandAllowingChildren,
  disabled: PropTypes.bool,
  header: customPropTypes.itemShorthand,
  image: customPropTypes.itemShorthandWithoutJSX,
  onClick: PropTypes.func,
  isFromKeyboard: PropTypes.bool,
  selected: PropTypes.bool
});
DropdownItem.handledProps = Object.keys(DropdownItem.propTypes);
DropdownItem.create = (0, _utils.createShorthandFactory)({
  Component: DropdownItem,
  mappedProp: 'header'
});
//# sourceMappingURL=DropdownItem.js.map