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

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _invoke from "lodash/invoke";
import * as PropTypes from 'prop-types';
import * as React from 'react';
import * as customPropTypes from '@fluentui/react-proptypes';
import { tabBehavior } from '@fluentui/accessibility';
import { childrenExist, createShorthandFactory, commonPropTypes, rtlTextContainer } from '../../utils';
import { Box } from '../Box/Box';
import { useTelemetry, getElementType, useFluentContext, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings';
export var carouselNavigationItemClassName = 'ui-carousel__navigationitem';
export var carouselNavigationItemSlotClassNames = {
  indicator: carouselNavigationItemClassName + "__indicator",
  content: carouselNavigationItemClassName + "__content"
};

/**
 * A CarouselItem is an actionable item within a Carousel.
 */
export var CarouselNavigationItem = /*#__PURE__*/function () {
  var CarouselNavigationItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(CarouselNavigationItem.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var children = props.children,
      thumbnails = props.thumbnails,
      vertical = props.vertical,
      active = props.active,
      content = props.content,
      iconOnly = props.iconOnly,
      primary = props.primary,
      indicator = props.indicator,
      className = props.className,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      disableClickableNav = props.disableClickableNav;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(CarouselNavigationItem.handledProps, props);
    var getA11yProps = useAccessibility(props.accessibility, {
      debugName: CarouselNavigationItem.displayName,
      actionHandlers: {
        performClick: function performClick(event) {
          return !event.defaultPrevented && handleClick(event);
        }
      },
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          active: active
        };
      }
    });
    var _useStyles = useStyles(CarouselNavigationItem.displayName, {
        className: carouselNavigationItemClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            thumbnails: thumbnails,
            vertical: vertical,
            active: active,
            hasContent: !!content,
            iconOnly: iconOnly,
            primary: primary,
            hasIndicator: !!indicator,
            disableClickableNav: disableClickableNav
          };
        },
        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() {
      return content ? Box.create(content, {
        defaultProps: function defaultProps() {
          return {
            as: 'span',
            className: carouselNavigationItemSlotClassNames.content,
            styles: resolvedStyles.content
          };
        }
      }) : Box.create(indicator, {
        defaultProps: function defaultProps() {
          return {
            className: carouselNavigationItemSlotClassNames.indicator,
            styles: resolvedStyles.indicator
          };
        }
      });
    };
    var handleClick = function handleClick(e) {
      _invoke(props, 'onClick', e, props);
    };
    var handleBlur = function handleBlur(e) {
      _invoke(props, 'onBlur', e, props);
    };
    var handleFocus = function handleFocus(e) {
      _invoke(props, 'onFocus', e, props);
    };
    var element = /*#__PURE__*/React.createElement(ElementType, _extends({}, getA11yProps('root', Object.assign({
      className: classes.root,
      onBlur: handleBlur,
      onFocus: handleFocus,
      onClick: handleClick,
      ref: ref
    }, unhandledProps)), rtlTextContainer.getAttributes({
      forElements: [children]
    })), childrenExist(children) ? children : renderContent());
    setEnd();
    return element;
  });
  CarouselNavigationItem.displayName = 'CarouselNavigationItem';
  CarouselNavigationItem.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    active: PropTypes.bool,
    indicator: customPropTypes.shorthandAllowingChildren,
    iconOnly: PropTypes.bool,
    index: PropTypes.number,
    onClick: PropTypes.func,
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    vertical: PropTypes.bool,
    thumbnails: PropTypes.bool,
    disableClickableNav: PropTypes.bool
  });
  CarouselNavigationItem.handledProps = Object.keys(CarouselNavigationItem.propTypes);
  CarouselNavigationItem.defaultProps = {
    accessibility: tabBehavior,
    as: 'li',
    indicator: {}
  };
  CarouselNavigationItem.create = createShorthandFactory({
    Component: CarouselNavigationItem,
    mappedArrayProp: 'content'
  });
  return CarouselNavigationItem;
}();
//# sourceMappingURL=CarouselNavigationItem.js.map