@planningcenter/chat-react-native 3.13.0-rc.1 → 3.13.0-rc.3

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 (10) hide show
  1. package/build/components/display/spinner.d.ts.map +1 -1
  2. package/build/components/display/spinner.js +22 -25
  3. package/build/components/display/spinner.js.map +1 -1
  4. package/build/vendor/tapestry/alias_tokens_color_map.d.ts +2 -0
  5. package/build/vendor/tapestry/alias_tokens_color_map.d.ts.map +1 -1
  6. package/build/vendor/tapestry/alias_tokens_color_map.js +2 -0
  7. package/build/vendor/tapestry/alias_tokens_color_map.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/components/display/spinner.tsx +30 -30
  10. package/src/vendor/tapestry/alias_tokens_color_map.ts +3 -0
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]);
26
- return (<View style={[styles.container, style]}>
27
- <Animated.View style={styles.animatedContainer}>
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]);
27
+ return (<View style={style}>
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,19 +33,15 @@ 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;
39
40
  return StyleSheet.create({
40
- container: {
41
- opacity: 0.7,
42
- },
43
41
  animatedContainer: {
44
42
  width: scalableSize,
45
43
  height: scalableSize,
46
44
  borderRadius: scalableSize / 2,
47
- transform: [{ rotate: rotateValue }],
48
45
  },
49
46
  circle: {
50
47
  width: scalableSize,
@@ -54,7 +51,7 @@ const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }) => {
54
51
  borderWidth: 3,
55
52
  },
56
53
  spinner: {
57
- borderColor: colors.fillColorNeutral020,
54
+ borderColor: colors.borderColorDefaultDarkest,
58
55
  },
59
56
  track: {
60
57
  borderColor: colors.fillColorNeutral050Base,
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":"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","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={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 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.borderColorDefaultDarkest,\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/build/vendor/tapestry/alias_tokens_color_map.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const aliasTokensColorMap: {
4
4
  readonly borderColorDefaultBase: string;
5
5
  readonly borderColorDefaultDark: string;
6
6
  readonly borderColorDefaultDarker: string;
7
+ readonly borderColorDefaultDarkest: string;
7
8
  readonly borderColorDefaultDisabled: string;
8
9
  readonly borderColorDefaultDim: string;
9
10
  readonly borderColorDefaultWhite: string;
@@ -46,6 +47,7 @@ export declare const aliasTokensColorMap: {
46
47
  readonly borderColorDefaultBase: string;
47
48
  readonly borderColorDefaultDark: string;
48
49
  readonly borderColorDefaultDarker: string;
50
+ readonly borderColorDefaultDarkest: string;
49
51
  readonly borderColorDefaultDisabled: string;
50
52
  readonly borderColorDefaultDim: string;
51
53
  readonly borderColorDefaultWhite: string;
package/build/vendor/tapestry/alias_tokens_color_map.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAmJA,eAAO,MAAM,mBAAmB;;uBA/FxB,MAAM;yCACY,MAAM;yCACN,MAAM;2CACJ,MAAM;6CACJ,MAAM;wCACX,MAAM;0CACJ,MAAM;0CACN,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;mCACV,MAAM;qCACJ,MAAM;kCACT,MAAM;kCACN,MAAM;kCACN,MAAM;kCACN,MAAM;sCAxEF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;yCACY,MAAM;yCACN,MAAM;2CACJ,MAAM;6CACJ,MAAM;wCACX,MAAM;0CACJ,MAAM;0CACN,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;mCACV,MAAM;qCACJ,MAAM;kCACT,MAAM;kCACN,MAAM;kCACN,MAAM;kCACN,MAAM;sCAxEF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAoI3B,CAAA"}
1
+ {"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAsJA,eAAO,MAAM,mBAAmB;;uBAlGxB,MAAM;yCACY,MAAM;yCACN,MAAM;2CACJ,MAAM;4CACL,MAAM;6CACL,MAAM;wCACX,MAAM;0CACJ,MAAM;0CACN,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;mCACV,MAAM;qCACJ,MAAM;kCACT,MAAM;kCACN,MAAM;kCACN,MAAM;kCACN,MAAM;sCAzEF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;yCACY,MAAM;yCACN,MAAM;2CACJ,MAAM;4CACL,MAAM;6CACL,MAAM;wCACX,MAAM;0CACJ,MAAM;0CACN,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;mCACV,MAAM;qCACJ,MAAM;kCACT,MAAM;kCACN,MAAM;kCACN,MAAM;kCACN,MAAM;sCAzEF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAuI3B,CAAA"}
package/build/vendor/tapestry/alias_tokens_color_map.js CHANGED
@@ -32,6 +32,7 @@ const semanticAliasesLight = {
32
32
  borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,
33
33
  borderColorDefaultDark: neutralsLight.fillColorNeutral040,
34
34
  borderColorDefaultDarker: neutralsLight.fillColorNeutral020,
35
+ borderColorDefaultDarkest: neutralsLight.fillColorNeutral030,
35
36
  borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,
36
37
  borderColorDefaultDim: neutralsLight.fillColorNeutral070,
37
38
  borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,
@@ -63,6 +64,7 @@ const semanticAliasesDark = {
63
64
  borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,
64
65
  borderColorDefaultDark: neutralsDark.fillColorNeutral040,
65
66
  borderColorDefaultDarker: neutralsDark.fillColorNeutral020,
67
+ borderColorDefaultDarkest: neutralsDark.fillColorNeutral030,
66
68
  borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,
67
69
  borderColorDefaultDim: neutralsDark.fillColorNeutral070,
68
70
  borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,
package/build/vendor/tapestry/alias_tokens_color_map.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n name: string\n fillColorNeutral000: string\n fillColorNeutral010: string\n fillColorNeutral020: string\n fillColorNeutral030: string\n fillColorNeutral040: string\n fillColorNeutral050Base: string\n fillColorNeutral060: string\n fillColorNeutral070: string\n fillColorNeutral080: string\n fillColorNeutral090: string\n fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n name: 'light',\n fillColorNeutral000: tokens.colorNeutral12,\n fillColorNeutral010: tokens.colorNeutral24,\n fillColorNeutral020: tokens.colorNeutral45,\n fillColorNeutral030: tokens.colorNeutral58,\n fillColorNeutral040: tokens.colorNeutral81,\n fillColorNeutral050Base: tokens.colorNeutral88,\n fillColorNeutral060: tokens.colorNeutral93,\n fillColorNeutral070: tokens.colorNeutral95,\n fillColorNeutral080: tokens.colorNeutral97,\n fillColorNeutral090: tokens.colorNeutral98,\n fillColorNeutral100Inverted: tokens.colorNeutral100White,\n} as const\n\nconst neutralsDark: NeutralColors = {\n name: 'dark',\n fillColorNeutral000: tokens.colorNeutral98,\n fillColorNeutral010: tokens.colorNeutral88,\n fillColorNeutral020: tokens.colorNeutral68,\n fillColorNeutral030: tokens.colorNeutral50,\n fillColorNeutral040: tokens.colorNeutral32,\n fillColorNeutral050Base: tokens.colorNeutral24,\n fillColorNeutral060: tokens.colorNeutral19,\n fillColorNeutral070: tokens.colorNeutral17,\n fillColorNeutral080: tokens.colorNeutral15,\n fillColorNeutral090: tokens.colorNeutral12,\n fillColorNeutral100Inverted: tokens.colorNeutral7,\n} as const\n\ninterface SemanticAliasesColors {\n name: string\n borderColorDefaultBase: string\n borderColorDefaultDark: string\n borderColorDefaultDarker: string\n borderColorDefaultDisabled: string\n borderColorDefaultDim: string\n borderColorDefaultWhite: string\n iconColorDefaultPrimary: string\n iconColorDefaultSecondary: string\n iconColorDefaultDim: string\n iconColorDefaultDisabled: string\n iconColorDefaultInverted: string\n textColorDefaultHeadline: string\n textColorDefaultPrimary: string\n textColorDefaultSecondary: string\n textColorDefaultDisabled: string\n textColorDefaultPlaceholder: string\n textColorDefaultInverted: string\n fillColorInteractionOnlineDefault: string\n fillColorInteractionDefault: string\n fillColorStatusErrorMedium: string\n fillColorButtonNeutralSolidDisabled: string\n androidRippleNeutral: string\n surfaceColorCard: string\n surfaceColorCanvas: string\n surfaceColor100: string\n surfaceColor090: string\n surfaceColor080: string\n needsDesignPass: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n name: 'light',\n borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,\n borderColorDefaultDark: neutralsLight.fillColorNeutral040,\n borderColorDefaultDarker: neutralsLight.fillColorNeutral020,\n borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,\n borderColorDefaultDim: neutralsLight.fillColorNeutral070,\n borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,\n iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsLight.fillColorNeutral000,\n textColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n textColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n textColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsLight.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral100White,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefault,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyDark020,\n surfaceColorCard: neutralsLight.fillColorNeutral100Inverted,\n surfaceColorCanvas: neutralsLight.fillColorNeutral090,\n surfaceColor100: neutralsLight.fillColorNeutral100Inverted,\n surfaceColor090: neutralsLight.fillColorNeutral090,\n surfaceColor080: neutralsLight.fillColorNeutral080,\n needsDesignPass: 'hotpink',\n} as const\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n name: 'dark',\n borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,\n borderColorDefaultDark: neutralsDark.fillColorNeutral040,\n borderColorDefaultDarker: neutralsDark.fillColorNeutral020,\n borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,\n borderColorDefaultDim: neutralsDark.fillColorNeutral070,\n borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,\n iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsDark.fillColorNeutral000,\n textColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n textColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n textColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsDark.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral7,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefaultDark,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyLight020,\n surfaceColorCard: neutralsDark.fillColorNeutral100Inverted,\n surfaceColorCanvas: neutralsDark.fillColorNeutral090,\n surfaceColor100: neutralsDark.fillColorNeutral100Inverted,\n surfaceColor090: neutralsDark.fillColorNeutral090,\n surfaceColor080: neutralsDark.fillColorNeutral080,\n needsDesignPass: 'pink',\n}\n\nexport const aliasTokensColorMap = {\n light: { ...neutralsLight, ...semanticAliasesLight },\n dark: { ...neutralsDark, ...semanticAliasesDark },\n} as const\n"]}
1
+ {"version":3,"file":"alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n name: string\n fillColorNeutral000: string\n fillColorNeutral010: string\n fillColorNeutral020: string\n fillColorNeutral030: string\n fillColorNeutral040: string\n fillColorNeutral050Base: string\n fillColorNeutral060: string\n fillColorNeutral070: string\n fillColorNeutral080: string\n fillColorNeutral090: string\n fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n name: 'light',\n fillColorNeutral000: tokens.colorNeutral12,\n fillColorNeutral010: tokens.colorNeutral24,\n fillColorNeutral020: tokens.colorNeutral45,\n fillColorNeutral030: tokens.colorNeutral58,\n fillColorNeutral040: tokens.colorNeutral81,\n fillColorNeutral050Base: tokens.colorNeutral88,\n fillColorNeutral060: tokens.colorNeutral93,\n fillColorNeutral070: tokens.colorNeutral95,\n fillColorNeutral080: tokens.colorNeutral97,\n fillColorNeutral090: tokens.colorNeutral98,\n fillColorNeutral100Inverted: tokens.colorNeutral100White,\n} as const\n\nconst neutralsDark: NeutralColors = {\n name: 'dark',\n fillColorNeutral000: tokens.colorNeutral98,\n fillColorNeutral010: tokens.colorNeutral88,\n fillColorNeutral020: tokens.colorNeutral68,\n fillColorNeutral030: tokens.colorNeutral50,\n fillColorNeutral040: tokens.colorNeutral32,\n fillColorNeutral050Base: tokens.colorNeutral24,\n fillColorNeutral060: tokens.colorNeutral19,\n fillColorNeutral070: tokens.colorNeutral17,\n fillColorNeutral080: tokens.colorNeutral15,\n fillColorNeutral090: tokens.colorNeutral12,\n fillColorNeutral100Inverted: tokens.colorNeutral7,\n} as const\n\ninterface SemanticAliasesColors {\n name: string\n borderColorDefaultBase: string\n borderColorDefaultDark: string\n borderColorDefaultDarker: string\n borderColorDefaultDarkest: string\n borderColorDefaultDisabled: string\n borderColorDefaultDim: string\n borderColorDefaultWhite: string\n iconColorDefaultPrimary: string\n iconColorDefaultSecondary: string\n iconColorDefaultDim: string\n iconColorDefaultDisabled: string\n iconColorDefaultInverted: string\n textColorDefaultHeadline: string\n textColorDefaultPrimary: string\n textColorDefaultSecondary: string\n textColorDefaultDisabled: string\n textColorDefaultPlaceholder: string\n textColorDefaultInverted: string\n fillColorInteractionOnlineDefault: string\n fillColorInteractionDefault: string\n fillColorStatusErrorMedium: string\n fillColorButtonNeutralSolidDisabled: string\n androidRippleNeutral: string\n surfaceColorCard: string\n surfaceColorCanvas: string\n surfaceColor100: string\n surfaceColor090: string\n surfaceColor080: string\n needsDesignPass: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n name: 'light',\n borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,\n borderColorDefaultDark: neutralsLight.fillColorNeutral040,\n borderColorDefaultDarker: neutralsLight.fillColorNeutral020,\n borderColorDefaultDarkest: neutralsLight.fillColorNeutral030,\n borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,\n borderColorDefaultDim: neutralsLight.fillColorNeutral070,\n borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,\n iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsLight.fillColorNeutral000,\n textColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n textColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n textColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsLight.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral100White,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefault,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyDark020,\n surfaceColorCard: neutralsLight.fillColorNeutral100Inverted,\n surfaceColorCanvas: neutralsLight.fillColorNeutral090,\n surfaceColor100: neutralsLight.fillColorNeutral100Inverted,\n surfaceColor090: neutralsLight.fillColorNeutral090,\n surfaceColor080: neutralsLight.fillColorNeutral080,\n needsDesignPass: 'hotpink',\n} as const\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n name: 'dark',\n borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,\n borderColorDefaultDark: neutralsDark.fillColorNeutral040,\n borderColorDefaultDarker: neutralsDark.fillColorNeutral020,\n borderColorDefaultDarkest: neutralsDark.fillColorNeutral030,\n borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,\n borderColorDefaultDim: neutralsDark.fillColorNeutral070,\n borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,\n iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsDark.fillColorNeutral000,\n textColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n textColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n textColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsDark.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral7,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefaultDark,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyLight020,\n surfaceColorCard: neutralsDark.fillColorNeutral100Inverted,\n surfaceColorCanvas: neutralsDark.fillColorNeutral090,\n surfaceColor100: neutralsDark.fillColorNeutral100Inverted,\n surfaceColor090: neutralsDark.fillColorNeutral090,\n surfaceColor080: neutralsDark.fillColorNeutral080,\n needsDesignPass: 'pink',\n}\n\nexport const aliasTokensColorMap = {\n light: { ...neutralsLight, ...semanticAliasesLight },\n dark: { ...neutralsDark, ...semanticAliasesDark },\n} as const\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.3",
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": "6b2dc3ef26cc7ddd1ed48268ca55fbd606f29f8c"
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
- <View style={[styles.container, style]}>
62
- <Animated.View style={styles.animatedContainer}>
66
+ <View style={style}>
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,24 +80,19 @@ 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
86
90
 
87
91
  return StyleSheet.create({
88
- container: {
89
- opacity: 0.7,
90
- },
91
92
  animatedContainer: {
92
93
  width: scalableSize,
93
94
  height: scalableSize,
94
95
  borderRadius: scalableSize / 2,
95
- transform: [{ rotate: rotateValue }],
96
96
  },
97
97
  circle: {
98
98
  width: scalableSize,
@@ -102,7 +102,7 @@ const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {
102
102
  borderWidth: 3,
103
103
  },
104
104
  spinner: {
105
- borderColor: colors.fillColorNeutral020,
105
+ borderColor: colors.borderColorDefaultDarkest,
106
106
  },
107
107
  track: {
108
108
  borderColor: colors.fillColorNeutral050Base,
package/src/vendor/tapestry/alias_tokens_color_map.ts CHANGED
@@ -54,6 +54,7 @@ interface SemanticAliasesColors {
54
54
  borderColorDefaultBase: string
55
55
  borderColorDefaultDark: string
56
56
  borderColorDefaultDarker: string
57
+ borderColorDefaultDarkest: string
57
58
  borderColorDefaultDisabled: string
58
59
  borderColorDefaultDim: string
59
60
  borderColorDefaultWhite: string
@@ -86,6 +87,7 @@ const semanticAliasesLight: SemanticAliasesColors = {
86
87
  borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,
87
88
  borderColorDefaultDark: neutralsLight.fillColorNeutral040,
88
89
  borderColorDefaultDarker: neutralsLight.fillColorNeutral020,
90
+ borderColorDefaultDarkest: neutralsLight.fillColorNeutral030,
89
91
  borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,
90
92
  borderColorDefaultDim: neutralsLight.fillColorNeutral070,
91
93
  borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,
@@ -118,6 +120,7 @@ const semanticAliasesDark: SemanticAliasesColors = {
118
120
  borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,
119
121
  borderColorDefaultDark: neutralsDark.fillColorNeutral040,
120
122
  borderColorDefaultDarker: neutralsDark.fillColorNeutral020,
123
+ borderColorDefaultDarkest: neutralsDark.fillColorNeutral030,
121
124
  borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,
122
125
  borderColorDefaultDim: neutralsDark.fillColorNeutral070,
123
126
  borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,