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

improve code

Browse Source
This commit is contained in:
Rene
2021-04-03 20:21:47 +02:00
parent e3e0614a7b
commit 06b88e5f25
7 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+17 -21
View File
@@ -43,16 +43,11 @@ interface OverflowOption {
y: OverflowBehavior;
}
interface ViewportArrangeCustomCssProps {
'--viewport-arrange-width': string;
'--viewport-arrange-height': string;
}
const overlaidScrollbarsHideOffset = 42;
export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => {
const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo } = lifecycleHub;
const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj;
const { _host, _padding, _viewport, _content, _viewportArrange } = _structureSetup._targetObj;
const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache<
WH<number>,
ContentScrollSizeCacheContext
@@ -78,7 +73,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => {
style(_viewport, {
maxHeight: '',
height: '',
});
if (heightIntrinsic) {
@@ -91,7 +86,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
style(_viewport, {
maxHeight: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
});
}
};
@@ -193,7 +188,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
}
}
} else {
style<ViewportArrangeCustomCssProps>(_viewport, {
style<'--viewport-arrange-width' | '--viewport-arrange-height'>(_viewport, {
'--viewport-arrange-width': arrangeSize.w,
'--viewport-arrange-height': arrangeSize.h,
});
@@ -232,18 +227,19 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
}
};
const undoOverlaidScrollbarsHiding = () => {
const paddingStyle = _getViewportPaddingStyle();
const viewportStyle = {
marginTop: '',
marginRight: '',
marginBottom: '',
marginLeft: '',
...paddingStyle,
};
const prevStyle = style(_viewport, keys(viewportStyle));
const undoOverlaidScrollbarsHiding = (adjustFlexboxGlue?: boolean) => {
let paddingStyle = _getViewportPaddingStyle();
if (adjustFlexboxGlue) {
paddingStyle = {
...paddingStyle,
height: '',
};
}
const prevStyle = style(_viewport, keys(paddingStyle));
removeClass(_viewport, classNameViewportArrange);
style(_viewport, viewportStyle);
style(_viewport, paddingStyle);
return () => {
style(_viewport, prevStyle);
@@ -281,7 +277,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
}
if (_sizeChanged || _paddingStyleChanged || _contentMutation || directionChanged) {
const redoOverlaidScrollbarsHiding = viewportArrange ? undoOverlaidScrollbarsHiding() : noop;
const redoOverlaidScrollbarsHiding = viewportArrange ? undoOverlaidScrollbarsHiding(adjustFlexboxGlue) : noop;
const contentSize = clientSize(_viewport);
const viewportRect = getBoundingClientRect(_viewport);
const viewportOffsetSize = offsetSize(_viewport);
packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts
+3 -3
View File
@@ -61,9 +61,9 @@ export const createStructureLifecycle = (lifecycleHub: LifecycleHub): Lifecycle
style(_padding, {
top: paddingStyle.t,
left: paddingStyle.l,
'margin-right': paddingStyle.r,
'margin-bottom': paddingStyle.b,
'max-width': `calc(100% + ${paddingStyle.r * -1}px)`,
marginRight: paddingStyle.r,
marginBottom: paddingStyle.b,
maxWidth: `calc(100% + ${paddingStyle.r * -1}px)`,
});
}
packages/overlayscrollbars/src/overlayscrollbars.scss
+13 -14
View File
@@ -90,15 +90,15 @@
.os-padding {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-direction: row !important;
flex-wrap: nowrap !important;
}
.os-padding,
.os-viewport {
box-sizing: border-box;
position: relative;
flex: auto;
flex: auto !important;
height: auto;
width: 100%;
padding: 0;
@@ -106,21 +106,20 @@
border: none;
overflow: visible;
max-width: 100%;
z-index: 0;
}
.os-viewport {
--viewport-arrange-width: 0;
--viewport-arrange-height: 0;
}
.os-viewport-arrange::before {
content: '';
position: absolute;
pointer-events: none;
z-index: -1;
min-width: 1px;
min-height: 1px;
width: var(--viewport-arrange-width);
height: var(--viewport-arrange-height);
&.os-viewport-arrange::before {
content: '';
position: absolute;
pointer-events: none;
z-index: -1;
min-width: 1px;
min-height: 1px;
width: var(--viewport-arrange-width);
height: var(--viewport-arrange-height);
}
}
packages/overlayscrollbars/src/typings.ts
+2 -2
View File
@@ -1,7 +1,7 @@
export type PlainObject<T = any> = { [name: string]: T };
export type StyleObject<CustomCssProps = {}> = {
[K in keyof (CSSStyleDeclaration & CustomCssProps)]?: string | number;
export type StyleObject<CustomCssProps = ''> = {
[Key in (keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : ''))]?: string | number;
}
export type InternalVersionOf<T> = {
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl
import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
const targetElm = document.querySelector('#target') as HTMLElement;
window.os = OverlayScrollbars({ target: targetElm, padding: null });
window.os = OverlayScrollbars({ target: targetElm, padding: null, content: null });
export const resize = (element: HTMLElement) => {
const strMouseTouchDownEvent = 'mousedown touchstart';
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+1 -1
View File
@@ -35,7 +35,7 @@ body {
min-width: 200px;
max-height: 300px;
max-width: 320px;
//padding: 5px 50px 15px 20px;
padding: 5px 50px 15px 20px;
}
#resize {
packages/overlayscrollbars/tests/jsdom/support/dom/style.test.ts
+4 -2
View File
@@ -36,8 +36,10 @@ describe('dom style', () => {
style(document.body, { width: '123px' });
expect(document.body.style.width).toBe('123px');
interface O {}
expect(document.body.style.getPropertyValue('--custom')).toBe('');
style(document.body, { '--custom': '123px' });
style<'--custom'>(document.body, { '--custom': '123px' });
expect(document.body.style.getPropertyValue('--custom')).toBe('123px');
});
@@ -60,7 +62,7 @@ describe('dom style', () => {
expect(document.body.style.zIndex).toBe('');
expect(document.body.style.lineHeight).toBe('');
expect(document.body.style.getPropertyValue('--custom')).toBe('');
style(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1, '--custom': '123px' });
style<'--custom'>(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1, '--custom': '123px' });
expect(document.body.style.width).toBe('123px');
expect(document.body.style.height).toBe('321px');
expect(document.body.style.opacity).toBe('0.5');