@impulse-ui-native/progress 8.3.0 → 9.0.0
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
CHANGED
|
@@ -20,6 +20,6 @@ import { Progress } from "@impulse-ui-native/progress";
|
|
|
20
20
|
|
|
21
21
|
Progress defaults to a medium linear indicator with the primary tone. Provide `value` for determinate progress or omit it for indeterminate progress. Values are clamped between `min` and `max`, defaulting to 0 and 100. Invalid bounds fall back to a finite range; non-finite values render at the range minimum. Sizes, semantic colors, geometry, and animation duration come from `theme.components.progress`. Override indicator and track colors through `color` and `trackColor`.
|
|
22
22
|
|
|
23
|
-
Indeterminate linear motion
|
|
23
|
+
Indeterminate linear motion travels from left to right. Reanimated loops cancel on unmount and restart when duration changes. Native View props, styles, and linear `onLayout` callbacks are preserved.
|
|
24
24
|
|
|
25
25
|
`Progress` and `ProgressProps` are also exported by `@impulse-ui-native/toolkit`. Migrate imports from primitives to this package or the toolkit. Use the native Progress stories to inspect both variants, ranges, sizes, tones, and indeterminate states.
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
|
-
import { I18nManager } from "react-native";
|
|
4
3
|
import Animated, { useAnimatedStyle } from "react-native-reanimated";
|
|
5
4
|
import { useIndeterminateProgressAnimation } from "../hooks/use-indeterminate-progress-animation.hook";
|
|
6
5
|
const LinearIndeterminateIndicator = memo(
|
|
@@ -14,11 +13,10 @@ const LinearIndeterminateIndicator = memo(
|
|
|
14
13
|
}) {
|
|
15
14
|
const progress = useIndeterminateProgressAnimation(animationDuration);
|
|
16
15
|
const indicatorWidth = trackWidth * ratio;
|
|
17
|
-
const direction = I18nManager.isRTL;
|
|
18
16
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
19
17
|
transform: [
|
|
20
18
|
{
|
|
21
|
-
translateX:
|
|
19
|
+
translateX: -indicatorWidth + progress.value * (trackWidth + indicatorWidth)
|
|
22
20
|
}
|
|
23
21
|
]
|
|
24
22
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/linear-indeterminate-indicator.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/components/linear-indeterminate-indicator.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport type { LinearIndeterminateIndicatorProps } from \"../types/progress-internal.types\";\nimport { useIndeterminateProgressAnimation } from \"../hooks/use-indeterminate-progress-animation.hook\";\n\nexport const LinearIndeterminateIndicator = memo(\n function LinearIndeterminateIndicator({\n animationDuration,\n borderRadius,\n color,\n ratio,\n trackHeight,\n trackWidth,\n }: LinearIndeterminateIndicatorProps) {\n const progress = useIndeterminateProgressAnimation(animationDuration);\n\n const indicatorWidth = trackWidth * ratio;\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [\n {\n translateX:\n -indicatorWidth + progress.value * (trackWidth + indicatorWidth),\n },\n ],\n }));\n\n const indicatorStyle = useMemo(\n () => ({\n backgroundColor: color,\n borderRadius,\n height: trackHeight,\n width: `${ratio * 100}%` as const,\n }),\n [borderRadius, color, ratio, trackHeight],\n );\n\n const composedStyle = useMemo(\n () => [indicatorStyle, animatedStyle],\n [indicatorStyle, animatedStyle],\n );\n\n return <Animated.View style={composedStyle} />;\n },\n);\n"],"mappings":"AA0CW;AA1CX,SAAS,MAAM,eAAe;AAC9B,OAAO,YAAY,wBAAwB;AAG3C,SAAS,yCAAyC;AAE3C,MAAM,+BAA+B;AAAA,EAC1C,SAASA,8BAA6B;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAsC;AACpC,UAAM,WAAW,kCAAkC,iBAAiB;AAEpE,UAAM,iBAAiB,aAAa;AACpC,UAAM,gBAAgB,iBAAiB,OAAO;AAAA,MAC5C,WAAW;AAAA,QACT;AAAA,UACE,YACE,CAAC,iBAAiB,SAAS,SAAS,aAAa;AAAA,QACrD;AAAA,MACF;AAAA,IACF,EAAE;AAEF,UAAM,iBAAiB;AAAA,MACrB,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ;AAAA,QACR,OAAO,GAAG,QAAQ,GAAG;AAAA,MACvB;AAAA,MACA,CAAC,cAAc,OAAO,OAAO,WAAW;AAAA,IAC1C;AAEA,UAAM,gBAAgB;AAAA,MACpB,MAAM,CAAC,gBAAgB,aAAa;AAAA,MACpC,CAAC,gBAAgB,aAAa;AAAA,IAChC;AAEA,WAAO,oBAAC,SAAS,MAAT,EAAc,OAAO,eAAe;AAAA,EAC9C;AACF;","names":["LinearIndeterminateIndicator"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useCallback, useMemo, useState } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { View } from "react-native";
|
|
4
4
|
import { ProgressTrackStyles as styles } from "../constants/progress.constants";
|
|
5
5
|
import { LinearIndeterminateIndicator } from "./linear-indeterminate-indicator";
|
|
6
6
|
const LinearProgress = memo(function LinearProgress2({
|
|
@@ -38,7 +38,7 @@ const LinearProgress = memo(function LinearProgress2({
|
|
|
38
38
|
);
|
|
39
39
|
const determinateIndicatorStyle = useMemo(
|
|
40
40
|
() => ({
|
|
41
|
-
alignSelf:
|
|
41
|
+
alignSelf: "flex-start",
|
|
42
42
|
backgroundColor: indicatorColor,
|
|
43
43
|
borderRadius,
|
|
44
44
|
height: trackHeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/linear-progress.tsx"],"sourcesContent":["import type { LayoutChangeEvent } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/linear-progress.tsx"],"sourcesContent":["import type { LayoutChangeEvent } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { View } from \"react-native\";\n\nimport type { LinearProgressProps } from \"../types/progress-internal.types\";\nimport { ProgressTrackStyles as styles } from \"../constants/progress.constants\";\nimport { LinearIndeterminateIndicator } from \"./linear-indeterminate-indicator\";\n\nexport const LinearProgress = memo(function LinearProgress({\n animationDuration,\n borderRadius,\n fraction,\n indicatorColor,\n indeterminate,\n indeterminateWidth,\n onLayout,\n style,\n trackColor,\n trackHeight,\n ...props\n}: LinearProgressProps) {\n const [trackWidth, setTrackWidth] = useState(0);\n\n const handleLayout = useCallback(\n (event: LayoutChangeEvent) => {\n setTrackWidth(event.nativeEvent.layout.width);\n onLayout?.(event);\n },\n [onLayout],\n );\n\n const trackStyle = useMemo(\n () => [\n styles.track,\n {\n backgroundColor: trackColor,\n borderRadius,\n height: trackHeight,\n },\n style,\n ],\n [borderRadius, style, trackColor, trackHeight],\n );\n\n const determinateIndicatorStyle = useMemo(\n () => ({\n alignSelf: \"flex-start\" as const,\n backgroundColor: indicatorColor,\n borderRadius,\n height: trackHeight,\n width: `${fraction * 100}%` as const,\n }),\n [borderRadius, fraction, indicatorColor, trackHeight],\n );\n\n return (\n <View {...props} onLayout={handleLayout} style={trackStyle}>\n {indeterminate ? (\n <LinearIndeterminateIndicator\n animationDuration={animationDuration}\n borderRadius={borderRadius}\n color={indicatorColor}\n ratio={indeterminateWidth}\n trackHeight={trackHeight}\n trackWidth={trackWidth}\n />\n ) : null}\n {!indeterminate ? <View style={determinateIndicatorStyle} /> : null}\n </View>\n );\n});\n"],"mappings":"AAwDI,SAEI,KAFJ;AAvDJ,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,YAAY;AAGrB,SAAS,uBAAuB,cAAc;AAC9C,SAAS,oCAAoC;AAEtC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,QAAM,eAAe;AAAA,IACnB,CAAC,UAA6B;AAC5B,oBAAc,MAAM,YAAY,OAAO,KAAK;AAC5C,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,QACE,iBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,OAAO,YAAY,WAAW;AAAA,EAC/C;AAEA,QAAM,4BAA4B;AAAA,IAChC,OAAO;AAAA,MACL,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB;AAAA,MACA,QAAQ;AAAA,MACR,OAAO,GAAG,WAAW,GAAG;AAAA,IAC1B;AAAA,IACA,CAAC,cAAc,UAAU,gBAAgB,WAAW;AAAA,EACtD;AAEA,SACE,qBAAC,QAAM,GAAG,OAAO,UAAU,cAAc,OAAO,YAC7C;AAAA,oBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,OAAO;AAAA,QACP;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IACH,CAAC,gBAAgB,oBAAC,QAAK,OAAO,2BAA2B,IAAK;AAAA,KACjE;AAEJ,CAAC;","names":["LinearProgress"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/progress",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "Progress components for ImpulseUI Native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
],
|
|
27
27
|
"sideEffects": false,
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@impulse-ui-native/theme": "
|
|
29
|
+
"@impulse-ui-native/theme": "9.0.0"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@types/react": "~19.2.14",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"react-native-svg": "15.15.4",
|
|
39
39
|
"react-native-reanimated": "4.5.1",
|
|
40
40
|
"react-native-worklets": "0.10.1",
|
|
41
|
-
"@impulse-ui-native/
|
|
41
|
+
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
42
42
|
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
43
|
-
"@impulse-ui-native/
|
|
43
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": ">=18",
|