1 | import * as React from 'react';
|
2 | import {
|
3 | Image,
|
4 | ImageSourcePropType,
|
5 | StyleSheet,
|
6 | View,
|
7 | ViewStyle,
|
8 | StyleProp,
|
9 | } from 'react-native';
|
10 | import { withTheme } from '../../core/theming';
|
11 |
|
12 | const defaultSize = 64;
|
13 |
|
14 | export type AvatarImageSource =
|
15 | | ImageSourcePropType
|
16 | | ((props: { size: number }) => React.ReactNode);
|
17 |
|
18 | type Props = React.ComponentPropsWithRef<typeof View> & {
|
19 | /**
|
20 | * Image to display for the `Avatar`.
|
21 | * It accepts a standard React Native Image `source` prop
|
22 | * Or a function that returns an `Image`.
|
23 | */
|
24 | source: AvatarImageSource;
|
25 | /**
|
26 | * Size of the avatar.
|
27 | */
|
28 | size?: number;
|
29 | style?: StyleProp<ViewStyle>;
|
30 | /**
|
31 | * @optional
|
32 | */
|
33 | theme: ReactNativePaper.Theme;
|
34 | };
|
35 |
|
36 | /**
|
37 | * Avatars can be used to represent people in a graphical way.
|
38 | *
|
39 | * <div class="screenshots">
|
40 | * <figure>
|
41 | * <img class="medium" src="screenshots/avatar-image.png" />
|
42 | * </figure>
|
43 | * </div>
|
44 | *
|
45 | * ## Usage
|
46 | * ```js
|
47 | * import * as React from 'react';
|
48 | * import { Avatar } from 'react-native-paper';
|
49 | *
|
50 | * const MyComponent = () => (
|
51 | * <Avatar.Image size={24} source={require('../assets/avatar.png')} />
|
52 | * );
|
53 | * export default MyComponent
|
54 | * ```
|
55 | */
|
56 | const AvatarImage = ({
|
57 | size = defaultSize,
|
58 | source,
|
59 | style,
|
60 | theme,
|
61 | ...rest
|
62 | }: Props) => {
|
63 | const { colors } = theme;
|
64 |
|
65 | const { backgroundColor = colors.primary } = StyleSheet.flatten(style) || {};
|
66 |
|
67 | return (
|
68 | <View
|
69 | style={[
|
70 | {
|
71 | width: size,
|
72 | height: size,
|
73 | borderRadius: size / 2,
|
74 | backgroundColor,
|
75 | },
|
76 | style,
|
77 | ]}
|
78 | {...rest}
|
79 | >
|
80 | {typeof source === 'function' && source({ size })}
|
81 | {typeof source !== 'function' && (
|
82 | <Image
|
83 | source={source}
|
84 | style={{ width: size, height: size, borderRadius: size / 2 }}
|
85 | />
|
86 | )}
|
87 | </View>
|
88 | );
|
89 | };
|
90 |
|
91 | AvatarImage.displayName = 'Avatar.Image';
|
92 |
|
93 | export default withTheme(AvatarImage);
|
94 |
|
\ | No newline at end of file |