@planningcenter/chat-react-native 1.4.1-rc.1 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/conversations.js +3 -36
- package/build/components/conversations.js.map +1 -1
- package/build/index.d.ts +1 -0
- package/build/index.d.ts.map +1 -1
- package/build/index.js +1 -0
- package/build/index.js.map +1 -1
- package/build/screens/display.d.ts +3 -0
- package/build/screens/display.d.ts.map +1 -0
- package/build/screens/display.js +50 -0
- package/build/screens/display.js.map +1 -0
- package/build/screens/index.d.ts +2 -0
- package/build/screens/index.d.ts.map +1 -0
- package/build/screens/index.js +2 -0
- package/build/screens/index.js.map +1 -0
- package/package.json +2 -2
- package/src/components/conversations.tsx +3 -41
- package/src/index.tsx +1 -0
- package/src/screens/display.tsx +58 -0
- package/src/screens/index.ts +1 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useNavigation } from '@react-navigation/native';
|
|
2
2
|
import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
|
|
3
3
|
import React, { Suspense, useContext } from 'react';
|
|
4
|
-
import { FlatList, Pressable, StyleSheet
|
|
4
|
+
import { FlatList, Pressable, StyleSheet } from 'react-native';
|
|
5
5
|
import { ChatContext } from '../contexts/chat_context';
|
|
6
6
|
import { useTheme } from '../hooks';
|
|
7
|
-
import {
|
|
7
|
+
import { Text } from './display';
|
|
8
8
|
import ErrorBoundary from './error_boundary';
|
|
9
9
|
export function Conversations() {
|
|
10
10
|
const { token } = useContext(ChatContext);
|
|
@@ -24,25 +24,7 @@ const Loaded = () => {
|
|
|
24
24
|
queryKey: ['/chat/v2/me/conversations'],
|
|
25
25
|
});
|
|
26
26
|
const navigation = useNavigation();
|
|
27
|
-
return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<
|
|
28
|
-
<Text style={styles.foo}>Display Components</Text>
|
|
29
|
-
<View style={[styles.row, styles.spinnerContainer]}>
|
|
30
|
-
<Spinner size={24}/>
|
|
31
|
-
</View>
|
|
32
|
-
<View style={styles.row}>
|
|
33
|
-
<Image source={{ uri: 'https://broken.url' }} style={styles.image}/>
|
|
34
|
-
<Image source={{
|
|
35
|
-
uri: 'https://picsum.photos/seed/picsum/200',
|
|
36
|
-
}} style={styles.image}/>
|
|
37
|
-
</View>
|
|
38
|
-
<View style={styles.row}>
|
|
39
|
-
<Text>Plain text</Text>
|
|
40
|
-
<Text variant="secondary">Secondary</Text>
|
|
41
|
-
<Text variant="tertiary">Tertiary</Text>
|
|
42
|
-
<Text variant="footnote">Footnote</Text>
|
|
43
|
-
</View>
|
|
44
|
-
<Text style={styles.foo}>Conversations</Text>
|
|
45
|
-
</View>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
|
|
27
|
+
return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
|
|
46
28
|
<Text style={styles.listItem}>{item.attributes.title}</Text>
|
|
47
29
|
</Pressable>)}/>);
|
|
48
30
|
};
|
|
@@ -53,21 +35,6 @@ const useStyles = () => {
|
|
|
53
35
|
container: { gap: 8, padding: 16 },
|
|
54
36
|
foo: { fontSize: 24, color: colors.testColor },
|
|
55
37
|
listItem: { color: colors.fillColorNeutral020 },
|
|
56
|
-
row: {
|
|
57
|
-
gap: 16,
|
|
58
|
-
flexDirection: 'row',
|
|
59
|
-
alignItems: 'center',
|
|
60
|
-
justifyContent: 'center',
|
|
61
|
-
flexWrap: 'wrap',
|
|
62
|
-
},
|
|
63
|
-
column: { gap: 16 },
|
|
64
|
-
spinnerContainer: {
|
|
65
|
-
height: 20,
|
|
66
|
-
},
|
|
67
|
-
image: {
|
|
68
|
-
width: 100,
|
|
69
|
-
height: 100,
|
|
70
|
-
},
|
|
71
38
|
});
|
|
72
39
|
};
|
|
73
40
|
//# sourceMappingURL=conversations.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,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,
|
|
1
|
+
{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,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,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAI5C,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,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,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,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACpE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAClC,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 { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'\nimport { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { useTheme } from '../hooks'\nimport { Text } from './display'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = JSONAPICollection<ConversationResource>\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={<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 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 })\n}\n"]}
|
package/build/index.d.ts
CHANGED
|
@@ -3,5 +3,6 @@ import { ChatContext, ChatProvider } from './contexts/chat_context';
|
|
|
3
3
|
import { OAuthToken } from './types';
|
|
4
4
|
import { baseUrlMap, uploadUrlMap } from './utils/session';
|
|
5
5
|
import { TemporaryDefaultColorsType } from './utils/theme';
|
|
6
|
+
export * from './screens';
|
|
6
7
|
export { baseUrlMap, ChatContext, ChatProvider, Conversations, OAuthToken, TemporaryDefaultColorsType, uploadUrlMap, };
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +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,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;
|
|
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,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAC1D,cAAc,WAAW,CAAA;AAEzB,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,GACb,CAAA"}
|
package/build/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Conversations } from './components/conversations';
|
|
2
2
|
import { ChatContext, ChatProvider } from './contexts/chat_context';
|
|
3
3
|
import { baseUrlMap, uploadUrlMap } from './utils/session';
|
|
4
|
+
export * from './screens';
|
|
4
5
|
export { baseUrlMap, ChatContext, ChatProvider, Conversations, uploadUrlMap, };
|
|
5
6
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +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;AAEnE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;
|
|
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;AAEnE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE1D,cAAc,WAAW,CAAA;AAEzB,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,GACb,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\nexport * from './screens'\n\nexport {\n baseUrlMap,\n ChatContext,\n ChatProvider,\n Conversations,\n OAuthToken,\n TemporaryDefaultColorsType,\n uploadUrlMap,\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,wBAAgB,aAAa,sBA2B5B"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScrollView, StyleSheet, View } from 'react-native';
|
|
3
|
+
import { useTheme } from '../hooks';
|
|
4
|
+
import { Image, Spinner, Text } from '../components/display';
|
|
5
|
+
export function DisplayScreen() {
|
|
6
|
+
const styles = useStyles();
|
|
7
|
+
return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
|
|
8
|
+
<View style={styles.column}>
|
|
9
|
+
<View style={[styles.row, styles.spinnerContainer]}>
|
|
10
|
+
<Spinner size={24}/>
|
|
11
|
+
</View>
|
|
12
|
+
<View style={styles.row}>
|
|
13
|
+
<Image source={{ uri: 'https://broken.url' }} style={styles.image}/>
|
|
14
|
+
<Image source={{
|
|
15
|
+
uri: 'https://picsum.photos/seed/picsum/200',
|
|
16
|
+
}} style={styles.image}/>
|
|
17
|
+
</View>
|
|
18
|
+
<View style={styles.row}>
|
|
19
|
+
<Text>Plain text</Text>
|
|
20
|
+
<Text variant="secondary">Secondary</Text>
|
|
21
|
+
<Text variant="tertiary">Tertiary</Text>
|
|
22
|
+
<Text variant="footnote">Footnote</Text>
|
|
23
|
+
</View>
|
|
24
|
+
</View>
|
|
25
|
+
</ScrollView>);
|
|
26
|
+
}
|
|
27
|
+
const useStyles = () => {
|
|
28
|
+
const { colors } = useTheme();
|
|
29
|
+
return StyleSheet.create({
|
|
30
|
+
scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
|
|
31
|
+
container: { gap: 16, padding: 24 },
|
|
32
|
+
listItem: { color: colors.fillColorNeutral020 },
|
|
33
|
+
row: {
|
|
34
|
+
gap: 16,
|
|
35
|
+
flexDirection: 'row',
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
justifyContent: 'center',
|
|
38
|
+
flexWrap: 'wrap',
|
|
39
|
+
},
|
|
40
|
+
column: { gap: 32 },
|
|
41
|
+
spinnerContainer: {
|
|
42
|
+
height: 20,
|
|
43
|
+
},
|
|
44
|
+
image: {
|
|
45
|
+
width: 100,
|
|
46
|
+
height: 100,
|
|
47
|
+
},
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=display.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5D,MAAM,UAAU,aAAa;IAC3B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,CACjD;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EACpB;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACtB;UAAA,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAClE;UAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC;YACN,GAAG,EAAE,uCAAuC;SAC7C,CAAC,CACF,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAExB;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACtB;UAAA,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACtB;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CACzC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CACvC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CACzC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,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,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACpE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;QAC/C,GAAG,EAAE;YACH,GAAG,EAAE,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,MAAM;SACjB;QACD,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;QACnB,gBAAgB,EAAE;YAChB,MAAM,EAAE,EAAE;SACX;QACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { Image, Spinner, Text } from '../components/display'\n\nexport function DisplayScreen() {\n const styles = useStyles()\n\n return (\n <ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>\n <View style={styles.column}>\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 <View style={styles.row}>\n <Text>Plain text</Text>\n <Text variant=\"secondary\">Secondary</Text>\n <Text variant=\"tertiary\">Tertiary</Text>\n <Text variant=\"footnote\">Footnote</Text>\n </View>\n </View>\n </ScrollView>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n container: { gap: 16, padding: 24 },\n listItem: { color: colors.fillColorNeutral020 },\n row: {\n gap: 16,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n flexWrap: 'wrap',\n },\n column: { gap: 32 },\n spinnerContainer: {\n height: 20,\n },\n image: {\n width: 100,\n height: 100,\n },\n })\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA","sourcesContent":["export * from './display'\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "1.4.1
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"prettier": "^3.4.2",
|
|
39
39
|
"react-native": "0.74.5"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "469ceadce649e0dfa29e5c61281d1ed4821786cd"
|
|
42
42
|
}
|
|
@@ -2,10 +2,10 @@ import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-co
|
|
|
2
2
|
import { useNavigation } from '@react-navigation/native'
|
|
3
3
|
import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
|
|
4
4
|
import React, { Suspense, useContext } from 'react'
|
|
5
|
-
import { FlatList, Pressable, StyleSheet
|
|
5
|
+
import { FlatList, Pressable, StyleSheet } from 'react-native'
|
|
6
6
|
import { ChatContext } from '../contexts/chat_context'
|
|
7
7
|
import { useTheme } from '../hooks'
|
|
8
|
-
import {
|
|
8
|
+
import { Text } from './display'
|
|
9
9
|
import ErrorBoundary from './error_boundary'
|
|
10
10
|
|
|
11
11
|
type ConversationsResponse = JSONAPICollection<ConversationResource>
|
|
@@ -41,30 +41,7 @@ const Loaded = () => {
|
|
|
41
41
|
contentContainerStyle={styles.container}
|
|
42
42
|
style={styles.scrollView}
|
|
43
43
|
ListEmptyComponent={<Text>No conversations found</Text>}
|
|
44
|
-
ListHeaderComponent={
|
|
45
|
-
<View style={styles.column}>
|
|
46
|
-
<Text style={styles.foo}>Display Components</Text>
|
|
47
|
-
<View style={[styles.row, styles.spinnerContainer]}>
|
|
48
|
-
<Spinner size={24} />
|
|
49
|
-
</View>
|
|
50
|
-
<View style={styles.row}>
|
|
51
|
-
<Image source={{ uri: 'https://broken.url' }} style={styles.image} />
|
|
52
|
-
<Image
|
|
53
|
-
source={{
|
|
54
|
-
uri: 'https://picsum.photos/seed/picsum/200',
|
|
55
|
-
}}
|
|
56
|
-
style={styles.image}
|
|
57
|
-
/>
|
|
58
|
-
</View>
|
|
59
|
-
<View style={styles.row}>
|
|
60
|
-
<Text>Plain text</Text>
|
|
61
|
-
<Text variant="secondary">Secondary</Text>
|
|
62
|
-
<Text variant="tertiary">Tertiary</Text>
|
|
63
|
-
<Text variant="footnote">Footnote</Text>
|
|
64
|
-
</View>
|
|
65
|
-
<Text style={styles.foo}>Conversations</Text>
|
|
66
|
-
</View>
|
|
67
|
-
}
|
|
44
|
+
ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
|
|
68
45
|
renderItem={({ item }) => (
|
|
69
46
|
<Pressable onPress={() => navigation.navigate('Settings')}>
|
|
70
47
|
<Text style={styles.listItem}>{item.attributes.title}</Text>
|
|
@@ -82,20 +59,5 @@ const useStyles = () => {
|
|
|
82
59
|
container: { gap: 8, padding: 16 },
|
|
83
60
|
foo: { fontSize: 24, color: colors.testColor },
|
|
84
61
|
listItem: { color: colors.fillColorNeutral020 },
|
|
85
|
-
row: {
|
|
86
|
-
gap: 16,
|
|
87
|
-
flexDirection: 'row',
|
|
88
|
-
alignItems: 'center',
|
|
89
|
-
justifyContent: 'center',
|
|
90
|
-
flexWrap: 'wrap',
|
|
91
|
-
},
|
|
92
|
-
column: { gap: 16 },
|
|
93
|
-
spinnerContainer: {
|
|
94
|
-
height: 20,
|
|
95
|
-
},
|
|
96
|
-
image: {
|
|
97
|
-
width: 100,
|
|
98
|
-
height: 100,
|
|
99
|
-
},
|
|
100
62
|
})
|
|
101
63
|
}
|
package/src/index.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import { ChatContext, ChatProvider } from './contexts/chat_context'
|
|
|
3
3
|
import { OAuthToken } from './types'
|
|
4
4
|
import { baseUrlMap, uploadUrlMap } from './utils/session'
|
|
5
5
|
import { TemporaryDefaultColorsType } from './utils/theme'
|
|
6
|
+
export * from './screens'
|
|
6
7
|
|
|
7
8
|
export {
|
|
8
9
|
baseUrlMap,
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { ScrollView, StyleSheet, View } from 'react-native'
|
|
3
|
+
import { useTheme } from '../hooks'
|
|
4
|
+
import { Image, Spinner, Text } from '../components/display'
|
|
5
|
+
|
|
6
|
+
export function DisplayScreen() {
|
|
7
|
+
const styles = useStyles()
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
|
|
11
|
+
<View style={styles.column}>
|
|
12
|
+
<View style={[styles.row, styles.spinnerContainer]}>
|
|
13
|
+
<Spinner size={24} />
|
|
14
|
+
</View>
|
|
15
|
+
<View style={styles.row}>
|
|
16
|
+
<Image source={{ uri: 'https://broken.url' }} style={styles.image} />
|
|
17
|
+
<Image
|
|
18
|
+
source={{
|
|
19
|
+
uri: 'https://picsum.photos/seed/picsum/200',
|
|
20
|
+
}}
|
|
21
|
+
style={styles.image}
|
|
22
|
+
/>
|
|
23
|
+
</View>
|
|
24
|
+
<View style={styles.row}>
|
|
25
|
+
<Text>Plain text</Text>
|
|
26
|
+
<Text variant="secondary">Secondary</Text>
|
|
27
|
+
<Text variant="tertiary">Tertiary</Text>
|
|
28
|
+
<Text variant="footnote">Footnote</Text>
|
|
29
|
+
</View>
|
|
30
|
+
</View>
|
|
31
|
+
</ScrollView>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const useStyles = () => {
|
|
36
|
+
const { colors } = useTheme()
|
|
37
|
+
|
|
38
|
+
return StyleSheet.create({
|
|
39
|
+
scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
|
|
40
|
+
container: { gap: 16, padding: 24 },
|
|
41
|
+
listItem: { color: colors.fillColorNeutral020 },
|
|
42
|
+
row: {
|
|
43
|
+
gap: 16,
|
|
44
|
+
flexDirection: 'row',
|
|
45
|
+
alignItems: 'center',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
flexWrap: 'wrap',
|
|
48
|
+
},
|
|
49
|
+
column: { gap: 32 },
|
|
50
|
+
spinnerContainer: {
|
|
51
|
+
height: 20,
|
|
52
|
+
},
|
|
53
|
+
image: {
|
|
54
|
+
width: 100,
|
|
55
|
+
height: 100,
|
|
56
|
+
},
|
|
57
|
+
})
|
|
58
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './display'
|