-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add ScrollLocker * fix if set style empty * add mobile support * fix test * support container * fix lost this and container not scroll * add docs * revert switchScrollingEffect
- Loading branch information
1 parent
37aacd6
commit a470f80
Showing
6 changed files
with
343 additions
and
37 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import getScrollBarSize from '../getScrollBarSize'; | ||
| import setStyle from '../setStyle'; | ||
|
|
||
| export interface scrollLockOptions { | ||
| container: HTMLElement; | ||
| } | ||
|
|
||
| let passiveSupported = false; | ||
| if (typeof window !== 'undefined') { | ||
| const passiveTestOption = { | ||
| get passive() { | ||
| passiveSupported = true; | ||
| return null; | ||
| }, | ||
| }; | ||
|
|
||
| window.addEventListener('testPassive', null, passiveTestOption); | ||
| // @ts-ignore compatible passive | ||
| window.removeEventListener('testPassive', null, passiveTestOption); | ||
| } | ||
|
|
||
| const preventDefault = (event: React.TouchEvent | TouchEvent): boolean => { | ||
| const e = event || window.event; | ||
|
|
||
| // If more than one touch we don't prevent | ||
| if ((e as TouchEvent).touches.length > 1) return true; | ||
|
|
||
| if (e.preventDefault) e.preventDefault(); | ||
|
|
||
| return false; | ||
| }; | ||
|
|
||
| let uuid = 0; | ||
|
|
||
| interface Ilocks { | ||
| target: typeof uuid; | ||
| cacheStyle?: React.CSSProperties; | ||
| options: scrollLockOptions; | ||
| } | ||
|
|
||
| let locks: Ilocks[] = []; | ||
| const scrollingEffectClassName = 'ant-scrolling-effect'; | ||
| const scrollingEffectClassNameReg = new RegExp( | ||
| `${scrollingEffectClassName}`, | ||
| 'g', | ||
| ); | ||
|
|
||
| export default class ScrollLocker { | ||
| lockTarget: typeof uuid; | ||
|
|
||
| options: scrollLockOptions; | ||
|
|
||
| constructor(options?: scrollLockOptions) { | ||
| // eslint-disable-next-line no-plusplus | ||
| this.lockTarget = uuid++; | ||
| this.options = options; | ||
| } | ||
|
|
||
| lock = () => { | ||
| // If lockTarget exist return | ||
| if (locks.some(({ target }) => target === this.lockTarget)) { | ||
| return; | ||
| } | ||
|
|
||
| // If same container effect, return | ||
| if ( | ||
| locks.some( | ||
| ({ options }) => options?.container === this.options?.container, | ||
| ) | ||
| ) { | ||
| locks = [...locks, { target: this.lockTarget, options: this.options }]; | ||
| return; | ||
| } | ||
|
|
||
| let scrollBarSize = 0; | ||
|
|
||
| if (window.innerWidth - document.documentElement.clientWidth > 0) { | ||
| scrollBarSize = getScrollBarSize(); | ||
| } | ||
|
|
||
| const container = this.options?.container || document.body; | ||
| const containerClassName = container.className; | ||
|
|
||
| // https://github.com/ant-design/ant-design/issues/19340 | ||
| // https://github.com/ant-design/ant-design/issues/19332 | ||
| const cacheStyle = setStyle( | ||
| { | ||
| paddingRight: `${scrollBarSize}px`, | ||
| overflow: 'hidden', | ||
| overflowX: 'hidden', | ||
| overflowY: 'hidden', | ||
| }, | ||
| { | ||
| element: container, | ||
| }, | ||
| ); | ||
|
|
||
| // https://github.com/ant-design/ant-design/issues/19729 | ||
| if (!scrollingEffectClassNameReg.test(containerClassName)) { | ||
| const addClassName = `${containerClassName} ${scrollingEffectClassName}`; | ||
| container.className = addClassName.trim(); | ||
|
|
||
| document.addEventListener( | ||
| 'touchmove', | ||
| preventDefault, | ||
| passiveSupported ? { passive: false } : undefined, | ||
| ); | ||
| } | ||
|
|
||
| locks = [ | ||
| ...locks, | ||
| { target: this.lockTarget, options: this.options, cacheStyle }, | ||
| ]; | ||
| }; | ||
|
|
||
| unLock = () => { | ||
| const findLock = locks.find(({ target }) => target === this.lockTarget); | ||
|
|
||
| locks = locks.filter(({ target }) => target !== this.lockTarget); | ||
|
|
||
| if ( | ||
| !findLock || | ||
| locks.some( | ||
| ({ options }) => options?.container === findLock.options?.container, | ||
| ) | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| // Remove Effect | ||
| const container = this.options?.container || document.body; | ||
| const containerClassName = container.className; | ||
|
|
||
| if (!scrollingEffectClassNameReg.test(containerClassName)) return; | ||
|
|
||
| setStyle( | ||
| // @ts-ignore position should be empty string | ||
| findLock.cacheStyle || { | ||
| paddingRight: '', | ||
| overflow: '', | ||
| overflowX: '', | ||
| overflowY: '', | ||
| }, | ||
| { element: container }, | ||
| ); | ||
| container.className = container.className | ||
| .replace(scrollingEffectClassNameReg, '') | ||
| .trim(); | ||
|
|
||
| // @ts-ignore compatible passive | ||
| document.removeEventListener( | ||
| 'touchmove', | ||
| preventDefault, | ||
| passiveSupported ? { passive: false } : undefined, | ||
| ); | ||
| }; | ||
| } |
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
Oops, something went wrong.