forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Carousel: Autoplay (microsoft#32154)
- Loading branch information
1 parent
fcc0d35
commit 759ba6f
Showing
21 changed files
with
403 additions
and
85 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-carousel-preview-533b9b0e-1769-4408-b096-4984d68abfaa.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "feat: Implement carousel autoplay button and functionality", | ||
| "packageName": "@fluentui/react-carousel-preview", | ||
| "email": "mifraser@microsoft.com", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 34 additions & 7 deletions
41
...sel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,44 @@ | ||
| import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; | ||
| import * as React from 'react'; | ||
| import { ARIAButtonSlotProps } from '@fluentui/react-aria'; | ||
| import { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button'; | ||
| import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities'; | ||
|
|
||
| export type CarouselAutoplayButtonSlots = { | ||
| root: Slot<'div'>; | ||
| export type CarouselAutoplayButtonSlots = ButtonSlots & { | ||
| root: NonNullable<Slot<ARIAButtonSlotProps>>; | ||
| }; | ||
|
|
||
| export type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & { | ||
| /** | ||
| * The updated autoplay value. | ||
| */ | ||
| autoplay: boolean; | ||
| }; | ||
|
|
||
| /** | ||
| * CarouselAutoplayButton Props | ||
| */ | ||
| export type CarouselAutoplayButtonProps = ComponentProps<CarouselAutoplayButtonSlots> & {}; | ||
| export type CarouselAutoplayButtonProps = ToggleButtonProps & | ||
| ComponentProps<CarouselAutoplayButtonSlots> & { | ||
| /** | ||
| * Controls whether autoplay will initialized as true or false | ||
| * Default: true | ||
| */ | ||
| defaultAutoplay?: boolean; | ||
|
|
||
| /** | ||
| * User controlled autoplay state | ||
| */ | ||
| autoplay?: boolean; | ||
|
|
||
| /** | ||
| * Callback that informs the user when internal autoplay value has changed | ||
| */ | ||
| onAutoplayChange?: EventHandler<CarouselAutoplayChangeData>; | ||
| }; | ||
|
|
||
| /** | ||
| * State used in rendering CarouselAutoplayButton | ||
| */ | ||
| export type CarouselAutoplayButtonState = ComponentState<CarouselAutoplayButtonSlots>; | ||
| // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from CarouselAutoplayButtonProps. | ||
| // & Required<Pick<CarouselAutoplayButtonProps, 'propName'>> | ||
| export type CarouselAutoplayButtonState = ToggleButtonState & | ||
| ComponentState<CarouselAutoplayButtonSlots> & | ||
| Pick<CarouselAutoplayButtonProps, 'autoplay'>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 0 additions & 34 deletions
34
...rousel-preview/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts
This file was deleted.
Oops, something went wrong.
68 changes: 68 additions & 0 deletions
68
...ousel-preview/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import * as React from 'react'; | ||
| import { slot, useControllableState, useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; | ||
| import type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types'; | ||
| import { useToggleButton_unstable } from '@fluentui/react-button'; | ||
| import { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons'; | ||
| import { useEventCallback } from '@fluentui/react-utilities'; | ||
| import { mergeCallbacks } from '@fluentui/react-utilities'; | ||
| import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext'; | ||
| import { ARIAButtonElement } from '@fluentui/react-aria'; | ||
|
|
||
| /** | ||
| * Create the state required to render CarouselAutoplayButton. | ||
| * | ||
| * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable, | ||
| * before being passed to renderCarouselAutoplayButton_unstable. | ||
| * | ||
| * @param props - props from this instance of CarouselAutoplayButton | ||
| * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton | ||
| */ | ||
| export const useCarouselAutoplayButton_unstable = ( | ||
| props: CarouselAutoplayButtonProps, | ||
| ref: React.Ref<ARIAButtonElement>, | ||
| ): CarouselAutoplayButtonState => { | ||
| const { onAutoplayChange } = props; | ||
| const [autoplay, setAutoplay] = useControllableState({ | ||
| state: props.autoplay, | ||
| defaultState: props.defaultAutoplay, | ||
| initialState: true, | ||
| }); | ||
|
|
||
| const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay); | ||
|
|
||
| useIsomorphicLayoutEffect(() => { | ||
| // Enable/disable autoplay on state change | ||
| enableAutoplay(autoplay); | ||
| }, [autoplay, enableAutoplay]); | ||
|
|
||
| const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => { | ||
| if (event.isDefaultPrevented()) { | ||
| return; | ||
| } | ||
| const newValue = !autoplay; | ||
| setAutoplay(newValue); | ||
| onAutoplayChange?.(event, { event, type: 'click', autoplay: newValue }); | ||
| }; | ||
|
|
||
| const handleButtonClick = useEventCallback(mergeCallbacks(handleClick, props.onClick)); | ||
|
|
||
| return { | ||
| autoplay, | ||
| // We lean on react-button class to handle styling and icon enhancements | ||
| ...useToggleButton_unstable( | ||
| { | ||
| icon: slot.optional(props.icon, { | ||
| defaultProps: { | ||
| children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />, | ||
| }, | ||
| renderByDefault: true, | ||
| elementType: 'span', | ||
| }), | ||
| ...props, | ||
| checked: autoplay, | ||
| onClick: handleButtonClick, | ||
| }, | ||
| ref as React.Ref<HTMLButtonElement>, | ||
| ), | ||
| }; | ||
| }; |
Oops, something went wrong.