@fluentui/react-northstar/dist/es/components/Image/Image.js

A themable React component library.

import { imageBehavior } from '@fluentui/accessibility';
import { getElementType, useUnhandledProps, useAccessibility, useFluentContext, useStyles, useTelemetry } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes } from '../../utils';
export var imageClassName = 'ui-image';

/**
 * An Image is a graphic representation of something.
 *
 * @accessibility
 * If image should be visible to screen readers, textual representation needs to be provided in 'alt' property.
 *
 * Other considerations:
 *  - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph.
 *  - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior.
 *  - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
 */
export var Image = /*#__PURE__*/function () {
  var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(Image.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var accessibility = props.accessibility,
      alt = props.alt,
      ariaLabel = props['aria-label'],
      avatar = props.avatar,
      circular = props.circular,
      className = props.className,
      design = props.design,
      fluid = props.fluid,
      styles = props.styles,
      variables = props.variables;
    var getA11Props = useAccessibility(accessibility, {
      debugName: Image.displayName,
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          alt: alt,
          'aria-label': ariaLabel
        };
      },
      rtl: context.rtl
    });
    var _useStyles = useStyles(Image.displayName, {
        className: imageClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            avatar: avatar,
            circular: circular,
            fluid: fluid
          };
        },
        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(Image.handledProps, props);
    var result = /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
      className: classes.root,
      ref: ref
    }, unhandledProps)));
    setEnd();
    return result;
  });
  Image.displayName = 'Image';
  Image.defaultProps = {
    as: 'img',
    accessibility: imageBehavior
  };
  Image.propTypes = Object.assign({}, commonPropTypes.createCommon({
    children: false,
    content: false
  }), {
    avatar: PropTypes.bool,
    circular: PropTypes.bool,
    fluid: PropTypes.bool
  });
  Image.handledProps = Object.keys(Image.propTypes);
  Image.create = createShorthandFactory({
    Component: Image,
    mappedProp: 'src',
    allowsJSX: false
  });
  return Image;
}();
//# sourceMappingURL=Image.js.map