@planningcenter/chat-react-native 3.13.0-rc.1 → 3.13.0-rc.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 (5) hide show
  1. package/build/components/display/spinner.d.ts.map +1 -1
  2. package/build/components/display/spinner.js +20 -20
  3. package/build/components/display/spinner.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/components/display/spinner.tsx +28 -25
package/build/components/display/spinner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAoB,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAavF,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAS,EACT,qBAA+C,EAC/C,KAAK,GACN,EAAE,YAAY,qBAoCd"}
1
+ {"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAoBrE,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAS,EACT,qBAA+C,EAC/C,KAAK,GACN,EAAE,YAAY,qBAkCd"}
package/build/components/display/spinner.js CHANGED
@@ -1,30 +1,31 @@
1
- import React, { useEffect, useRef } from 'react';
2
- import { Animated, Easing, StyleSheet, View } from 'react-native';
1
+ import React, { useEffect } from 'react';
2
+ import { StyleSheet, View } from 'react-native';
3
+ import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, Easing, } from 'react-native-reanimated';
3
4
  import { useFontScale, useTheme } from '../../hooks';
4
5
  // =================================
5
6
  // ====== Constants ================
6
7
  // =================================
7
8
  const PREVENT_SCALING_DEFAULT = 1;
8
9
  export function Spinner({ size = 20, maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT, style, }) {
9
- const rotation = useRef(new Animated.Value(0)).current;
10
- const animation = Animated.loop(Animated.timing(rotation, {
11
- toValue: 1,
12
- duration: 1000,
13
- easing: Easing.linear,
14
- useNativeDriver: true,
15
- }));
16
- const rotateValue = rotation.interpolate({
17
- inputRange: [0, 1],
18
- outputRange: ['0deg', '360deg'],
10
+ const styles = useStyles({ maxFontSizeMultiplier, size });
11
+ const rotation = useSharedValue(0);
12
+ const animatedStyle = useAnimatedStyle(() => {
13
+ return {
14
+ transform: [{ rotate: `${rotation.value}deg` }],
15
+ };
19
16
  });
20
- const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size });
21
17
  useEffect(() => {
22
- animation.start();
23
- return () => animation.stop();
24
- }, [animation]);
25
- useEffect(() => () => rotation.setValue(0), [rotation]);
18
+ rotation.value = withRepeat(withTiming(360, {
19
+ duration: 1000,
20
+ easing: Easing.linear,
21
+ }), -1 // loops animation infinitely
22
+ );
23
+ return () => {
24
+ rotation.value = 0; // Reset rotation when Spinner unmounts
25
+ };
26
+ }, [rotation]);
26
27
  return (<View style={[styles.container, style]}>
27
- <Animated.View style={styles.animatedContainer}>
28
+ <Animated.View style={[styles.animatedContainer, animatedStyle]}>
28
29
  <View style={styles.clipping}>
29
30
  <View style={[styles.circle, styles.spinner]}/>
30
31
  </View>
@@ -32,7 +33,7 @@ export function Spinner({ size = 20, maxFontSizeMultiplier = PREVENT_SCALING_DEF
32
33
  </Animated.View>
33
34
  </View>);
34
35
  }
35
- const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }) => {
36
+ const useStyles = ({ maxFontSizeMultiplier, size }) => {
36
37
  const { colors } = useTheme();
37
38
  const fontScale = useFontScale({ maxFontSizeMultiplier });
38
39
  const scalableSize = size * fontScale;
@@ -44,7 +45,6 @@ const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }) => {
44
45
  width: scalableSize,
45
46
  height: scalableSize,
46
47
  borderRadius: scalableSize / 2,
47
- transform: [{ rotate: rotateValue }],
48
48
  },
