@vnejs/uis.react.scrollbar 0.2.0 → 0.2.1

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.
Files changed (25) hide show
  1. package/dist/Scrollbar.d.ts.map +1 -1
  2. package/dist/Scrollbar.js +5 -3
  3. package/dist/Scrollbar.js.map +1 -1
  4. package/dist/Scrollbar.styles.js +2 -0
  5. package/dist/Scrollbar.styles.js.map +1 -1
  6. package/dist/hooks/ref.hook.d.ts.map +1 -1
  7. package/dist/hooks/ref.hook.js +10 -1
  8. package/dist/hooks/ref.hook.js.map +1 -1
  9. package/dist/hooks/ref.hook.types.d.ts +2 -0
  10. package/dist/hooks/ref.hook.types.d.ts.map +1 -1
  11. package/dist/hooks/track-click.hook.d.ts +3 -0
  12. package/dist/hooks/track-click.hook.d.ts.map +1 -0
  13. package/dist/hooks/track-click.hook.js +47 -0
  14. package/dist/hooks/track-click.hook.js.map +1 -0
  15. package/dist/hooks/track-click.hook.types.d.ts +13 -0
  16. package/dist/hooks/track-click.hook.types.d.ts.map +1 -0
  17. package/dist/hooks/track-click.hook.types.js +2 -0
  18. package/dist/hooks/track-click.hook.types.js.map +1 -0
  19. package/package.json +1 -1
  20. package/src/Scrollbar.styles.ts +2 -0
  21. package/src/Scrollbar.tsx +18 -4
  22. package/src/hooks/ref.hook.ts +10 -1
  23. package/src/hooks/ref.hook.types.ts +2 -0
  24. package/src/hooks/track-click.hook.ts +65 -0
  25. package/src/hooks/track-click.hook.types.ts +15 -0
package/dist/Scrollbar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAuB3D,eAAO,MAAM,SAAS,oHAWnB,cAAc,gCA2DhB,CAAC"}
1
+ {"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA6B3D,eAAO,MAAM,SAAS,oHAWnB,cAAc,gCAmEhB,CAAC"}
package/dist/Scrollbar.js CHANGED
@@ -2,15 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useMemo } from "react";
3
3
  import { getVneLength } from "@vnejs/uis.utils";
4
4
  import { useThumbHook } from "./hooks/thumb.hook";
5
+ import { useTrackClickHook } from "./hooks/track-click.hook";
5
6
  import { useScrollHook } from "./hooks/scroll.hook";
6
7
  import { useScrollToHook } from "./hooks/scroll-to.hook";
7
8
  import { useRefForScrollHook } from "./hooks/ref.hook";
8
9
  import { b } from "./Scrollbar.styles.js";
9
- const renderScroll = (thumbRef, isVisible, isHorizontal, isVertical) => (_jsx("div", { className: b("scroll", { isVisible, isHorizontal, isVertical }), children: _jsx("div", { className: b("thumb", { isHorizontal, isVertical }), ref: thumbRef }) }));
10
+ const renderScroll = (trackRef, thumbRef, isVisible, isHorizontal, isVertical) => (_jsx("div", { className: b("scroll", { isVisible, isHorizontal, isVertical }), ref: trackRef, "vne-cursor-type": isVisible ? "pointer" : "", children: _jsx("div", { className: b("thumb", { isHorizontal, isVertical }), ref: thumbRef }) }));
10
11
  export const Scrollbar = ({ className = "", children, width = 0, height = 0, scrollTo = 0, scrollToEnd = false, hideScrolbars = false, disableScroll = false, wrapRef = null, textSize = null, }) => {
11
- const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
12
+ const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef, trackHorizontalRef, trackVerticalRef, } = useRefForScrollHook();
12
13
  const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
13
14
  useThumbHook(scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef);
15
+ useTrackClickHook(scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef);
14
16
  useScrollToHook(scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef);
