1 | import isString from 'lodash/isString';
|
2 | import omit from 'lodash/omit';
|
3 | import pick from 'lodash/pick';
|
4 | import React, { Component } from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { StyleSheet, Text, TouchableHighlight, View } from './react-native';
|
7 |
|
8 | const styles = StyleSheet.create({
|
9 | container: {
|
10 | flexDirection: 'row',
|
11 | justifyContent: 'flex-start',
|
12 | alignItems: 'center',
|
13 | padding: 8,
|
14 | },
|
15 | touchable: {
|
16 | overflow: 'hidden',
|
17 | },
|
18 | icon: {
|
19 | marginRight: 10,
|
20 | },
|
21 | text: {
|
22 | fontWeight: '600',
|
23 | backgroundColor: 'transparent',
|
24 | },
|
25 | });
|
26 |
|
27 | const IOS7_BLUE = '#007AFF';
|
28 |
|
29 | export default function createIconButtonComponent(Icon) {
|
30 | return class IconButton extends Component {
|
31 | static propTypes = {
|
32 | backgroundColor: PropTypes.string,
|
33 | borderRadius: PropTypes.number,
|
34 | color: PropTypes.string,
|
35 | size: PropTypes.number,
|
36 | iconStyle: PropTypes.any,
|
37 | style: PropTypes.any,
|
38 | children: PropTypes.node,
|
39 | };
|
40 |
|
41 | static defaultProps = {
|
42 | backgroundColor: IOS7_BLUE,
|
43 | borderRadius: 5,
|
44 | color: 'white',
|
45 | size: 20,
|
46 | };
|
47 |
|
48 | render() {
|
49 | const { style, iconStyle, children, ...restProps } = this.props;
|
50 |
|
51 | const iconProps = pick(
|
52 | restProps,
|
53 | Object.keys(Text.propTypes),
|
54 | 'style',
|
55 | 'name',
|
56 | 'size',
|
57 | 'color'
|
58 | );
|
59 | const touchableProps = pick(
|
60 | restProps,
|
61 | Object.keys(TouchableHighlight.propTypes)
|
62 | );
|
63 | const props = omit(
|
64 | restProps,
|
65 | Object.keys(iconProps),
|
66 | Object.keys(touchableProps),
|
67 | 'iconStyle',
|
68 | 'borderRadius',
|
69 | 'backgroundColor'
|
70 | );
|
71 | iconProps.style = iconStyle ? [styles.icon, iconStyle] : styles.icon;
|
72 |
|
73 | const colorStyle = pick(this.props, 'color');
|
74 | const blockStyle = pick(this.props, 'backgroundColor', 'borderRadius');
|
75 |
|
76 | return (
|
77 | <TouchableHighlight
|
78 | style={[styles.touchable, blockStyle]}
|
79 | {...touchableProps}
|
80 | >
|
81 | <View style={[styles.container, blockStyle, style]} {...props}>
|
82 | <Icon {...iconProps} />
|
83 | {isString(children) ? (
|
84 | <Text style={[styles.text, colorStyle]}>{children}</Text>
|
85 | ) : (
|
86 | children
|
87 | )}
|
88 | </View>
|
89 | </TouchableHighlight>
|
90 | );
|
91 | }
|
92 | };
|
93 | }
|