@planningcenter/chat-react-native 1.3.0 → 1.3.1-rc.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1-rc.1](https://github.com/planningcenter/chat-js/compare/v1.3.0...v1.3.1-rc.1) (2025-02-13)
+
+**Note:** Version bump only for package @planningcenter/chat-react-native
+
+
+
+
+
+## [1.3.1-rc.0](https://github.com/planningcenter/chat-js/compare/v1.3.0...v1.3.1-rc.0) (2025-02-12)
+
+**Note:** Version bump only for package @planningcenter/chat-react-native
+
+
+
+
+
 ## [1.3.0](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0) (2025-02-12)
 
 

package/build/components/conversations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAanD,wBAAgB,aAAa,6BAgB5B"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAcnD,wBAAgB,aAAa,6BAgB5B"}

package/build/components/conversations.js

@@ -1,10 +1,11 @@
 import { useNavigation } from '@react-navigation/native';
 import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
 import React, { Suspense, useContext } from 'react';
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { ChatContext } from '../contexts/chat_context';
-import { useTheme } from '../hooks/use_theme';
 import ErrorBoundary from './error_boundary';
+import { useTheme } from '../hooks';
+import { Spinner, Image } from './display';
 export function Conversations() {
     const { token } = useContext(ChatContext);
     if (!token)
@@ -23,16 +24,43 @@ const Loaded = () => {
         queryKey: ['/chat/v2/me/conversations'],
     });
     const navigation = useNavigation();
-    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
+    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <Spinner size={24}/>
+          </View>
+          <View style={styles.row}>
+            <Image source={{ uri: 'https://broken.url' }} style={styles.image}/>
+            <Image source={{
+                uri: 'https://picsum.photos/seed/picsum/200',
+            }} style={styles.image}/>
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
         </Pressable>)}/>);
 };
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
-        container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+        scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+        container: { gap: 8, padding: 16 },
         foo: { fontSize: 24, color: colors.testColor },
         listItem: { color: colors.fillColorNeutral020 },
+        row: {
+            gap: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        column: { gap: 16 },
+        spinnerContainer: {
+            height: 20,
+        },
+        image: {
+            width: 100,
+            height: 100,
+        },
     });
 };
 //# sourceMappingURL=conversations.js.map

package/build/components/conversations.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACjF,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAQ5C,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEzC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,uBAAuB,CACtB;MAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACd,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAC5B;UAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAC1C;YAAA,CAAC,MAAM,CAAC,AAAD,EACT;UAAA,EAAE,QAAQ,CACZ;QAAA,EAAE,aAAa,CAAC,CACjB,CACH;IAAA,EAAE,uBAAuB,CAAC,CAC3B,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,2BAA2B,CAAC;KACxC,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,CACxD,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CACxD;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAC7D;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,EACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACzE,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;KAChD,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { useTheme } from '../hooks/use_theme'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n  })\n}\n"]}
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\nimport { useTheme } from '../hooks'\nimport { Spinner, Image } from './display'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      style={styles.scrollView}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={\n        <View style={styles.column}>\n          <Text style={styles.foo}>Display Components</Text>\n          <View style={[styles.row, styles.spinnerContainer]}>\n            <Spinner size={24} />\n          </View>\n          <View style={styles.row}>\n            <Image source={{ uri: 'https://broken.url' }} style={styles.image} />\n            <Image\n              source={{\n                uri: 'https://picsum.photos/seed/picsum/200',\n              }}\n              style={styles.image}\n            />\n          </View>\n          <Text style={styles.foo}>Conversations</Text>\n        </View>\n      }\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n    container: { gap: 8, padding: 16 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n    row: {\n      gap: 16,\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    column: { gap: 16 },\n    spinnerContainer: {\n      height: 20,\n    },\n    image: {\n      width: 100,\n      height: 100,\n    },\n  })\n}\n"]}

