1 | import * as React from 'react';
|
2 | import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
|
3 | import Icon, { IconSource } from '../Icon';
|
4 |
|
5 | type Props = {
|
6 | /**
|
7 | * Icon to show.
|
8 | */
|
9 | icon: IconSource;
|
10 | /**
|
11 | * Color for the icon.
|
12 | */
|
13 | color?: string;
|
14 | style?: StyleProp<ViewStyle>;
|
15 | };
|
16 |
|
17 | const ICON_SIZE = 24;
|
18 |
|
19 | /**
|
20 | * A component to show an icon in a list item.
|
21 | *
|
22 | * <div class="screenshots">
|
23 | * <figure>
|
24 | * <img class="medium" src="screenshots/list-icon.png" />
|
25 | * </figure>
|
26 | * </div>
|
27 | *
|
28 | * ## Usage
|
29 | * ```js
|
30 | * import * as React from 'react';
|
31 | * import { List, Colors } from 'react-native-paper';
|
32 | *
|
33 | * const MyComponent = () => (
|
34 | * <>
|
35 | * <List.Icon color={Colors.blue500} icon="folder" />
|
36 | * <List.Icon color={Colors.blue500} icon="equal" />
|
37 | * <List.Icon color={Colors.blue500} icon="calendar" />
|
38 | * </>
|
39 | * );
|
40 | *
|
41 | * export default MyComponent;
|
42 | * ```
|
43 | */
|
44 | const ListIcon = ({ icon, color: iconColor, style }: Props) => (
|
45 | <View style={[styles.item, style]} pointerEvents="box-none">
|
46 | <Icon source={icon} size={ICON_SIZE} color={iconColor} />
|
47 | </View>
|
48 | );
|
49 |
|
50 | const styles = StyleSheet.create({
|
51 | item: {
|
52 | margin: 8,
|
53 | height: 40,
|
54 | width: 40,
|
55 | alignItems: 'center',
|
56 | justifyContent: 'center',
|
57 | },
|
58 | });
|
59 |
|
60 | ListIcon.displayName = 'List.Icon';
|
61 |
|
62 | export default ListIcon;
|