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

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _invoke from "lodash/invoke";
import * as customPropTypes from '@fluentui/react-proptypes';
import { indicatorBehavior } from '@fluentui/accessibility';
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { getElementType, useUnhandledProps, useFluentContext, useStyles, useTelemetry } from '@fluentui/react-bindings';
import cx from 'classnames';
import { createShorthandFactory, commonPropTypes } from '../../utils';
import { Image } from '../Image/Image';
import { Box } from '../Box/Box';
export var dropdownItemClassName = 'ui-dropdown__item';
export 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.
 */
export var DropdownItem = /*#__PURE__*/function () {
  var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = 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 = 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 = getElementType(props);
    var unhandledProps = useUnhandledProps(DropdownItem.handledProps, props);
    var handleClick = function handleClick(e) {
      _invoke(props, 'onClick', e, props);
    };
    var contentElement = Box.create(content, {
      defaultProps: function defaultProps() {
        return {
          className: dropdownItemSlotClassNames.content,
          styles: resolvedStyles.content
        };
      }
    });
    var headerElement = Box.create(header, {
      defaultProps: function defaultProps() {
        return {
          className: dropdownItemSlotClassNames.header,
          styles: resolvedStyles.header
        };
      }
    });
    var endMediaElement = selected && checkable ? Box.create(checkableIndicator, {
      defaultProps: function defaultProps() {
        return {
          className: dropdownItemSlotClassNames.checkableIndicator,
          styles: resolvedStyles.checkableIndicator,
          accessibility: indicatorBehavior
        };
      }
    }) : null;
    var imageElement = Box.create(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, _extends({
      ref: ref,
      className: classes.root,
      onClick: handleClick
    }, accessibilityItemProps, unhandledProps), imageElement, /*#__PURE__*/React.createElement("div", {
      className: cx(dropdownItemSlotClassNames.main, classes.main)
    }, headerElement, contentElement), endMediaElement);
    setEnd();
    return element;
  });
  DropdownItem.displayName = 'DropdownItem';
  DropdownItem.defaultProps = {
    as: 'li',
    checkableIndicator: {}
  };
  DropdownItem.propTypes = Object.assign({}, 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 = createShorthandFactory({
    Component: DropdownItem,
    mappedProp: 'header'
  });
  return DropdownItem;
}();
//# sourceMappingURL=DropdownItem.js.map