74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import * as React from 'react';
|
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
|
|
import { CarouselButton } from '../CarouselButton/CarouselButton';
|
|
import { Tooltip } from '@fluentui/react-tooltip';
|
|
/**
|
|
* Create the state required to render CarouselNavContainer.
|
|
*
|
|
* The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,
|
|
* before being passed to renderCarouselNavContainer_unstable.
|
|
*
|
|
* @param props - props from this instance of CarouselNavContainer
|
|
* @param ref - reference to root HTMLDivElement of CarouselNavContainer
|
|
*/ export const useCarouselNavContainer_unstable = (props, ref)=>{
|
|
const { layout } = props;
|
|
const next = slot.optional(props.next, {
|
|
defaultProps: {
|
|
navType: 'next'
|
|
},
|
|
elementType: CarouselButton,
|
|
renderByDefault: true
|
|
});
|
|
const prev = slot.optional(props.prev, {
|
|
defaultProps: {
|
|
navType: 'prev'
|
|
},
|
|
elementType: CarouselButton,
|
|
renderByDefault: true
|
|
});
|
|
const autoplay = slot.optional(props.autoplay, {
|
|
elementType: CarouselAutoplayButton,
|
|
renderByDefault: !!props.autoplay || !!props.autoplayTooltip
|
|
});
|
|
const nextTooltip = slot.optional(props.nextTooltip, {
|
|
defaultProps: {},
|
|
elementType: Tooltip,
|
|
renderByDefault: false
|
|
});
|
|
const prevTooltip = slot.optional(props.prevTooltip, {
|
|
defaultProps: {},
|
|
elementType: Tooltip,
|
|
renderByDefault: false
|
|
});
|
|
const autoplayTooltip = slot.optional(props.autoplayTooltip, {
|
|
defaultProps: {},
|
|
elementType: Tooltip,
|
|
renderByDefault: false
|
|
});
|
|
return {
|
|
layout,
|
|
components: {
|
|
root: 'div',
|
|
next: CarouselButton,
|
|
prev: CarouselButton,
|
|
autoplay: CarouselAutoplayButton,
|
|
nextTooltip: Tooltip,
|
|
prevTooltip: Tooltip,
|
|
autoplayTooltip: Tooltip
|
|
},
|
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
ref,
|
|
...props
|
|
}), {
|
|
elementType: 'div'
|
|
}),
|
|
next,
|
|
prev,
|
|
autoplay,
|
|
nextTooltip,
|
|
prevTooltip,
|
|
autoplayTooltip
|
|
};
|
|
};
|