package/build/components/display/image.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ImageProps as RNImageProps, ViewStyle } from 'react-native';
+interface ImageProps extends RNImageProps {
+    /**
+     * Should the image show the loading indicator by default.
+     */
+    defaultLoading?: boolean;
+    /**
+     * Size of the loading spinner.
+     */
+    loaderSize?: number;
+    /**
+     * Style object for the preload background.
+     */
+    loadingBackgroundStyles?: ViewStyle;
+}
+export declare function Image({ source, onLoad, defaultLoading, loaderSize, loadingBackgroundStyles, style, ...restProps }: ImageProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/build/components/display/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAIL,UAAU,IAAI,YAAY,EAC1B,SAAS,EACV,MAAM,cAAc,CAAA;AAIrB,UAAU,UAAW,SAAQ,YAAY;IACvC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;CACpC;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,UAAU,qBAuCZ"}

package/build/components/display/image.js

@@ -0,0 +1,46 @@
+import { noop } from 'lodash';
+import React, { useState } from 'react';
+import { Image as ReactNativeImage, StyleSheet, View, } from 'react-native';
+import { useTheme } from '../../hooks';
+import { Spinner } from './spinner';
+export function Image({ source, onLoad = noop, defaultLoading = true, loaderSize = 24, loadingBackgroundStyles, style, ...restProps }) {
+    const [loading, setLoading] = useState(defaultLoading);
+    const styles = useStyles();
+    const imageStyles = StyleSheet.flatten(style);
+    const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {};
+    const handleOnLoad = (event) => {
+        setLoading(false);
+        onLoad?.(event);
+    };
+    return (<View>
+      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} {...restProps}/>
+      {loading && (<View style={[
+                {
+                    ...styles.loadingBackground,
+                    ...loadingBackgroundStyles,
+                },
+                {
+                    borderRadius: borderRadius,
+                    width: width,
+                    height: height,
+                },
+            ]}>
+          <Spinner size={loaderSize}/>
+        </View>)}
+    </View>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        loadingBackground: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            backgroundColor: colors.fillColorNeutral070,
+        },
+        image: {
+            backgroundColor: 'transparent',
+        },
+    });
+};
+//# sourceMappingURL=image.js.map

package/build/components/display/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EACL,KAAK,IAAI,gBAAgB,EACzB,UAAU,EACV,IAAI,GAGL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAiBnC,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,MAAM,GAAG,IAAI,EACb,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,EAAE,EACf,uBAAuB,EACvB,KAAK,EACL,GAAG,SAAS,EACD;IACX,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;IACtD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,GAAG,WAAW,IAAI,EAAE,CAAA;IAE/E,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;QAClC,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CACnC,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,EAEhB;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;gBACL;oBACE,GAAG,MAAM,CAAC,iBAAiB;oBAC3B,GAAG,uBAAuB;iBAC3B;gBACD;oBACE,YAAY,EAAE,YAAY;oBAC1B,KAAK,EAAE,KAAK;oBACZ,MAAM,EAAE,MAAM;iBACf;aACF,CAAC,CAEF;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAC5B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,iBAAiB,EAAE;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,mBAAmB;SAC5C;QACD,KAAK,EAAE;YACL,eAAe,EAAE,aAAa;SAC/B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n  Image as ReactNativeImage,\n  StyleSheet,\n  View,\n  ImageProps as RNImageProps,\n  ViewStyle,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\ninterface ImageProps extends RNImageProps {\n  /**\n   * Should the image show the loading indicator by default.\n   */\n  defaultLoading?: boolean\n  /**\n   * Size of the loading spinner.\n   */\n  loaderSize?: number\n  /**\n   * Style object for the preload background.\n   */\n  loadingBackgroundStyles?: ViewStyle\n}\n\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style,\n  ...restProps\n}: ImageProps) {\n  const [loading, setLoading] = useState(defaultLoading)\n  const styles = useStyles()\n\n  const imageStyles = StyleSheet.flatten(style)\n  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}\n\n  const handleOnLoad = (event: any) => {\n    setLoading(false)\n    onLoad?.(event)\n  }\n\n  return (\n    <View>\n      <ReactNativeImage\n        style={[styles.image, imageStyles]}\n        onLoad={handleOnLoad}\n        source={source}\n        {...restProps}\n      />\n      {loading && (\n        <View\n          style={[\n            {\n              ...styles.loadingBackground,\n              ...loadingBackgroundStyles,\n            },\n            {\n              borderRadius: borderRadius,\n              width: width,\n              height: height,\n            },\n          ]}\n        >\n          <Spinner size={loaderSize} />\n        </View>\n      )}\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    loadingBackground: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      backgroundColor: colors.fillColorNeutral070,\n    },\n    image: {\n      backgroundColor: 'transparent',\n    },\n  })\n}\n"]}

