1 |
|
2 | import isEqual from 'lodash/isEqual';
|
3 | import pick from 'lodash/pick';
|
4 | import React, { Component } from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { ToolbarAndroid } from './react-native';
|
7 |
|
8 | export default function createToolbarAndroidComponent(
|
9 | IconNamePropType,
|
10 | getImageSource
|
11 | ) {
|
12 | return class IconToolbarAndroid extends Component {
|
13 | static propTypes = {
|
14 | logoName: IconNamePropType,
|
15 | navIconName: IconNamePropType,
|
16 | overflowIconName: IconNamePropType,
|
17 | actions: PropTypes.arrayOf(
|
18 | PropTypes.shape({
|
19 | title: PropTypes.string.isRequired,
|
20 | iconName: IconNamePropType,
|
21 | iconSize: PropTypes.number,
|
22 | iconColor: PropTypes.string,
|
23 | show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
|
24 | showWithText: PropTypes.bool,
|
25 | })
|
26 | ),
|
27 | iconSize: PropTypes.number,
|
28 | iconColor: PropTypes.string,
|
29 | };
|
30 |
|
31 | static defaultProps = {
|
32 | iconSize: 24,
|
33 | };
|
34 |
|
35 | componentWillMount() {
|
36 | this.updateIconSources(this.props);
|
37 | }
|
38 |
|
39 | componentWillReceiveProps(nextProps) {
|
40 | const keys = Object.keys(IconToolbarAndroid.propTypes);
|
41 | if (!isEqual(pick(nextProps, keys), pick(this.props, keys))) {
|
42 | const stateToEvict = {};
|
43 | if (!nextProps.logoName) {
|
44 | stateToEvict.logo = undefined;
|
45 | }
|
46 | if (!nextProps.navIconName) {
|
47 | stateToEvict.navIcon = undefined;
|
48 | }
|
49 | if (!nextProps.overflowIconName) {
|
50 | stateToEvict.overflowIcon = undefined;
|
51 | }
|
52 | if (this.state && Object.keys(stateToEvict).length) {
|
53 | this.setState(stateToEvict, () => this.updateIconSources(nextProps));
|
54 | } else {
|
55 | this.updateIconSources(nextProps);
|
56 | }
|
57 | }
|
58 | }
|
59 |
|
60 | updateIconSources(props) {
|
61 | const size = props.iconSize;
|
62 | const color = props.iconColor || props.titleColor;
|
63 | if (props.logoName) {
|
64 | getImageSource(props.logoName, size, color).then(logo =>
|
65 | this.setState({ logo })
|
66 | );
|
67 | }
|
68 | if (props.navIconName) {
|
69 | getImageSource(props.navIconName, size, color).then(navIcon =>
|
70 | this.setState({ navIcon })
|
71 | );
|
72 | }
|
73 | if (props.overflowIconName) {
|
74 | getImageSource(props.overflowIconName, size, color).then(overflowIcon =>
|
75 | this.setState({ overflowIcon })
|
76 | );
|
77 | }
|
78 |
|
79 | Promise.all(
|
80 | (props.actions || []).map(action => {
|
81 | if (action.iconName) {
|
82 | return getImageSource(
|
83 | action.iconName,
|
84 | action.iconSize || size,
|
85 | action.iconColor || color
|
86 | ).then(icon => ({ ...action, icon }));
|
87 | }
|
88 | return Promise.resolve(action);
|
89 | })
|
90 | ).then(actions => this.setState({ actions }));
|
91 | }
|
92 |
|
93 | render() {
|
94 | return <ToolbarAndroid {...this.props} {...this.state} />;
|
95 | }
|
96 | };
|
97 | }
|
98 |
|
\ | No newline at end of file |