@planningcenter/chat-react-native 3.31.1-rc.0 → 3.32.0-rc.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"icon_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAwB,EAAE,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAUrF,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;CAC/B;AAMD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE,eAAe,qBA6B1E"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { findIconDefinition, } from '@fortawesome/fontawesome-svg-core';
|
|
1
2
|
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
import { StyleSheet, View } from 'react-native';
|
|
4
|
+
import { StyleSheet, Text, View } from 'react-native';
|
|
4
5
|
import LinearGradient from 'react-native-linear-gradient';
|
|
5
6
|
import AvatarPrimitive from '../primitive/avatar_primitive';
|
|
6
7
|
import { getAvatarGradientProps } from './utils/avatar_gradient_colors';
|
|
@@ -10,13 +11,22 @@ const ICON_SIZE = {
|
|
|
10
11
|
md: 16,
|
|
11
12
|
lg: 20,
|
|
12
13
|
};
|
|
14
|
+
function findIcon(iconKey) {
|
|
15
|
+
return findIconDefinition({ prefix: 'fas', iconName: iconKey });
|
|
16
|
+
}
|
|
13
17
|
export function IconAvatar({ iconKey, color, size = 'lg' }) {
|
|
14
18
|
const gradientProps = getAvatarGradientProps(color);
|
|
19
|
+
const iconDef = findIcon(iconKey);
|
|
20
|
+
if (__DEV__ && !iconDef) {
|
|
21
|
+
console.warn(`IconAvatar: unrecognized icon key "${iconKey}"`);
|
|
22
|
+
}
|
|
15
23
|
return (<AvatarPrimitive.Root size={size}>
|
|
16
24
|
<AvatarPrimitive.Mask>
|
|
17
25
|
<LinearGradient {...gradientProps} style={styles.gradientFill}>
|
|
18
26
|
<View style={styles.contentContainer}>
|
|
19
|
-
<FontAwesomeIcon icon={
|
|
27
|
+
{iconDef ? (<FontAwesomeIcon icon={iconDef} size={ICON_SIZE[size]} color="white"/>) : (<Text style={[styles.fallbackText, { fontSize: ICON_SIZE[size] }]} accessibilityLabel="Unknown icon" allowFontScaling={false}>
|
|
28
|
+
?
|
|
29
|
+
</Text>)}
|
|
20
30
|
</View>
|
|
21
31
|
</LinearGradient>
|
|
22
32
|
</AvatarPrimitive.Mask>
|
|
@@ -32,5 +42,10 @@ const styles = StyleSheet.create({
|
|
|
32
42
|
alignItems: 'center',
|
|
33
43
|
justifyContent: 'center',
|
|
34
44
|
},
|
|
45
|
+
fallbackText: {
|
|
46
|
+
color: 'white',
|
|
47
|
+
fontWeight: 'bold',
|
|
48
|
+
opacity: 0.7,
|
|
49
|
+
},
|
|
35
50
|
});
|
|
36
51
|
//# sourceMappingURL=icon_avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon_avatar.js","sourceRoot":"","sources":["../../../src/components/display/icon_avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"icon_avatar.js","sourceRoot":"","sources":["../../../src/components/display/icon_avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,GAGnB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,cAAc,MAAM,8BAA8B,CAAA;AACzD,OAAO,eAAyC,MAAM,+BAA+B,CAAA;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,MAAM,SAAS,GAA2B;IACxC,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAA;AAQD,SAAS,QAAQ,CAAC,OAAe;IAC/B,OAAO,kBAAkB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAmB,EAAE,CAAC,CAAA;AAC7E,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAmB;IACzE,MAAM,aAAa,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEjC,IAAI,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACxB,OAAO,CAAC,IAAI,CAAC,sCAAsC,OAAO,GAAG,CAAC,CAAA;IAChE,CAAC;IAED,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAC/B;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,cAAc,CAAC,IAAI,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC5D;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;YAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAG,CACxE,CAAC,CAAC,CAAC,CACF,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAC5D,kBAAkB,CAAC,cAAc,CACjC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAExB;;cACF,EAAE,IAAI,CAAC,CACR,CACH;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,cAAc,CAClB;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,GAAG;KACb;CACF,CAAC,CAAA","sourcesContent":["import {\n findIconDefinition,\n type IconDefinition,\n type IconName,\n} from '@fortawesome/fontawesome-svg-core'\nimport { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'\nimport React from 'react'\nimport { StyleSheet, Text, View } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'\nimport { getAvatarGradientProps } from './utils/avatar_gradient_colors'\n\nconst ICON_SIZE: Record<string, number> = {\n xs: 10,\n sm: 12,\n md: 16,\n lg: 20,\n}\n\ninterface IconAvatarProps {\n iconKey: string\n color?: string | null\n size?: AvatarRootProps['size']\n}\n\nfunction findIcon(iconKey: string): IconDefinition | undefined {\n return findIconDefinition({ prefix: 'fas', iconName: iconKey as IconName })\n}\n\nexport function IconAvatar({ iconKey, color, size = 'lg' }: IconAvatarProps) {\n const gradientProps = getAvatarGradientProps(color)\n const iconDef = findIcon(iconKey)\n\n if (__DEV__ && !iconDef) {\n console.warn(`IconAvatar: unrecognized icon key \"${iconKey}\"`)\n }\n\n return (\n <AvatarPrimitive.Root size={size}>\n <AvatarPrimitive.Mask>\n <LinearGradient {...gradientProps} style={styles.gradientFill}>\n <View style={styles.contentContainer}>\n {iconDef ? (\n <FontAwesomeIcon icon={iconDef} size={ICON_SIZE[size]} color=\"white\" />\n ) : (\n <Text\n style={[styles.fallbackText, { fontSize: ICON_SIZE[size] }]}\n accessibilityLabel=\"Unknown icon\"\n allowFontScaling={false}\n >\n ?\n </Text>\n )}\n </View>\n </LinearGradient>\n </AvatarPrimitive.Mask>\n </AvatarPrimitive.Root>\n )\n}\n\nconst styles = StyleSheet.create({\n gradientFill: {\n width: '100%',\n height: '100%',\n },\n contentContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n fallbackText: {\n color: 'white',\n fontWeight: 'bold',\n opacity: 0.7,\n },\n})\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.32.0-rc.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"react-native-url-polyfill": "^2.0.0",
|
|
65
65
|
"typescript": "<5.6.0"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "592de1c72536e727df3326d83dfea32d212377c3"
|
|
68
68
|
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
findIconDefinition,
|
|
3
|
+
type IconDefinition,
|
|
4
|
+
type IconName,
|
|
5
|
+
} from '@fortawesome/fontawesome-svg-core'
|
|
2
6
|
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
|
|
3
7
|
import React from 'react'
|
|
4
|
-
import { StyleSheet, View } from 'react-native'
|
|
8
|
+
import { StyleSheet, Text, View } from 'react-native'
|
|
5
9
|
import LinearGradient from 'react-native-linear-gradient'
|
|
6
10
|
import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
|
|
7
11
|
import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
|
|
@@ -19,19 +23,34 @@ interface IconAvatarProps {
|
|
|
19
23
|
size?: AvatarRootProps['size']
|
|
20
24
|
}
|
|
21
25
|
|
|
26
|
+
function findIcon(iconKey: string): IconDefinition | undefined {
|
|
27
|
+
return findIconDefinition({ prefix: 'fas', iconName: iconKey as IconName })
|
|
28
|
+
}
|
|
29
|
+
|
|
22
30
|
export function IconAvatar({ iconKey, color, size = 'lg' }: IconAvatarProps) {
|
|
23
31
|
const gradientProps = getAvatarGradientProps(color)
|
|
32
|
+
const iconDef = findIcon(iconKey)
|
|
33
|
+
|
|
34
|
+
if (__DEV__ && !iconDef) {
|
|
35
|
+
console.warn(`IconAvatar: unrecognized icon key "${iconKey}"`)
|
|
36
|
+
}
|
|
24
37
|
|
|
25
38
|
return (
|
|
26
39
|
<AvatarPrimitive.Root size={size}>
|
|
27
40
|
<AvatarPrimitive.Mask>
|
|
28
41
|
<LinearGradient {...gradientProps} style={styles.gradientFill}>
|
|
29
42
|
<View style={styles.contentContainer}>
|
|
30
|
-
|
|
31
|
-
icon={[
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
43
|
+
{iconDef ? (
|
|
44
|
+
<FontAwesomeIcon icon={iconDef} size={ICON_SIZE[size]} color="white" />
|
|
45
|
+
) : (
|
|
46
|
+
<Text
|
|
47
|
+
style={[styles.fallbackText, { fontSize: ICON_SIZE[size] }]}
|
|
48
|
+
accessibilityLabel="Unknown icon"
|
|
49
|
+
allowFontScaling={false}
|
|
50
|
+
>
|
|
51
|
+
?
|
|
52
|
+
</Text>
|
|
53
|
+
)}
|
|
35
54
|
</View>
|
|
36
55
|
</LinearGradient>
|
|
37
56
|
</AvatarPrimitive.Mask>
|
|
@@ -49,4 +68,9 @@ const styles = StyleSheet.create({
|
|
|
49
68
|
alignItems: 'center',
|
|
50
69
|
justifyContent: 'center',
|
|
51
70
|
},
|
|
71
|
+
fallbackText: {
|
|
72
|
+
color: 'white',
|
|
73
|
+
fontWeight: 'bold',
|
|
74
|
+
opacity: 0.7,
|
|
75
|
+
},
|
|
52
76
|
})
|