@homecode/ui 4.18.56 → 4.18.57
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
|
}
|
|
@@ -241,8 +265,8 @@ class Scroll extends Component {
|
|
|
241
265
|
};
|
|
242
266
|
renderInner() {
|
|
243
267
|
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);
|
|
268
|
+
const { activeAxis, hasOffset } = this.store;
|
|
269
|
+
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
270
|
const props = { ...innerProps };
|
|
247
271
|
props.onScrollCapture = this.onInnerScroll;
|
|
248
272
|
return (createElement("div", { ...props, className: innerClasses, ref: this.onInnerRef, key: "inner" }, children));
|
|
@@ -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;overflow:hidden;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;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}.
|
|
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","autoHide":"Scroll_autoHide__URLqx","bar":"Scroll_bar__6CL7R","isScrolling":"Scroll_isScrolling__yV2Pj","thumb":"Scroll_thumb__ccEPj","isActive":"Scroll_isActive__Nkkmi","isTouch":"Scroll_isTouch__Vb2mT","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7","extraWide":"Scroll_extraWide__IL5ZI"};
|
|
3
|
+
var css_248z = ".Scroll_root__NNx5K{--hide-delay:0.3s;display:flex;overflow:hidden;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:linear-gradient(to bottom,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent)}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size))}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:linear-gradient(to top,transparent,#000 var(--fade-size));mask-image:linear-gradient(to top,transparent,#000 var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent)}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-size));mask-image:linear-gradient(to right,transparent,#000 var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:linear-gradient(to left,transparent,#000 var(--fade-size));mask-image:linear-gradient(to left,transparent,#000 var(--fade-size))}.Scroll_autoHide__URLqx:not(:hover)>.Scroll_bar__6CL7R{opacity:0}.Scroll_isScrolling__yV2Pj.Scroll_autoHide__URLqx:not(:hover)>.Scroll_bar__6CL7R{opacity:1;transition:none}.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{cursor:pointer;overflow:hidden;overscroll-behavior:contain;position:absolute;touch-action:none;transition:.1s opacity var(--hide-delay) ease-out;z-index:2}.Scroll_bar__6CL7R:before{background-color:var(--accent-color-alpha-100);border-radius:2px;content:\"\";opacity:0;position:absolute;transition:.3s opacity calc(var(--hide-delay)*.6) ease-out}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi,.Scroll_bar__6CL7R:hover{z-index:1}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi:before,.Scroll_bar__6CL7R:hover:before{opacity:1;transition-delay:0s}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R:hover .Scroll_thumb__ccEPj{background-color:var(--active-color)}.Scroll_bar__6CL7R.Scroll_y__2xWol{bottom:8px;right:0;top:8px;width:16px}.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:30%}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{height:100%}.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:30%}.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{width:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{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_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}.Scroll_extraWide__IL5ZI .Scroll_bar__6CL7R.Scroll_x__--Ycm{height:52px}.Scroll_extraWide__IL5ZI .Scroll_bar__6CL7R.Scroll_y__2xWol{width:52px}";
|
|
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","autoHide":"Scroll_autoHide__URLqx","bar":"Scroll_bar__6CL7R","isScrolling":"Scroll_isScrolling__yV2Pj","thumb":"Scroll_thumb__ccEPj","isActive":"Scroll_isActive__Nkkmi","isTouch":"Scroll_isTouch__Vb2mT","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7","extraWide":"Scroll_extraWide__IL5ZI"};
|
|
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;
|