49
49
  circle: {
50
50
  width: scalableSize,
package/build/components/display/spinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAa,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AACvF,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEpD,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,uBAAuB,GAAG,CAAC,CAAA;AAqBjC,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,GAAG,EAAE,EACT,qBAAqB,GAAG,uBAAuB,EAC/C,KAAK,GACQ;IACb,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAC7B,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxB,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,eAAe,EAAE,IAAI;KACtB,CAAC,CACH,CAAA;IAED,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;QACvC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,qBAAqB,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,EAAE,CAAA;QACjB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEvD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAC7C;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC3B;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAC/C;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAYD,MAAM,SAAS,GAAG,CAAC,EAAE,qBAAqB,EAAE,WAAW,EAAE,IAAI,EAAU,EAAE,EAAE;IACzE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC,CAAA;IACzD,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAA;IAErC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,OAAO,EAAE,GAAG;SACb;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;YACpB,YAAY,EAAE,YAAY,GAAG,CAAC;YAC9B,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;SACrC;QACD,MAAM,EAAE;YACN,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,YAAY;YACpB,YAAY,EAAE,YAAY,GAAG,CAAC;YAC9B,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,CAAC;SACf;QACD,OAAO,EAAE;YACP,WAAW,EAAE,MAAM,CAAC,mBAAmB;SACxC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,MAAM,CAAC,uBAAuB;SAC5C;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,YAAY,GAAG,CAAC;YACvB,MAAM,EAAE,YAAY,GAAG,CAAC;YACxB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,GAAG;SACZ;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\nimport { useFontScale, useTheme } from '../../hooks'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst PREVENT_SCALING_DEFAULT = 1\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface SpinnerProps {\n /**\n * Size of the spinner in px\n * */\n size?: number\n /**\n * Specifies the maximum size spinner can scale to if the device's font-size is increased.\n */\n maxFontSizeMultiplier?: number\n /**\n * Style to apply to the spinner\n */\n style?: StyleProp<ViewStyle>\n}\n\nexport function Spinner({\n size = 20,\n maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,\n style,\n}: SpinnerProps) {\n const rotation = useRef(new Animated.Value(0)).current\n\n const animation = Animated.loop(\n Animated.timing(rotation, {\n toValue: 1,\n duration: 1000,\n easing: Easing.linear,\n useNativeDriver: true,\n })\n )\n\n const rotateValue = rotation.interpolate({\n inputRange: [0, 1],\n outputRange: ['0deg', '360deg'],\n })\n\n const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size })\n\n useEffect(() => {\n animation.start()\n return () => animation.stop()\n }, [animation])\n\n useEffect(() => () => rotation.setValue(0), [rotation])\n\n return (\n <View style={[styles.container, style]}>\n <Animated.View style={styles.animatedContainer}>\n <View style={styles.clipping}>\n <View style={[styles.circle, styles.spinner]} />\n </View>\n <View style={[styles.circle, styles.track]} />\n </Animated.View>\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n maxFontSizeMultiplier: number | undefined\n rotateValue: Animated.AnimatedInterpolation<string | number>\n size: number\n}\n\nconst useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n const scalableSize = size * fontScale\n\n return StyleSheet.create({\n container: {\n opacity: 0.7,\n },\n animatedContainer: {\n width: scalableSize,\n height: scalableSize,\n borderRadius: scalableSize / 2,\n transform: [{ rotate: rotateValue }],\n },\n circle: {\n width: scalableSize,\n height: scalableSize,\n borderRadius: scalableSize / 2,\n borderStyle: 'solid',\n borderWidth: 3,\n },\n spinner: {\n borderColor: colors.fillColorNeutral020,\n },\n track: {\n borderColor: colors.fillColorNeutral050Base,\n },\n clipping: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: scalableSize / 2,\n height: scalableSize / 2,\n overflow: 'hidden',\n zIndex: 200,\n },\n })\n}\n"]}
1
+ {"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react'\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withRepeat,\n withTiming,\n Easing,\n} from 'react-native-reanimated'\nimport { useFontScale, useTheme } from '../../hooks'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst PREVENT_SCALING_DEFAULT = 1\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface SpinnerProps {\n /**\n * Size of the spinner in px\n * */\n size?: number\n /**\n * Specifies the maximum size spinner can scale to if the device's font-size is increased.\n */\n maxFontSizeMultiplier?: number\n /**\n * Style to apply to the spinner\n */\n style?: StyleProp<ViewStyle>\n}\n\nexport function Spinner({\n size = 20,\n maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,\n style,\n}: SpinnerProps) {\n const styles = useStyles({ maxFontSizeMultiplier, size })\n\n const rotation = useSharedValue(0)\n const animatedStyle = useAnimatedStyle(() => {\n return {\n transform: [{ rotate: `${rotation.value}deg` }],\n }\n })\n\n useEffect(() => {\n rotation.value = withRepeat(\n withTiming(360, {\n duration: 1000,\n easing: Easing.linear,\n }),\n -1 // loops animation infinitely\n )\n\n return () => {\n rotation.value = 0 // Reset rotation when Spinner unmounts\n }\n }, [rotation])\n\n return (\n <View style={[styles.container, style]}>\n <Animated.View style={[styles.animatedContainer, animatedStyle]}>\n <View style={styles.clipping}>\n <View style={[styles.circle, styles.spinner]} />\n </View>\n <View style={[styles.circle, styles.track]} />\n </Animated.View>\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n maxFontSizeMultiplier: number | undefined\n size: number\n}\n\nconst useStyles = ({ maxFontSizeMultiplier, size }: Styles) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n const scalableSize = size * fontScale\n\n return StyleSheet.create({\n container: {\n opacity: 0.7,\n },\n animatedContainer: {\n width: scalableSize,\n height: scalableSize,\n borderRadius: scalableSize / 2,\n },\n circle: {\n width: scalableSize,\n height: scalableSize,\n borderRadius: scalableSize / 2,\n borderStyle: 'solid',\n borderWidth: 3,\n },\n spinner: {\n borderColor: colors.fillColorNeutral020,\n },\n track: {\n borderColor: colors.fillColorNeutral050Base,\n },\n clipping: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: scalableSize / 2,\n height: scalableSize / 2,\n overflow: 'hidden',\n zIndex: 200,\n },\n })\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/chat-react-native",
3
- "version": "3.13.0-rc.1",
3
+ "version": "3.13.0-rc.2",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
55
55
  "react-native-url-polyfill": "^2.0.0",
56
56
  "typescript": "<5.6.0"
57
57
  },
