@planningcenter/chat-react-native 1.4.2 → 1.4.3-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.
- package/build/components/display/icon.d.ts +26 -0
- package/build/components/display/icon.d.ts.map +1 -0
- package/build/components/display/icon.js +60 -0
- package/build/components/display/icon.js.map +1 -0
- package/build/components/display/index.d.ts +1 -0
- package/build/components/display/index.d.ts.map +1 -1
- package/build/components/display/index.js +1 -0
- package/build/components/display/index.js.map +1 -1
- package/build/screens/display.d.ts.map +1 -1
- package/build/screens/display.js +10 -1
- package/build/screens/display.js.map +1 -1
- package/package.json +5 -3
- package/src/components/display/icon.tsx +111 -0
- package/src/components/display/index.ts +1 -0
- package/src/screens/display.tsx +10 -1
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ViewStyle } from 'react-native';
|
|
3
|
+
import type { XmlProps } from 'react-native-svg';
|
|
4
|
+
type IconStyle = ViewStyle & {
|
|
5
|
+
fontSize?: number;
|
|
6
|
+
color?: string;
|
|
7
|
+
};
|
|
8
|
+
interface IconProps extends Omit<XmlProps, 'xml'> {
|
|
9
|
+
/**
|
|
10
|
+
* Made up of the set.iconName.
|
|
11
|
+
* Example: "general.textMessage"
|
|
12
|
+
*/
|
|
13
|
+
name: string;
|
|
14
|
+
/**
|
|
15
|
+
* This sets a static size for the icon.
|
|
16
|
+
* Providing a fontSize style will allow the icon to scale with the device's text a11y size.
|
|
17
|
+
*/
|
|
18
|
+
size?: number;
|
|
19
|
+
/**
|
|
20
|
+
* Icon can handle ViewStyle, color, and fontSize.
|
|
21
|
+
*/
|
|
22
|
+
style?: IconStyle;
|
|
23
|
+
}
|
|
24
|
+
export declare function Icon({ name, size, style, accessibilityElementsHidden, accessibilityLabel, ...props }: IconProps): React.JSX.Element;
|
|
25
|
+
export {};
|
|
26
|
+
//# sourceMappingURL=icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAsBhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,UAAU,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC;IAC/C;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,SAAS,qBAyBX"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PixelRatio, StyleSheet, View } from 'react-native';
|
|
3
|
+
import { SvgXml } from 'react-native-svg';
|
|
4
|
+
import { useTheme } from '../../hooks';
|
|
5
|
+
import * as general from '@planningcenter/icons/paths/general';
|
|
6
|
+
import * as groups from '@planningcenter/icons/paths/groups';
|
|
7
|
+
import * as calendar from '@planningcenter/icons/paths/calendar';
|
|
8
|
+
import * as people from '@planningcenter/icons/paths/people';
|
|
9
|
+
import * as churchCenter from '@planningcenter/icons/paths/church-center';
|
|
10
|
+
import * as logomark from '@planningcenter/icons/paths/logomark';
|
|
11
|
+
import * as brand from '@planningcenter/icons/paths/brand';
|
|
12
|
+
const FALLBACK_SIZE = 12;
|
|
13
|
+
const ICONS = {
|
|
14
|
+
calendar,
|
|
15
|
+
people,
|
|
16
|
+
churchCenter,
|
|
17
|
+
groups,
|
|
18
|
+
general,
|
|
19
|
+
logomark,
|
|
20
|
+
brand,
|
|
21
|
+
};
|
|
22
|
+
export function Icon({ name, size, style, accessibilityElementsHidden, accessibilityLabel, ...props }) {
|
|
23
|
+
const path = getIconPath(name);
|
|
24
|
+
const iconSize = getIconSize(size, style);
|
|
25
|
+
const styles = useStyles(iconSize);
|
|
26
|
+
if (!path) {
|
|
27
|
+
console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`);
|
|
28
|
+
return <View style={styles.noIcon}/>;
|
|
29
|
+
}
|
|
30
|
+
return (<SvgXml accessibilityElementsHidden={accessibilityElementsHidden} accessibilityLabel={accessibilityLabel} xml={`
|
|
31
|
+
<svg viewBox="0 0 16 16">
|
|
32
|
+
<path d="${path}" fill="currentColor" />
|
|
33
|
+
</svg>
|
|
34
|
+
`} height={iconSize} width={iconSize} style={{ ...styles.icon, ...style }} {...props}/>);
|
|
35
|
+
}
|
|
36
|
+
const getIconSize = (size, style) => {
|
|
37
|
+
const fontSize = StyleSheet.flatten(style)?.fontSize;
|
|
38
|
+
if (fontSize)
|
|
39
|
+
return fontSize * PixelRatio.getFontScale();
|
|
40
|
+
return size || FALLBACK_SIZE;
|
|
41
|
+
};
|
|
42
|
+
const getIconPath = (name) => {
|
|
43
|
+
const [setName, iconName] = name.split('.');
|
|
44
|
+
return ICONS[setName]?.[iconName];
|
|
45
|
+
};
|
|
46
|
+
const useStyles = (size) => {
|
|
47
|
+
const { colors } = useTheme();
|
|
48
|
+
return StyleSheet.create({
|
|
49
|
+
noIcon: {
|
|
50
|
+
backgroundColor: colors.iconColorDefaultDisabled,
|
|
51
|
+
width: size,
|
|
52
|
+
height: size,
|
|
53
|
+
borderRadius: size / 2,
|
|
54
|
+
},
|
|
55
|
+
icon: {
|
|
56
|
+
color: colors.iconColorDefaultPrimary,
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=icon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { PixelRatio, StyleSheet, View } from 'react-native'\nimport type { ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useTheme } from '../../hooks'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as brand from '@planningcenter/icons/paths/brand'\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n calendar,\n people,\n churchCenter,\n groups,\n general,\n logomark,\n brand,\n} as const\n\ntype IconStyle = ViewStyle & {\n fontSize?: number\n color?: string\n}\n\ninterface IconProps extends Omit<XmlProps, 'xml'> {\n /**\n * Made up of the set.iconName.\n * Example: \"general.textMessage\"\n */\n name: string\n /**\n * This sets a static size for the icon.\n * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n */\n size?: number\n /**\n * Icon can handle ViewStyle, color, and fontSize.\n */\n style?: IconStyle\n}\n\nexport function Icon({\n name,\n size,\n style,\n accessibilityElementsHidden,\n accessibilityLabel,\n ...props\n}: IconProps) {\n const path = getIconPath(name)\n const iconSize = getIconSize(size, style)\n const styles = useStyles(iconSize)\n\n if (!path) {\n console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n return <View style={styles.noIcon} />\n }\n\n return (\n <SvgXml\n accessibilityElementsHidden={accessibilityElementsHidden}\n accessibilityLabel={accessibilityLabel}\n xml={`\n <svg viewBox=\"0 0 16 16\">\n <path d=\"${path}\" fill=\"currentColor\" />\n </svg>\n `}\n height={iconSize}\n width={iconSize}\n style={{ ...styles.icon, ...style }}\n {...props}\n />\n )\n}\n\nconst getIconSize = (size?: number, style?: IconStyle) => {\n const fontSize = StyleSheet.flatten(style)?.fontSize\n\n if (fontSize) return fontSize * PixelRatio.getFontScale()\n\n return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: string) => {\n const [setName, iconName] = name.split('.')\n\n return ICONS[setName]?.[iconName]\n}\n\nconst useStyles = (size: number) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n noIcon: {\n backgroundColor: colors.iconColorDefaultDisabled,\n width: size,\n height: size,\n borderRadius: size / 2,\n },\n icon: {\n color: colors.iconColorDefaultPrimary,\n },\n })\n}\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { Avatar } from './avatar';
|
|
2
2
|
export { AvatarGroup } from './avatar_group';
|
|
3
3
|
export { Heading } from './heading';
|
|
4
|
+
export { Icon } from './icon';
|
|
4
5
|
export { Image, ImageProps } from './image';
|
|
5
6
|
export { Spinner } from './spinner';
|
|
6
7
|
export { Text } from './text';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Avatar } from './avatar'\nexport { AvatarGroup } from './avatar_group'\nexport { Heading } from './heading'\nexport { Image, ImageProps } from './image'\nexport { Spinner } from './spinner'\nexport { Text } from './text'\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Avatar } from './avatar'\nexport { AvatarGroup } from './avatar_group'\nexport { Heading } from './heading'\nexport { Icon } from './icon'\nexport { Image, ImageProps } from './image'\nexport { Spinner } from './spinner'\nexport { Text } from './text'\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAyBzB,wBAAgB,aAAa,
|
|
1
|
+
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAyBzB,wBAAgB,aAAa,sBAmD5B"}
|
package/build/screens/display.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ScrollView, StyleSheet, View } from 'react-native';
|
|
3
3
|
import { useTheme } from '../hooks';
|
|
4
|
-
import { Avatar, AvatarGroup, Heading, Image, Spinner, Text } from '../components/display';
|
|
4
|
+
import { Avatar, AvatarGroup, Heading, Icon, Image, Spinner, Text } from '../components/display';
|
|
5
5
|
import { space } from '../utils/space';
|
|
6
6
|
const URL = {
|
|
7
7
|
image: 'https://picsum.photos/seed/picsum/200',
|
|
@@ -50,6 +50,11 @@ export function DisplayScreen() {
|
|
|
50
50
|
<AvatarGroup sourceUris={URL.three_avatars}/>
|
|
51
51
|
<AvatarGroup sourceUris={URL.four_avatars}/>
|
|
52
52
|
</View>
|
|
53
|
+
<View style={styles.row}>
|
|
54
|
+
<Icon name="missingIcon" size={20}/>
|
|
55
|
+
<Icon name="general.textMessage" size={20}/>
|
|
56
|
+
<Icon name="churchCenter.sort" style={styles.icon}/>
|
|
57
|
+
</View>
|
|
53
58
|
<View style={styles.row}>
|
|
54
59
|
<Text>Plain text</Text>
|
|
55
60
|
<Text variant="secondary">Secondary</Text>
|
|
@@ -86,6 +91,10 @@ const useStyles = () => {
|
|
|
86
91
|
width: 100,
|
|
87
92
|
height: 100,
|
|
88
93
|
},
|
|
94
|
+
icon: {
|
|
95
|
+
fontSize: 20,
|
|
96
|
+
color: colors.iconColorDefaultSecondary,
|
|
97
|
+
},
|
|
89
98
|
});
|
|
90
99
|
};
|
|
91
100
|
//# sourceMappingURL=display.js.map
|
|
@@ -1 +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,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/screens/display.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { Avatar, AvatarGroup, Heading, Icon, Image, Spinner, Text } from '../components/display'\nimport { space } from '../utils/space'\n\nconst URL = {\n image: 'https://picsum.photos/seed/picsum/200',\n broken: 'https://broken.url',\n avatar: 'https://i.pravatar.cc/200?img=22',\n avatar_fallback: 'https://avatars.planningcenteronline.com/uploads/initials/PR.png',\n two_avatars: ['https://i.pravatar.cc/200?img=22', 'https://i.pravatar.cc/200?img=23'],\n three_avatars: [\n 'https://i.pravatar.cc/200?img=22',\n 'https://i.pravatar.cc/200?img=23',\n 'https://i.pravatar.cc/200?img=24',\n ],\n four_avatars: [\n 'https://i.pravatar.cc/200?img=30',\n 'https://i.pravatar.cc/200?img=29',\n 'https://i.pravatar.cc/200?img=28',\n 'https://i.pravatar.cc/200?img=27',\n ],\n}\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: URL.broken }} style={styles.image} />\n <Image source={{ uri: URL.image }} style={styles.image} />\n </View>\n <View style={styles.row}>\n <Avatar sourceUri={URL.broken} />\n <Avatar size=\"md\" sourceUri={URL.avatar_fallback} />\n <Avatar sourceUri={URL.avatar} />\n </View>\n <View style={styles.row}>\n <Avatar presence=\"offline\" sourceUri={URL.broken} />\n <Avatar presence=\"online\" size=\"md\" sourceUri={URL.avatar_fallback} />\n <Avatar presence=\"offline\" sourceUri={URL.avatar} />\n </View>\n <View style={styles.row}>\n <AvatarGroup sourceUris={[URL.broken]} />\n <AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]} />\n <AvatarGroup sourceUris={[URL.avatar]} />\n <AvatarGroup sourceUris={URL.two_avatars} />\n <AvatarGroup sourceUris={URL.three_avatars} />\n <AvatarGroup sourceUris={URL.four_avatars} />\n </View>\n <View style={styles.row}>\n <Icon name=\"missingIcon\" size={20} />\n <Icon name=\"general.textMessage\" size={20} />\n <Icon name=\"churchCenter.sort\" style={styles.icon} />\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 style={styles.row}>\n <Heading>Heading 1</Heading>\n <Heading variant=\"h2\">Heading 2</Heading>\n <Heading variant=\"h3\">Heading 3</Heading>\n <Heading variant=\"h4\">Heading 4</Heading>\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.fillColorNeutral100Inverted },\n container: { gap: space(2), padding: space(3) },\n listItem: { color: colors.fillColorNeutral020 },\n row: {\n gap: space(2),\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n flexWrap: 'wrap',\n },\n column: { gap: space(4) },\n spinnerContainer: {\n height: space(2.5),\n },\n image: {\n width: 100,\n height: 100,\n },\n icon: {\n fontSize: 20,\n color: colors.iconColorDefaultSecondary,\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3-rc.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -20,13 +20,15 @@
|
|
|
20
20
|
"@planningcenter/chat-core": "^1.4.2"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
|
+
"@planningcenter/icons": "^15.17.0",
|
|
23
24
|
"@react-navigation/elements": "*",
|
|
24
25
|
"@react-navigation/native": "*",
|
|
25
26
|
"@tanstack/react-query": "^5.0.0",
|
|
26
27
|
"lodash": "*",
|
|
27
28
|
"react": "*",
|
|
28
29
|
"react-native": "*",
|
|
29
|
-
"react-native-device-info": "*"
|
|
30
|
+
"react-native-device-info": "*",
|
|
31
|
+
"react-native-svg": "*"
|
|
30
32
|
},
|
|
31
33
|
"devDependencies": {
|
|
32
34
|
"@react-native/eslint-config": "^0.77.0",
|
|
@@ -37,5 +39,5 @@
|
|
|
37
39
|
"prettier": "^3.4.2",
|
|
38
40
|
"typescript": "<5.6.0"
|
|
39
41
|
},
|
|
40
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "1ac58da2e856582a61e56f94dd9387efbdbb2663"
|
|
41
43
|
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { PixelRatio, StyleSheet, View } from 'react-native'
|
|
3
|
+
import type { ViewStyle } from 'react-native'
|
|
4
|
+
import { SvgXml } from 'react-native-svg'
|
|
5
|
+
import type { XmlProps } from 'react-native-svg'
|
|
6
|
+
import { useTheme } from '../../hooks'
|
|
7
|
+
import * as general from '@planningcenter/icons/paths/general'
|
|
8
|
+
import * as groups from '@planningcenter/icons/paths/groups'
|
|
9
|
+
import * as calendar from '@planningcenter/icons/paths/calendar'
|
|
10
|
+
import * as people from '@planningcenter/icons/paths/people'
|
|
11
|
+
import * as churchCenter from '@planningcenter/icons/paths/church-center'
|
|
12
|
+
import * as logomark from '@planningcenter/icons/paths/logomark'
|
|
13
|
+
import * as brand from '@planningcenter/icons/paths/brand'
|
|
14
|
+
|
|
15
|
+
const FALLBACK_SIZE = 12
|
|
16
|
+
|
|
17
|
+
const ICONS = {
|
|
18
|
+
calendar,
|
|
19
|
+
people,
|
|
20
|
+
churchCenter,
|
|
21
|
+
groups,
|
|
22
|
+
general,
|
|
23
|
+
logomark,
|
|
24
|
+
brand,
|
|
25
|
+
} as const
|
|
26
|
+
|
|
27
|
+
type IconStyle = ViewStyle & {
|
|
28
|
+
fontSize?: number
|
|
29
|
+
color?: string
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
interface IconProps extends Omit<XmlProps, 'xml'> {
|
|
33
|
+
/**
|
|
34
|
+
* Made up of the set.iconName.
|
|
35
|
+
* Example: "general.textMessage"
|
|
36
|
+
*/
|
|
37
|
+
name: string
|
|
38
|
+
/**
|
|
39
|
+
* This sets a static size for the icon.
|
|
40
|
+
* Providing a fontSize style will allow the icon to scale with the device's text a11y size.
|
|
41
|
+
*/
|
|
42
|
+
size?: number
|
|
43
|
+
/**
|
|
44
|
+
* Icon can handle ViewStyle, color, and fontSize.
|
|
45
|
+
*/
|
|
46
|
+
style?: IconStyle
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export function Icon({
|
|
50
|
+
name,
|
|
51
|
+
size,
|
|
52
|
+
style,
|
|
53
|
+
accessibilityElementsHidden,
|
|
54
|
+
accessibilityLabel,
|
|
55
|
+
...props
|
|
56
|
+
}: IconProps) {
|
|
57
|
+
const path = getIconPath(name)
|
|
58
|
+
const iconSize = getIconSize(size, style)
|
|
59
|
+
const styles = useStyles(iconSize)
|
|
60
|
+
|
|
61
|
+
if (!path) {
|
|
62
|
+
console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`)
|
|
63
|
+
return <View style={styles.noIcon} />
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<SvgXml
|
|
68
|
+
accessibilityElementsHidden={accessibilityElementsHidden}
|
|
69
|
+
accessibilityLabel={accessibilityLabel}
|
|
70
|
+
xml={`
|
|
71
|
+
<svg viewBox="0 0 16 16">
|
|
72
|
+
<path d="${path}" fill="currentColor" />
|
|
73
|
+
</svg>
|
|
74
|
+
`}
|
|
75
|
+
height={iconSize}
|
|
76
|
+
width={iconSize}
|
|
77
|
+
style={{ ...styles.icon, ...style }}
|
|
78
|
+
{...props}
|
|
79
|
+
/>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const getIconSize = (size?: number, style?: IconStyle) => {
|
|
84
|
+
const fontSize = StyleSheet.flatten(style)?.fontSize
|
|
85
|
+
|
|
86
|
+
if (fontSize) return fontSize * PixelRatio.getFontScale()
|
|
87
|
+
|
|
88
|
+
return size || FALLBACK_SIZE
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
const getIconPath = (name: string) => {
|
|
92
|
+
const [setName, iconName] = name.split('.')
|
|
93
|
+
|
|
94
|
+
return ICONS[setName]?.[iconName]
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const useStyles = (size: number) => {
|
|
98
|
+
const { colors } = useTheme()
|
|
99
|
+
|
|
100
|
+
return StyleSheet.create({
|
|
101
|
+
noIcon: {
|
|
102
|
+
backgroundColor: colors.iconColorDefaultDisabled,
|
|
103
|
+
width: size,
|
|
104
|
+
height: size,
|
|
105
|
+
borderRadius: size / 2,
|
|
106
|
+
},
|
|
107
|
+
icon: {
|
|
108
|
+
color: colors.iconColorDefaultPrimary,
|
|
109
|
+
},
|
|
110
|
+
})
|
|
111
|
+
}
|
package/src/screens/display.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { ScrollView, StyleSheet, View } from 'react-native'
|
|
3
3
|
import { useTheme } from '../hooks'
|
|
4
|
-
import { Avatar, AvatarGroup, Heading, Image, Spinner, Text } from '../components/display'
|
|
4
|
+
import { Avatar, AvatarGroup, Heading, Icon, Image, Spinner, Text } from '../components/display'
|
|
5
5
|
import { space } from '../utils/space'
|
|
6
6
|
|
|
7
7
|
const URL = {
|
|
@@ -54,6 +54,11 @@ export function DisplayScreen() {
|
|
|
54
54
|
<AvatarGroup sourceUris={URL.three_avatars} />
|
|
55
55
|
<AvatarGroup sourceUris={URL.four_avatars} />
|
|
56
56
|
</View>
|
|
57
|
+
<View style={styles.row}>
|
|
58
|
+
<Icon name="missingIcon" size={20} />
|
|
59
|
+
<Icon name="general.textMessage" size={20} />
|
|
60
|
+
<Icon name="churchCenter.sort" style={styles.icon} />
|
|
61
|
+
</View>
|
|
57
62
|
<View style={styles.row}>
|
|
58
63
|
<Text>Plain text</Text>
|
|
59
64
|
<Text variant="secondary">Secondary</Text>
|
|
@@ -93,5 +98,9 @@ const useStyles = () => {
|
|
|
93
98
|
width: 100,
|
|
94
99
|
height: 100,
|
|
95
100
|
},
|
|
101
|
+
icon: {
|
|
102
|
+
fontSize: 20,
|
|
103
|
+
color: colors.iconColorDefaultSecondary,
|
|
104
|
+
},
|
|
96
105
|
})
|
|
97
106
|
}
|