@fluentui/react-northstar/dist/es/components/Carousel/CarouselNavigation.js

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _map from "lodash/map";
import _invoke from "lodash/invoke";
import { tabListBehavior } from '@fluentui/accessibility';
import { useTelemetry, mergeVariablesOverrides, getElementType, useFluentContext, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import * as customPropTypes from '@fluentui/react-proptypes';
import { childrenExist, createShorthandFactory, commonPropTypes, rtlTextContainer } from '../../utils';
import { CarouselNavigationItem } from './CarouselNavigationItem';
export var carouselNavigationClassName = 'ui-carousel__navigation';

/**
 * A Carousel navigation helps switching between Carousel items.
 */
export var CarouselNavigation = /*#__PURE__*/function () {
  var CarouselNavigation = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(CarouselNavigation.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var accessibility = props.accessibility,
      variables = props.variables,
      children = props.children,
      className = props.className,
      design = props.design,
      activeIndex = props.activeIndex,
      iconOnly = props.iconOnly,
      items = props.items,
      primary = props.primary,
      secondary = props.secondary,
      vertical = props.vertical,
      thumbnails = props.thumbnails,
      styles = props.styles,
      disableClickableNav = props.disableClickableNav;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(CarouselNavigation.handledProps, props);
    var getA11yProps = useAccessibility(accessibility, {
      debugName: CarouselNavigation.displayName,
      rtl: context.rtl
    });
    var _useStyles = useStyles(CarouselNavigation.displayName, {
        className: carouselNavigationClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            activeIndex: activeIndex,
            iconOnly: iconOnly,
            primary: primary,
            vertical: vertical,
            thumbnails: thumbnails
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var handleItemOverrides = function handleItemOverrides(variables) {
      return function (predefinedProps) {
        return {
          onClick: function onClick(e, itemProps) {
            _invoke(props, 'onItemClick', e, itemProps);
            _invoke(predefinedProps, 'onClick', e, itemProps);
          },
          variables: mergeVariablesOverrides(variables, predefinedProps.variables)
        };
      };
    };
    var renderItems = function renderItems() {
      return _map(items, function (item, index) {
        return CarouselNavigationItem.create(item, {
          defaultProps: function defaultProps() {
            return getA11yProps('item', {
              active: index === activeIndex,
              iconOnly: iconOnly,
              index: index,
              primary: primary,
              secondary: secondary,
              vertical: vertical,
              thumbnails: thumbnails,
              disableClickableNav: disableClickableNav
            });
          },
          overrideProps: handleItemOverrides(variables)
        });
      });
    };
    var element = getA11yProps.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, _extends({}, getA11yProps('root', Object.assign({
      className: classes.root,
      ref: ref
    }, unhandledProps)), rtlTextContainer.getAttributes({
      forElements: [children]
    })), childrenExist(children) ? children : renderItems()));
    setEnd();
    return element;
  });
  CarouselNavigation.displayName = 'CarouselNavigation';
  CarouselNavigation.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: false
  }), {
    activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    iconOnly: PropTypes.bool,
    thumbnails: PropTypes.bool,
    items: customPropTypes.collectionShorthand,
    onItemClick: PropTypes.func,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    vertical: PropTypes.bool,
    disableClickableNav: PropTypes.bool
  });
  CarouselNavigation.defaultProps = {
    accessibility: tabListBehavior,
    as: 'ul'
  };
  CarouselNavigation.handledProps = Object.keys(CarouselNavigation.propTypes);
  CarouselNavigation.create = createShorthandFactory({
    Component: CarouselNavigation,
    mappedArrayProp: 'items'
  });
  return CarouselNavigation;
}();
//# sourceMappingURL=CarouselNavigation.js.map