@rocapine/react-native-onboarding-ui 1.37.0 → 1.38.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/dist/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.d.ts +8 -0
- package/dist/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.d.ts.map +1 -1
- package/dist/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.js +71 -50
- package/dist/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.js.map +1 -1
- package/package.json +1 -1
- package/src/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.tsx +61 -34
|
@@ -11,6 +11,10 @@ export type ProgressIndicatorElementProps = BaseBoxProps & {
|
|
|
11
11
|
autoplay?: boolean;
|
|
12
12
|
loop?: boolean;
|
|
13
13
|
initialValue?: number;
|
|
14
|
+
minValue?: number;
|
|
15
|
+
maxValue?: number;
|
|
16
|
+
step?: number;
|
|
17
|
+
labelSuffix?: string;
|
|
14
18
|
duration?: number;
|
|
15
19
|
delay?: number;
|
|
16
20
|
easing?: ProgressEasing;
|
|
@@ -284,6 +288,10 @@ export declare const ProgressIndicatorElementPropsSchema: z.ZodObject<{
|
|
|
284
288
|
autoplay: z.ZodOptional<z.ZodBoolean>;
|
|
285
289
|
loop: z.ZodOptional<z.ZodBoolean>;
|
|
286
290
|
initialValue: z.ZodOptional<z.ZodNumber>;
|
|
291
|
+
minValue: z.ZodOptional<z.ZodNumber>;
|
|
292
|
+
maxValue: z.ZodOptional<z.ZodNumber>;
|
|
293
|
+
step: z.ZodOptional<z.ZodNumber>;
|
|
294
|
+
labelSuffix: z.ZodOptional<z.ZodString>;
|
|
287
295
|
duration: z.ZodOptional<z.ZodNumber>;
|
|
288
296
|
delay: z.ZodOptional<z.ZodNumber>;
|
|
289
297
|
easing: z.ZodOptional<z.ZodEnum<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressIndicatorElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAaxB,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAO,MAAM,UAAU,CAAC;AAG9C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;AAE/E,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,mCAAmC
|
|
1
|
+
{"version":3,"file":"ProgressIndicatorElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAaxB,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAO,MAAM,UAAU,CAAC;AAG9C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;AAE/E,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,mCAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoB9C,CAAC;AAMH,KAAK,iBAAiB,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,mBAAmB,CAAA;CAAE,CAAC,CAAC;AAE3E,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,iBAAiB,CAAC;IAC3B,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YAgNjF,CAAC"}
|
|
@@ -47,10 +47,14 @@ const ProgressEasingSchema = zod_1.z.enum(["linear", "ease-in", "ease-out", "eas
|
|
|
47
47
|
exports.ProgressIndicatorElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
|
|
48
48
|
variant: zod_1.z.enum(["linear", "circular"]).optional(),
|
|
49
49
|
variableName: zod_1.z.string().min(1).optional(),
|
|
50
|
-
value: zod_1.z.number().
|
|
50
|
+
value: zod_1.z.number().optional(),
|
|
51
51
|
autoplay: zod_1.z.boolean().optional(),
|
|
52
52
|
loop: zod_1.z.boolean().optional(),
|
|
53
|
-
initialValue: zod_1.z.number().
|
|
53
|
+
initialValue: zod_1.z.number().optional(),
|
|
54
|
+
minValue: zod_1.z.number().optional(),
|
|
55
|
+
maxValue: zod_1.z.number().optional(),
|
|
56
|
+
step: zod_1.z.number().gt(0).optional(),
|
|
57
|
+
labelSuffix: zod_1.z.string().optional(),
|
|
54
58
|
duration: zod_1.z.number().min(0).optional(),
|
|
55
59
|
delay: zod_1.z.number().min(0).optional(),
|
|
56
60
|
easing: ProgressEasingSchema.optional(),
|
|
@@ -62,67 +66,82 @@ exports.ProgressIndicatorElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.
|
|
|
62
66
|
labelColor: zod_1.z.string().optional(),
|
|
63
67
|
});
|
|
64
68
|
const AnimatedCircle = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Circle);
|
|
65
|
-
const clamp = (n) => Math.max(
|
|
69
|
+
const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
|
|
66
70
|
const ProgressIndicatorElementComponent = ({ element, ctx }) => {
|
|
67
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
71
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
68
72
|
const { theme, variables, setVariable } = ctx;
|
|
69
73
|
const { props } = element;
|
|
70
74
|
const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "linear";
|
|
71
|
-
const
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
const
|
|
75
|
-
const
|
|
76
|
-
const
|
|
77
|
-
const
|
|
78
|
-
const
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
const
|
|
82
|
-
const
|
|
83
|
-
const
|
|
75
|
+
const minValue = (_b = props.minValue) !== null && _b !== void 0 ? _b : 0;
|
|
76
|
+
const maxValue = (_c = props.maxValue) !== null && _c !== void 0 ? _c : 100;
|
|
77
|
+
const range = maxValue - minValue;
|
|
78
|
+
const step = props.step && props.step > 0 ? props.step : 1;
|
|
79
|
+
const labelSuffix = (_d = props.labelSuffix) !== null && _d !== void 0 ? _d : "%";
|
|
80
|
+
const initialValue = clamp((_e = props.initialValue) !== null && _e !== void 0 ? _e : minValue, minValue, maxValue);
|
|
81
|
+
const duration = (_f = props.duration) !== null && _f !== void 0 ? _f : 1000;
|
|
82
|
+
const delay = (_g = props.delay) !== null && _g !== void 0 ? _g : 0;
|
|
83
|
+
const easing = buildAnimation_1.EASING_MAP[(_h = props.easing) !== null && _h !== void 0 ? _h : "ease-in-out"];
|
|
84
|
+
const autoplay = (_j = props.autoplay) !== null && _j !== void 0 ? _j : false;
|
|
85
|
+
const loop = (_k = props.loop) !== null && _k !== void 0 ? _k : false;
|
|
86
|
+
const color = (_l = props.color) !== null && _l !== void 0 ? _l : theme.colors.primary;
|
|
87
|
+
const trackColor = (_m = props.trackColor) !== null && _m !== void 0 ? _m : theme.colors.neutral.lower;
|
|
88
|
+
const labelColor = (_o = props.labelColor) !== null && _o !== void 0 ? _o : theme.colors.text.primary;
|
|
89
|
+
// Snap a raw value to `step` within [minValue, maxValue]. The label and the
|
|
90
|
+
// written variable carry the snapped value, not a percentage.
|
|
91
|
+
const snap = (v) => clamp(minValue + Math.round((v - minValue) / step) * step, minValue, maxValue);
|
|
92
|
+
// Bound variable value (input mode, non-autoplay) or static value. `progress`
|
|
93
|
+
// is the value in [minValue, maxValue]; the fill fraction is derived from it.
|
|
94
|
+
const boundRaw = props.variableName ? (_p = variables[props.variableName]) === null || _p === void 0 ? void 0 : _p.value : undefined;
|
|
95
|
+
const boundValue = boundRaw !== undefined ? clamp(Number(boundRaw) || 0, minValue, maxValue) : undefined;
|
|
96
|
+
const target = autoplay ? maxValue : clamp((_q = boundValue !== null && boundValue !== void 0 ? boundValue : props.value) !== null && _q !== void 0 ? _q : initialValue, minValue, maxValue);
|
|
84
97
|
const progress = (0, react_native_reanimated_1.useSharedValue)(initialValue);
|
|
85
|
-
const [
|
|
98
|
+
const [displayValue, setDisplayValue] = (0, react_1.useState)(snap(initialValue));
|
|
86
99
|
// Mirror the animated value into a label + (autoplay) the bound variable.
|
|
87
|
-
// Reaction input is the *
|
|
88
|
-
// the
|
|
89
|
-
// per-frame context write storm (setVariable
|
|
90
|
-
|
|
100
|
+
// Reaction input is the *step-snapped* value, so the JS callback fires only
|
|
101
|
+
// when the snapped value changes ((maxValue-minValue)/step hops/sweep) rather
|
|
102
|
+
// than every frame — avoids a per-frame context write storm (setVariable
|
|
103
|
+
// re-renders all variable consumers). Coarse `step` for large ranges.
|
|
104
|
+
const showLabel = (_r = props.showLabel) !== null && _r !== void 0 ? _r : false;
|
|
91
105
|
const variableName = props.variableName;
|
|
92
106
|
const writeVariable = (v) => {
|
|
93
107
|
if (autoplay && variableName) {
|
|
94
|
-
setVariable(variableName, { value: String(v), kind: "int" });
|
|
108
|
+
setVariable(variableName, { value: String(v), kind: Number.isInteger(v) ? "int" : "float" });
|
|
95
109
|
}
|
|
96
110
|
};
|
|
97
111
|
const writesVariable = autoplay && !!variableName;
|
|
98
112
|
// The dependency array is REQUIRED. Without it reanimated tears down and
|
|
99
113
|
// rebuilds this mapper on EVERY render. A looping `showLabel` indicator
|
|
100
|
-
// re-renders
|
|
101
|
-
// be start/stopped
|
|
114
|
+
// re-renders continuously (one setDisplayValue per step hop), so its mapper
|
|
115
|
+
// would be start/stopped indefinitely — perpetual churn on the UI-thread mapper
|
|
102
116
|
// scheduler that destabilizes *other* running animations on the same screen
|
|
103
117
|
// (they visibly reset mid/after a sweep — "finishes then resets for no reason").
|
|
104
|
-
// Recreating also resets `prev` to undefined, defeating the `
|
|
118
|
+
// Recreating also resets `prev` to undefined, defeating the `snapped === prev`
|
|
105
119
|
// guard so the JS callbacks over-fire. Keying on the values the worklet branches
|
|
106
|
-
// on keeps the mapper stable; the JS fns it calls
|
|
107
|
-
// writeVariable) are already stable across renders.
|
|
108
|
-
(0, react_native_reanimated_1.useAnimatedReaction)(() =>
|
|
109
|
-
|
|
120
|
+
// on (incl. minValue/maxValue/step) keeps the mapper stable; the JS fns it calls
|
|
121
|
+
// (setDisplayValue, setVariable via writeVariable) are already stable across renders.
|
|
122
|
+
(0, react_native_reanimated_1.useAnimatedReaction)(() => {
|
|
123
|
+
// Inline snap (worklet — can't call the JS `snap` closure). Captures the
|
|
124
|
+
// primitive minValue/maxValue/step (re-keyed via the deps array below).
|
|
125
|
+
const snapped = minValue + Math.round((progress.value - minValue) / step) * step;
|
|
126
|
+
return Math.max(minValue, Math.min(maxValue, snapped));
|
|
127
|
+
}, (snapped, prev) => {
|
|
128
|
+
if (snapped === prev)
|
|
110
129
|
return;
|
|
111
130
|
if (showLabel)
|
|
112
|
-
(0, react_native_reanimated_1.runOnJS)(
|
|
131
|
+
(0, react_native_reanimated_1.runOnJS)(setDisplayValue)(snapped);
|
|
113
132
|
if (writesVariable)
|
|
114
|
-
(0, react_native_reanimated_1.runOnJS)(writeVariable)(
|
|
115
|
-
}, [showLabel, writesVariable, variableName]);
|
|
116
|
-
// Autoplay: animate initialValue ->
|
|
133
|
+
(0, react_native_reanimated_1.runOnJS)(writeVariable)(snapped);
|
|
134
|
+
}, [showLabel, writesVariable, variableName, minValue, maxValue, step]);
|
|
135
|
+
// Autoplay: animate initialValue -> maxValue, optionally looping, after `delay`.
|
|
117
136
|
(0, react_1.useEffect)(() => {
|
|
118
137
|
if (!autoplay)
|
|
119
138
|
return;
|
|
120
139
|
progress.value = initialValue;
|
|
121
|
-
const anim = (0, react_native_reanimated_1.withTiming)(
|
|
140
|
+
const anim = (0, react_native_reanimated_1.withTiming)(maxValue, { duration, easing });
|
|
122
141
|
const looped = loop ? (0, react_native_reanimated_1.withRepeat)(anim, -1, false) : anim;
|
|
123
142
|
progress.value = delay > 0 ? (0, react_native_reanimated_1.withDelay)(delay, looped) : looped;
|
|
124
143
|
return () => (0, react_native_reanimated_1.cancelAnimation)(progress);
|
|
125
|
-
}, [autoplay, loop, duration, delay, easing, initialValue]);
|
|
144
|
+
}, [autoplay, loop, duration, delay, easing, initialValue, maxValue]);
|
|
126
145
|
// Bound / static (non-autoplay): animate toward the current target after `delay`.
|
|
127
146
|
(0, react_1.useEffect)(() => {
|
|
128
147
|
if (autoplay)
|
|
@@ -132,16 +151,18 @@ const ProgressIndicatorElementComponent = ({ element, ctx }) => {
|
|
|
132
151
|
return () => (0, react_native_reanimated_1.cancelAnimation)(progress);
|
|
133
152
|
}, [autoplay, target, duration, delay, easing]);
|
|
134
153
|
// Circular geometry (computed unconditionally so hooks below stay unconditional).
|
|
135
|
-
const size = (
|
|
136
|
-
const strokeWidth = (
|
|
154
|
+
const size = (_s = props.size) !== null && _s !== void 0 ? _s : 120;
|
|
155
|
+
const strokeWidth = (_t = props.thickness) !== null && _t !== void 0 ? _t : 10;
|
|
137
156
|
const radius = (size - strokeWidth) / 2;
|
|
138
157
|
const circumference = 2 * Math.PI * radius;
|
|
139
|
-
const animatedCircleProps = (0, react_native_reanimated_1.useAnimatedProps)(() =>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
158
|
+
const animatedCircleProps = (0, react_native_reanimated_1.useAnimatedProps)(() => {
|
|
159
|
+
const frac = range > 0 ? (progress.value - minValue) / range : 0;
|
|
160
|
+
return { strokeDashoffset: circumference * (1 - frac) };
|
|
161
|
+
});
|
|
162
|
+
const animatedFillStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
|
|
163
|
+
const frac = range > 0 ? (progress.value - minValue) / range : 0;
|
|
164
|
+
return { width: `${frac * 100}%` };
|
|
165
|
+
});
|
|
145
166
|
const containerStyle = {
|
|
146
167
|
alignSelf: props.alignSelf,
|
|
147
168
|
flex: props.flex,
|
|
@@ -167,18 +188,18 @@ const ProgressIndicatorElementComponent = ({ element, ctx }) => {
|
|
|
167
188
|
fontSize: theme.typography.textStyles.heading2.fontSize,
|
|
168
189
|
fontWeight: theme.typography.fontWeight.bold,
|
|
169
190
|
fontFamily: theme.typography.textStyles.heading2.fontFamily,
|
|
170
|
-
}, children: [
|
|
191
|
+
}, children: [displayValue, labelSuffix] }) })) : null] }));
|
|
171
192
|
}
|
|
172
193
|
// Linear variant
|
|
173
|
-
const barHeight = (
|
|
174
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [containerStyle, { width: (
|
|
194
|
+
const barHeight = (_u = props.thickness) !== null && _u !== void 0 ? _u : 8;
|
|
195
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [containerStyle, { width: (_v = (0, shared_1.dim)(props.width)) !== null && _v !== void 0 ? _v : "100%", flexDirection: "row", alignItems: "center" }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
175
196
|
flex: 1,
|
|
176
197
|
height: barHeight,
|
|
177
198
|
backgroundColor: trackColor,
|
|
178
|
-
borderRadius: (
|
|
199
|
+
borderRadius: (_w = props.borderRadius) !== null && _w !== void 0 ? _w : barHeight / 2,
|
|
179
200
|
overflow: "hidden",
|
|
180
201
|
}, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
|
|
181
|
-
{ height: "100%", backgroundColor: color, borderRadius: (
|
|
202
|
+
{ height: "100%", backgroundColor: color, borderRadius: (_x = props.borderRadius) !== null && _x !== void 0 ? _x : barHeight / 2 },
|
|
182
203
|
animatedFillStyle,
|
|
183
204
|
] }) }), props.showLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: {
|
|
184
205
|
marginLeft: 12,
|
|
@@ -188,7 +209,7 @@ const ProgressIndicatorElementComponent = ({ element, ctx }) => {
|
|
|
188
209
|
fontFamily: theme.typography.textStyles.label.fontFamily,
|
|
189
210
|
minWidth: 44,
|
|
190
211
|
textAlign: "right",
|
|
191
|
-
}, children: [
|
|
212
|
+
}, children: [displayValue, labelSuffix] })) : null] }));
|
|
192
213
|
};
|
|
193
214
|
exports.ProgressIndicatorElementComponent = ProgressIndicatorElementComponent;
|
|
194
215
|
//# sourceMappingURL=ProgressIndicatorElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressIndicatorElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmD;AACnD,+CAA0C;AAC1C,6BAAwB;AACxB,mFAUiC;AACjC,qEAA+C;AAC/C,iDAAkE;AAElE,qCAA8C;AAC9C,qDAA8C;
|
|
1
|
+
{"version":3,"file":"ProgressIndicatorElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ProgressIndicatorElement.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rocapine/react-native-onboarding-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.38.0",
|
|
4
4
|
"description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -27,6 +27,10 @@ export type ProgressIndicatorElementProps = BaseBoxProps & {
|
|
|
27
27
|
autoplay?: boolean;
|
|
28
28
|
loop?: boolean;
|
|
29
29
|
initialValue?: number;
|
|
30
|
+
minValue?: number;
|
|
31
|
+
maxValue?: number;
|
|
32
|
+
step?: number;
|
|
33
|
+
labelSuffix?: string;
|
|
30
34
|
duration?: number;
|
|
31
35
|
delay?: number;
|
|
32
36
|
easing?: ProgressEasing;
|
|
@@ -43,10 +47,14 @@ const ProgressEasingSchema = z.enum(["linear", "ease-in", "ease-out", "ease-in-o
|
|
|
43
47
|
export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
44
48
|
variant: z.enum(["linear", "circular"]).optional(),
|
|
45
49
|
variableName: z.string().min(1).optional(),
|
|
46
|
-
value: z.number().
|
|
50
|
+
value: z.number().optional(),
|
|
47
51
|
autoplay: z.boolean().optional(),
|
|
48
52
|
loop: z.boolean().optional(),
|
|
49
|
-
initialValue: z.number().
|
|
53
|
+
initialValue: z.number().optional(),
|
|
54
|
+
minValue: z.number().optional(),
|
|
55
|
+
maxValue: z.number().optional(),
|
|
56
|
+
step: z.number().gt(0).optional(),
|
|
57
|
+
labelSuffix: z.string().optional(),
|
|
50
58
|
duration: z.number().min(0).optional(),
|
|
51
59
|
delay: z.number().min(0).optional(),
|
|
52
60
|
easing: ProgressEasingSchema.optional(),
|
|
@@ -60,7 +68,7 @@ export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
|
60
68
|
|
|
61
69
|
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
|
62
70
|
|
|
63
|
-
const clamp = (n: number): number => Math.max(
|
|
71
|
+
const clamp = (n: number, min: number, max: number): number => Math.max(min, Math.min(max, n));
|
|
64
72
|
|
|
65
73
|
type ProgressUIElement = Extract<UIElement, { type: "ProgressIndicator" }>;
|
|
66
74
|
|
|
@@ -74,7 +82,12 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
|
|
|
74
82
|
const { props } = element;
|
|
75
83
|
|
|
76
84
|
const variant = props.variant ?? "linear";
|
|
77
|
-
const
|
|
85
|
+
const minValue = props.minValue ?? 0;
|
|
86
|
+
const maxValue = props.maxValue ?? 100;
|
|
87
|
+
const range = maxValue - minValue;
|
|
88
|
+
const step = props.step && props.step > 0 ? props.step : 1;
|
|
89
|
+
const labelSuffix = props.labelSuffix ?? "%";
|
|
90
|
+
const initialValue = clamp(props.initialValue ?? minValue, minValue, maxValue);
|
|
78
91
|
const duration = props.duration ?? 1000;
|
|
79
92
|
const delay = props.delay ?? 0;
|
|
80
93
|
const easing = EASING_MAP[props.easing ?? "ease-in-out"];
|
|
@@ -85,55 +98,67 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
|
|
|
85
98
|
const trackColor = props.trackColor ?? theme.colors.neutral.lower;
|
|
86
99
|
const labelColor = props.labelColor ?? theme.colors.text.primary;
|
|
87
100
|
|
|
88
|
-
//
|
|
101
|
+
// Snap a raw value to `step` within [minValue, maxValue]. The label and the
|
|
102
|
+
// written variable carry the snapped value, not a percentage.
|
|
103
|
+
const snap = (v: number): number =>
|
|
104
|
+
clamp(minValue + Math.round((v - minValue) / step) * step, minValue, maxValue);
|
|
105
|
+
|
|
106
|
+
// Bound variable value (input mode, non-autoplay) or static value. `progress`
|
|
107
|
+
// is the value in [minValue, maxValue]; the fill fraction is derived from it.
|
|
89
108
|
const boundRaw = props.variableName ? variables[props.variableName]?.value : undefined;
|
|
90
|
-
const boundValue = boundRaw !== undefined ? clamp(Number(boundRaw) || 0) : undefined;
|
|
91
|
-
const target = autoplay ?
|
|
109
|
+
const boundValue = boundRaw !== undefined ? clamp(Number(boundRaw) || 0, minValue, maxValue) : undefined;
|
|
110
|
+
const target = autoplay ? maxValue : clamp(boundValue ?? props.value ?? initialValue, minValue, maxValue);
|
|
92
111
|
|
|
93
112
|
const progress = useSharedValue(initialValue);
|
|
94
|
-
const [
|
|
113
|
+
const [displayValue, setDisplayValue] = useState(snap(initialValue));
|
|
95
114
|
|
|
96
115
|
// Mirror the animated value into a label + (autoplay) the bound variable.
|
|
97
|
-
// Reaction input is the *
|
|
98
|
-
// the
|
|
99
|
-
// per-frame context write storm (setVariable
|
|
116
|
+
// Reaction input is the *step-snapped* value, so the JS callback fires only
|
|
117
|
+
// when the snapped value changes ((maxValue-minValue)/step hops/sweep) rather
|
|
118
|
+
// than every frame — avoids a per-frame context write storm (setVariable
|
|
119
|
+
// re-renders all variable consumers). Coarse `step` for large ranges.
|
|
100
120
|
const showLabel = props.showLabel ?? false;
|
|
101
121
|
const variableName = props.variableName;
|
|
102
122
|
const writeVariable = (v: number) => {
|
|
103
123
|
if (autoplay && variableName) {
|
|
104
|
-
setVariable(variableName, { value: String(v), kind: "int" });
|
|
124
|
+
setVariable(variableName, { value: String(v), kind: Number.isInteger(v) ? "int" : "float" });
|
|
105
125
|
}
|
|
106
126
|
};
|
|
107
127
|
const writesVariable = autoplay && !!variableName;
|
|
108
128
|
// The dependency array is REQUIRED. Without it reanimated tears down and
|
|
109
129
|
// rebuilds this mapper on EVERY render. A looping `showLabel` indicator
|
|
110
|
-
// re-renders
|
|
111
|
-
// be start/stopped
|
|
130
|
+
// re-renders continuously (one setDisplayValue per step hop), so its mapper
|
|
131
|
+
// would be start/stopped indefinitely — perpetual churn on the UI-thread mapper
|
|
112
132
|
// scheduler that destabilizes *other* running animations on the same screen
|
|
113
133
|
// (they visibly reset mid/after a sweep — "finishes then resets for no reason").
|
|
114
|
-
// Recreating also resets `prev` to undefined, defeating the `
|
|
134
|
+
// Recreating also resets `prev` to undefined, defeating the `snapped === prev`
|
|
115
135
|
// guard so the JS callbacks over-fire. Keying on the values the worklet branches
|
|
116
|
-
// on keeps the mapper stable; the JS fns it calls
|
|
117
|
-
// writeVariable) are already stable across renders.
|
|
136
|
+
// on (incl. minValue/maxValue/step) keeps the mapper stable; the JS fns it calls
|
|
137
|
+
// (setDisplayValue, setVariable via writeVariable) are already stable across renders.
|
|
118
138
|
useAnimatedReaction(
|
|
119
|
-
() =>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
139
|
+
() => {
|
|
140
|
+
// Inline snap (worklet — can't call the JS `snap` closure). Captures the
|
|
141
|
+
// primitive minValue/maxValue/step (re-keyed via the deps array below).
|
|
142
|
+
const snapped = minValue + Math.round((progress.value - minValue) / step) * step;
|
|
143
|
+
return Math.max(minValue, Math.min(maxValue, snapped));
|
|
144
|
+
},
|
|
145
|
+
(snapped, prev) => {
|
|
146
|
+
if (snapped === prev) return;
|
|
147
|
+
if (showLabel) runOnJS(setDisplayValue)(snapped);
|
|
148
|
+
if (writesVariable) runOnJS(writeVariable)(snapped);
|
|
124
149
|
},
|
|
125
|
-
[showLabel, writesVariable, variableName]
|
|
150
|
+
[showLabel, writesVariable, variableName, minValue, maxValue, step]
|
|
126
151
|
);
|
|
127
152
|
|
|
128
|
-
// Autoplay: animate initialValue ->
|
|
153
|
+
// Autoplay: animate initialValue -> maxValue, optionally looping, after `delay`.
|
|
129
154
|
useEffect(() => {
|
|
130
155
|
if (!autoplay) return;
|
|
131
156
|
progress.value = initialValue;
|
|
132
|
-
const anim = withTiming(
|
|
157
|
+
const anim = withTiming(maxValue, { duration, easing });
|
|
133
158
|
const looped = loop ? withRepeat(anim, -1, false) : anim;
|
|
134
159
|
progress.value = delay > 0 ? withDelay(delay, looped) : looped;
|
|
135
160
|
return () => cancelAnimation(progress);
|
|
136
|
-
}, [autoplay, loop, duration, delay, easing, initialValue]);
|
|
161
|
+
}, [autoplay, loop, duration, delay, easing, initialValue, maxValue]);
|
|
137
162
|
|
|
138
163
|
// Bound / static (non-autoplay): animate toward the current target after `delay`.
|
|
139
164
|
useEffect(() => {
|
|
@@ -149,12 +174,14 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
|
|
|
149
174
|
const radius = (size - strokeWidth) / 2;
|
|
150
175
|
const circumference = 2 * Math.PI * radius;
|
|
151
176
|
|
|
152
|
-
const animatedCircleProps = useAnimatedProps(() =>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
177
|
+
const animatedCircleProps = useAnimatedProps(() => {
|
|
178
|
+
const frac = range > 0 ? (progress.value - minValue) / range : 0;
|
|
179
|
+
return { strokeDashoffset: circumference * (1 - frac) };
|
|
180
|
+
});
|
|
181
|
+
const animatedFillStyle = useAnimatedStyle(() => {
|
|
182
|
+
const frac = range > 0 ? (progress.value - minValue) / range : 0;
|
|
183
|
+
return { width: `${frac * 100}%` };
|
|
184
|
+
});
|
|
158
185
|
|
|
159
186
|
const containerStyle = {
|
|
160
187
|
alignSelf: props.alignSelf,
|
|
@@ -212,7 +239,7 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
|
|
|
212
239
|
fontFamily: theme.typography.textStyles.heading2.fontFamily,
|
|
213
240
|
}}
|
|
214
241
|
>
|
|
215
|
-
{
|
|
242
|
+
{displayValue}{labelSuffix}
|
|
216
243
|
</Text>
|
|
217
244
|
</View>
|
|
218
245
|
) : null}
|
|
@@ -253,7 +280,7 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
|
|
|
253
280
|
textAlign: "right",
|
|
254
281
|
}}
|
|
255
282
|
>
|
|
256
|
-
{
|
|
283
|
+
{displayValue}{labelSuffix}
|
|
257
284
|
</Text>
|
|
258
285
|
) : null}
|
|
259
286
|
</View>
|