From 094a90dbf06eebe98c1b99a5f6e1315994200fbb Mon Sep 17 00:00:00 2001
From: NewOldMax <newoldmax@gmail.com>
Date: Sat, 28 Jan 2017 17:03:13 +0300
Subject: [PATCH] Add support for custom icons in actions [ActionButton] (#66)

* [ActionButton] Add support for custom icons in actions.

* Fix key prop

* Fix eslint errors.

* Moved action item key calculation to function.
---
 docs/ActionButton.md                   |  10 +-
 src/ActionButton/ActionButton.react.js | 152 +++++++++++++++++++------
 2 files changed, 128 insertions(+), 34 deletions(-)
 mode change 100644 => 100755 docs/ActionButton.md

diff --git a/docs/ActionButton.md b/docs/ActionButton.md
old mode 100644
new mode 100755
index fdc3eac0..5d160ddb
--- a/docs/ActionButton.md
+++ b/docs/ActionButton.md
@@ -21,13 +21,19 @@ render() {
 ```js
 const propTypes = {
     /**
-    * Array of names of icons that will be shown after the main button is pressed
+    * Array of names of icons (or elements) that will be shown after the main button is pressed
+    * Remember, you should specify key for each element, if you use array of elements
     */
     actions: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.string),
+        PropTypes.arrayOf(PropTypes.element),
         PropTypes.arrayOf(PropTypes.shape({
-            icon: PropTypes.string,
+            icon: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.element,
+            ]),
             label: PropTypes.string,
+            name:  PropTypes.string,
         })),
     ]),
     /**
diff --git a/src/ActionButton/ActionButton.react.js b/src/ActionButton/ActionButton.react.js
index d137d6c9..d7d64259 100755
--- a/src/ActionButton/ActionButton.react.js
+++ b/src/ActionButton/ActionButton.react.js
@@ -18,13 +18,19 @@ import getPlatformElevation from '../styles/getPlatformElevation';
 
 const propTypes = {
     /**
-    * Array of names of icons that will be shown after the main button is pressed
+    * Array of names of icons (or elements) that will be shown after the main button is pressed
+    * Remember, you should specify key for each element, if you use array of elements
     */
     actions: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.string),
+        PropTypes.arrayOf(PropTypes.element),
         PropTypes.arrayOf(PropTypes.shape({
-            icon: PropTypes.string,
+            icon: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.element,
+            ]),
             label: PropTypes.string,
+            name: PropTypes.string,
         })),
     ]),
     /**
@@ -190,6 +196,15 @@ class ActionButton extends PureComponent {
             onPress(action);
         }
     }
+    getActionItemKey = ({ icon, name }) => {
+        let key = icon;
+        if (name) {
+            key = name;
+        } else if (React.isValidElement(icon) && icon.key) {
+            key = icon.key;
+        }
+        return key;
+    }
     toggleState = () => {
         const { transition } = this.props;
 
@@ -225,16 +240,16 @@ class ActionButton extends PureComponent {
         return (
             <View style={styles.toolbarPositionContainer}>
                 <View key="main-button" style={styles.toolbarContainer}>
-                    {actions.map(action => (
-                        <View key={action} style={styles.toolbarActionContainer}>
-                            <IconToggle
-                                key={action}
-                                name={action}
-                                onPress={() => this.onPress(action)}
-                                style={{ icon: styles.icon }}
-                            />
-                        </View>
-                    ))}
+                    {actions.map((action) => {
+                        if (typeof action === 'string') {
+                            return this.renderToolbarAction(styles, action);
+                        }
+                        if (React.isValidElement(action)) {
+                            return this.renderToolbarElementAction(styles, action);
+                        }
+                        return this.renderToolbarLabelAction(
+                            styles, action.icon, action.label, action.name);
+                    })}
                 </View>
             </View>
         );
@@ -253,8 +268,12 @@ class ActionButton extends PureComponent {
                                         return this.renderAction(styles, action);
                                     }
 
+                                    if (React.isValidElement(action)) {
+                                        return this.renderElementAction(styles, action);
+                                    }
+
                                     return this.renderLabelAction(
-                                        styles, action.icon, action.label);
+                                        styles, action.icon, action.label, action.name);
                                 })}
                             </View>
                             {this.renderMainButton(styles)}
@@ -285,32 +304,101 @@ class ActionButton extends PureComponent {
             </View>
         );
     }
-    renderAction = (styles, icon) => (
-        <View key={icon} style={styles.speedDialActionIconContainer}>
-            <View style={styles.speedDialActionIcon}>
+    renderToolbarAction = (styles, icon, name) => {
+        let content;
+        const key = this.getActionItemKey({ icon, name });
+
+        if (React.isValidElement(icon)) {
+            content = (
                 <RippleFeedback
                     color="#AAF"
-                    onPress={() => this.onPress(icon)}
+                    onPress={() => this.onPress(key)}
                     delayPressIn={20}
                 >
                     {this.renderIconButton(styles, icon)}
-                </RippleFeedback>
+                </RippleFeedback>);
+        } else {
+            content = (
+                <IconToggle
+                    key={key}
+                    name={key}
+                    onPress={() => this.onPress(key)}
+                    style={{ icon: styles.icon }}
+                />);
+        }
+        return (
+            <View key={key} style={styles.toolbarActionContainer}>
+                {content}
             </View>
-        </View>
-    )
-    renderLabelAction = (styles, icon, label) => (
-        <View key={icon} style={styles.speedDialActionContainer}>
-            <View style={styles.speedDialActionLabelContainer}>
-                <Text style={styles.speedDialActionLabel}>{label}</Text>
+        );
+    }
+    renderToolbarElementAction = (styles, icon) => {
+        const key = this.getActionItemKey({ icon });
+        return (
+            <View key={key} style={styles.toolbarActionContainer}>
+                {this.renderToolbarAction(styles, icon)}
+            </View>
+        );
+    }
+    /**
+    * TODO: implement labels for toolbar?
+    */
+    renderToolbarLabelAction = (styles, icon, label, name) => {
+        const key = this.getActionItemKey({ icon, name });
+        return (
+            <View key={key} style={styles.toolbarActionContainer}>
+                {this.renderToolbarAction(styles, icon, name)}
             </View>
-            {this.renderAction(styles, icon)}
-        </View>
-    )
-    renderIconButton = (styles, name) => (
-        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Icon name={name} style={styles.icon} />
-        </View>
-    )
+        );
+    }
+    renderAction = (styles, icon, name) => {
+        const key = this.getActionItemKey({ icon, name });
+        return (
+            <View key={key} style={styles.speedDialActionIconContainer}>
+                <View style={styles.speedDialActionIcon}>
+                    <RippleFeedback
+                        color="#AAF"
+                        onPress={() => this.onPress(key)}
+                        delayPressIn={20}
+                    >
+                        {this.renderIconButton(styles, icon)}
+                    </RippleFeedback>
+                </View>
+            </View>
+        );
+    }
+    renderElementAction = (styles, icon) => {
+        const key = this.getActionItemKey({ icon });
+        return (
+            <View key={key} style={styles.speedDialActionContainer}>
+                {this.renderAction(styles, icon)}
+            </View>
+        );
+    }
+    renderLabelAction = (styles, icon, label, name) => {
+        const key = this.getActionItemKey({ icon, name });
+        return (
+            <View key={key} style={styles.speedDialActionContainer}>
+                <View style={styles.speedDialActionLabelContainer}>
+                    <Text style={styles.speedDialActionLabel}>{label}</Text>
+                </View>
+                {this.renderAction(styles, icon, name)}
+            </View>
+        );
+    }
+    renderIconButton = (styles, icon) => {
+        let result;
+        if (React.isValidElement(icon)) {
+            result = icon;
+        } else {
+            result = <Icon name={icon} style={styles.icon} />;
+        }
+        return (
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                {result}
+            </View>
+        );
+    }
     renderButton = styles => (
         <Animated.View
             style={[styles.positionContainer, {