@homecode/ui 4.18.56 → 4.18.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,6 +13,7 @@ const getEventCoords = e => ({
|
|
|
13
13
|
x: e.clientX,
|
|
14
14
|
y: e.clientY,
|
|
15
15
|
});
|
|
16
|
+
const OFFSET_THRESHOL = 5;
|
|
16
17
|
const AXES = ['x', 'y'];
|
|
17
18
|
const BY_AXIS = {
|
|
18
19
|
x: {
|
|
@@ -66,6 +67,12 @@ class Scroll extends Component {
|
|
|
66
67
|
isScrolling: false,
|
|
67
68
|
activeAxis: null,
|
|
68
69
|
coeff: { x: 0, y: 0 },
|
|
70
|
+
hasOffset: {
|
|
71
|
+
top: false,
|
|
72
|
+
left: false,
|
|
73
|
+
right: false,
|
|
74
|
+
bottom: false,
|
|
75
|
+
},
|
|
69
76
|
});
|
|
70
77
|
}
|
|
71
78
|
componentDidMount() {
|
|
@@ -81,13 +88,13 @@ class Scroll extends Component {
|
|
|
81
88
|
eachAxis = fn => AXES.map(axis => this.props[axis] && fn(axis));
|
|
82
89
|
observeScrollHeight = () => {
|
|
83
90
|
this.eachAxis(axis => {
|
|
84
|
-
|
|
85
|
-
this.isBoudingsChanged(axis)
|
|
91
|
+
const needUpdate = (this.props[axis] && this.isScrollSizeChanged(axis)) ||
|
|
92
|
+
this.isBoudingsChanged(axis);
|
|
93
|
+
if (needUpdate)
|
|
86
94
|
this.update(axis);
|
|
87
|
-
}
|
|
88
95
|
});
|
|
89
96
|
};
|
|
90
|
-
|
|
97
|
+
isScrollSizeChanged(axis) {
|
|
91
98
|
const currScrolls = this.getScrollSize(axis);
|
|
92
99
|
const isChanged = this.prevScrolls[axis] !== currScrolls[axis];
|
|
93
100
|
if (isChanged)
|
|
@@ -120,6 +127,7 @@ class Scroll extends Component {
|
|
|
120
127
|
getPosStyle = axis => `${this.pos[axis]}px`;
|
|
121
128
|
updateAll = () => {
|
|
122
129
|
this.eachAxis(this.update);
|
|
130
|
+
this.updateHasOffsets();
|
|
123
131
|
};
|
|
124
132
|
update = axis => {
|
|
125
133
|
this.updateCoeff(axis);
|
|
@@ -134,7 +142,7 @@ class Scroll extends Component {
|
|
|
134
142
|
if (thumb)
|
|
135
143
|
thumb.style[sizeField] = this.getCoeffStyle(axis);
|
|
136
144
|
}
|
|
137
|
-
updatePos
|
|
145
|
+
updatePos(axis) {
|
|
138
146
|
const thumb = this.thumbELem[axis].current;
|
|
139
147
|
if (!this.innerElem || !thumb)
|
|
140
148
|
return;
|
|
@@ -154,14 +162,29 @@ class Scroll extends Component {
|
|
|
154
162
|
this.pos[axis] = pos;
|
|
155
163
|
// thumb.style.transform = `translate${AXIS}(${pos}px)`;
|
|
156
164
|
thumb.style[posField] = this.getPosStyle(axis);
|
|
157
|
-
}
|
|
158
|
-
updateScroll
|
|
165
|
+
}
|
|
166
|
+
updateScroll(axis, e) {
|
|
159
167
|
const coords = getEventCoords(e);
|
|
160
168
|
const scrollPos = BY_AXIS[axis].scrollPos;
|
|
161
169
|
const pos = coords[axis] - this.prevCoords[axis];
|
|
162
170
|
this.prevCoords = coords;
|
|
163
171
|
this.innerElem[scrollPos] += pos / this.store.coeff[axis];
|
|
164
|
-
}
|
|
172
|
+
}
|
|
173
|
+
updateHasOffsets() {
|
|
174
|
+
const { x, y } = this.props;
|
|
175
|
+
const { hasOffset } = this.store;
|
|
176
|
+
const { scrollTop, scrollLeft, scrollHeight, scrollWidth, offsetHeight, offsetWidth, } = this.innerElem;
|
|
177
|
+
if (y) {
|
|
178
|
+
hasOffset.top = scrollTop > 0;
|
|
179
|
+
hasOffset.bottom =
|
|
180
|
+
scrollHeight - (scrollTop + offsetHeight) > OFFSET_THRESHOL;
|
|
181
|
+
}
|
|
182
|
+
if (x && !(hasOffset.top || hasOffset.bottom)) {
|
|
183
|
+
hasOffset.left = scrollLeft > 0;
|
|
184
|
+
hasOffset.right =
|
|
185
|
+
scrollWidth - (scrollLeft + offsetWidth) > OFFSET_THRESHOL;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
165
188
|
dropScrollingState = debounce(() => (this.store.isScrolling = false), 2000);
|
|
166
189
|
subscribePointerMoveUp = () => {
|
|
167
190
|
document.addEventListener('pointermove', this.onPointerMove, {
|
|
@@ -186,10 +209,11 @@ class Scroll extends Component {
|
|
|
186
209
|
return;
|
|
187
210
|
const { onScroll } = this.props;
|
|
188
211
|
const { activeAxis, isScrolling } = this.store;
|
|
212
|
+
this.updateHasOffsets();
|
|
189
213
|
onScroll?.(e);
|
|
190
214
|
if (!activeAxis) {
|
|
191
215
|
this.eachAxis(axis => {
|
|
192
|
-
if (this.
|
|
216
|
+
if (this.isScrollSizeChanged(axis))
|
|
193
217
|
this.update(axis);
|
|
194
218
|
});
|
|
195
219
|
}
|
|
@@ -206,13 +230,13 @@ class Scroll extends Component {
|
|
|
206
230
|
this.subscribePointerMoveUp();
|
|
207
231
|
};
|
|
208
232
|
onPointerMove = e => {
|
|
209
|
-
const { activeAxis
|
|
210
|
-
if (!
|
|
233
|
+
const { activeAxis } = this.store;
|
|
234
|
+
if (!activeAxis)
|
|
211
235
|
return;
|
|
212
236
|
e.preventDefault();
|
|
213
237
|
e.stopPropagation();
|
|
214
|
-
this.updateScroll(
|
|
215
|
-
this.updatePos(
|
|
238
|
+
this.updateScroll(activeAxis, e);
|
|
239
|
+
this.updatePos(activeAxis);
|
|
216
240
|
};
|
|
217
241
|
onPointerUp = e => {
|
|
218
242
|
e.stopPropagation();
|
|
@@ -231,8 +255,9 @@ class Scroll extends Component {
|
|
|
231
255
|
[sizeField]: this.getCoeffStyle(axis),
|
|
232
256
|
[posField]: this.getPosStyle(axis),
|
|
233
257
|
};
|
|
258
|
+
const className = cn(S.bar, S[axis], activeAxis === axis && S.isActive, this.props[`${axis}ScrollbarClassName`]);
|
|
234
259
|
const barProps = {
|
|
235
|
-
className
|
|
260
|
+
className,
|
|
236
261
|
style: this.getOffset(axis),
|
|
237
262
|
onPointerDown: this.onPointerDown.bind(this, axis),
|
|
238
263
|
};
|
|
@@ -241,16 +266,16 @@ class Scroll extends Component {
|
|
|
241
266
|
};
|
|
242
267
|
renderInner() {
|
|
243
268
|
const { innerClassName, innerProps, children, smooth } = this.props;
|
|
244
|
-
const { activeAxis } = this.store;
|
|
245
|
-
const innerClasses = cn(S.inner, innerProps?.className, innerClassName, !activeAxis && smooth && S.smooth);
|
|
269
|
+
const { activeAxis, hasOffset } = this.store;
|
|
270
|
+
const innerClasses = cn(S.inner, innerProps?.className, innerClassName, !activeAxis && smooth && S.smooth, hasOffset.top && S.hasOffsetTop, hasOffset.bottom && S.hasOffsetBottom, hasOffset.right && S.hasOffsetRight, hasOffset.left && S.hasOffsetLeft);
|
|
246
271
|
const props = { ...innerProps };
|
|
247
272
|
props.onScrollCapture = this.onInnerScroll;
|
|
248
273
|
return (createElement("div", { ...props, className: innerClasses, ref: this.onInnerRef, key: "inner" }, children));
|
|
249
274
|
}
|
|
250
275
|
render() {
|
|
251
|
-
const { y, x, size, fadeSize,
|
|
276
|
+
const { y, x, size, fadeSize, autoHide, className } = this.props;
|
|
252
277
|
const { isScrolling, activeAxis } = this.store;
|
|
253
|
-
const classes = cn(S.root, y && S.y, x && S.x, S[`size-${size}`], fadeSize && S[`fadeSize-${fadeSize}`], autoHide && S.autoHide,
|
|
278
|
+
const classes = cn(S.root, y && S.y, x && S.x, S[`size-${size}`], fadeSize && S[`fadeSize-${fadeSize}`], autoHide && S.autoHide, (isScrolling || activeAxis) && S.isScrolling, this.isTouch ? S.isTouch : S.isDesktop, className);
|
|
254
279
|
const props = omit(this.props, [
|
|
255
280
|
'x',
|
|
256
281
|
'y',
|
|
@@ -265,7 +290,6 @@ class Scroll extends Component {
|
|
|
265
290
|
'thumbClassName',
|
|
266
291
|
'autoHide',
|
|
267
292
|
'children',
|
|
268
|
-
'extraWide',
|
|
269
293
|
]);
|
|
270
294
|
return (jsxs("div", { className: classes, ...props, children: [this.renderInner(), this.eachAxis(this.renderBar)] }));
|
|
271
295
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".Scroll_root__NNx5K{--hide-delay:0.3s;display:flex;
|
|
4
|
-
var S = {"root":"Scroll_root__NNx5K","inner":"Scroll_inner__DmxTb","smooth":"Scroll_smooth__2vqKe","y":"Scroll_y__2xWol","x":"Scroll_x__--Ycm","fadeSize-s":"Scroll_fadeSize-s__WeI0f","fadeSize-m":"Scroll_fadeSize-m__Hb-1p","fadeSize-l":"Scroll_fadeSize-l__E0CbA","fadeSize-xl":"Scroll_fadeSize-xl__jcYk0","
|
|
3
|
+
var css_248z = ".Scroll_root__NNx5K{--hide-delay:0.3s;display:flex;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;transition:mast-image .3s ease-out;width:100%}.Scroll_inner__DmxTb.Scroll_smooth__2vqKe{scroll-behavior:smooth}.Scroll_inner__DmxTb::-webkit-scrollbar{display:none}.Scroll_y__2xWol .Scroll_inner__DmxTb{max-height:100%;overflow-y:auto}.Scroll_x__--Ycm .Scroll_inner__DmxTb{max-width:100%;overflow-x:auto}.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{--fade-size:10px}.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{--fade-size:16px}.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{--fade-size:20px}.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{--fade-size:30px}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:fadeMask(bottom,var(--fade-size));mask-image:fadeMask(bottom,var(--fade-size))}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg{-webkit-mask-image:fadeMaskTop(var(--fade-size));mask-image:fadeMaskTop(var(--fade-size))}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:fadeMaskBottom(var(--fade-size));mask-image:fadeMaskBottom(var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:fadeMask(right,var(--fade-size));mask-image:fadeMask(right,var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC{-webkit-mask-image:fadeMaskLeft(var(--fade-size));mask-image:fadeMaskLeft(var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:fadeMaskRight(var(--fade-size));mask-image:fadeMaskRight(var(--fade-size))}.Scroll_thumb__ccEPj{background-color:var(--accent-color-alpha-200);border-radius:1px;position:absolute;transform-origin:center;transition:background-color .1s ease-out}.Scroll_y__2xWol>.Scroll_thumb__ccEPj{min-height:30px;top:0;width:100%}.Scroll_x__--Ycm>.Scroll_thumb__ccEPj{height:100%;left:0;min-width:30px}.Scroll_bar__6CL7R{border-radius:2px;cursor:pointer;overscroll-behavior:contain;position:absolute;touch-action:none;transition:.1s opacity var(--hide-delay) ease-out;z-index:2}.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:0;transition:.3s opacity calc(var(--hide-delay)*.6) ease-out}.Scroll_bar__6CL7R:before{content:\"\";pointer-events:none;position:absolute;transition:.3s background-color var(--hide-delay) ease-out}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover{opacity:1;transition-delay:0s;z-index:1}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi:before,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover:before{background-color:var(--accent-color-alpha-100)}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi .Scroll_thumb__ccEPj,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover .Scroll_thumb__ccEPj{background-color:var(--active-color)}.Scroll_isScrolling__yV2Pj .Scroll_bar__6CL7R{opacity:1;transition:none}.Scroll_bar__6CL7R.Scroll_y__2xWol{bottom:8px;right:0;top:8px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_y__2xWol:before{right:0}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{height:100%;width:16px}.Scroll_bar__6CL7R.Scroll_x__--Ycm{bottom:0;height:16px;left:8px;right:8px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{bottom:0}.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{width:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{top:50%;transform:translateY(-50%)}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:.5px;height:1px}.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:2.5px;height:5px}.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:4.5px;height:9px}.Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_y__2xWol:before{right:50%;transform:translateX(50%)}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{width:1px}.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:2.5px;width:5px}.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:4.5px;width:9px}";
|
|
4
|
+
var S = {"root":"Scroll_root__NNx5K","inner":"Scroll_inner__DmxTb","smooth":"Scroll_smooth__2vqKe","y":"Scroll_y__2xWol","x":"Scroll_x__--Ycm","fadeSize-s":"Scroll_fadeSize-s__WeI0f","fadeSize-m":"Scroll_fadeSize-m__Hb-1p","fadeSize-l":"Scroll_fadeSize-l__E0CbA","fadeSize-xl":"Scroll_fadeSize-xl__jcYk0","hasOffsetTop":"Scroll_hasOffsetTop__zEkUg","hasOffsetBottom":"Scroll_hasOffsetBottom__S2rCM","hasOffsetLeft":"Scroll_hasOffsetLeft__WWEyC","hasOffsetRight":"Scroll_hasOffsetRight__HhJWt","thumb":"Scroll_thumb__ccEPj","bar":"Scroll_bar__6CL7R","autoHide":"Scroll_autoHide__URLqx","isDesktop":"Scroll_isDesktop__7r-bH","isActive":"Scroll_isActive__Nkkmi","isScrolling":"Scroll_isScrolling__yV2Pj","isTouch":"Scroll_isTouch__Vb2mT","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -36,7 +36,7 @@ export declare class Scroll extends Component<T.Props> {
|
|
|
36
36
|
componentWillUnmount(): void;
|
|
37
37
|
eachAxis: (fn: any) => any[];
|
|
38
38
|
observeScrollHeight: () => void;
|
|
39
|
-
|
|
39
|
+
isScrollSizeChanged(axis: any): boolean;
|
|
40
40
|
isBoudingsChanged(axis: any): boolean;
|
|
41
41
|
getoffsetSize: (axis: any) => any;
|
|
42
42
|
getInnerSize: (axis: any) => any;
|
|
@@ -51,8 +51,9 @@ export declare class Scroll extends Component<T.Props> {
|
|
|
51
51
|
updateAll: () => void;
|
|
52
52
|
update: (axis: any) => void;
|
|
53
53
|
updateCoeff(axis: any): void;
|
|
54
|
-
updatePos
|
|
55
|
-
updateScroll
|
|
54
|
+
updatePos(axis: any): void;
|
|
55
|
+
updateScroll(axis: any, e: any): void;
|
|
56
|
+
updateHasOffsets(): void;
|
|
56
57
|
dropScrollingState: any;
|
|
57
58
|
subscribePointerMoveUp: () => void;
|
|
58
59
|
unsubscribePointerMoveUp: () => void;
|
|
@@ -11,9 +11,10 @@ type Offset = {
|
|
|
11
11
|
export type Props = ComponentType & HTMLAttributes<HTMLDivElement> & {
|
|
12
12
|
innerClassName?: string;
|
|
13
13
|
thumbClassName?: string;
|
|
14
|
+
xScrollbarClassName?: string;
|
|
15
|
+
yScrollbarClassName?: string;
|
|
14
16
|
innerProps?: HTMLAttributes<HTMLDivElement>;
|
|
15
17
|
onInnerRef?: (ref: HTMLDivElement | null) => void;
|
|
16
|
-
extraWide?: boolean;
|
|
17
18
|
x?: boolean;
|
|
18
19
|
y?: boolean;
|
|
19
20
|
size?: Size;
|