15
17
  const style = useMemo(() => {
16
18
  const result = {};
@@ -42,6 +44,6 @@ export const Scrollbar = ({ className = "", children, width = 0, height = 0, scr
42
44
  if (wrapRef)
43
45
  wrapRef.current = scrollbarWrapRef.current;
44
46
  }, [wrapRef, scrollbarWrapRef.current]);
45
- return (_jsxs("div", { className: b({}, [className]), style: style, children: [!hideScrolbars && renderScroll(thumbHorizontalRef, shouldRenderHorizontal, true, false), !hideScrolbars && renderScroll(thumbVerticalRef, shouldRenderVertical, false, true), _jsx("div", { className: b("wrap"), ref: scrollbarWrapRef, style: styleWrap, children: _jsx("div", { className: b("children"), ref: scrollbarChildrenRef, children: children }) })] }));
47
+ return (_jsxs("div", { className: b({}, [className]), style: style, children: [!hideScrolbars && renderScroll(trackHorizontalRef, thumbHorizontalRef, shouldRenderHorizontal, true, false), !hideScrolbars && renderScroll(trackVerticalRef, thumbVerticalRef, shouldRenderVertical, false, true), _jsx("div", { className: b("wrap"), ref: scrollbarWrapRef, style: styleWrap, children: _jsx("div", { className: b("children"), ref: scrollbarChildrenRef, children: children }) })] }));
46
48
  };
47
49
  //# sourceMappingURL=Scrollbar.js.map
package/dist/Scrollbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}
package/dist/Scrollbar.styles.js CHANGED
@@ -18,6 +18,7 @@ ${sel(b("scroll"))} {
18
18
  transition: 1000ms;
19
19
  border-radius: ${getVneLength(8)};
20
20
  opacity: 0;
21
+ pointer-events: none;
21
22
  }
22
23
 