package/build/components/display/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './spinner';
+export { Image } from './image';
+//# sourceMappingURL=index.d.ts.map

package/build/components/display/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/build/components/display/index.js

@@ -0,0 +1,3 @@
+export { Spinner } from './spinner';
+export { Image } from './image';
+//# sourceMappingURL=index.js.map

package/build/components/display/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA","sourcesContent":["export { Spinner } from './spinner'\nexport { Image } from './image'\n"]}

package/build/components/display/spinner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SpinnerProps {
+    /**
+     *  Size of the spinner in px
+     * */
+    size?: number;
+}
+export declare function Spinner({ size }: SpinnerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=spinner.d.ts.map

package/build/components/display/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,EAAE,YAAY,qBAsElD"}

package/build/components/display/spinner.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks';
+export function Spinner({ size = 20 }) {
+    const rotation = useRef(new Animated.Value(0)).current;
+    const styles = useStyles();
+    const animation = Animated.loop(Animated.timing(rotation, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+    }));
+    const rotateValue = rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    useEffect(() => {
+        animation.start();
+        return () => animation.stop();
+    }, [animation]);
+    useEffect(() => () => rotation.setValue(0), [rotation]);
+    return (<View style={styles.container}>
+      <Animated.View style={{
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            transform: [{ rotate: rotateValue }],
+        }}>
+        <View style={[
+            styles.clipping,
+            {
+                width: size / 2,
+                height: size / 2,
+            },
+        ]}>
+          <View style={[
+            styles.circle,
+            styles.spinner,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+            },
+        ]}/>
+        </View>
+        <View style={[
+            styles.circle,
+            styles.track,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+            },
+        ]}/>
+      </Animated.View>
+    </View>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        container: {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 200,
+            justifyContent: 'center',
+            alignItems: 'center',
+            opacity: 0.7,
+        },
+        circle: {
+            borderStyle: 'solid',
+            borderWidth: 3,
+        },
+        spinner: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            borderColor: colors.fillColorNeutral020,
+        },
+        track: {
+            borderColor: colors.fillColorNeutral050Base,
+        },
+        clipping: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            overflow: 'hidden',
+            zIndex: 200,
+        },
+    });
+};
+//# sourceMappingURL=spinner.js.map

package/build/components/display/spinner.js.map

@@ -0,0 +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, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../../hooks'\n\ninterface SpinnerProps {\n  /**\n   *  Size of the spinner in px\n   * */\n  size?: number\n}\n\nexport function Spinner({ size = 20 }: SpinnerProps) {\n  const rotation = useRef(new Animated.Value(0)).current\n  const styles = useStyles()\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  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}>\n      <Animated.View\n        style={{\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          transform: [{ rotate: rotateValue }],\n        }}\n      >\n        <View\n          style={[\n            styles.clipping,\n            {\n              width: size / 2,\n              height: size / 2,\n            },\n          ]}\n        >\n          <View\n            style={[\n              styles.circle,\n              styles.spinner,\n              {\n                width: size,\n                height: size,\n                borderRadius: size / 2,\n              },\n            ]}\n          />\n        </View>\n        <View\n          style={[\n            styles.circle,\n            styles.track,\n            {\n              width: size,\n              height: size,\n              borderRadius: size / 2,\n            },\n          ]}\n        />\n      </Animated.View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 200,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: 0.7,\n    },\n    circle: {\n      borderStyle: 'solid',\n      borderWidth: 3,\n    },\n    spinner: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      borderColor: colors.fillColorNeutral020,\n    },\n    track: {\n      borderColor: colors.fillColorNeutral050Base,\n    },\n    clipping: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      overflow: 'hidden',\n      zIndex: 200,\n    },\n  })\n}\n"]}

