-
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.
Remove react-photoswipe-gallery and use creat custom lightbox
- Loading branch information
1 parent
9b6b97e
commit c16564c
Showing
18 changed files
with
959 additions
and
540 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { act, render, screen } from '@testing-library/react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import DelayedLoader from './delayedLoader.component'; | ||
|
|
||
| vi.useFakeTimers(); | ||
|
|
||
| describe('DelayedLoader', () => { | ||
| it('should render the loader after the specified delay', () => { | ||
| const timeMS = 2000; | ||
|
|
||
| render( | ||
| <DelayedLoader | ||
| timeMS={timeMS} | ||
| isLoading={true} | ||
| sx={{ color: 'primary' }} | ||
| /> | ||
| ); | ||
| expect(screen.queryByRole('progressbar')).toBeNull(); | ||
|
|
||
| act(() => { | ||
| vi.advanceTimersByTime(timeMS); | ||
| }); | ||
|
|
||
| expect(screen.getByRole('progressbar')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not render the loader if isLoading is false', () => { | ||
| render( | ||
| <DelayedLoader | ||
| timeMS={2000} | ||
| isLoading={false} | ||
| sx={{ color: 'primary' }} | ||
| /> | ||
| ); | ||
| expect(screen.queryByRole('progressbar')).toBeNull(); | ||
| }); | ||
|
|
||
| it('should remove the loader if isLoading changes to false before the delay', () => { | ||
| const timeMS = 2000; | ||
| const { rerender } = render( | ||
| <DelayedLoader | ||
| timeMS={timeMS} | ||
| isLoading={true} | ||
| sx={{ color: 'primary' }} | ||
| /> | ||
| ); | ||
| expect(screen.queryByRole('progressbar')).toBeNull(); | ||
|
|
||
| rerender( | ||
| <DelayedLoader | ||
| timeMS={timeMS} | ||
| isLoading={false} | ||
| sx={{ color: 'primary' }} | ||
| /> | ||
| ); | ||
| act(() => { | ||
| vi.advanceTimersByTime(timeMS); | ||
| }); | ||
|
|
||
| expect(screen.queryByRole('progressbar')).toBeNull(); | ||
| }); | ||
|
|
||
| it('should remove the loader when isLoading changes to false after being displayed', () => { | ||
| const timeMS = 2000; | ||
| const { rerender } = render( | ||
| <DelayedLoader | ||
| timeMS={timeMS} | ||
| isLoading={true} | ||
| sx={{ color: 'primary' }} | ||
| /> | ||
| ); | ||
|
|
||
| act(() => { | ||
| vi.advanceTimersByTime(timeMS); | ||
| }); | ||
|
|
||
| expect(screen.getByRole('progressbar')).toBeInTheDocument(); | ||
|
|
||
| rerender( | ||
| <DelayedLoader | ||
| timeMS={timeMS} | ||
| isLoading={false} | ||
| sx={{ color: 'primary' }} | ||
| /> | ||
| ); | ||
| expect(screen.queryByRole('progressbar')).toBeNull(); | ||
| }); | ||
| }); |
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,34 @@ | ||
| import { SxProps, Theme } from '@mui/material'; | ||
| import CircularProgress from '@mui/material/CircularProgress'; | ||
| import React from 'react'; | ||
|
|
||
| interface DelayedLoaderProps { | ||
| timeMS: number; | ||
| isLoading: boolean; | ||
| sx: SxProps<Theme>; | ||
| } | ||
|
|
||
| const DelayedLoader = (props: DelayedLoaderProps) => { | ||
| const { timeMS, isLoading, sx } = props; | ||
| const [showLoader, setShowLoader] = React.useState(false); | ||
|
|
||
| React.useEffect(() => { | ||
| let timeout: NodeJS.Timeout | null = null; | ||
|
|
||
| if (isLoading) { | ||
| timeout = setTimeout(() => { | ||
| setShowLoader(true); | ||
| }, timeMS); | ||
| } else { | ||
| setShowLoader(false); | ||
| } | ||
|
|
||
| return () => { | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| }, [isLoading, timeMS]); | ||
|
|
||
| return <>{showLoader && <CircularProgress sx={sx} />}</>; | ||
| }; | ||
|
|
||
| export default DelayedLoader; |
Oops, something went wrong.