@draftbit/core 48.0.3-b432fe.2 → 48.0.3-b9b64b.2

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 (53) hide show
  1. package/lib/src/components/SwipeableItem/SwipeableItem.js +9 -2
  2. package/lib/src/components/SwipeableItem/SwipeableItem.js.map +1 -1
  3. package/lib/src/components/SwipeableItem/SwipeableItemCommon.d.ts +3 -2
  4. package/lib/src/components/SwipeableItem/SwipeableItemCommon.js.map +1 -1
  5. package/lib/src/index.d.ts +0 -2
  6. package/lib/src/index.js +0 -2
  7. package/lib/src/index.js.map +1 -1
  8. package/lib/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +3 -3
  10. package/src/components/SwipeableItem/SwipeableItem.js +9 -2
  11. package/src/components/SwipeableItem/SwipeableItem.js.map +1 -1
  12. package/src/components/SwipeableItem/SwipeableItem.tsx +9 -1
  13. package/src/components/SwipeableItem/SwipeableItemCommon.js.map +1 -1
  14. package/src/components/SwipeableItem/SwipeableItemCommon.ts +3 -2
  15. package/src/index.js +0 -2
  16. package/src/index.js.map +1 -1
  17. package/src/index.tsx +0 -2
  18. package/lib/src/components/Progress/CircularProgress/CircularProgress.d.ts +0 -3
  19. package/lib/src/components/Progress/CircularProgress/CircularProgress.js +0 -101
  20. package/lib/src/components/Progress/CircularProgress/CircularProgress.js.map +0 -1
  21. package/lib/src/components/Progress/CircularProgress/index.d.ts +0 -6
  22. package/lib/src/components/Progress/CircularProgress/index.js +0 -14
  23. package/lib/src/components/Progress/CircularProgress/index.js.map +0 -1
  24. package/lib/src/components/Progress/IndeterminateProgress.d.ts +0 -7
  25. package/lib/src/components/Progress/IndeterminateProgress.js +0 -39
  26. package/lib/src/components/Progress/IndeterminateProgress.js.map +0 -1
  27. package/lib/src/components/Progress/LinearProgress/LinearProgress.d.ts +0 -3
  28. package/lib/src/components/Progress/LinearProgress/LinearProgress.js +0 -54
  29. package/lib/src/components/Progress/LinearProgress/LinearProgress.js.map +0 -1
  30. package/lib/src/components/Progress/LinearProgress/index.d.ts +0 -6
  31. package/lib/src/components/Progress/LinearProgress/index.js +0 -14
  32. package/lib/src/components/Progress/LinearProgress/index.js.map +0 -1
  33. package/lib/src/components/Progress/ProgressCommon.d.ts +0 -39
  34. package/lib/src/components/Progress/ProgressCommon.js +0 -2
  35. package/lib/src/components/Progress/ProgressCommon.js.map +0 -1
  36. package/src/components/Progress/CircularProgress/CircularProgress.js +0 -101
  37. package/src/components/Progress/CircularProgress/CircularProgress.js.map +0 -1
  38. package/src/components/Progress/CircularProgress/CircularProgress.tsx +0 -198
  39. package/src/components/Progress/CircularProgress/index.js +0 -14
  40. package/src/components/Progress/CircularProgress/index.js.map +0 -1
  41. package/src/components/Progress/CircularProgress/index.tsx +0 -28
  42. package/src/components/Progress/IndeterminateProgress.js +0 -39
  43. package/src/components/Progress/IndeterminateProgress.js.map +0 -1
  44. package/src/components/Progress/IndeterminateProgress.tsx +0 -73
  45. package/src/components/Progress/LinearProgress/LinearProgress.js +0 -54
  46. package/src/components/Progress/LinearProgress/LinearProgress.js.map +0 -1
  47. package/src/components/Progress/LinearProgress/LinearProgress.tsx +0 -130
  48. package/src/components/Progress/LinearProgress/index.js +0 -14
  49. package/src/components/Progress/LinearProgress/index.js.map +0 -1
  50. package/src/components/Progress/LinearProgress/index.tsx +0 -25
  51. package/src/components/Progress/ProgressCommon.js +0 -2
  52. package/src/components/Progress/ProgressCommon.js.map +0 -1
  53. package/src/components/Progress/ProgressCommon.ts +0 -43
