@homecode/ui 4.30.3 → 4.30.5
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.
|
@@ -19,11 +19,11 @@ import '../Label/Label.styl.js';
|
|
|
19
19
|
import { Popup } from '../Popup/Popup.js';
|
|
20
20
|
import '../RequiredStar/RequiredStar.styl.js';
|
|
21
21
|
import '../Select/Select.styl.js';
|
|
22
|
+
import '../Scroll/Scroll.js';
|
|
22
23
|
import 'compareq';
|
|
23
|
-
import 'lodash.pick';
|
|
24
|
-
import '../Scroll/Scroll.styl.js';
|
|
25
24
|
import 'justorm/react';
|
|
26
25
|
import 'lodash.omit';
|
|
26
|
+
import 'lodash.pick';
|
|
27
27
|
import 'nanoid';
|
|
28
28
|
import '../Checkbox/Checkbox.styl.js';
|
|
29
29
|
import '../Chip/Chip.styl.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
|
|
2
|
+
import { forwardRef, useRef, useImperativeHandle, useState, useMemo, useCallback, useEffect, createElement } from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import Time from 'timen';
|
|
5
5
|
import { isTouch } from '../../tools/dom.js';
|
|
@@ -32,7 +32,7 @@ const BY_AXIS = {
|
|
|
32
32
|
posField: 'top',
|
|
33
33
|
},
|
|
34
34
|
};
|
|
35
|
-
function Scroll(props) {
|
|
35
|
+
const Scroll = forwardRef(function Scroll(props, ref) {
|
|
36
36
|
const { x, y, offset, size = 'm', fadeSize, smooth, className, innerClassName, xScrollbarClassName, yScrollbarClassName, innerProps, onInnerRef, thumbClassName, autoHide, children, onScroll, ...rest } = props;
|
|
37
37
|
const innerElemRef = useRef(null);
|
|
38
38
|
const thumbXRef = useRef(null);
|
|
@@ -41,6 +41,9 @@ function Scroll(props) {
|
|
|
41
41
|
x: thumbXRef,
|
|
42
42
|
y: thumbYRef,
|
|
43
43
|
};
|
|
44
|
+
useImperativeHandle(ref, () => ({
|
|
45
|
+
innerElem: innerElemRef.current,
|
|
46
|
+
}));
|
|
44
47
|
const [isScrolling, setIsScrolling] = useState(false);
|
|
45
48
|
const [activeAxis, setActiveAxis] = useState(null);
|
|
46
49
|
const [coeff, setCoeff] = useState({ x: 0, y: 0 });
|
|
@@ -300,6 +303,6 @@ function Scroll(props) {
|
|
|
300
303
|
]);
|
|
301
304
|
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, isTouchDevice ? S.isTouch : S.isDesktop, className);
|
|
302
305
|
return (jsxs("div", { className: classes, ...rest, children: [renderInner(), AXES.map(renderBar)] }));
|
|
303
|
-
}
|
|
306
|
+
});
|
|
304
307
|
|
|
305
308
|
export { Scroll };
|
|
@@ -1,6 +1,6 @@
|
|
|
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;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;transition:-webkit-mask-image .3s ease-out;transition:mask-image .3s ease-out;transition:mask-image .3s ease-out,-webkit-mask-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_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
|
|
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:-webkit-mask-image .3s ease-out;transition:mask-image .3s ease-out;transition:mask-image .3s ease-out,-webkit-mask-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_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: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: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{bottom:0}.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:0}.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
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
|
|
|
@@ -1,3 +1,31 @@
|
|
|
1
1
|
import * as T from './Scroll.types';
|
|
2
2
|
export type ScrollProps = T.Props;
|
|
3
|
-
export
|
|
3
|
+
export type ScrollRef = {
|
|
4
|
+
innerElem: HTMLDivElement | null;
|
|
5
|
+
};
|
|
6
|
+
export declare const Scroll: import("react").ForwardRefExoticComponent<import("../../types").ComponentType & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
7
|
+
innerClassName?: string;
|
|
8
|
+
thumbClassName?: string;
|
|
9
|
+
xScrollbarClassName?: string;
|
|
10
|
+
yScrollbarClassName?: string;
|
|
11
|
+
innerProps?: import("react").HTMLAttributes<HTMLDivElement>;
|
|
12
|
+
onInnerRef?: (ref: HTMLDivElement) => void;
|
|
13
|
+
x?: boolean;
|
|
14
|
+
y?: boolean;
|
|
15
|
+
size?: import("../../types").Size;
|
|
16
|
+
fadeSize?: import("../../types").Size | "xl";
|
|
17
|
+
smooth?: boolean;
|
|
18
|
+
autoHide?: boolean;
|
|
19
|
+
offset?: {
|
|
20
|
+
x?: {
|
|
21
|
+
before?: number;
|
|
22
|
+
after?: number;
|
|
23
|
+
};
|
|
24
|
+
y?: {
|
|
25
|
+
before?: number;
|
|
26
|
+
after?: number;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
onScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
|
|
30
|
+
children: import("react").ReactNode;
|
|
31
|
+
} & import("react").RefAttributes<ScrollRef>>;
|