mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-02 12:34:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve code and eslint

Browse Source
This commit is contained in:
Rene
2022-06-16 14:17:34 +02:00
parent 1fbc761483
commit a799c470ed
16 changed files with 137 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -33,6 +33,7 @@
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-json": "^2.1.2",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"glob": "^7.1.6",
packages/overlayscrollbars/dist/overlayscrollbars.esm.js
Vendored
+8 -17
View File
@@ -2164,19 +2164,14 @@ const createOverflowLifecycle = lifecycleHub => {
const prevStyle = style(_viewport, keys(finalPaddingStyle));
removeClass(_viewport, classNameViewportArrange);
style(_viewport, finalPaddingStyle);
return {
_redoViewportArrange: () => {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
},
_viewportOverflowState: finalViewportOverflowState
};
return [() => {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
}, finalViewportOverflowState];
}
return {
_redoViewportArrange: noop
};
return [noop];
};
return (updateHints, checkOption, force) => {
@@ -2217,17 +2212,13 @@ const createOverflowLifecycle = lifecycleHub => {
}
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
const {
_redoViewportArrange,
_viewportOverflowState: undoViewportArrangeOverflowState
} = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState);
const [_viewportSizeFraction, viewportSizeFractionCahnged] = viewportSizeFractionCache = updateViewportSizeFraction(force);
const [_viewportScrollSize, _viewportScrollSizeChanged] = viewportScrollSizeCache = updateViewportScrollSizeCache(force);
const viewportContentSize = clientSize(_viewport);
let arrangedViewportScrollSize = _viewportScrollSize;
let arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
redoViewportArrange();
if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
arrangedViewportClientSize = clientSize(_viewport);
packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.esm.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.js
Vendored
+9 -15
View File
@@ -2233,19 +2233,14 @@
var prevStyle = style(_viewport, keys(finalPaddingStyle));
removeClass(_viewport, classNameViewportArrange);
style(_viewport, finalPaddingStyle);
return {
_redoViewportArrange: function _redoViewportArrange() {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
},
_viewportOverflowState: finalViewportOverflowState
};
return [function () {
hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
}, finalViewportOverflowState];
}
return {
_redoViewportArrange: noop
};
return [noop];
};
return function (updateHints, checkOption, force) {
@@ -2292,8 +2287,8 @@
if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState),
_redoViewportArrange = _undoViewportArrange._redoViewportArrange,
undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
redoViewportArrange = _undoViewportArrange[0],
undoViewportArrangeOverflowState = _undoViewportArrange[1];
var _viewportSizeFraction2 = viewportSizeFractionCache = updateViewportSizeFraction(force),
_viewportSizeFraction = _viewportSizeFraction2[0],
@@ -2306,8 +2301,7 @@
var viewportContentSize = clientSize(_viewport);
var arrangedViewportScrollSize = _viewportScrollSize;
var arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
redoViewportArrange();
if ((_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) && undoViewportArrangeOverflowState && !showNativeOverlaidScrollbars && arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize, _viewportSizeFraction, directionIsRTL)) {
arrangedViewportClientSize = clientSize(_viewport);
packages/overlayscrollbars/dist/overlayscrollbars.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/dist/overlayscrollbars.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+12 -13
View File
@@ -183,19 +183,18 @@ export const createLifecycleHub = (
_hostMutation: adaptiveHostMutation,
_contentMutation: adaptiveContentMutation,
_paddingStyleChanged: adaptivePaddingStyleChanged,
} =
lifecycle(
{
_directionIsRTL: finalDirectionIsRTL,
_heightIntrinsic: finalHeightIntrinsic,
_sizeChanged,
_hostMutation,
_contentMutation,
_paddingStyleChanged,
},
checkOption,
!!force
) || {};
} = lifecycle(
{
_directionIsRTL: finalDirectionIsRTL,
_heightIntrinsic: finalHeightIntrinsic,
_sizeChanged,
_hostMutation,
_contentMutation,
_paddingStyleChanged,
},
checkOption,
!!force
) || {};
_sizeChanged = adaptiveSizeChanged || _sizeChanged;
_hostMutation = adaptiveHostMutation || _hostMutation;
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+24 -40
View File
@@ -28,16 +28,16 @@ interface ViewportOverflowState {
_overflowScroll: XY<boolean>;
}
interface UndoViewportArrangeResult {
_redoViewportArrange: () => void;
_viewportOverflowState?: ViewportOverflowState;
}
interface OverflowOption {
x: OverflowBehavior;
y: OverflowBehavior;
}
type UndoViewportArrangeResult = [
() => void, // redoViewportArrange
ViewportOverflowState?
];
const { max, abs, round } = Math;
const overlaidScrollbarsHideOffset = 42;
const whCacheOptions = {
@@ -123,9 +123,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
WH<number>
>(whCacheOptions, scrollSize.bind(0, _viewport));
const [updateOverflowAmountCache, getCurrentOverflowAmountCache] = createCache<WH<number>>(
whCacheOptions
);
const [updateOverflowAmountCache, getCurrentOverflowAmountCache] =
createCache<WH<number>>(whCacheOptions);
/**
* Applies a fixed height to the viewport so it can't overflow or underflow the host element.
@@ -142,10 +141,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
if (heightIntrinsic) {
const { _nativeScrollbarIsOverlaid } = getEnvironment();
const {
_absolute: paddingAbsolute,
_padding: padding,
} = _getLifecycleCommunication()._paddingInfo;
const { _absolute: paddingAbsolute, _padding: padding } =
_getLifecycleCommunication()._paddingInfo;
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
const hostSizeFraction = sizeFraction(_host);
const hostClientSize = clientSize(_host);
@@ -175,11 +172,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
showNativeOverlaidScrollbars: boolean,
viewportStyleObj?: StyleObject
): ViewportOverflowState => {
const {
_nativeScrollbarSize,
_nativeScrollbarIsOverlaid,
_nativeScrollbarStyling,
} = getEnvironment();
const { _nativeScrollbarSize, _nativeScrollbarIsOverlaid, _nativeScrollbarStyling } =
getEnvironment();
const { x: overlaidX, y: overlaidY } = _nativeScrollbarIsOverlaid;
const determineOverflow = !viewportStyleObj;
const arrangeHideOffset =
@@ -400,8 +394,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
removeClass(_viewport, classNameViewportArrange);
style(_viewport, finalPaddingStyle);
return {
_redoViewportArrange: () => {
return [
() => {
hideNativeScrollbars(
finalViewportOverflowState,
directionIsRTL,
@@ -411,12 +405,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
style(_viewport, prevStyle);
addClass(_viewport, classNameViewportArrange);
},
_viewportOverflowState: finalViewportOverflowState,
};
finalViewportOverflowState,
];
}
return {
_redoViewportArrange: noop,
};
return [noop];
};
return (updateHints, checkOption, force) => {
@@ -431,9 +423,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const { _flexboxGlue, _nativeScrollbarStyling, _nativeScrollbarIsOverlaid } = getEnvironment();
const [heightIntrinsic, heightIntrinsicChanged] = _heightIntrinsic;
const [directionIsRTL, directionChanged] = _directionIsRTL;
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = checkOption<
boolean
>('nativeScrollbarsOverlaid.show');
const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] =
checkOption<boolean>('nativeScrollbarsOverlaid.show');
const showNativeOverlaidScrollbars =
showNativeOverlaidScrollbarsOption &&
_nativeScrollbarIsOverlaid.x &&
@@ -471,27 +462,20 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
showNativeOverlaidScrollbarsChanged ||
directionChanged
) {
const {
_redoViewportArrange,
_viewportOverflowState: undoViewportArrangeOverflowState,
} = undoViewportArrange(
const [redoViewportArrange, undoViewportArrangeOverflowState] = undoViewportArrange(
showNativeOverlaidScrollbars,
directionIsRTL,
preMeasureViewportOverflowState
);
const [
viewportSizeFraction,
viewportSizeFractionCahnged,
] = (viewportSizeFractionCache = updateViewportSizeFraction(force));
const [
viewportScrollSize,
viewportScrollSizeChanged,
] = (viewportScrollSizeCache = updateViewportScrollSizeCache(force));
const [viewportSizeFraction, viewportSizeFractionCahnged] = (viewportSizeFractionCache =
updateViewportSizeFraction(force));
const [viewportScrollSize, viewportScrollSizeChanged] = (viewportScrollSizeCache =
updateViewportScrollSizeCache(force));
const viewportContentSize = clientSize(_viewport);
let arrangedViewportScrollSize = viewportScrollSize;
let arrangedViewportClientSize = viewportContentSize;
_redoViewportArrange();
redoViewportArrange();
// if re measure is required (only required if content arrange strategy is used)
if (
packages/overlayscrollbars/src/support/cache/cache.ts
Vendored
+1 -1
View File
@@ -10,7 +10,7 @@ export interface CacheOptions<Value> {
export type CacheValues<T> = [
T, // value
boolean, // changed
T? // previous
T | undefined // previous
];
export type EqualCachePropFunction<Value> = (currentVal: Value, newVal: Value) => boolean;
packages/overlayscrollbars/tests/playwright/observers/domObserver/index.browser.ts
+59 -57
View File
@@ -42,9 +42,8 @@ const contentElmAttrChange: HTMLElement | null = document.querySelector('#target
const contentBetweenElmAttrChange: HTMLElement | null = document.querySelector(
'#content-host .padding-nest-item'
);
const contentHostElmAttrChange: HTMLElement | null = document.querySelector(
'#content-nest-item-host'
);
const contentHostElmAttrChange: HTMLElement | null =
document.querySelector('#content-nest-item-host');
const targetElmsSlot = document.querySelector('#target .host-nest-item');
const targetContentElmsSlot = document.querySelector('#target .content .content-nest');
@@ -52,9 +51,8 @@ const targetContentBetweenElmsSlot = document.querySelector('#content-host');
const imgElmsSlot = document.querySelector('#target .content-nest');
const transitionElmsSlot = document.querySelector('#content-host .content');
const addRemoveTargetElms: HTMLButtonElement | null = document.querySelector(
'#addRemoveTargetElms'
);
const addRemoveTargetElms: HTMLButtonElement | null =
document.querySelector('#addRemoveTargetElms');
const addRemoveTargetContentElms: HTMLButtonElement | null = document.querySelector(
'#addRemoveTargetContentElms'
);
@@ -67,22 +65,18 @@ const addRemoveTransitionElms: HTMLButtonElement | null = document.querySelector
);
const ignoreTargetChange: HTMLButtonElement | null = document.querySelector('#ignoreTargetChange');
const setTargetAttr: HTMLSelectElement | null = document.querySelector('#setTargetAttr');
const setFilteredTargetAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredTargetAttr'
);
const setFilteredTargetAttr: HTMLSelectElement | null =
document.querySelector('#setFilteredTargetAttr');
const setContentAttr: HTMLSelectElement | null = document.querySelector('#setContentAttr');
const setFilteredContentAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredContentAttr'
);
const setContentBetweenAttr: HTMLSelectElement | null = document.querySelector(
'#setContentBetweenAttr'
);
const setFilteredContentAttr: HTMLSelectElement | null =
document.querySelector('#setFilteredContentAttr');
const setContentBetweenAttr: HTMLSelectElement | null =
document.querySelector('#setContentBetweenAttr');
const setFilteredContentBetweenAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredContentBetweenAttr'
);
const setContentHostElmAttr: HTMLSelectElement | null = document.querySelector(
'#setContentHostElmAttr'
);
const setContentHostElmAttr: HTMLSelectElement | null =
document.querySelector('#setContentHostElmAttr');
const setFilteredContentHostElmAttr: HTMLSelectElement | null = document.querySelector(
'#setFilteredContentHostElmAttr'
);
@@ -415,7 +409,7 @@ const addRemoveTargetContentElmsFn = async () => {
const addRemoveTargetContentBetweenElmsFn = async () => {
await addRemoveElementsTest(targetContentBetweenElmsSlot, domContentObserverObservations);
};
const addRemoveImgElmsFn = async () => {
const addRemoveImgElmsFn = async (changeless = false) => {
const add = async () => {
const img = new Image(1, 1);
img.src = 'www.something.com/something/sometest';
@@ -434,21 +428,23 @@ const addRemoveImgElmsFn = async () => {
await waitForOrFailTest(() => {
after();
compare(2);
compare(changeless ? 0 : 2);
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding an content image must result in a content change.'
);
if (!changeless) {
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding an content image must result in a content change.'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'The images load event must result in a content change.'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'The images load event must result in a content change.'
);
}
});
};
@@ -481,21 +477,23 @@ const addRemoveImgElmsFn = async () => {
await waitForOrFailTest(() => {
after();
compare(2);
compare(changeless ? 0 : 2);
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding mutliple content images must result in a single content change. (debounced)'
);
if (!changeless) {
const previousContentChanged = getLast(domContentObserverObservations, 1);
should.deepEqual(
previousContentChanged,
{ contentChange: true, troughEvent: false },
'Adding mutliple content images must result in a single content change. (debounced)'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'Multiple images load events must result in a single cintent change. (debounced)'
);
const lastContentChanged = getLast(domContentObserverObservations);
should.deepEqual(
lastContentChanged,
{ contentChange: true, troughEvent: true },
'Multiple images load events must result in a single cintent change. (debounced)'
);
}
});
};
@@ -529,17 +527,19 @@ const addRemoveImgElmsFn = async () => {
contentDomObserver = createContentDomOserver(contentChange);
};
await addChanged([
['img', 'something'],
['img', 'something2'],
['img', ''],
['img', undefined],
['', ''],
[undefined, undefined],
null,
undefined,
]);
await addChanged([]);
if (!changeless) {
await addChanged([
['img', 'something'],
['img', 'something2'],
['img', ''],
['img', undefined],
['', ''],
[undefined, undefined],
null,
undefined,
]);
await addChanged([]);
}
removeElements(document.querySelectorAll('.img'));
@@ -696,7 +696,7 @@ const triggerBetweenSummaryChange = async () => {
addRemoveTargetElms?.addEventListener('click', addRemoveTargetElmsFn);
addRemoveTargetContentElms?.addEventListener('click', addRemoveTargetContentElmsFn);
addRemoveTargetContentBetweenElms?.addEventListener('click', addRemoveTargetContentBetweenElmsFn);
addRemoveImgElms?.addEventListener('click', addRemoveImgElmsFn);
addRemoveImgElms?.addEventListener('click', () => addRemoveImgElmsFn());
addRemoveTransitionElms?.addEventListener('click', addRemoveTransitionElmsFn);
ignoreTargetChange?.addEventListener('click', ignoreTargetChangeFn);
setTargetAttr?.addEventListener('change', attrChangeListener(targetElm));
@@ -744,6 +744,8 @@ const start = async () => {
contentDomObserver._destroy();
contentDomObserver._update();
await addRemoveImgElmsFn(true); // won't trigger changes after destroy
setTestResult(true);
};
packages/overlayscrollbars/types/domobserver.d.ts
Vendored
-2
View File
@@ -1,2 +0,0 @@
declare const start: () => Promise<void>;
export { start };
packages/overlayscrollbars/types/sizeobserver.d.ts
Vendored
-2
View File
@@ -1,2 +0,0 @@
declare const start: () => Promise<void>;
export { start };
packages/overlayscrollbars/types/structurelifecycle.d.ts
Vendored
-1
View File
@@ -1 +0,0 @@
export {};
packages/overlayscrollbars/types/trinsicobserver.d.ts
Vendored
-2
View File
@@ -1,2 +0,0 @@
declare const start: () => Promise<void>;
export { start };
yarn.lock
+19
View File
@@ -3656,6 +3656,13 @@ eslint-plugin-jsx-a11y@^6.3.1:
jsx-ast-utils "^2.4.1"
language-tags "^1.0.5"
eslint-plugin-prettier@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-react-hooks@^4.0.8:
version "4.1.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.0.tgz#6323fbd5e650e84b2987ba76370523a60f4e7925"
@@ -3870,6 +3877,11 @@ fast-deep-equal@^3.1.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^3.0.3:
version "3.2.4"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
@@ -6527,6 +6539,13 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier@^2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"