@@ -1,101 +0,0 @@
1
- import React from "react";
2
- import Svg, { Path } from "react-native-svg";
3
- import Animated, { useAnimatedProps, useSharedValue, withTiming, } from "react-native-reanimated";
4
- import { DEFAULT_ANIMATION_DURATION, } from "../ProgressCommon";
5
- const AnimatedPath = Animated.createAnimatedComponent(Path);
6
- export const CircularProgress = ({ theme, minimumValue = 0, maximumValue = 100, value = minimumValue, thickness = 10, trackThickness = thickness, color = theme.colors.primary, trackColor = theme.colors.divider, trackOpacity = 1, showTrack = true, animationDuration = DEFAULT_ANIMATION_DURATION, isAnimated = true, lineCap = "round", trackLineCap = lineCap, dashWidth, trackDashWidth, dashGap, trackDashGap, dashOffset, trackDashOffset, customDashArray, trackCustomDashArray, onFullPathWidth, startPosition = "top", style, }) => {
7
- const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
8
- const [circumfrence, setCircumefrence] = React.useState(0);
9
- const dashArray = dashWidth !== undefined
10
- ? `${dashWidth} ${dashGap || dashWidth}`
11
- : undefined;
12
- const trackDashArray = trackDashWidth !== undefined
13
- ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
14
- : undefined;
15
- const maxThickness = Math.max(thickness, trackThickness);
16
- const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
17
- const radius = svgContainerWidth / 2;
18
- const c = 2 * Math.PI * radius;
19
- if (c !== circumfrence) {
20
- setCircumefrence(c);
21
- }
22
- const startAngle = React.useMemo(() => {
23
- switch (startPosition) {
24
- case "top":
25
- return 0;
26
- case "right":
27
- return 90;
28
- case "bottom":
29
- return 180;
30
- case "left":
31
- return 270;
32
- }
33
- }, [startPosition]);
34
- const currentFillPercentage = value / (maximumValue + minimumValue);
35
- const currentAngle = useSharedValue(startAngle + currentFillPercentage * 360);
36
- const progressPathAnimatedProps = useAnimatedProps(() => {
37
- const isBelowMinAngle = currentAngle.value <= startAngle;
38
- return {
39
- d: circlePath(radius, radius, radius - thicknessOffset, startAngle, Math.min(currentAngle.value, startAngle + 360) //Prevents going beyond the max angle
40
- ),
41
- strokeOpacity: isBelowMinAngle ? 0.0 : 1.0,
42
- };
43
- });
44
- React.useEffect(() => {
45
- currentAngle.value = withTiming(startAngle + currentFillPercentage * 360, {
46
- duration: isAnimated ? animationDuration : 0,
47
- });
48
- }, [
49
- value,
50
- currentFillPercentage,
51
- animationDuration,
52
- currentAngle,
53
- maximumValue,
54
- minimumValue,
55
- isAnimated,
56
- startAngle,
57
- ]);
58
- React.useEffect(() => {
59
- onFullPathWidth === null || onFullPathWidth === void 0 ? void 0 : onFullPathWidth(circumfrence);
60
- }, [circumfrence, onFullPathWidth]);
61
- return (React.createElement(Svg, { onLayout: (event) => {
62
- const width = event.nativeEvent.layout.width;
63
- setSvgContainerWidth(width);
64
- }, style: [
65
- {
66
- height: svgContainerWidth,
67
- },
68
- style,
69
- ] },
70
- showTrack && (React.createElement(Path, { d: circlePath(radius, radius, radius - thicknessOffset, startAngle, startAngle + 360), stroke: trackColor, strokeWidth: trackThickness, strokeOpacity: trackOpacity, strokeLinecap: trackLineCap, strokeDasharray: trackCustomDashArray || trackDashArray, strokeDashoffset: trackDashOffset })),
71
- React.createElement(AnimatedPath, { animatedProps: progressPathAnimatedProps, stroke: color, strokeWidth: thickness, strokeLinecap: lineCap, strokeDasharray: customDashArray || dashArray, strokeDashoffset: dashOffset })));
72
- };
73
- // From: https://github.com/bartgryszko/react-native-circular-progress/blob/a93b501aea40306126c8ede72089741eead52308/src/CircularProgress.js#L15
74
- function circlePath(x, y, radius, startAngle, endAngle) {
75
- "worklet"; // Reanimated worklet to be runnable on the UI thread
76
- function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
77
- var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
78
- return {
79
- x: centerX + radius * Math.cos(angleInRadians),
80
- y: centerY + radius * Math.sin(angleInRadians),
81
- };
82
- }
83
- var start = polarToCartesian(x, y, radius, endAngle * 0.9999);
84
- var end = polarToCartesian(x, y, radius, startAngle);
85
- var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
86
- var d = [
87
- "M",
88
- start.x,
89
- start.y,
90
- "A",
91
- radius,
92
- radius,
93
- 0,
94
- largeArcFlag,
95
- 0,
96
- end.x,
97
- end.y,
98
- ];
99
- return d.join(" ");
100
- }
101
- //# sourceMappingURL=CircularProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["CircularProgress.tsx"],"names":[],"mappings":"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"}
@@ -1,198 +0,0 @@
1
- import React from "react";
2
- import Svg, { Path, PathProps } from "react-native-svg";
3
- import Animated, {
4
- useAnimatedProps,
5
- useSharedValue,
6
- withTiming,
7
- } from "react-native-reanimated";
8
- import {
9
- DEFAULT_ANIMATION_DURATION,
10
- ValueProgressProps,
11
- CircularProgressProps,
12
- } from "../ProgressCommon";
13
-
14
- const AnimatedPath = Animated.createAnimatedComponent(Path);
15
-
16
- export const CircularProgress: React.FC<
17
- ValueProgressProps & CircularProgressProps
18
- > = ({
19
- theme,
20
- minimumValue = 0,
21
- maximumValue = 100,
22
- value = minimumValue,
23
- thickness = 10,
24
- trackThickness = thickness,
25
- color = theme.colors.primary,
26
- trackColor = theme.colors.divider,
27
- trackOpacity = 1,
28
- showTrack = true,
29
- animationDuration = DEFAULT_ANIMATION_DURATION,
30
- isAnimated = true,
31
- lineCap = "round",
32
- trackLineCap = lineCap,
33
- dashWidth,
34
- trackDashWidth,
35
- dashGap,
36
- trackDashGap,
37
- dashOffset,
38
- trackDashOffset,
39
- customDashArray,
40
- trackCustomDashArray,
41
- onFullPathWidth,
42
- startPosition = "top",
43
- style,
44
- }) => {
45
- const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
46
- const [circumfrence, setCircumefrence] = React.useState(0);
47
-
48
- const dashArray =
49
- dashWidth !== undefined
50
- ? `${dashWidth} ${dashGap || dashWidth}`
51
- : undefined;
52
- const trackDashArray =
53
- trackDashWidth !== undefined
54
- ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
55
- : undefined;
56
-
57
- const maxThickness = Math.max(thickness, trackThickness);
58
- const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
59
-
60
- const radius = svgContainerWidth / 2;
61
-
62
- const c = 2 * Math.PI * radius;
63
- if (c !== circumfrence) {
64
- setCircumefrence(c);
65
- }
66
-
67
- const startAngle = React.useMemo(() => {
68
- switch (startPosition) {
69
- case "top":
70
- return 0;
71
- case "right":
72
- return 90;
73
- case "bottom":
74
- return 180;
75
- case "left":
76
- return 270;
77
- }
78
- }, [startPosition]);
79
-
80
- const currentFillPercentage = value / (maximumValue + minimumValue);
81
- const currentAngle = useSharedValue(startAngle + currentFillPercentage * 360);
82
-
83
- const progressPathAnimatedProps = useAnimatedProps<PathProps>(() => {
84
- const isBelowMinAngle = currentAngle.value <= startAngle;
85
- return {
86
- d: circlePath(
87
- radius,
88
- radius,
89
- radius - thicknessOffset,
90
- startAngle,
91
- Math.min(currentAngle.value, startAngle + 360) //Prevents going beyond the max angle
92
- ),
93
- strokeOpacity: isBelowMinAngle ? 0.0 : 1.0,
94
- };
95
- });
96
-
97
- React.useEffect(() => {
98
- currentAngle.value = withTiming(startAngle + currentFillPercentage * 360, {
99
- duration: isAnimated ? animationDuration : 0,
100
- });
101
- }, [
102
- value,
103
- currentFillPercentage,
104
- animationDuration,
105
- currentAngle,
106
- maximumValue,
107
- minimumValue,
108
- isAnimated,
109
- startAngle,
110
- ]);
111
-
112
- React.useEffect(() => {
113
- onFullPathWidth?.(circumfrence);
114
- }, [circumfrence, onFullPathWidth]);
115
-
116
- return (
117
- <Svg
118
- onLayout={(event) => {
119
- const width = event.nativeEvent.layout.width;
120
- setSvgContainerWidth(width);
121
- }}
122
- style={[
123
- {
124
- height: svgContainerWidth,
125
- },
126
- style,
127
- ]}
128
- >
129
- {showTrack && (
130
- <Path
131
- d={circlePath(
132
- radius,
133
- radius,
134
- radius - thicknessOffset,
135
- startAngle,
136
- startAngle + 360
137
- )}
138
- stroke={trackColor}
139
- strokeWidth={trackThickness}
140
- strokeOpacity={trackOpacity}
141
- strokeLinecap={trackLineCap}
142
- strokeDasharray={trackCustomDashArray || trackDashArray}
143
- strokeDashoffset={trackDashOffset}
144
- />
145
- )}
146
- <AnimatedPath
147
- animatedProps={progressPathAnimatedProps}
148
- stroke={color}
149
- strokeWidth={thickness}
150
- strokeLinecap={lineCap}
151
- strokeDasharray={customDashArray || dashArray}
152
- strokeDashoffset={dashOffset}
153
- />
154
- </Svg>
155
- );
156
- };
157
-
158
- // From: https://github.com/bartgryszko/react-native-circular-progress/blob/a93b501aea40306126c8ede72089741eead52308/src/CircularProgress.js#L15
159
- function circlePath(
160
- x: number,
161
- y: number,
162
- radius: number,
163
- startAngle: number,
164
- endAngle: number
165
- ) {
166
- "worklet"; // Reanimated worklet to be runnable on the UI thread
167
-
168
- function polarToCartesian(
169
- centerX: number,
170
- centerY: number,
171
- radius: number,
172
- angleInDegrees: number
173
- ) {
174
- var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
175
- return {
176
- x: centerX + radius * Math.cos(angleInRadians),
177
- y: centerY + radius * Math.sin(angleInRadians),
178
- };
179
- }
180
-
181
- var start = polarToCartesian(x, y, radius, endAngle * 0.9999);
182
- var end = polarToCartesian(x, y, radius, startAngle);
183
- var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
184
- var d = [
185
- "M",
186
- start.x,
187
- start.y,
188
- "A",
189
- radius,
190
- radius,
191
- 0,
192
- largeArcFlag,
193
- 0,
194
- end.x,
195
- end.y,
196
- ];
197
- return d.join(" ");
198
- }
@@ -1,14 +0,0 @@
1
- import React from "react";
2
- import IndeterminateProgress from "../IndeterminateProgress";
3
- import { CircularProgress as CircularProgressComponent } from "./CircularProgress";
4
- import { withTheme } from "../../../theming";
5
- const CircularProgress = (props) => {
6
- if (props.indeterminate) {
7
- return (React.createElement(IndeterminateProgress, { ProgressComponent: CircularProgressComponent, ...props }));
8
- }
9
- else {
10
- return React.createElement(CircularProgressComponent, { ...props });
11
- }
12
- };
13
- export default withTheme(CircularProgress);
14
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAM7D,OAAO,EAAE,gBAAgB,IAAI,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,gBAAgB,GAElB,CAAC,KAAK,EAAE,EAAE;IACZ,IAAI,KAAK,CAAC,aAAa,EAAE;QACvB,OAAO,CACL,oBAAC,qBAAqB,IACpB,iBAAiB,EACf,yBAAwE,KAEtE,KAAK,GACT,CACH,CAAC;KACH;SAAM;QACL,OAAO,oBAAC,yBAAyB,OAAK,KAAK,GAAI,CAAC;KACjD;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,gBAAgB,CAAC,CAAC"}
@@ -1,28 +0,0 @@
1
- import React from "react";
2
- import IndeterminateProgress from "../IndeterminateProgress";
3
- import {
4
- CircularProgressProps,
5
- IndeterminateProgressProps,
6
- ValueProgressProps,
7
- } from "../ProgressCommon";
8
- import { CircularProgress as CircularProgressComponent } from "./CircularProgress";
9
- import { withTheme } from "../../../theming";
10
-
11
- const CircularProgress: React.FC<
12
- ValueProgressProps & IndeterminateProgressProps & CircularProgressProps
13
- > = (props) => {
14
- if (props.indeterminate) {
15
- return (
16
- <IndeterminateProgress
17
- ProgressComponent={
18
- CircularProgressComponent as React.FunctionComponent<ValueProgressProps>
19
- }
20
- {...props}
21
- />
22
- );
23
- } else {
24
- return <CircularProgressComponent {...props} />;
25
- }
26
- };
27
-
28
- export default withTheme(CircularProgress);
@@ -1,39 +0,0 @@
1
- import React from "react";
2
- import { runOnJS, useAnimatedReaction, useSharedValue, withTiming, } from "react-native-reanimated";
3
- import { DEFAULT_ANIMATION_DURATION, } from "./ProgressCommon";
4
- const IndeterminateProgress = ({ ProgressComponent, ...rest }) => {
5
- const [pathWidth, setPathWidth] = React.useState(0);
6
- const [value, setValue] = React.useState(0);
7
- const [dashOffset, setDashOffset] = React.useState(0);
8
- const animationDuration = rest.animationDuration || DEFAULT_ANIMATION_DURATION;
9
- const currentOffset = useSharedValue(0);
10
- // dashOffset animation done through state due to it not being a 'native' prop that reanimated can animate on the native thread
11
- useAnimatedReaction(() => currentOffset.value, (result) => runOnJS(setDashOffset)(result));
12
- const repeatIndeterminateAnimation = React.useCallback(() => {
13
- if (value === 0) {
14
- setValue(100);
15
- currentOffset.value = withTiming(pathWidth, {
16
- duration: animationDuration,
17
- });
18
- }
19
- else {
20
- setValue(0);
21
- currentOffset.value = withTiming(0, {
22
- duration: animationDuration,
23
- });
24
- }
25
- }, [currentOffset, value, animationDuration, pathWidth]);
26
- React.useEffect(() => {
27
- const timeout = setTimeout(() => {
28
- repeatIndeterminateAnimation();
29
- }, animationDuration);
30
- return () => clearTimeout(timeout);
31
- }, [animationDuration, repeatIndeterminateAnimation]);
32
- return (React.createElement(ProgressComponent, { ...rest, onFullPathWidth: (width) => {
33
- var _a;
34
- setPathWidth(width);
35
- (_a = rest.onFullPathWidth) === null || _a === void 0 ? void 0 : _a.call(rest, width);
36
- }, dashOffset: dashOffset, dashGap: pathWidth / 2, dashWidth: pathWidth / 2, animationDuration: animationDuration, value: 100 }));
37
- };
38
- export default IndeterminateProgress;
39
- //# sourceMappingURL=IndeterminateProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"IndeterminateProgress.js","sourceRoot":"","sources":["IndeterminateProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,0BAA0B,GAE3B,MAAM,kBAAkB,CAAC;AAM1B,MAAM,qBAAqB,GAAyC,CAAC,EACnE,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,iBAAiB,GACrB,IAAI,CAAC,iBAAiB,IAAI,0BAA0B,CAAC;IAEvD,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAExC,+HAA+H;IAC/H,mBAAmB,CACjB,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,EACzB,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAC3C,CAAC;IAEF,MAAM,4BAA4B,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1D,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,QAAQ,CAAC,GAAG,CAAC,CAAC;YACd,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,EAAE;gBAC1C,QAAQ,EAAE,iBAAiB;aAC5B,CAAC,CAAC;SACJ;aAAM;YACL,QAAQ,CAAC,CAAC,CAAC,CAAC;YACZ,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE;gBAClC,QAAQ,EAAE,iBAAiB;aAC5B,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,4BAA4B,EAAE,CAAC;QACjC,CAAC,EAAE,iBAAiB,CAAC,CAAC;QACtB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,iBAAiB,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAEtD,OAAO,CACL,oBAAC,iBAAiB,OACZ,IAAI,EACR,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE;;YACzB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAA,IAAI,CAAC,eAAe,qDAAG,KAAK,CAAC,CAAC;QAChC,CAAC,EACD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,SAAS,GAAG,CAAC,EACtB,SAAS,EAAE,SAAS,GAAG,CAAC,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,GAAG,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
@@ -1,73 +0,0 @@
1
- import React from "react";
2
- import {
3
- runOnJS,
4
- useAnimatedReaction,
5
- useSharedValue,
6
- withTiming,
7
- } from "react-native-reanimated";
8
- import {
9
- BaseProgressProps,
10
- DEFAULT_ANIMATION_DURATION,
11
- ValueProgressProps,
12
- } from "./ProgressCommon";
13
-
14
- interface IndeterminateProgressProps extends BaseProgressProps {
15
- ProgressComponent: React.FunctionComponent<ValueProgressProps>;
16
- }
17
-
18
- const IndeterminateProgress: React.FC<IndeterminateProgressProps> = ({
19
- ProgressComponent,
20
- ...rest
21
- }) => {
22
- const [pathWidth, setPathWidth] = React.useState(0);
23
- const [value, setValue] = React.useState(0);
24
- const [dashOffset, setDashOffset] = React.useState(0);
25
- const animationDuration =
26
- rest.animationDuration || DEFAULT_ANIMATION_DURATION;
27
-
28
- const currentOffset = useSharedValue(0);
29
-
30
- // dashOffset animation done through state due to it not being a 'native' prop that reanimated can animate on the native thread
31
- useAnimatedReaction(
32
- () => currentOffset.value,
33
- (result) => runOnJS(setDashOffset)(result)
34
- );
35
-
36
- const repeatIndeterminateAnimation = React.useCallback(() => {
37
- if (value === 0) {
38
- setValue(100);
39
- currentOffset.value = withTiming(pathWidth, {
40
- duration: animationDuration,
41
- });
42
- } else {
43
- setValue(0);
44
- currentOffset.value = withTiming(0, {
45
- duration: animationDuration,
46
- });
47
- }
48
- }, [currentOffset, value, animationDuration, pathWidth]);
49
-
50
- React.useEffect(() => {
51
- const timeout = setTimeout(() => {
52
- repeatIndeterminateAnimation();
53
- }, animationDuration);
54
- return () => clearTimeout(timeout);
55
- }, [animationDuration, repeatIndeterminateAnimation]);
56
-
57
- return (
58
- <ProgressComponent
59
- {...rest}
60
- onFullPathWidth={(width) => {
61
- setPathWidth(width);
62
- rest.onFullPathWidth?.(width);
63
- }}
64
- dashOffset={dashOffset}
65
- dashGap={pathWidth / 2}
66
- dashWidth={pathWidth / 2}
67
- animationDuration={animationDuration}
68
- value={100}
69
- />
70
- );
71
- };
72
-
73
- export default IndeterminateProgress;
@@ -1,54 +0,0 @@
1
- import React from "react";
2
- import Svg, { Line } from "react-native-svg";
3
- import Animated, { useAnimatedProps, useSharedValue, withTiming, } from "react-native-reanimated";
4
- import { DEFAULT_ANIMATION_DURATION, } from "../ProgressCommon";
5
- const AnimatedLine = Animated.createAnimatedComponent(Line);
6
- export const LinearProgress = ({ theme, minimumValue = 0, maximumValue = 100, value = minimumValue, thickness = 10, trackThickness = thickness, color = theme.colors.primary, trackColor = theme.colors.divider, trackOpacity = 1, showTrack = true, animationDuration = DEFAULT_ANIMATION_DURATION, isAnimated = true, lineCap = "round", trackLineCap = lineCap, dashWidth, trackDashWidth, dashGap, trackDashGap, dashOffset, trackDashOffset, customDashArray, trackCustomDashArray, onFullPathWidth, style, }) => {
7
- const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
8
- const dashArray = dashWidth !== undefined
9
- ? `${dashWidth} ${dashGap || dashWidth}`
10
- : undefined;
11
- const trackDashArray = trackDashWidth !== undefined
12
- ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
13
- : undefined;
14
- const maxThickness = Math.max(thickness, trackThickness);
15
- const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
16
- const progressLineWidth = svgContainerWidth - thicknessOffset;
17
- const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
18
- const currentFillPercentage = value / (maximumValue + minimumValue);
19
- const currentProgressLineWidth = useSharedValue(currentFillPercentage * progressLineWidth);
20
- const progressLineAnimatedProps = useAnimatedProps(() => {
21
- const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
22
- return {
23
- x2: Math.min(progressLineWidth, currentProgressLineWidth.value),
24
- strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
25
- };
26
- });
27
- React.useEffect(() => {
28
- currentProgressLineWidth.value = withTiming(progressLineWidth * currentFillPercentage, {
29
- duration: isAnimated ? animationDuration : 0,
30
- });
31
- }, [
32
- value,
33
- progressLineWidth,
34
- currentFillPercentage,
35
- animationDuration,
36
- currentProgressLineWidth,
37
- maximumValue,
38
- minimumValue,
39
- isAnimated,
40
- ]);
41
- return (React.createElement(Svg, { onLayout: (event) => {
42
- const width = event.nativeEvent.layout.width;
43
- setSvgContainerWidth(width);
44
- onFullPathWidth === null || onFullPathWidth === void 0 ? void 0 : onFullPathWidth(width);
45
- }, style: [
46
- {
47
- height: maxThickness,
48
- },
49
- style,
50
- ] },
51
- showTrack && (React.createElement(Line, { x1: thicknessOffset, y1: thicknessOffset, x2: trackProgressLineWidth, y2: thicknessOffset, stroke: trackColor, strokeWidth: trackThickness, strokeOpacity: trackOpacity, strokeLinecap: trackLineCap, strokeDasharray: trackCustomDashArray || trackDashArray, strokeDashoffset: trackDashOffset })),
52
- React.createElement(AnimatedLine, { animatedProps: progressLineAnimatedProps, x1: thicknessOffset, y1: thicknessOffset, y2: thicknessOffset, stroke: color, strokeWidth: thickness, strokeLinecap: lineCap, strokeDasharray: customDashArray || dashArray, strokeDashoffset: dashOffset })));
53
- };
54
- //# sourceMappingURL=LinearProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LinearProgress.js","sourceRoot":"","sources":["LinearProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,EAAE,EAAE,IAAI,EAAa,MAAM,kBAAkB,CAAC;AACxD,OAAO,QAAQ,EAAE,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,0BAA0B,GAE3B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,YAAY,GAAG,QAAQ,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,cAAc,GAAiC,CAAC,EAC3D,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,YAAY,GAAG,GAAG,EAClB,KAAK,GAAG,YAAY,EACpB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,SAAS,EAC1B,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,EAC5B,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,EACjC,YAAY,GAAG,CAAC,EAChB,SAAS,GAAG,IAAI,EAChB,iBAAiB,GAAG,0BAA0B,EAC9C,UAAU,GAAG,IAAI,EACjB,OAAO,GAAG,OAAO,EACjB,YAAY,GAAG,OAAO,EACtB,SAAS,EACT,cAAc,EACd,OAAO,EACP,YAAY,EACZ,UAAU,EACV,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,KAAK,GACN,EAAE,EAAE;IACH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpE,MAAM,SAAS,GACb,SAAS,KAAK,SAAS;QACrB,CAAC,CAAC,GAAG,SAAS,IAAI,OAAO,IAAI,SAAS,EAAE;QACxC,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,cAAc,GAClB,cAAc,KAAK,SAAS;QAC1B,CAAC,CAAC,GAAG,cAAc,IAAI,YAAY,IAAI,cAAc,EAAE;QACvD,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,2DAA2D;IAErG,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC9D,MAAM,sBAAsB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAEnE,MAAM,qBAAqB,GAAG,KAAK,GAAG,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;IACpE,MAAM,wBAAwB,GAAG,cAAc,CAC7C,qBAAqB,GAAG,iBAAiB,CAC1C,CAAC;IAEF,MAAM,yBAAyB,GAAG,gBAAgB,CAAY,GAAG,EAAE;QACjE,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,IAAI,eAAe,CAAC;QAC1E,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,wBAAwB,CAAC,KAAK,CAAC;YAC/D,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;SAC3C,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,wBAAwB,CAAC,KAAK,GAAG,UAAU,CACzC,iBAAiB,GAAG,qBAAqB,EACzC;YACE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;SAC7C,CACF,CAAC;IACJ,CAAC,EAAE;QACD,KAAK;QACL,iBAAiB;QACjB,qBAAqB;QACrB,iBAAiB;QACjB,wBAAwB;QACxB,YAAY;QACZ,YAAY;QACZ,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,GAAG,IACF,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC;YAC7C,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC,CAAC;QAC3B,CAAC,EACD,KAAK,EAAE;YACL;gBACE,MAAM,EAAE,YAAY;aACrB;YACD,KAAK;SACN;QAEA,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,sBAAsB,EAC1B,EAAE,EAAE,eAAe,EACnB,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,cAAc,EAC3B,aAAa,EAAE,YAAY,EAC3B,aAAa,EAAE,YAAY,EAC3B,eAAe,EAAE,oBAAoB,IAAI,cAAc,EACvD,gBAAgB,EAAE,eAAe,GACjC,CACH;QACD,oBAAC,YAAY,IACX,aAAa,EAAE,yBAAyB,EACxC,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,eAAe,EACnB,MAAM,EAAE,KAAK,EACb,WAAW,EAAE,SAAS,EACtB,aAAa,EAAE,OAAO,EACtB,eAAe,EAAE,eAAe,IAAI,SAAS,EAC7C,gBAAgB,EAAE,UAAU,GAC5B,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,130 +0,0 @@
1
- import React from "react";
2
- import Svg, { Line, LineProps } from "react-native-svg";
3
- import Animated, {
4
- useAnimatedProps,
5
- useSharedValue,
6
- withTiming,
7
- } from "react-native-reanimated";
8
- import {
9
- DEFAULT_ANIMATION_DURATION,
10
- ValueProgressProps,
11
- } from "../ProgressCommon";
12
-
13
- const AnimatedLine = Animated.createAnimatedComponent(Line);
14
-
15
- export const LinearProgress: React.FC<ValueProgressProps> = ({
16
- theme,
17
- minimumValue = 0,
18
- maximumValue = 100,
19
- value = minimumValue,
20
- thickness = 10,
21
- trackThickness = thickness,
22
- color = theme.colors.primary,
23
- trackColor = theme.colors.divider,
24
- trackOpacity = 1,
25
- showTrack = true,
26
- animationDuration = DEFAULT_ANIMATION_DURATION,
27
- isAnimated = true,
28
- lineCap = "round",
29
- trackLineCap = lineCap,
30
- dashWidth,
31
- trackDashWidth,
32
- dashGap,
33
- trackDashGap,
34
- dashOffset,
35
- trackDashOffset,
36
- customDashArray,
37
- trackCustomDashArray,
38
- onFullPathWidth,
39
- style,
40
- }) => {
41
- const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
42
-
43
- const dashArray =
44
- dashWidth !== undefined
45
- ? `${dashWidth} ${dashGap || dashWidth}`
46
- : undefined;
47
- const trackDashArray =
48
- trackDashWidth !== undefined
49
- ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
50
- : undefined;
51
-
52
- const maxThickness = Math.max(thickness, trackThickness);
53
- const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
54
-
55
- const progressLineWidth = svgContainerWidth - thicknessOffset;
56
- const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
57
-
58
- const currentFillPercentage = value / (maximumValue + minimumValue);
59
- const currentProgressLineWidth = useSharedValue(
60
- currentFillPercentage * progressLineWidth
61
- );
62
-
63
- const progressLineAnimatedProps = useAnimatedProps<LineProps>(() => {
64
- const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
65
- return {
66
- x2: Math.min(progressLineWidth, currentProgressLineWidth.value), //Prevents going beyond the max width
67
- strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
68
- };
69
- });
70
-
71
- React.useEffect(() => {
72
- currentProgressLineWidth.value = withTiming(
73
- progressLineWidth * currentFillPercentage,
74
- {
75
- duration: isAnimated ? animationDuration : 0,
76
- }
77
- );
78
- }, [
79
- value,
80
- progressLineWidth,
81
- currentFillPercentage,
82
- animationDuration,
83
- currentProgressLineWidth,
84
- maximumValue,
85
- minimumValue,
86
- isAnimated,
87
- ]);
88
-
89
- return (
90
- <Svg
91
- onLayout={(event) => {
92
- const width = event.nativeEvent.layout.width;
93
- setSvgContainerWidth(width);
94
- onFullPathWidth?.(width);
95
- }}
96
- style={[
97
- {
98
- height: maxThickness,
99
- },
100
- style,
101
- ]}
102
- >
103
- {showTrack && (
104
- <Line
105
- x1={thicknessOffset}
106
- y1={thicknessOffset}
107
- x2={trackProgressLineWidth}
108
- y2={thicknessOffset}
109
- stroke={trackColor}
110
- strokeWidth={trackThickness}
111
- strokeOpacity={trackOpacity}
112
- strokeLinecap={trackLineCap}
113
- strokeDasharray={trackCustomDashArray || trackDashArray}
114
- strokeDashoffset={trackDashOffset}
115
- />
116
- )}
117
- <AnimatedLine
118
- animatedProps={progressLineAnimatedProps}
119
- x1={thicknessOffset}
120
- y1={thicknessOffset}
121
- y2={thicknessOffset}
122
- stroke={color}
123
- strokeWidth={thickness}
124
- strokeLinecap={lineCap}
125
- strokeDasharray={customDashArray || dashArray}
126
- strokeDashoffset={dashOffset}
127
- />
128
- </Svg>
129
- );
130
- };