23
24
  ${sel(b("thumb"))} {
@@ -56,6 +57,7 @@ ${sel(b("thumb", { isHorizontal: true }))} {
56
57
 
57
58
  ${sel(b("scroll", { isVisible: true }))} {
58
59
  opacity: 1;
60
+ pointer-events: auto;
59
61
  }
60
62
  `;
61
63
  injectStyles(CSS);
package/dist/Scrollbar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Scrollbar.styles.js","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;;;;EAId,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;;;mBAGC,YAAY,CAAC,CAAC,CAAC;;;;EAIhC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;mBAGE,YAAY,CAAC,EAAE,CAAC;;;EAGjC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC7B,YAAY,CAAC,CAAC,EAAE,CAAC;;YAEhB,YAAY,CAAC,EAAE,CAAC;WACjB,YAAY,CAAC,EAAE,CAAC;;;;EAIzB,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC5B,YAAY,CAAC,CAAC,CAAC,CAAC;WAChB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9B,YAAY,CAAC,CAAC,EAAE,CAAC;;WAElB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC,CAAC;WACd,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGtC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
1
+ {"version":3,"file":"Scrollbar.styles.js","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;;;;EAId,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;;;mBAGC,YAAY,CAAC,CAAC,CAAC;;;;;EAKhC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;mBAGE,YAAY,CAAC,EAAE,CAAC;;;EAGjC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC7B,YAAY,CAAC,CAAC,EAAE,CAAC;;YAEhB,YAAY,CAAC,EAAE,CAAC;WACjB,YAAY,CAAC,EAAE,CAAC;;;;EAIzB,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC5B,YAAY,CAAC,CAAC,CAAC,CAAC;WAChB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9B,YAAY,CAAC,CAAC,EAAE,CAAC;;WAElB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC,CAAC;WACd,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;CAItC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
package/dist/hooks/ref.hook.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ref.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,eAAO,MAAM,mBAAmB,QAAO,yBAQtC,CAAC"}
1
+ {"version":3,"file":"ref.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,eAAO,MAAM,mBAAmB,QAAO,yBAiBtC,CAAC"}
package/dist/hooks/ref.hook.js CHANGED
@@ -4,6 +4,15 @@ export const useRefForScrollHook = () => {
4
4
  const scrollbarChildrenRef = useRef(null);
5
5
  const thumbVerticalRef = useRef(null);
6
6
  const thumbHorizontalRef = useRef(null);
7
- return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
7
+ const trackVerticalRef = useRef(null);
8
+ const trackHorizontalRef = useRef(null);
9
+ return {
10
+ scrollbarWrapRef,
11
+ scrollbarChildrenRef,
12
+ thumbVerticalRef,
13
+ thumbHorizontalRef,
14
+ trackVerticalRef,
15
+ trackHorizontalRef,
16
+ };
8
17
  };
9
18
  //# sourceMappingURL=ref.hook.js.map
package/dist/hooks/ref.hook.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ref.hook.js","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAA8B,EAAE;IACjE,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;AAC1F,CAAC,CAAC"}
1
+ {"version":3,"file":"ref.hook.js","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAA8B,EAAE;IACjE,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,OAAO;QACL,gBAAgB;QAChB,oBAAoB;QACpB,gBAAgB;QAChB,kBAAkB;QAClB,gBAAgB;QAChB,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC"}
package/dist/hooks/ref.hook.types.d.ts CHANGED
@@ -4,6 +4,8 @@ export type ScrollbarRefs = {
4
4
  scrollbarChildrenRef: RefObject<HTMLDivElement | null>;
5
5
  thumbVerticalRef: RefObject<HTMLDivElement | null>;
6
6
  thumbHorizontalRef: RefObject<HTMLDivElement | null>;
7
+ trackVerticalRef: RefObject<HTMLDivElement | null>;
8
+ trackHorizontalRef: RefObject<HTMLDivElement | null>;
7
9
  };
8
10
  export type UseRefForScrollHookReturn = ScrollbarRefs;
9
11
  //# sourceMappingURL=ref.hook.types.d.ts.map
package/dist/hooks/ref.hook.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ref.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,oBAAoB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC"}
1
+ {"version":3,"file":"ref.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,oBAAoB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC"}
package/dist/hooks/track-click.hook.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { type UseTrackClickHook } from "./track-click.hook.types.js";
2
+ export declare const useTrackClickHook: UseTrackClickHook;
3
+ //# sourceMappingURL=track-click.hook.d.ts.map
package/dist/hooks/track-click.hook.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"track-click.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/track-click.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAgBrE,eAAO,MAAM,iBAAiB,EAAE,iBA8C/B,CAAC"}
package/dist/hooks/track-click.hook.js ADDED
@@ -0,0 +1,47 @@
1
+ import { useEffect } from "react";
2
+ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
3
+ const getScrollFromTrackClick = (clickOffset, trackSize, thumbSize, maxScroll) => {
4
+ if (maxScroll <= 0 || trackSize <= 0)
5
+ return 0;
6
+ const travel = trackSize - thumbSize;
7
+ if (travel <= 0)
8
+ return 0;
9
+ const ratio = clamp((clickOffset - thumbSize / 2) / travel, 0, 1);
10
+ return ratio * maxScroll;
11
+ };
12
+ export const useTrackClickHook = (scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef) => {
13
+ useEffect(() => {
14
+ const wrap = scrollbarWrapRef.current;
15
+ const trackVertical = trackVerticalRef.current;
16
+ const trackHorizontal = trackHorizontalRef.current;
17
+ if (!wrap)
18
+ return;
19
+ const handleVerticalPointerDown = (event) => {
20
+ const thumb = thumbVerticalRef.current;
21
+ if (!trackVertical || !thumb)
22
+ return;
23
+ if (thumb.contains(event.target))
24
+ return;
25
+ const clickOffset = event.clientY - trackVertical.getBoundingClientRect().top;
26
+ const maxScroll = wrap.scrollHeight - wrap.clientHeight;
27
+ wrap.scrollTop = getScrollFromTrackClick(clickOffset, trackVertical.clientHeight, thumb.clientHeight, maxScroll);
28
+ };
29
+ const handleHorizontalPointerDown = (event) => {
30
+ const thumb = thumbHorizontalRef.current;
31
+ if (!trackHorizontal || !thumb)
32
+ return;
33
+ if (thumb.contains(event.target))
34
+ return;
35
+ const clickOffset = event.clientX - trackHorizontal.getBoundingClientRect().left;
36
+ const maxScroll = wrap.scrollWidth - wrap.clientWidth;
37
+ wrap.scrollLeft = getScrollFromTrackClick(clickOffset, trackHorizontal.clientWidth, thumb.clientWidth, maxScroll);
38
+ };
39
+ trackVertical?.addEventListener("pointerdown", handleVerticalPointerDown);
40
+ trackHorizontal?.addEventListener("pointerdown", handleHorizontalPointerDown);
41
+ return () => {
42
+ trackVertical?.removeEventListener("pointerdown", handleVerticalPointerDown);
43
+ trackHorizontal?.removeEventListener("pointerdown", handleHorizontalPointerDown);
44
+ };
45
+ }, [scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef]);
46
+ };
47
+ //# sourceMappingURL=track-click.hook.js.map
package/dist/hooks/track-click.hook.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"track-click.hook.js","sourceRoot":"","sources":["../../src/hooks/track-click.hook.ts"],"names":[],"mappings":"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"}
package/dist/hooks/track-click.hook.types.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { RefObject } from "react";
2
+ export type UseTrackClickHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
3
+ export type UseTrackClickHookTrackRef = RefObject<HTMLDivElement | null>;
4
+ export type UseTrackClickHookThumbRef = RefObject<HTMLDivElement | null>;
5
+ export type UseTrackClickHookParams = [
6
+ scrollbarWrapRef: UseTrackClickHookScrollbarWrapRef,
7
+ trackVerticalRef: UseTrackClickHookTrackRef,
8
+ trackHorizontalRef: UseTrackClickHookTrackRef,
9
+ thumbVerticalRef: UseTrackClickHookThumbRef,
10
+ thumbHorizontalRef: UseTrackClickHookThumbRef
11
+ ];
12
+ export type UseTrackClickHook = (...args: UseTrackClickHookParams) => void;
13
+ //# sourceMappingURL=track-click.hook.types.d.ts.map
package/dist/hooks/track-click.hook.types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"track-click.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/track-click.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,iCAAiC,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AACjF,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AACzE,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAEzE,MAAM,MAAM,uBAAuB,GAAG;IACpC,gBAAgB,EAAE,iCAAiC;IACnD,gBAAgB,EAAE,yBAAyB;IAC3C,kBAAkB,EAAE,yBAAyB;IAC7C,gBAAgB,EAAE,yBAAyB;IAC3C,kBAAkB,EAAE,yBAAyB;CAC9C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC"}
package/dist/hooks/track-click.hook.types.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=track-click.hook.types.js.map
package/dist/hooks/track-click.hook.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"track-click.hook.types.js","sourceRoot":"","sources":["../../src/hooks/track-click.hook.types.ts"],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vnejs/uis.react.scrollbar",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/Scrollbar.styles.ts CHANGED
@@ -20,6 +20,7 @@ ${sel(b("scroll"))} {
20
20
  transition: 1000ms;
21
21
  border-radius: ${getVneLength(8)};
22
22
  opacity: 0;
23
+ pointer-events: none;
23
24
  }
24
25
 
25
26
  ${sel(b("thumb"))} {
@@ -58,6 +59,7 @@ ${sel(b("thumb", { isHorizontal: true }))} {
58
59
 
59
60
  ${sel(b("scroll", { isVisible: true }))} {
60
61
  opacity: 1;
62
+ pointer-events: auto;
61
63
  }
62
64
  `;
63
65
 
package/src/Scrollbar.tsx CHANGED
@@ -6,6 +6,7 @@ import { getVneLength } from "@vnejs/uis.utils";
6
6
  import { type ScrollbarProps } from "./Scrollbar.types.js";
7
7
 
8
8
  import { useThumbHook } from "./hooks/thumb.hook";
9
+ import { useTrackClickHook } from "./hooks/track-click.hook";
9
10
  import { useScrollHook } from "./hooks/scroll.hook";
10
11
  import { useScrollToHook } from "./hooks/scroll-to.hook";
11
12
  import { useRefForScrollHook } from "./hooks/ref.hook";
@@ -13,12 +14,17 @@ import { useRefForScrollHook } from "./hooks/ref.hook";
13
14
  import { b } from "./Scrollbar.styles.js";
14
15
 
15
16
  const renderScroll = (
17
+ trackRef: RefObject<HTMLDivElement | null>,
16
18
  thumbRef: RefObject<HTMLDivElement | null>,
17
19
  isVisible: boolean,
18
20
  isHorizontal: boolean,
19
21
  isVertical: boolean,
20
22
  ) => (
21
- <div className={b("scroll", { isVisible, isHorizontal, isVertical })}>
23
+ <div
24
+ className={b("scroll", { isVisible, isHorizontal, isVertical })}
25
+ ref={trackRef}
26
+ vne-cursor-type={isVisible ? "pointer" : ""}
27
+ >
22
28
  <div
23
29
  className={b("thumb", { isHorizontal, isVertical })}
24
30
  ref={thumbRef}
@@ -38,10 +44,18 @@ export const Scrollbar = ({
38
44
  wrapRef = null,
39
45
  textSize = null,
40
46
  }: ScrollbarProps) => {
41
- const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
47
+ const {
48
+ scrollbarWrapRef,
49
+ scrollbarChildrenRef,
50
+ thumbHorizontalRef,
51
+ thumbVerticalRef,
52
+ trackHorizontalRef,
53
+ trackVerticalRef,
54
+ } = useRefForScrollHook();
42
55
  const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
43
56
 
44
57
  useThumbHook(scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef);
58
+ useTrackClickHook(scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef);
45
59
  useScrollToHook(scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef);
46
60
 
47
61
  const style = useMemo(() => {
@@ -79,8 +93,8 @@ export const Scrollbar = ({
79
93
  className={b({}, [className])}
80
94
  style={style}
81
95
  >
82
- {!hideScrolbars && renderScroll(thumbHorizontalRef, shouldRenderHorizontal, true, false)}
83
- {!hideScrolbars && renderScroll(thumbVerticalRef, shouldRenderVertical, false, true)}
96
+ {!hideScrolbars && renderScroll(trackHorizontalRef, thumbHorizontalRef, shouldRenderHorizontal, true, false)}
97
+ {!hideScrolbars && renderScroll(trackVerticalRef, thumbVerticalRef, shouldRenderVertical, false, true)}
84
98
 
85
99
  <div
86
100
  className={b("wrap")}
package/src/hooks/ref.hook.ts CHANGED
@@ -8,6 +8,15 @@ export const useRefForScrollHook = (): UseRefForScrollHookReturn => {
8
8
 
9
9
  const thumbVerticalRef = useRef<HTMLDivElement>(null);
10
10
  const thumbHorizontalRef = useRef<HTMLDivElement>(null);
11
+ const trackVerticalRef = useRef<HTMLDivElement>(null);
12
+ const trackHorizontalRef = useRef<HTMLDivElement>(null);
11
13
 
12
- return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
14
+ return {
15
+ scrollbarWrapRef,
16
+ scrollbarChildrenRef,
17
+ thumbVerticalRef,
18
+ thumbHorizontalRef,
19
+ trackVerticalRef,
20
+ trackHorizontalRef,
21
+ };
13
22
  };
package/src/hooks/ref.hook.types.ts CHANGED
@@ -5,6 +5,8 @@ export type ScrollbarRefs = {
5
5
  scrollbarChildrenRef: RefObject<HTMLDivElement | null>;
6
6
  thumbVerticalRef: RefObject<HTMLDivElement | null>;
7
7
  thumbHorizontalRef: RefObject<HTMLDivElement | null>;
8
+ trackVerticalRef: RefObject<HTMLDivElement | null>;
9
+ trackHorizontalRef: RefObject<HTMLDivElement | null>;
8
10
  };
9
11
 
10
12
  export type UseRefForScrollHookReturn = ScrollbarRefs;
package/src/hooks/track-click.hook.ts ADDED
@@ -0,0 +1,65 @@
1
+ import { useEffect } from "react";
2
+
3
+ import { type UseTrackClickHook } from "./track-click.hook.types.js";
4
+
5
+ const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
6
+
7
+ const getScrollFromTrackClick = (clickOffset: number, trackSize: number, thumbSize: number, maxScroll: number) => {
8
+ if (maxScroll <= 0 || trackSize <= 0) return 0;
9
+
10
+ const travel = trackSize - thumbSize;
11
+
12
+ if (travel <= 0) return 0;
13
+
14
+ const ratio = clamp((clickOffset - thumbSize / 2) / travel, 0, 1);
15
+
16
+ return ratio * maxScroll;
17
+ };
18
+
19
+ export const useTrackClickHook: UseTrackClickHook = (
20
+ scrollbarWrapRef,
21
+ trackVerticalRef,
22
+ trackHorizontalRef,
23
+ thumbVerticalRef,
24
+ thumbHorizontalRef,
25
+ ) => {
26
+ useEffect(() => {
27
+ const wrap = scrollbarWrapRef.current;
28
+ const trackVertical = trackVerticalRef.current;
29
+ const trackHorizontal = trackHorizontalRef.current;
30
+
31
+ if (!wrap) return;
32
+
33
+ const handleVerticalPointerDown = (event: PointerEvent) => {
34
+ const thumb = thumbVerticalRef.current;
35
+
36
+ if (!trackVertical || !thumb) return;
37
+ if (thumb.contains(event.target as Node)) return;
38
+
39
+ const clickOffset = event.clientY - trackVertical.getBoundingClientRect().top;
40
+ const maxScroll = wrap.scrollHeight - wrap.clientHeight;
41
+
42
+ wrap.scrollTop = getScrollFromTrackClick(clickOffset, trackVertical.clientHeight, thumb.clientHeight, maxScroll);
43
+ };
44
+
45
+ const handleHorizontalPointerDown = (event: PointerEvent) => {
46
+ const thumb = thumbHorizontalRef.current;
47
+
48
+ if (!trackHorizontal || !thumb) return;
49
+ if (thumb.contains(event.target as Node)) return;
50
+
51
+ const clickOffset = event.clientX - trackHorizontal.getBoundingClientRect().left;
52
+ const maxScroll = wrap.scrollWidth - wrap.clientWidth;
53
+
54
+ wrap.scrollLeft = getScrollFromTrackClick(clickOffset, trackHorizontal.clientWidth, thumb.clientWidth, maxScroll);
55
+ };
56
+
57
+ trackVertical?.addEventListener("pointerdown", handleVerticalPointerDown);
58
+ trackHorizontal?.addEventListener("pointerdown", handleHorizontalPointerDown);
59
+
60
+ return () => {
61
+ trackVertical?.removeEventListener("pointerdown", handleVerticalPointerDown);
62
+ trackHorizontal?.removeEventListener("pointerdown", handleHorizontalPointerDown);
63
+ };
64
+ }, [scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef]);
65
+ };
package/src/hooks/track-click.hook.types.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { RefObject } from "react";
2
+
3
+ export type UseTrackClickHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
4
+ export type UseTrackClickHookTrackRef = RefObject<HTMLDivElement | null>;
5
+ export type UseTrackClickHookThumbRef = RefObject<HTMLDivElement | null>;
6
+
7
+ export type UseTrackClickHookParams = [
8
+ scrollbarWrapRef: UseTrackClickHookScrollbarWrapRef,
9
+ trackVerticalRef: UseTrackClickHookTrackRef,
10
+ trackHorizontalRef: UseTrackClickHookTrackRef,
11
+ thumbVerticalRef: UseTrackClickHookThumbRef,
12
+ thumbHorizontalRef: UseTrackClickHookThumbRef,
13
+ ];
14
+
15
+ export type UseTrackClickHook = (...args: UseTrackClickHookParams) => void;