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

A themable React component library.

import { loaderBehavior } from '@fluentui/accessibility';
import * as customPropTypes from '@fluentui/react-proptypes';
import { useTelemetry, useFluentContext, getElementType, useUnhandledProps, useStyles, useAccessibility } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes, getOrGenerateIdFromShorthand } from '../../utils';
import { Box } from '../Box/Box';
import { Text } from '../Text/Text';
export var loaderClassName = 'ui-loader';
export var loaderSlotClassNames = {
  indicator: loaderClassName + "__indicator",
  label: loaderClassName + "__label"
};
/**
 * A loader alerts a user that content is being loaded or processed and they should wait for the activity to complete.
 *
 * @accessibility
 * Implements [ARIA progressbar](https://www.w3.org/TR/wai-aria-1.1/#progressbar) role.
 */
export var Loader = /*#__PURE__*/function () {
  var Loader = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(Loader.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var delay = props.delay,
      secondary = props.secondary,
      label = props.label,
      indicator = props.indicator,
      inline = props.inline,
      labelPosition = props.labelPosition,
      className = props.className,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      size = props.size;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(Loader.handledProps, props);
    var delayTimer = React.useRef();
    var _React$useState = React.useState(props.delay === 0),
      visible = _React$useState[0],
      setVisible = _React$useState[1];
    var labelId = React.useRef();
    labelId.current = getOrGenerateIdFromShorthand('loader-label-', label, labelId.current);
    var _useStyles = useStyles(Loader.displayName, {
        className: loaderClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            inline: inline,
            labelPosition: labelPosition,
            size: size,
            secondary: secondary
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var getA11yProps = useAccessibility(props.accessibility, {
      debugName: Loader.displayName,
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          labelId: labelId.current
        };
      },
      rtl: context.rtl
    });
    React.useEffect(function () {
      if (delay > 0) {
        // @ts-ignore We have a collision between types from DOM and @types/node
        delayTimer.current = setTimeout(function () {
          setVisible(true);
        }, delay);
      }
      return function () {
        return clearTimeout(delayTimer.current);
      };
    }, [delay]);
    var svgElement = /*#__PURE__*/React.createElement("svg", {
      viewBox: "0 0 100 100",
      xmlns: "http://www.w3.org/2000/svg",
      className: classes.svg
    }, /*#__PURE__*/React.createElement("circle", {
      className: classes.svgTrack
    }), /*#__PURE__*/React.createElement("circle", {
      className: classes.svgTail
    }));
    var element = visible && /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
      className: classes.root,
      ref: ref
    }, unhandledProps)), Box.create(indicator, {
      defaultProps: function defaultProps() {
        return getA11yProps('indicator', {
          children: svgElement,
          className: loaderSlotClassNames.indicator,
          styles: resolvedStyles.indicator
        });
      }
    }), Text.create(label, {
      defaultProps: function defaultProps() {
        return getA11yProps('label', {
          className: loaderSlotClassNames.label,
          styles: resolvedStyles.label,
          id: labelId.current
        });
      }
    }));
    setEnd();
    return element;
  });
  Loader.displayName = 'Loader';
  Loader.propTypes = Object.assign({}, commonPropTypes.createCommon({
    children: false,
    content: false
  }), {
    delay: PropTypes.number,
    indicator: customPropTypes.itemShorthand,
    inline: PropTypes.bool,
    label: customPropTypes.itemShorthand,
    labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
    size: customPropTypes.size,
    svg: customPropTypes.itemShorthand,
    secondary: PropTypes.bool
  });
  Loader.defaultProps = {
    accessibility: loaderBehavior,
    delay: 0,
    indicator: {},
    labelPosition: 'below',
    svg: '',
    size: 'medium'
  };
  Loader.handledProps = Object.keys(Loader.propTypes);
  Loader.create = createShorthandFactory({
    Component: Loader,
    mappedProp: 'label'
  });
  Loader.shorthandConfig = {
    mappedProp: 'label'
  };
  return Loader;
}();
//# sourceMappingURL=Loader.js.map