package/build/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useCreateChatTheme } from './use_create_chat_theme';
+export { useTheme } from './use_theme';
+//# sourceMappingURL=index.d.ts.map

package/build/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA"}

package/build/hooks/index.js

@@ -0,0 +1,3 @@
+export { useCreateChatTheme } from './use_create_chat_theme';
+export { useTheme } from './use_theme';
+//# sourceMappingURL=index.js.map

package/build/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { useCreateChatTheme } from './use_create_chat_theme'\nexport { useTheme } from './use_theme'\n"]}

package/build/index.d.ts

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations';
 import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { useCreateChatTheme } from './hooks';
 import { OAuthToken } from './types';
 import { baseUrlMap, uploadUrlMap } from './utils/session';
 import { TemporaryDefaultColorsType } from './utils/theme';

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,EACZ,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,EACZ,kBAAkB,GACnB,CAAA"}

package/build/index.js

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations';
 import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { useCreateChatTheme } from './hooks';
 import { baseUrlMap, uploadUrlMap } from './utils/session';
 export { baseUrlMap, ChatContext, ChatProvider, Conversations, uploadUrlMap, useCreateChatTheme, };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAElE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EACZ,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks/use_create_chat_theme'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n  useCreateChatTheme,\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EACZ,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n  useCreateChatTheme,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.3.0",
+  "version": "1.3.1-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -33,5 +33,5 @@
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "fccff0f8691ba483d7f504423a1bd649c94a5af8"
+  "gitHead": "a452b6b8fcd23775e30ab5ba9e98e95289594f9f"
 }

package/src/components/conversations.tsx

@@ -1,11 +1,12 @@
 import { useNavigation } from '@react-navigation/native'
 import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
 import React, { Suspense, useContext } from 'react'
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native'
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'
 import { ChatContext } from '../contexts/chat_context'
-import { useTheme } from '../hooks/use_theme'
 import { ConversationRecord } from '../types'
 import ErrorBoundary from './error_boundary'
