@fluentui/react-northstar/dist/es/components/Chat/ChatItem.js

A themable React component library.

import { getElementType, useAccessibility, useFluentContext, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, commonPropTypes, createShorthandFactory, rtlTextContainer } from '../../utils';
import { Box } from '../Box/Box';
import { useChatContextSelectors } from './chatContext';
import { ChatItemContextProvider } from './chatItemContext';
export var chatItemClassName = 'ui-chat__item';
export var chatItemSlotClassNames = {
  message: chatItemClassName + "__message",
  gutter: chatItemClassName + "__gutter"
};
/**
 * A ChatItem is container for single entity in Chat (e.g. message, notification, etc).
 */
export var ChatItem = /*#__PURE__*/function () {
  var ChatItem = /*#__PURE__*/React.forwardRef(function (inputProps, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(ChatItem.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var chatProps = useChatContextSelectors({
      density: function density(v) {
        return v.density;
      },
      accessibility: function accessibility(v) {
        return v.behaviors.item;
      }
    });
    var props = Object.assign({}, chatProps, inputProps);
    var accessibility = props.accessibility,
      attached = props.attached,
      children = props.children,
      className = props.className,
      contentPosition = props.contentPosition,
      density = props.density,
      design = props.design,
      gutter = props.gutter,
      message = props.message,
      styles = props.styles,
      variables = props.variables,
      _props$unstable_layou = props.unstable_layout,
      layout = _props$unstable_layou === void 0 ? 'default' : _props$unstable_layou;
    var getA11Props = useAccessibility(accessibility, {
      debugName: ChatItem.displayName,
      rtl: context.rtl
    });
    var _useStyles = useStyles(ChatItem.displayName, {
        className: chatItemClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            layout: layout,
            attached: attached,
            contentPosition: contentPosition,
            density: density
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var renderContent = function renderContent() {
      var gutterElement = Box.create(gutter, {
        defaultProps: function defaultProps() {
          return getA11Props('gutter', {
            className: chatItemSlotClassNames.gutter,
            styles: resolvedStyles.gutter
          });
        }
      });
      var messageElement = Box.create(message, {
        defaultProps: function defaultProps() {
          return getA11Props('message', {
            className: chatItemSlotClassNames.message,
            styles: resolvedStyles.message
          });
        }
      });
      return /*#__PURE__*/React.createElement(ChatItemContextProvider, {
        value: {
          attached: attached
        }
      }, (contentPosition === 'start' || density === 'compact') && gutterElement, messageElement, contentPosition === 'end' && density === 'comfy' && gutterElement);
    };
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(ChatItem.handledProps, props);
    var element = /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
      className: classes.root,
      ref: ref
    }, rtlTextContainer.getAttributes({
      forElements: [children]
    }), unhandledProps)), childrenExist(children) ? children : renderContent());
    setEnd();
    return element;
  });
  ChatItem.displayName = 'ChatItem';
  ChatItem.defaultProps = {
    as: 'li',
    contentPosition: 'start',
    attached: false
  };
  ChatItem.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: false
  }), {
    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
    contentPosition: PropTypes.oneOf(['start', 'end']),
    density: PropTypes.oneOf(['comfy', 'compact']),
    gutter: customPropTypes.itemShorthand,
    message: customPropTypes.itemShorthand,
    unstable_layout: PropTypes.oneOf(['default', 'refresh'])
  });
  ChatItem.handledProps = Object.keys(ChatItem.propTypes);
  ChatItem.create = createShorthandFactory({
    Component: ChatItem,
    mappedProp: 'message'
  });
  return ChatItem;
}();
//# sourceMappingURL=ChatItem.js.map