Feat/ support multiple buttons on ModalTopBar (#2011)

lidord-wix · web-flow · commit 1072e9abaaa6 · 2022-04-26T11:30:23.000+03:00
diff --git a/demo/src/screens/componentScreens/ModalScreen.tsx b/demo/src/screens/componentScreens/ModalScreen.tsx
@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+import {Colors, Carousel, PageControl, Modal, View, Text, Assets} from 'react-native-ui-lib'; // eslint-disable-line
 
+const BUTTONS_HIT_SLOP = {right: 5, left: 5, top: 10, bottom: 10};
 interface ModalScreenProps {
   componentId: string;
 }
@@ -12,7 +13,6 @@ interface State {
 }
 
 export default class ModalScreen extends Component<ModalScreenProps, State> {
-
   static options() {
     return {
       topBar: {
@@ -39,7 +39,7 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
       <View flex>
         <PageControl
           containerStyle={[styles.pageControl, styles.absoluteContainer]}
-          numOfPages={4}
+          numOfPages={5}
           currentPage={this.state.currentPage}
           color={Colors.grey10}
           size={15}
@@ -55,12 +55,8 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
               }}
             />
             <View padding-20>
-              <Text text70>
-                This is an example of a custom modal top bar.
-              </Text>
-              <Text text70>
-                By default you get the &apos;x&apos; cancel icon and &apos;save&apos; as done label
-              </Text>
+              <Text text70>This is an example of a custom modal top bar.</Text>
+              <Text text70>By default you get the &apos;x&apos; cancel icon and &apos;save&apos; as done label</Text>
             </View>
           </View>
 
@@ -74,8 +70,8 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
             />
             <View padding-20>
               <Text text70>
-                You can of course change it by changing the values of
-                cancelIcon, cancelLabel, doneIcon, doneLabel and other props..
+                You can of course change it by changing the values of cancelIcon, cancelLabel, doneIcon, doneLabel and
+                other props..
               </Text>
             </View>
           </View>
@@ -89,9 +85,7 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
               cancelLabel="back"
             />
             <View padding-20>
-              <Text text70>
-                Sending onDone/onCancel is required for rendering done/cancel actions
-              </Text>
+              <Text text70>Sending onDone/onCancel is required for rendering done/cancel actions</Text>
             </View>
           </View>
 
@@ -105,7 +99,39 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
             />
             <View padding-20>
               <Text text70>
-                use doneButtonProps/cancelButtonProps properties to have custom behaviour or style for done/cancel actions
+                use doneButtonProps/cancelButtonProps properties to have custom behaviour or style for done/cancel
+                actions
+              </Text>
+            </View>
+          </View>
+
+          <View bg-yellow80 flex style={styles.page}>
+            <Modal.TopBar
+              title="custom button"
+              rightButtons={[
+                {
+                  label: 'save',
+                  buttonProps: {labelStyle: {color: Colors.yellow10, marginRight: 14}},
+                  onPress: () => Alert.alert('save')
+                },
+                {
+                  icon: Assets.icons.demo.settings,
+                  onPress: () => Alert.alert('settings'),
+                  buttonProps: {hitSlop: BUTTONS_HIT_SLOP, iconStyle: {tintColor: Colors.yellow10}}
+                }
+              ]}
+              leftButtons={[
+                {
+                  icon: Assets.icons.x,
+                  onPress: () => Alert.alert('back'),
+                  buttonProps: {hitSlop: BUTTONS_HIT_SLOP, iconStyle: {tintColor: Colors.yellow10}}
+                }
+              ]}
+            />
+            <View padding-20>
+              <Text text70>
+                This is an example for using the rightButtons and leftButtons props for having more than one button each
+                side
               </Text>
             </View>
           </View>
diff --git a/src/components/modal/TopBar.tsx b/src/components/modal/TopBar.tsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, StyleProp, TextStyle, ImageSourcePropType} from 'react-native';
 import {Constants, asBaseComponent} from '../../commons/new';
@@ -48,6 +49,14 @@ export interface ModalTopBarProps {
    * cancel action callback
    */
   onCancel?: (props?: any) => void;
+  /**
+   * buttons to render on the right side of the top bar
+   */
+  rightButtons?: topBarButtonProp | topBarButtonProp[];
+  /**
+   * buttons to render on the left side of the top bar
+   */
+  leftButtons?: topBarButtonProp | topBarButtonProp[];
   /**
    * whether to include status bar or not (height claculations)
    */
@@ -92,21 +101,18 @@ class TopBar extends Component<ModalTopBarProps> {
 
   renderTopBarButton({onPress, label, icon, accessibilityLabel, buttonProps}: topBarButtonProp) {
     if (onPress && (label || icon)) {
-      // @ts-ignore
-      const {iconStyle, labelStyle, ...otherButtonProps} = buttonProps;
-
       return (
         <Button
           link
           onPress={onPress}
           label={label}
-          labelStyle={[styles.actionLabel, labelStyle]}
+          labelStyle={[styles.actionLabel, buttonProps?.labelStyle]}
           iconSource={icon}
-          iconStyle={[styles.icon, iconStyle]}
+          iconStyle={[styles.icon, buttonProps?.iconStyle]}
           {...DEFAULT_BUTTON_PROPS}
           accessibilityLabel={accessibilityLabel}
-          {...otherButtonProps}
           hitSlop={{top: 10, bottom: 10, left: 20, right: 20}}
+          {...buttonProps}
         />
       );
     }
@@ -134,6 +140,24 @@ class TopBar extends Component<ModalTopBarProps> {
     });
   }
 
+  renderLeftButtons = () => {
+    const {leftButtons} = this.props;
+    if (_.isArray(leftButtons)) {
+      return _.map(leftButtons, button => this.renderTopBarButton(button));
+    } else {
+      return leftButtons && this.renderTopBarButton(leftButtons);
+    }
+  };
+
+  renderRightButtons = () => {
+    const {rightButtons} = this.props;
+    if (_.isArray(rightButtons)) {
+      return _.map(rightButtons, button => this.renderTopBarButton(button));
+    } else {
+      return rightButtons && this.renderTopBarButton(rightButtons);
+    }
+  };
+
   render() {
     const {title, titleStyle, includeStatusBar, containerStyle, useSafeArea} = this.props;
 
@@ -143,13 +167,15 @@ class TopBar extends Component<ModalTopBarProps> {
         <View style={styles.container}>
           <View row flex bottom paddingL-15 centerV>
             {this.renderCancel()}
+            {this.renderLeftButtons()}
           </View>
           <View row flex-3 bottom centerH centerV>
             <Text accessible={!!title} numberOfLines={1} text70 style={[styles.title, titleStyle]}>
               {title}
             </Text>
           </View>
           <View row flex bottom right paddingR-15 centerV>
+            {this.renderRightButtons()}
             {this.renderDone()}
           </View>
         </View>
diff --git a/src/components/modal/api/modalTopBar.api.json b/src/components/modal/api/modalTopBar.api.json
@@ -30,6 +30,16 @@
       "default": "Assets.icons.x"
     },
     {"name": "onCancel", "type": "(props?: any) => void", "description": "Cancel action callback"},
+    {
+      "name": "rightButtons",
+      "type": "topBarButtonProp | topBarButtonProp[]",
+      "description": "Buttons to render on the right side of the top bar"
+    },
+    {
+      "name": "leftButtons",
+      "type": "topBarButtonProp | topBarButtonProp[]",
+      "description": "Buttons to render on the left side of the top bar"
+    },
     {
       "name": "includeStatusBar",
       "type": "boolean",