+import { useTheme } from '../hooks'
+import { Spinner, Image } from './display'
 
 type ConversationsResponse = {
   data: ConversationRecord[]
@@ -42,8 +43,26 @@ const Loaded = () => {
     <FlatList
       data={conversations?.data}
       contentContainerStyle={styles.container}
+      style={styles.scrollView}
       ListEmptyComponent={<Text>No conversations found</Text>}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
+      ListHeaderComponent={
+        <View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <Spinner size={24} />
+          </View>
+          <View style={styles.row}>
+            <Image source={{ uri: 'https://broken.url' }} style={styles.image} />
+            <Image
+              source={{
+                uri: 'https://picsum.photos/seed/picsum/200',
+              }}
+              style={styles.image}
+            />
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>
+      }
       renderItem={({ item }) => (
         <Pressable onPress={() => navigation.navigate('Settings')}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
@@ -57,8 +76,23 @@ const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+    container: { gap: 8, padding: 16 },
     foo: { fontSize: 24, color: colors.testColor },
     listItem: { color: colors.fillColorNeutral020 },
+    row: {
+      gap: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    column: { gap: 16 },
+    spinnerContainer: {
+      height: 20,
+    },
+    image: {
+      width: 100,
+      height: 100,
+    },
   })
 }

package/src/components/display/image.tsx

@@ -0,0 +1,91 @@
+import { noop } from 'lodash'
+import React, { useState } from 'react'
+import {
+  Image as ReactNativeImage,
+  StyleSheet,
+  View,
+  ImageProps as RNImageProps,
+  ViewStyle,
+} from 'react-native'
+import { useTheme } from '../../hooks'
+import { Spinner } from './spinner'
+
+interface ImageProps extends RNImageProps {
+  /**
+   * Should the image show the loading indicator by default.
+   */
+  defaultLoading?: boolean
+  /**
+   * Size of the loading spinner.
+   */
+  loaderSize?: number
+  /**
+   * Style object for the preload background.
+   */
+  loadingBackgroundStyles?: ViewStyle
+}
+
+export function Image({
+  source,
+  onLoad = noop,
+  defaultLoading = true,
+  loaderSize = 24,
+  loadingBackgroundStyles,
+  style,
+  ...restProps
+}: ImageProps) {
+  const [loading, setLoading] = useState(defaultLoading)
+  const styles = useStyles()
+
+  const imageStyles = StyleSheet.flatten(style)
+  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}
+
+  const handleOnLoad = (event: any) => {
+    setLoading(false)
+    onLoad?.(event)
+  }
+
+  return (
+    <View>
+      <ReactNativeImage
+        style={[styles.image, imageStyles]}
+        onLoad={handleOnLoad}
+        source={source}
+        {...restProps}
+      />
+      {loading && (
+        <View
+          style={[
+            {
+              ...styles.loadingBackground,
+              ...loadingBackgroundStyles,
+            },
+            {
+              borderRadius: borderRadius,
+              width: width,
+              height: height,
+            },
+          ]}
+        >
+          <Spinner size={loaderSize} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    loadingBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      backgroundColor: colors.fillColorNeutral070,
+    },
+    image: {
+      backgroundColor: 'transparent',
+    },
+  })
+}

package/src/components/display/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner'
+export { Image } from './image'

package/src/components/display/spinner.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react'
+import { Animated, Easing, StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+
+interface SpinnerProps {
+  /**
+   *  Size of the spinner in px
+   * */
+  size?: number
+}
+
+export function Spinner({ size = 20 }: SpinnerProps) {
+  const rotation = useRef(new Animated.Value(0)).current
+  const styles = useStyles()
+
+  const animation = Animated.loop(
+    Animated.timing(rotation, {
+      toValue: 1,
+      duration: 1000,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    })
+  )
+
+  const rotateValue = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  useEffect(() => {
+    animation.start()
+    return () => animation.stop()
+  }, [animation])
+
+  useEffect(() => () => rotation.setValue(0), [rotation])
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          transform: [{ rotate: rotateValue }],
+        }}
+      >
+        <View
+          style={[
+            styles.clipping,
+            {
+              width: size / 2,
+              height: size / 2,
+            },
+          ]}
+        >
+          <View
+            style={[
+              styles.circle,
+              styles.spinner,
+              {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+              },
+            ]}
+          />
+        </View>
+        <View
+          style={[
+            styles.circle,
+            styles.track,
+            {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+            },
+          ]}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 200,
+      justifyContent: 'center',
+      alignItems: 'center',
+      opacity: 0.7,
+    },
+    circle: {
+      borderStyle: 'solid',
+      borderWidth: 3,
+    },
+    spinner: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderColor: colors.fillColorNeutral020,
+    },
+    track: {
+      borderColor: colors.fillColorNeutral050Base,
+    },
+    clipping: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      overflow: 'hidden',
+      zIndex: 200,
+    },
+  })
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCreateChatTheme } from './use_create_chat_theme'
+export { useTheme } from './use_theme'

package/src/index.tsx

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations'
 import { ChatContext, ChatProvider } from './contexts/chat_context'
-import { useCreateChatTheme } from './hooks/use_create_chat_theme'
+import { useCreateChatTheme } from './hooks'
 import { OAuthToken } from './types'
 import { baseUrlMap, uploadUrlMap } from './utils/session'
 import { TemporaryDefaultColorsType } from './utils/theme'