Add leadingAccessory and trailingAccessory props (#1385)

Author: lidord-wix

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -41,7 +41,9 @@ class TabControllerScreen extends Component<{}, State> {
         label: tab,
         key: tab,
         icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
-        badge: index === 5 ? {label: '2'} : undefined
+        badge: index === 5 ? {label: '2'} : undefined,
+        leadingAccessory: index === 3 ? <Text marginR-4>{Assets.emojis.movie_camera}</Text> : undefined,
+        trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
       }))
       .value();
 

generatedTypes/components/tabController/TabBarItem.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, ReactElement } from 'react';
 import { /* processColor, */ TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import _ from 'lodash';
 import Reanimated from 'react-native-reanimated';
@@ -41,6 +41,14 @@ export interface TabControllerItemProps {
      * Badge component props to display next the item label
      */
     badge?: BadgeProps;
+    /**
+     * Pass to render a leading element
+     */
+    leadingAccessory?: ReactElement;
+    /**
+     * Pass to render a trailing element
+     */
+    trailingAccessory?: ReactElement;
     /**
      * maximun number of lines the label can break
      */

generatedTypes/components/tabController2/TabBarItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import Reanimated from 'react-native-reanimated';
 import { BadgeProps } from '../badge';
@@ -39,6 +39,14 @@ export interface TabControllerItemProps {
      * Badge component props to display next the item label
      */
     badge?: BadgeProps;
+    /**
+     * Pass to render a leading element
+     */
+    leadingAccessory?: ReactElement;
+    /**
+     * Pass to render a trailing element
+     */
+    trailingAccessory?: ReactElement;
     /**
      * A fixed width for the item
      */
@@ -84,5 +92,5 @@ interface Props extends TabControllerItemProps {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  * @notes: Must be rendered as a direct child of TabController.TabBar.
  */
-export default function TabBarItem({ index, label, labelColor, selectedLabelColor, labelStyle, selectedLabelStyle, icon, badge, uppercase, activeOpacity, activeBackgroundColor, testID, ignore, style, ...props }: Props): JSX.Element;
+export default function TabBarItem({ index, label, labelColor, selectedLabelColor, labelStyle, selectedLabelStyle, icon, badge, leadingAccessory, trailingAccessory, uppercase, activeOpacity, activeBackgroundColor, testID, ignore, style, ...props }: Props): JSX.Element;
 export {};

src/components/tabController/TabBarItem.tsx

@@ -1,5 +1,5 @@
 // TODO: support commented props
-import React, {PureComponent} from 'react';
+import React, {PureComponent, ReactElement} from 'react';
 import {StyleSheet, /* processColor, */ TextStyle, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import _ from 'lodash';
 import Reanimated, {processColor} from 'react-native-reanimated';
@@ -51,6 +51,14 @@ export interface TabControllerItemProps {
    * Badge component props to display next the item label
    */
   badge?: BadgeProps;
+  /**
+   * Pass to render a leading element
+   */
+  leadingAccessory?: ReactElement;
+  /**
+   * Pass to render a trailing element
+   */
+  trailingAccessory?: ReactElement;
   /**
    * maximun number of lines the label can break
    */
@@ -170,16 +178,8 @@ export default class TabBarItem extends PureComponent<Props> {
   }
 
   getLabelStyle() {
-    const {
-      index,
-      currentPage,
-      targetPage,
-      labelColor,
-      selectedLabelColor,
-      ignore,
-      labelStyle,
-      selectedLabelStyle
-    } = this.props;
+    const {index, currentPage, targetPage, labelColor, selectedLabelColor, ignore, labelStyle, selectedLabelStyle} =
+      this.props;
 
     let fontWeight, letterSpacing, fontFamily;
 
@@ -256,17 +256,26 @@ export default class TabBarItem extends PureComponent<Props> {
       inactiveColor = processColor(inactiveColor);
     }
 
-    const tintColor = cond(eq(currentPage, index),
-      activeColor,
-      ignore ? activeColor : inactiveColor);
+    const tintColor = cond(eq(currentPage, index), activeColor, ignore ? activeColor : inactiveColor);
 
     return {
       tintColor
     };
   }
 
   render() {
-    const {label, icon, badge, state, uppercase, activeOpacity, activeBackgroundColor, testID} = this.props;
+    const {
+      label,
+      icon,
+      badge,
+      leadingAccessory,
+      trailingAccessory,
+      state,
+      uppercase,
+      activeOpacity,
+      activeBackgroundColor,
+      testID
+    } = this.props;
 
     return (
       <TouchableOpacity
@@ -279,6 +288,7 @@ export default class TabBarItem extends PureComponent<Props> {
         onPress={this.onPress}
         testID={testID}
       >
+        {leadingAccessory}
         {icon && (
           <Reanimated.Image
             source={icon}
@@ -295,6 +305,7 @@ export default class TabBarItem extends PureComponent<Props> {
           // @ts-ignore
           <Badge backgroundColor={Colors.red30} size={BADGE_SIZES.default} {...badge} containerStyle={styles.badge}/>
         )}
+        {trailingAccessory}
       </TouchableOpacity>
     );
   }

src/components/tabController2/TabBarItem.tsx

@@ -1,5 +1,5 @@
 // TODO: support commented props
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {useCallback, useContext, useEffect, useRef, ReactElement} from 'react';
 import {StyleSheet, TextStyle, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import _ from 'lodash';
 import Reanimated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
@@ -50,6 +50,14 @@ export interface TabControllerItemProps {
    * Badge component props to display next the item label
    */
   badge?: BadgeProps;
+  /**
+   * Pass to render a leading element
+   */
+  leadingAccessory?: ReactElement;
+  /**
+   * Pass to render a trailing element
+   */
+  trailingAccessory?: ReactElement;
   /**
    * A fixed width for the item
    */
@@ -106,6 +114,8 @@ export default function TabBarItem({
   selectedLabelStyle,
   icon,
   badge,
+  leadingAccessory,
+  trailingAccessory,
   uppercase,
   activeOpacity = 0.9,
   activeBackgroundColor,
@@ -181,6 +191,7 @@ export default function TabBarItem({
       onPress={onPress}
       testID={testID}
     >
+      {leadingAccessory}
       {icon && (
         <Reanimated.Image
           source={icon}
@@ -195,6 +206,7 @@ export default function TabBarItem({
       {badge && (
         <Badge backgroundColor={Colors.red30} size={BADGE_SIZES.default} {...badge} containerStyle={styles.badge}/>
       )}
+      {trailingAccessory}
     </TouchableOpacity>
   );
 }