-
Notifications
You must be signed in to change notification settings - Fork 166
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(refactor): Overlay to kit (#1994)
- Loading branch information
Ross Bulat
authored
Feb 27, 2024
1 parent
07bcbef
commit e1cd02f
Showing
124 changed files
with
2,053 additions
and
189 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors | ||
| // SPDX-License-Identifier: GPL-3.0-only | ||
|
|
||
| import { useAnimation } from 'framer-motion'; | ||
| import { useEffect } from 'react'; | ||
| import type { CanvasStatus } from './Provider/types'; | ||
| import { ModalOverlay } from './structure/ModalOverlay'; | ||
| import { useOverlay } from './Provider'; | ||
|
|
||
| export const Background = ({ | ||
| externalOverlayStatus, | ||
| }: { | ||
| externalOverlayStatus?: CanvasStatus; | ||
| }) => { | ||
| const controls = useAnimation(); | ||
| const { | ||
| modal: { status: modalStatus }, | ||
| canvas: { status: canvasStatus }, | ||
| } = useOverlay(); | ||
|
|
||
| let { openOverlayInstances } = useOverlay(); | ||
| if (externalOverlayStatus === 'open') { | ||
| openOverlayInstances++; | ||
| } | ||
|
|
||
| const onIn = async () => await controls.start('visible'); | ||
|
|
||
| const onOut = async () => await controls.start('hidden'); | ||
|
|
||
| useEffect(() => { | ||
| if (openOverlayInstances > 0) { | ||
| onIn(); | ||
| } | ||
| if (openOverlayInstances === 0) { | ||
| onOut(); | ||
| } | ||
| }, [openOverlayInstances]); | ||
|
|
||
| return modalStatus === 'closed' && | ||
| canvasStatus === 'closed' && | ||
| externalOverlayStatus === 'closed' ? null : ( | ||
| <ModalOverlay | ||
| blur={ | ||
| canvasStatus === 'open' || externalOverlayStatus === 'open' | ||
| ? '1.4rem' | ||
| : '0.4rem' | ||
| } | ||
| initial={{ | ||
| opacity: 0, | ||
| }} | ||
| animate={controls} | ||
| transition={{ | ||
| duration: 0.15, | ||
| }} | ||
| variants={{ | ||
| hidden: { | ||
| opacity: 0, | ||
| }, | ||
| visible: { | ||
| opacity: 1, | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| }; |
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,104 @@ | ||
| // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors | ||
| // SPDX-License-Identifier: GPL-3.0-only | ||
|
|
||
| import { useAnimation } from 'framer-motion'; | ||
| import type { FC } from 'react'; | ||
| import { useEffect } from 'react'; | ||
| import type { CanvasProps } from './Provider/types'; | ||
| import { ErrorBoundary } from 'react-error-boundary'; | ||
| import { CanvasContainer } from './structure/CanvasContainer'; | ||
| import { CanvasScroll } from './structure/CanvasScroll'; | ||
| import { ModalContent } from './structure/ModalContent'; | ||
| import { CanvasContent } from './structure/CanvasContent'; | ||
| import { useOverlay } from './Provider'; | ||
|
|
||
| export const Canvas = ({ | ||
| canvas, | ||
| externalOverlayStatus, | ||
| fallback: Fallback, | ||
| }: CanvasProps) => { | ||
| const controls = useAnimation(); | ||
| const { | ||
| setOpenOverlayInstances, | ||
| activeOverlayInstance, | ||
| setActiveOverlayInstance, | ||
| modal: { status: modalStatus }, | ||
| canvas: { | ||
| status, | ||
| setCanvasStatus, | ||
| config: { key, size, scroll }, | ||
| }, | ||
| } = useOverlay(); | ||
|
|
||
| const onIn = async () => { | ||
| await controls.start('visible'); | ||
| }; | ||
|
|
||
| const onOut = async (closing: boolean) => { | ||
| if (closing) { | ||
| setOpenOverlayInstances('dec', 'canvas'); | ||
| setActiveOverlayInstance(modalStatus === 'open' ? 'modal' : null); | ||
| } | ||
| await controls.start('hidden'); | ||
|
|
||
| if (closing) { | ||
| setCanvasStatus('closed'); | ||
| } | ||
| }; | ||
|
|
||
| // Control dim help status change. | ||
| useEffect(() => { | ||
| if (externalOverlayStatus === 'open' && status === 'open') { | ||
| onOut(false); | ||
| } | ||
|
|
||
| if (externalOverlayStatus === 'closing') { | ||
| if (activeOverlayInstance === 'canvas') { | ||
| setCanvasStatus('open'); | ||
| onIn(); | ||
| } | ||
| } | ||
| }, [externalOverlayStatus]); | ||
|
|
||
| // Control fade in and out on opening and closing states. | ||
| useEffect(() => { | ||
| if (status === 'open') { | ||
| onIn(); | ||
| } | ||
| if (status === 'closing') { | ||
| onOut(true); | ||
| } | ||
| }, [status]); | ||
|
|
||
| const ActiveCanvas: FC | null = canvas?.[key] || null; | ||
|
|
||
| return status === 'closed' ? null : ( | ||
| <CanvasContainer | ||
| initial={{ | ||
| opacity: 0, | ||
| }} | ||
| animate={controls} | ||
| transition={{ | ||
| duration: 0.15, | ||
| }} | ||
| variants={{ | ||
| hidden: { | ||
| opacity: 0, | ||
| }, | ||
| visible: { | ||
| opacity: 1, | ||
| }, | ||
| }} | ||
| > | ||
| <CanvasScroll size={size} scroll={scroll || false}> | ||
| <ModalContent canvas> | ||
| <CanvasContent> | ||
| <ErrorBoundary FallbackComponent={Fallback}> | ||
| {ActiveCanvas && <ActiveCanvas />} | ||
| </ErrorBoundary> | ||
| </CanvasContent> | ||
| </ModalContent> | ||
| </CanvasScroll> | ||
| </CanvasContainer> | ||
| ); | ||
| }; |
Oops, something went wrong.