58
- "gitHead": "e4c6d798a238a421341735a85b4a7d1d2c8cbe27"
58
+ "gitHead": "a2339286dfdae60c06d84e7b1387f4159510bf86"
59
59
  }
package/src/components/display/spinner.tsx CHANGED
@@ -1,5 +1,12 @@
1
- import React, { useEffect, useRef } from 'react'
2
- import { Animated, Easing, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
1
+ import React, { useEffect } from 'react'
2
+ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
3
+ import Animated, {
4
+ useSharedValue,
5
+ useAnimatedStyle,
6
+ withRepeat,
7
+ withTiming,
8
+ Easing,
9
+ } from 'react-native-reanimated'
3
10
  import { useFontScale, useTheme } from '../../hooks'
4
11
 
5
12
  // =================================
@@ -32,34 +39,32 @@ export function Spinner({
32
39
  maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,
33
40
  style,
34
41
  }: SpinnerProps) {
35
- const rotation = useRef(new Animated.Value(0)).current
42
+ const styles = useStyles({ maxFontSizeMultiplier, size })
36
43
 
37
- const animation = Animated.loop(
38
- Animated.timing(rotation, {
39
- toValue: 1,
40
- duration: 1000,
41
- easing: Easing.linear,
42
- useNativeDriver: true,
43
- })
44
- )
45
-
46
- const rotateValue = rotation.interpolate({
47
- inputRange: [0, 1],
48
- outputRange: ['0deg', '360deg'],
44
+ const rotation = useSharedValue(0)
45
+ const animatedStyle = useAnimatedStyle(() => {
46
+ return {
47
+ transform: [{ rotate: `${rotation.value}deg` }],
48
+ }
49
49
  })
50
50
 
51
- const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size })
52
-
53
51
  useEffect(() => {
54
- animation.start()
55
- return () => animation.stop()
56
- }, [animation])
52
+ rotation.value = withRepeat(
53
+ withTiming(360, {
54
+ duration: 1000,
55
+ easing: Easing.linear,
56
+ }),
57
+ -1 // loops animation infinitely
58
+ )
57
59
 
58
- useEffect(() => () => rotation.setValue(0), [rotation])
60
+ return () => {
61
+ rotation.value = 0 // Reset rotation when Spinner unmounts
62
+ }
63
+ }, [rotation])
59
64
 
60
65
  return (
61
66
  <View style={[styles.container, style]}>
62
- <Animated.View style={styles.animatedContainer}>
67
+ <Animated.View style={[styles.animatedContainer, animatedStyle]}>
63
68
  <View style={styles.clipping}>
64
69
  <View style={[styles.circle, styles.spinner]} />
65
70
  </View>
@@ -75,11 +80,10 @@ export function Spinner({
75
80
 
76
81
  interface Styles {
77
82
  maxFontSizeMultiplier: number | undefined
78
- rotateValue: Animated.AnimatedInterpolation<string | number>
79
83
  size: number
80
84
  }
81
85
 
82
- const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {
86
+ const useStyles = ({ maxFontSizeMultiplier, size }: Styles) => {
83
87
  const { colors } = useTheme()
84
88
  const fontScale = useFontScale({ maxFontSizeMultiplier })
85
89
  const scalableSize = size * fontScale
@@ -92,7 +96,6 @@ const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {
92
96
  width: scalableSize,
93
97
  height: scalableSize,
94
98
  borderRadius: scalableSize / 2,
95
- transform: [{ rotate: rotateValue }],
96
99
  },
97
100
  circle: {
98
101
  width: scalableSize,