@homecode/ui 4.18.57 → 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.
|
@@ -230,13 +230,13 @@ class Scroll extends Component {
|
|
|
230
230
|
this.subscribePointerMoveUp();
|
|
231
231
|
};
|
|
232
232
|
onPointerMove = e => {
|
|
233
|
-
const { activeAxis
|
|
234
|
-
if (!
|
|
233
|
+
const { activeAxis } = this.store;
|
|
234
|
+
if (!activeAxis)
|
|
235
235
|
return;
|
|
236
236
|
e.preventDefault();
|
|
237
237
|
e.stopPropagation();
|
|
238
|
-
this.updateScroll(
|
|
239
|
-
this.updatePos(
|
|
238
|
+
this.updateScroll(activeAxis, e);
|
|
239
|
+
this.updatePos(activeAxis);
|
|
240
240
|
};
|
|
241
241
|
onPointerUp = e => {
|
|
242
242
|
e.stopPropagation();
|
|
@@ -255,8 +255,9 @@ class Scroll extends Component {
|
|
|
255
255
|
[sizeField]: this.getCoeffStyle(axis),
|
|
256
256
|
[posField]: this.getPosStyle(axis),
|
|
257
257
|
};
|
|
258
|
+
const className = cn(S.bar, S[axis], activeAxis === axis && S.isActive, this.props[`${axis}ScrollbarClassName`]);
|
|
258
259
|
const barProps = {
|
|
259
|
-
className
|
|
260
|
+
className,
|
|
260
261
|
style: this.getOffset(axis),
|
|
261
262
|
onPointerDown: this.onPointerDown.bind(this, axis),
|
|
262
263
|
};
|
|
@@ -272,9 +273,9 @@ class Scroll extends Component {
|
|
|
272
273
|
return (createElement("div", { ...props, className: innerClasses, ref: this.onInnerRef, key: "inner" }, children));
|
|
273
274
|
}
|
|
274
275
|
render() {
|
|
275
|
-
const { y, x, size, fadeSize,
|
|
276
|
+
const { y, x, size, fadeSize, autoHide, className } = this.props;
|
|
276
277
|
const { isScrolling, activeAxis } = this.store;
|
|
277
|
-
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);
|
|
278
279
|
const props = omit(this.props, [
|
|
279
280
|
'x',
|
|
280
281
|
'y',
|
|
@@ -289,7 +290,6 @@ class Scroll extends Component {
|
|
|
289
290
|
'thumbClassName',
|
|
290
291
|
'autoHide',
|
|
291
292
|
'children',
|
|
292
|
-
'extraWide',
|
|
293
293
|
]);
|
|
294
294
|
return (jsxs("div", { className: classes, ...props, children: [this.renderInner(), this.eachAxis(this.renderBar)] }));
|
|
295
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","hasOffsetTop":"Scroll_hasOffsetTop__zEkUg","hasOffsetBottom":"Scroll_hasOffsetBottom__S2rCM","hasOffsetLeft":"Scroll_hasOffsetLeft__WWEyC","hasOffsetRight":"Scroll_hasOffsetRight__HhJWt","
|
|
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 };
|
|
@@ -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;
|