@fluentui/react-northstar/dist/es/components/List/ListItem.js

A themable React component library.

import _invoke from "lodash/invoke";
import { listItemBehavior } from '@fluentui/accessibility';
import { getElementType, useUnhandledProps, useAccessibility, useFluentContext, useStyles, useTelemetry, useContextSelectors } from '@fluentui/react-bindings';
import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes, createShorthand } from '../../utils';
import { ListContext } from './listContext';
import { ListItemContent } from './ListItemContent';
import { ListItemContentMedia } from './ListItemContentMedia';
import { ListItemEndMedia } from './ListItemEndMedia';
import { ListItemHeader } from './ListItemHeader';
import { ListItemHeaderMedia } from './ListItemHeaderMedia';
import { ListItemMedia } from './ListItemMedia';
export var listItemClassName = 'ui-list__item';
export var listItemSlotClassNames = {
  headerWrapper: listItemClassName + "__headerWrapper",
  main: listItemClassName + "__main",
  contentWrapper: listItemClassName + "__contentWrapper"
};

/**
 * A ListItem contains a single piece of content within a List.
 */
export var ListItem = /*#__PURE__*/function () {
  var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(ListItem.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var accessibility = props.accessibility,
      className = props.className,
      content = props.content,
      contentMedia = props.contentMedia,
      design = props.design,
      endMedia = props.endMedia,
      header = props.header,
      important = props.important,
      headerMedia = props.headerMedia,
      media = props.media,
      styles = props.styles;
    var parentProps = useContextSelectors(ListContext, {
      debug: function debug(v) {
        return v.debug;
      },
      navigable: function navigable(v) {
        return v.navigable;
      },
      selectable: function selectable(v) {
        return v.selectable;
      },
      truncateContent: function truncateContent(v) {
        return v.truncateContent;
      },
      truncateHeader: function truncateHeader(v) {
        return v.truncateHeader;
      },
      variables: function variables(v) {
        return v.variables;
      },
      onItemClick: function onItemClick(v) {
        return v.onItemClick;
      },
      selected: function selected(v) {
        return v.selectedIndex === props.index;
      }
    });
    var _props$debug = props.debug,
      debug = _props$debug === void 0 ? parentProps.debug : _props$debug,
      _props$navigable = props.navigable,
      navigable = _props$navigable === void 0 ? parentProps.navigable : _props$navigable,
      _props$selectable = props.selectable,
      selectable = _props$selectable === void 0 ? parentProps.selectable : _props$selectable,
      _props$selected = props.selected,
      selected = _props$selected === void 0 ? parentProps.selected : _props$selected,
      _props$truncateConten = props.truncateContent,
      truncateContent = _props$truncateConten === void 0 ? parentProps.truncateContent : _props$truncateConten,
      _props$truncateHeader = props.truncateHeader,
      truncateHeader = _props$truncateHeader === void 0 ? parentProps.truncateHeader : _props$truncateHeader,
      _props$variables = props.variables,
      variables = _props$variables === void 0 ? parentProps.variables : _props$variables;
    var getA11Props = useAccessibility(accessibility, {
      debugName: ListItem.displayName,
      actionHandlers: {
        performClick: function performClick(e) {
          e.preventDefault();
          handleClick(e);
        }
      },
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          navigable: navigable,
          selectable: selectable,
          selected: selected
        };
      },
      rtl: context.rtl
    });
    var _useStyles = useStyles(ListItem.displayName, {
        className: listItemClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            debug: debug,
            navigable: navigable,
            important: important,
            selectable: selectable,
            selected: selected
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(ListItem.handledProps, props);
    var handleClick = function handleClick(e) {
      _invoke(props, 'onClick', e, props);
      parentProps.onItemClick(e, props.index);
    };
    var contentElement = createShorthand(ListItemContent, content, {
      defaultProps: function defaultProps() {
        return {
          hasContentMedia: !!contentMedia,
          hasHeader: !!header,
          truncate: truncateContent
        };
      }
    });
    var contentMediaElement = createShorthand(ListItemContentMedia, contentMedia);
    var headerElement = createShorthand(ListItemHeader, header, {
      defaultProps: function defaultProps() {
        return {
          hasContent: !!content,
          hasHeaderMedia: !!headerMedia,
          truncate: truncateHeader
        };
      }
    });
    var headerMediaElement = createShorthand(ListItemHeaderMedia, headerMedia);
    var endMediaElement = createShorthand(ListItemEndMedia, endMedia, {
      defaultProps: function defaultProps() {
        return {
          navigable: navigable,
          selectable: selectable
        };
      }
    });
    var mediaElement = createShorthand(ListItemMedia, media, {
      defaultProps: function defaultProps() {
        return {
          hasContent: !!content,
          hasHeader: !!header,
          important: important
        };
      }
    });
    var element = getA11Props.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
      className: classes.root,
      onClick: handleClick
    }, unhandledProps, {
      ref: ref
    })), mediaElement, /*#__PURE__*/React.createElement("div", {
      className: cx(listItemSlotClassNames.main, classes.main)
    }, (headerElement || headerMediaElement) && /*#__PURE__*/React.createElement("div", {
      className: cx(listItemSlotClassNames.headerWrapper, classes.headerWrapper)
    }, headerElement, headerMediaElement), (contentElement || contentMediaElement) && /*#__PURE__*/React.createElement("div", {
      className: cx(listItemSlotClassNames.contentWrapper, classes.contentWrapper)
    }, contentElement, contentMediaElement)), endMediaElement));
    setEnd();
    return element;
  });
  ListItem.displayName = 'ListItem';
  ListItem.defaultProps = {
    as: 'li',
    accessibility: listItemBehavior
  };
  ListItem.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: false
  }), {
    contentMedia: PropTypes.any,
    content: PropTypes.any,
    debug: PropTypes.bool,
    header: PropTypes.any,
    endMedia: PropTypes.any,
    headerMedia: PropTypes.any,
    important: PropTypes.bool,
    media: PropTypes.any,
    selectable: PropTypes.bool,
    navigable: PropTypes.bool,
    index: PropTypes.number,
    selected: PropTypes.bool,
    truncateContent: PropTypes.bool,
    truncateHeader: PropTypes.bool,
    onClick: PropTypes.func
  });
  ListItem.handledProps = Object.keys(ListItem.propTypes);
  ListItem.create = createShorthandFactory({
    Component: ListItem,
    mappedProp: 'content'
  });
  return ListItem;
}();
//# sourceMappingURL=ListItem.js.map