@impulse-ui-native/scroll-view 8.3.0 → 9.1.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.
- package/README.md +1 -1
- package/dist/hooks/use-scroll-view-initial-scroll.hook.js +1 -4
- package/dist/hooks/use-scroll-view-initial-scroll.hook.js.map +1 -1
- package/dist/types/scroll-view-measurement.types.d.mts +1 -3
- package/dist/utils/get-reveal-offset.d.mts +1 -1
- package/dist/utils/get-reveal-offset.js +2 -3
- package/dist/utils/get-reveal-offset.js.map +1 -1
- package/dist/utils/get-scroll-view-reveal-offset.d.mts +1 -1
- package/dist/utils/get-scroll-view-reveal-offset.js +4 -19
- package/dist/utils/get-scroll-view-reveal-offset.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ function Options({ items, selectedValue }) {
|
|
|
51
51
|
|
|
52
52
|
The hook waits for viewport, content, and target layout, then measures the target relative to the native ScrollView with `measureLayout`. This uses layout coordinates rather than the current visual scroll position. Nested native wrappers, padding, gaps, and variable item sizes are included. Attach `targetRef` to one native View or a component forwarding its native View ref. Compose `onTargetLayout` with any existing item layout callback.
|
|
53
53
|
|
|
54
|
-
It scrolls only far enough to reveal the target, without animation. Already visible items retain the initial position; oversized items align at their leading edge.
|
|
54
|
+
It scrolls only far enough to reveal the target, without animation. Already visible items retain the initial position; oversized items align at their leading edge. The default axis is vertical; pass `horizontal: true` to the hook and ScrollView for horizontal content.
|
|
55
55
|
|
|
56
56
|
Pass `enabled: false` to skip positioning. Pass native `contentOffset` to both the hook and ScrollView to preserve an explicit starting position. Existing `onLayout`, `onContentSizeChange`, and `onScrollBeginDrag` callbacks can be passed to the hook; its returned handlers invoke them with the original arguments. Other native props remain available because `ScrollView` is the native component.
|
|
57
57
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useRef } from "react";
|
|
2
|
-
import { I18nManager, Platform } from "react-native";
|
|
3
2
|
import { useEventCallback } from "@impulse-ui-native/core";
|
|
4
3
|
import { getScrollViewRevealOffset } from "../utils/get-scroll-view-reveal-offset";
|
|
5
4
|
function useScrollViewInitialScroll({
|
|
@@ -33,9 +32,7 @@ function useScrollViewInitialScroll({
|
|
|
33
32
|
layout,
|
|
34
33
|
viewportSize: viewportSizeRef.current,
|
|
35
34
|
contentSize: contentSizeRef.current,
|
|
36
|
-
horizontal: Boolean(horizontal)
|
|
37
|
-
isRTL: I18nManager.isRTL,
|
|
38
|
-
platform: Platform.OS
|
|
35
|
+
horizontal: Boolean(horizontal)
|
|
39
36
|
});
|
|
40
37
|
completedRef.current = true;
|
|
41
38
|
if (offset !== null) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-scroll-view-initial-scroll.hook.ts"],"sourcesContent":["import type {\n LayoutChangeEvent,\n NativeScrollEvent,\n NativeSyntheticEvent,\n ScrollView,\n View,\n} from \"react-native\";\nimport { useRef } from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-scroll-view-initial-scroll.hook.ts"],"sourcesContent":["import type {\n LayoutChangeEvent,\n NativeScrollEvent,\n NativeSyntheticEvent,\n ScrollView,\n View,\n} from \"react-native\";\nimport { useRef } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\n\nimport type { UseScrollViewInitialScrollOptions } from \"../types\";\nimport type { ScrollViewMeasurement } from \"../types/scroll-view-measurement.types\";\nimport { getScrollViewRevealOffset } from \"../utils/get-scroll-view-reveal-offset\";\n\nexport function useScrollViewInitialScroll({\n enabled = true,\n horizontal = false,\n contentOffset,\n onLayout,\n onContentSizeChange,\n onScrollBeginDrag,\n}: UseScrollViewInitialScrollOptions = {}) {\n const scrollViewRef = useRef<ScrollView>(null);\n const targetRef = useRef<View>(null);\n const viewportSizeRef = useRef(0);\n const contentSizeRef = useRef(0);\n const completedRef = useRef(false);\n const measuringRef = useRef(false);\n\n const handleMeasurement = useEventCallback(\n ({ scrollView, target, layout }: ScrollViewMeasurement) => {\n measuringRef.current = false;\n\n if (!enabled || contentOffset || completedRef.current) {\n return;\n }\n\n if (\n scrollViewRef.current !== scrollView ||\n targetRef.current !== target\n ) {\n return;\n }\n\n const targetSize = horizontal ? layout.width : layout.height;\n\n if (targetSize <= 0) {\n return;\n }\n\n const offset = getScrollViewRevealOffset({\n layout,\n viewportSize: viewportSizeRef.current,\n contentSize: contentSizeRef.current,\n horizontal: Boolean(horizontal),\n });\n\n completedRef.current = true;\n\n if (offset !== null) {\n scrollView.scrollTo(\n horizontal\n ? { x: offset, animated: false }\n : { y: offset, animated: false },\n );\n }\n },\n );\n\n const handleMeasurementFailure = useEventCallback(() => {\n measuringRef.current = false;\n });\n\n const revealTarget = useEventCallback(() => {\n const scrollView = scrollViewRef.current;\n const target = targetRef.current;\n\n if (\n !enabled ||\n contentOffset ||\n completedRef.current ||\n measuringRef.current\n ) {\n return;\n }\n\n if (\n !scrollView ||\n !target ||\n viewportSizeRef.current <= 0 ||\n contentSizeRef.current <= 0\n ) {\n return;\n }\n\n const nativeScrollView = scrollView.getNativeScrollRef();\n\n if (nativeScrollView == null) {\n return;\n }\n\n measuringRef.current = true;\n target.measureLayout(\n nativeScrollView,\n (x, y, width, height) => {\n handleMeasurement({\n scrollView,\n target,\n layout: { x, y, width, height },\n });\n },\n handleMeasurementFailure,\n );\n });\n\n const handleLayout = useEventCallback((event: LayoutChangeEvent) => {\n viewportSizeRef.current = horizontal\n ? event.nativeEvent.layout.width\n : event.nativeEvent.layout.height;\n\n revealTarget();\n onLayout?.(event);\n });\n\n const handleContentSizeChange = useEventCallback(\n (width: number, height: number) => {\n contentSizeRef.current = horizontal ? width : height;\n\n revealTarget();\n onContentSizeChange?.(width, height);\n },\n );\n\n const handleScrollBeginDrag = useEventCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n completedRef.current = true;\n\n onScrollBeginDrag?.(event);\n },\n );\n\n return {\n scrollViewRef,\n targetRef,\n onTargetLayout: revealTarget,\n onLayout: handleLayout,\n onContentSizeChange: handleContentSizeChange,\n onScrollBeginDrag: handleScrollBeginDrag,\n };\n}\n"],"mappings":"AAOA,SAAS,cAAc;AAEvB,SAAS,wBAAwB;AAIjC,SAAS,iCAAiC;AAEnC,SAAS,2BAA2B;AAAA,EACzC,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,IAAuC,CAAC,GAAG;AACzC,QAAM,gBAAgB,OAAmB,IAAI;AAC7C,QAAM,YAAY,OAAa,IAAI;AACnC,QAAM,kBAAkB,OAAO,CAAC;AAChC,QAAM,iBAAiB,OAAO,CAAC;AAC/B,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,eAAe,OAAO,KAAK;AAEjC,QAAM,oBAAoB;AAAA,IACxB,CAAC,EAAE,YAAY,QAAQ,OAAO,MAA6B;AACzD,mBAAa,UAAU;AAEvB,UAAI,CAAC,WAAW,iBAAiB,aAAa,SAAS;AACrD;AAAA,MACF;AAEA,UACE,cAAc,YAAY,cAC1B,UAAU,YAAY,QACtB;AACA;AAAA,MACF;AAEA,YAAM,aAAa,aAAa,OAAO,QAAQ,OAAO;AAEtD,UAAI,cAAc,GAAG;AACnB;AAAA,MACF;AAEA,YAAM,SAAS,0BAA0B;AAAA,QACvC;AAAA,QACA,cAAc,gBAAgB;AAAA,QAC9B,aAAa,eAAe;AAAA,QAC5B,YAAY,QAAQ,UAAU;AAAA,MAChC,CAAC;AAED,mBAAa,UAAU;AAEvB,UAAI,WAAW,MAAM;AACnB,mBAAW;AAAA,UACT,aACI,EAAE,GAAG,QAAQ,UAAU,MAAM,IAC7B,EAAE,GAAG,QAAQ,UAAU,MAAM;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,2BAA2B,iBAAiB,MAAM;AACtD,iBAAa,UAAU;AAAA,EACzB,CAAC;AAED,QAAM,eAAe,iBAAiB,MAAM;AAC1C,UAAM,aAAa,cAAc;AACjC,UAAM,SAAS,UAAU;AAEzB,QACE,CAAC,WACD,iBACA,aAAa,WACb,aAAa,SACb;AACA;AAAA,IACF;AAEA,QACE,CAAC,cACD,CAAC,UACD,gBAAgB,WAAW,KAC3B,eAAe,WAAW,GAC1B;AACA;AAAA,IACF;AAEA,UAAM,mBAAmB,WAAW,mBAAmB;AAEvD,QAAI,oBAAoB,MAAM;AAC5B;AAAA,IACF;AAEA,iBAAa,UAAU;AACvB,WAAO;AAAA,MACL;AAAA,MACA,CAAC,GAAG,GAAG,OAAO,WAAW;AACvB,0BAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA,QAAQ,EAAE,GAAG,GAAG,OAAO,OAAO;AAAA,QAChC,CAAC;AAAA,MACH;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,eAAe,iBAAiB,CAAC,UAA6B;AAClE,oBAAgB,UAAU,aACtB,MAAM,YAAY,OAAO,QACzB,MAAM,YAAY,OAAO;AAE7B,iBAAa;AACb,eAAW,KAAK;AAAA,EAClB,CAAC;AAED,QAAM,0BAA0B;AAAA,IAC9B,CAAC,OAAe,WAAmB;AACjC,qBAAe,UAAU,aAAa,QAAQ;AAE9C,mBAAa;AACb,4BAAsB,OAAO,MAAM;AAAA,IACrC;AAAA,EACF;AAEA,QAAM,wBAAwB;AAAA,IAC5B,CAAC,UAAmD;AAClD,mBAAa,UAAU;AAEvB,0BAAoB,KAAK;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,EACrB;AACF;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ScrollView, View, LayoutRectangle
|
|
1
|
+
import { ScrollView, View, LayoutRectangle } from 'react-native';
|
|
2
2
|
|
|
3
3
|
interface ScrollViewMeasurement {
|
|
4
4
|
scrollView: ScrollView;
|
|
@@ -10,8 +10,6 @@ interface ScrollViewRevealOptions {
|
|
|
10
10
|
viewportSize: number;
|
|
11
11
|
contentSize: number;
|
|
12
12
|
horizontal: boolean;
|
|
13
|
-
isRTL: boolean;
|
|
14
|
-
platform: PlatformOSType;
|
|
15
13
|
}
|
|
16
14
|
|
|
17
15
|
export type { ScrollViewMeasurement, ScrollViewRevealOptions };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** Move only as far as needed; oversized children align at their leading edge. */
|
|
2
|
-
declare function getRevealOffset(start: number, size: number, viewport: number, content: number, initialOffset: number
|
|
2
|
+
declare function getRevealOffset(start: number, size: number, viewport: number, content: number, initialOffset: number): number;
|
|
3
3
|
|
|
4
4
|
export { getRevealOffset };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
function getRevealOffset(start, size, viewport, content, initialOffset
|
|
1
|
+
function getRevealOffset(start, size, viewport, content, initialOffset) {
|
|
2
2
|
if (size > viewport) {
|
|
3
|
-
|
|
4
|
-
return Math.max(0, Math.min(offset2, content - viewport));
|
|
3
|
+
return Math.max(0, Math.min(start, content - viewport));
|
|
5
4
|
}
|
|
6
5
|
const offset = start < initialOffset ? start : Math.max(initialOffset, start + size - viewport);
|
|
7
6
|
return Math.max(0, Math.min(offset, content - viewport));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/get-reveal-offset.ts"],"sourcesContent":["/** Move only as far as needed; oversized children align at their leading edge. */\nexport function getRevealOffset(\n start: number,\n size: number,\n viewport: number,\n content: number,\n initialOffset: number,\n
|
|
1
|
+
{"version":3,"sources":["../../src/utils/get-reveal-offset.ts"],"sourcesContent":["/** Move only as far as needed; oversized children align at their leading edge. */\nexport function getRevealOffset(\n start: number,\n size: number,\n viewport: number,\n content: number,\n initialOffset: number,\n): number {\n if (size > viewport) {\n return Math.max(0, Math.min(start, content - viewport));\n }\n\n const offset =\n start < initialOffset\n ? start\n : Math.max(initialOffset, start + size - viewport);\n\n return Math.max(0, Math.min(offset, content - viewport));\n}\n"],"mappings":"AACO,SAAS,gBACd,OACA,MACA,UACA,SACA,eACQ;AACR,MAAI,OAAO,UAAU;AACnB,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,UAAU,QAAQ,CAAC;AAAA,EACxD;AAEA,QAAM,SACJ,QAAQ,gBACJ,QACA,KAAK,IAAI,eAAe,QAAQ,OAAO,QAAQ;AAErD,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,UAAU,QAAQ,CAAC;AACzD;","names":[]}
|
|
@@ -2,6 +2,6 @@ import { ScrollViewRevealOptions } from '../types/scroll-view-measurement.types.
|
|
|
2
2
|
import 'react-native';
|
|
3
3
|
|
|
4
4
|
/** Returns null when the target is already visible at the native initial offset. */
|
|
5
|
-
declare function getScrollViewRevealOffset({ layout, viewportSize, contentSize, horizontal,
|
|
5
|
+
declare function getScrollViewRevealOffset({ layout, viewportSize, contentSize, horizontal, }: ScrollViewRevealOptions): number | null;
|
|
6
6
|
|
|
7
7
|
export { getScrollViewRevealOffset };
|
|
@@ -3,27 +3,12 @@ function getScrollViewRevealOffset({
|
|
|
3
3
|
layout,
|
|
4
4
|
viewportSize,
|
|
5
5
|
contentSize,
|
|
6
|
-
horizontal
|
|
7
|
-
isRTL,
|
|
8
|
-
platform
|
|
6
|
+
horizontal
|
|
9
7
|
}) {
|
|
10
8
|
const size = horizontal ? layout.width : layout.height;
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
if (rtl && platform === "ios") {
|
|
15
|
-
start = contentSize - layout.x - layout.width;
|
|
16
|
-
}
|
|
17
|
-
const initialOffset = scrollsFromEnd ? Math.max(0, contentSize - viewportSize) : 0;
|
|
18
|
-
const offset = getRevealOffset(
|
|
19
|
-
start,
|
|
20
|
-
size,
|
|
21
|
-
viewportSize,
|
|
22
|
-
contentSize,
|
|
23
|
-
initialOffset,
|
|
24
|
-
scrollsFromEnd
|
|
25
|
-
);
|
|
26
|
-
return offset === initialOffset ? null : offset;
|
|
9
|
+
const start = horizontal ? layout.x : layout.y;
|
|
10
|
+
const offset = getRevealOffset(start, size, viewportSize, contentSize, 0);
|
|
11
|
+
return offset === 0 ? null : offset;
|
|
27
12
|
}
|
|
28
13
|
export {
|
|
29
14
|
getScrollViewRevealOffset
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/get-scroll-view-reveal-offset.ts"],"sourcesContent":["import type { ScrollViewRevealOptions } from \"../types/scroll-view-measurement.types\";\nimport { getRevealOffset } from \"./get-reveal-offset\";\n\n/** Returns null when the target is already visible at the native initial offset. */\nexport function getScrollViewRevealOffset({\n layout,\n viewportSize,\n contentSize,\n horizontal,\n
|
|
1
|
+
{"version":3,"sources":["../../src/utils/get-scroll-view-reveal-offset.ts"],"sourcesContent":["import type { ScrollViewRevealOptions } from \"../types/scroll-view-measurement.types\";\nimport { getRevealOffset } from \"./get-reveal-offset\";\n\n/** Returns null when the target is already visible at the native initial offset. */\nexport function getScrollViewRevealOffset({\n layout,\n viewportSize,\n contentSize,\n horizontal,\n}: ScrollViewRevealOptions): number | null {\n const size = horizontal ? layout.width : layout.height;\n const start = horizontal ? layout.x : layout.y;\n const offset = getRevealOffset(start, size, viewportSize, contentSize, 0);\n\n return offset === 0 ? null : offset;\n}\n"],"mappings":"AACA,SAAS,uBAAuB;AAGzB,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,OAAO,aAAa,OAAO,QAAQ,OAAO;AAChD,QAAM,QAAQ,aAAa,OAAO,IAAI,OAAO;AAC7C,QAAM,SAAS,gBAAgB,OAAO,MAAM,cAAc,aAAa,CAAC;AAExE,SAAO,WAAW,IAAI,OAAO;AAC/B;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/scroll-view",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.1.1",
|
|
4
4
|
"description": "Native ScrollView and a small hook to reveal an initially selected child.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"react-native": "0.86.2",
|
|
34
34
|
"typescript": "~6.0.3",
|
|
35
35
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
36
|
-
"@impulse-ui-native/
|
|
37
|
-
"@impulse-ui-native/
|
|
36
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
37
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": ">=18",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"prettier": "@impulse-ui-native/prettier-config",
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@impulse-ui-native/core": "
|
|
48
|
+
"@impulse-ui-native/core": "9.1.1"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
51
|
"build": "tsup --config tsup.config.ts",
|