Update Chip icon props

Author: ArnonZ

demo/src/screens/componentScreens/ChipScreen.tsx

@@ -48,17 +48,26 @@ export default class ChipScreen extends Component {
           'Icon',
           <Chip
             iconSource={checkmark}
-            iconColor={Colors.black}
             iconStyle={{width: 24, height: 24}}
+            iconProps={{tintColor: Colors.black}}
           />
         )}
         {this.renderExample(
-          'label + icon',
+          'Left icon',
           <Chip
             label={'Chip'}
             iconSource={checkmark}
             iconStyle={{width: 24, height: 24}}
-            iconColor={Colors.black}
+            iconProps={{tintColor: Colors.black}}
+          />
+        )}
+        {this.renderExample(
+          'Right icon',
+          <Chip
+            label={'Chip'}
+            rightIconSource={checkmark}
+            iconStyle={{width: 24, height: 24}}
+            iconProps={{tintColor: Colors.black}}
           />
         )}
         {this.renderExample(
@@ -101,17 +110,16 @@ export default class ChipScreen extends Component {
         </Text>
         <View center row>
           <Chip
-            iconSource={checkmark}
             label={'Chip'}
             labelStyle={{color: Colors.green20}}
-            iconColor={Colors.green20}
+            iconSource={checkmark}
+            iconProps={{tintColor: Colors.green20}}
             containerStyle={{borderColor: Colors.green20}}
           />
           <Chip
             iconSource={checkmark}
             label={'Chip'}
             labelStyle={{color: Colors.white}}
-            iconColor={Colors.white}
             containerStyle={{borderColor: Colors.green20, backgroundColor: Colors.green20, marginLeft: Spacings.s3}}
           />
           <Chip

generatedTypes/components/chip/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, ImageProps, TextStyle, ImageSourcePropType } from 'react-native';
 import { BadgeProps } from 'typings';
 import { AvatarPropTypes } from '../avatar';
 export declare type ChipPropTypes = ViewProps & TouchableOpacityProps & {
@@ -55,17 +55,21 @@ export declare type ChipPropTypes = ViewProps & TouchableOpacityProps & {
      */
     avatarProps?: AvatarPropTypes;
     /**
-     * Icon's source
-     */
-    iconSource?: ImageSourcePropType;
-    /**
-     * Icon's color
+     * Additional icon props
      */
-    iconColor?: string;
+    iconProps?: ImageProps;
     /**
      * Icon style
      */
     iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Icon's source
+     */
+    iconSource?: ImageSourcePropType;
+    /**
+     * Icon's source
+     */
+    rightIconSource?: ImageSourcePropType;
     /**
      * Adds a dismiss button and serves as its callback
      */
@@ -140,17 +144,21 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      */
     avatarProps?: AvatarPropTypes | undefined;
     /**
-     * Icon's source
-     */
-    iconSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
-    /**
-     * Icon's color
+     * Additional icon props
      */
-    iconColor?: string | undefined;
+    iconProps?: ImageProps | undefined;
     /**
      * Icon style
      */
     iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Icon's source
+     */
+    iconSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
+    /**
+     * Icon's source
+     */
+    rightIconSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
     /**
      * Adds a dismiss button and serves as its callback
      */

src/components/chip/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback} from 'react';
-import {StyleSheet, StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, TextStyle, ImageSourcePropType} from 'react-native';
+import {StyleSheet, StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, ImageProps, TextStyle, ImageSourcePropType} from 'react-native';
 import {BadgeProps} from 'typings';
 // @ts-ignore
 import Assets from '../../assets';
@@ -72,20 +72,28 @@ export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
    */
   avatarProps?: AvatarPropTypes;
 
-  //ICON
+  //ICON GENERAL
   /**
-   * Icon's source
+   * Additional icon props
    */
-  iconSource?: ImageSourcePropType;
-  /**
-   * Icon's color
-   */
-  iconColor?: string;
+  iconProps?: ImageProps
   /**
    * Icon style
    */
   iconStyle?: StyleProp<ImageStyle>;
 
+  //LEFT ICON
+  /**
+   * Icon's source
+   */
+  iconSource?: ImageSourcePropType;
+
+  //RIGHT ICON
+  /**
+   * Icon's source
+   */
+  rightIconSource?: ImageSourcePropType;
+
   //DISMISS ('x' button)
   /**
    * Adds a dismiss button and serves as its callback
@@ -126,9 +134,10 @@ const Chip: React.FC<ChipPropTypes> = ({
   dismissIcon,
   dismissIconStyle,
   dismissContainerStyle,
-  iconColor,
+  iconProps,
   iconSource,
   iconStyle,
+  rightIconSource,
   label,
   labelStyle,
   onPress,
@@ -139,17 +148,19 @@ const Chip: React.FC<ChipPropTypes> = ({
   ...others
 }) => {
 
-  const renderIcon = useCallback(() => {
+  const renderIcon = useCallback((iconPosition) => {
+    const isLeftIcon = iconPosition === 'left'
+
     return (
       <Image
       // @ts-ignore
-        source={iconSource}
-        tintColor={iconColor}
-        style={[iconStyle, getMargins('iconSource')]}
+        source={isLeftIcon ? iconSource : rightIconSource}
         testID={`${testID}.icon`}
+        {...iconProps}
+        style={[getMargins('iconSource'), iconStyle]}
       />
     );
-  }, [iconColor, iconSource, iconStyle]);
+  }, [iconSource, rightIconSource, iconStyle, iconProps]);
 
 
   const renderBadge = useCallback(() => {
@@ -229,7 +240,13 @@ const Chip: React.FC<ChipPropTypes> = ({
           if (iconSource) {
             return {
               marginLeft: 2,
-              marginRight: Spacings.s2
+              marginRight: Spacings.s3
+            };
+          }
+          if (rightIconSource) {
+            return {
+              marginLeft: Spacings.s3,
+              marginRight: 2
             };
           }
           if (onDismiss) {
@@ -254,7 +271,7 @@ const Chip: React.FC<ChipPropTypes> = ({
           };
       }
     }
-  }, [avatarProps, badgeProps, iconSource, onDismiss]);
+  }, [avatarProps, badgeProps, iconSource, rightIconSource, onDismiss]);
 
   const getContainerSize = useCallback(() => {
     const width = useSizeAsMinimum ? 'minWidth' : 'width';
@@ -282,8 +299,9 @@ const Chip: React.FC<ChipPropTypes> = ({
       {...others}
     >
       {avatarProps && renderAvatar()}
-      {iconSource && renderIcon()}
+      {iconSource && renderIcon('left')}
       {label && renderLabel()}
+      {rightIconSource && renderIcon('right')}
       {badgeProps && renderBadge()}
       {onDismiss && renderOnDismiss()}
     </Container>