Dialog and Modal fix for web (#2450)

* Dialog and Modal fix for web

* Button, Icon, picker - usePickerLabel cahnges according to web using

* Fixed the selected indicator color

* picker icon color change on selected item

* Fixed eslint error

* Fixed svgimage component web file

* checkbox fix, icon changed default size for web

* Removed unnecessary logs, files unnecessary changes

* SvgImage web default size changed back to 16

* Checkbox - cheanged Animated.Image to AnimatedIcon, Icon now wrraped by forwardRef

* Fixed type issues in Chips index

* Checkbox removed forward ref from prop types

* added ref to Image in Icon

* Fixed tintColor in AnimatedIcon

* Chip index - removed reformat from th ePR

* checkbox props changed back, icon size logic reformat, usePickerLabel changed the logic back

* fixed review notes

* Fixed size issue in icon

Author: adids1221

src/components/button/index.tsx

@@ -6,6 +6,7 @@ import {Colors, Typography, BorderRadiuses} from 'style';
 import TouchableOpacity from '../touchableOpacity';
 import Text from '../text';
 import Image from '../image';
+import Icon from '../icon';
 
 import {ButtonSize, ButtonAnimationDirection, ButtonProps, ButtonState, Props, DEFAULT_PROPS} from './ButtonTypes';
 export {ButtonSize, ButtonAnimationDirection, ButtonProps};
@@ -290,6 +291,11 @@ class Button extends PureComponent<Props, ButtonState> {
       if (typeof iconSource === 'function') {
         return iconSource(iconStyle);
       } else {
+        if (Constants.isWeb) {
+          return (
+            <Icon style={iconStyle} tintColor={Colors.$iconDefault} source={iconSource} testID={`${testID}.icon`}/>
+          );
+        }
         return <Image source={iconSource} supportRTL={supportRTL} style={iconStyle} testID={`${testID}.icon`}/>;
       }
     }

src/components/checkbox/index.tsx

@@ -16,6 +16,7 @@ import {asBaseComponent} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
 import Text, {TextProps} from '../text';
 import View from '../view';
+import Icon from '../icon';
 
 const DEFAULT_SIZE = 24;
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -94,6 +95,8 @@ interface CheckboxState {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true
  */
+
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
 
@@ -203,7 +206,6 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
 
   renderCheckbox() {
     const {selectedIcon, label, testID, style, containerStyle, ...others} = this.props;
-
     return (
       //@ts-ignore
       <TouchableOpacity
@@ -222,14 +224,11 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
               {backgroundColor: this.getBackgroundColor()}
             ]}
           >
-            <Animated.Image
-              style={[
-                this.styles.selectedIcon,
-                {transform: this.animationStyle.transform},
-                {tintColor: this.getTintColor()}
-              ]}
+            <AnimatedIcon
+              style={[this.styles.selectedIcon, {transform: this.animationStyle.transform}]}
               source={selectedIcon || Assets.icons.checkSmall}
               testID={`${testID}.selected`}
+              tintColor={this.getTintColor()}
             />
           </Animated.View>
         }

src/components/chip/index.tsx

@@ -170,6 +170,7 @@ const Chip = ({
 
     return (
       <Icon
+        //@ts-expect-error
         source={isLeftIcon ? iconSource : rightIconSource}
         testID={`${testID}.icon`}
         tintColor={Colors.$iconDefault}

src/components/dialog/index.tsx

@@ -71,8 +71,8 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
    * The props that will be passed to the pannable header
    */
   pannableHeaderProps?: any;
-  /** 
-   * Additional props for the modal. 
+  /**
+   * Additional props for the modal.
    */
   modalProps?: ModalProps;
   /**
@@ -213,7 +213,10 @@ class Dialog extends Component<DialogProps, DialogState> {
             containerStyle={this.styles.flexType}
             style={this.styles.flexType}
           >
-            <Container directions={[panDirection]} style={[this.styles.overflow, this.styles.flexType, containerStyle]}>
+            <Container
+              directions={[panDirection]}
+              style={[this.styles.overflow, !Constants.isWeb && this.styles.flexType, containerStyle]}
+            >
               {this.renderPannableHeader([panDirection])}
               {children}
             </Container>

src/components/icon/index.tsx

@@ -1,8 +1,8 @@
 import isUndefined from 'lodash/isUndefined';
-import React, {useMemo} from 'react';
+import React, {useMemo, forwardRef} from 'react';
 import {Image, ImageProps, StyleSheet} from 'react-native';
 import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers, Constants} from '../../commons/new';
-import {getAsset, isSvg} from '../../utils/imageUtils';
+import {getAsset, isSvg, isBase64ImageContent} from '../../utils/imageUtils';
 import SvgImage from '../svgImage';
 
 export type IconProps = ImageProps &
@@ -37,8 +37,20 @@ export type IconProps = ImageProps &
 
 type Props = IconProps & BaseComponentInjectedProps;
 
-const Icon = (props: Props) => {
-  const {size, tintColor, style, supportRTL, source, assetGroup, assetName, modifiers, ...others} = props;
+const defaultWebIconSize = 16;
+
+const Icon = forwardRef((props: Props, ref: any) => {
+  const {
+    size = Constants.isWeb ? defaultWebIconSize : undefined,
+    tintColor,
+    style,
+    supportRTL,
+    source,
+    assetGroup,
+    assetName,
+    modifiers,
+    ...others
+  } = props;
   const {margins} = modifiers;
   const iconSize = size ? {width: size, height: size} : undefined;
   const shouldFlipRTL = supportRTL && Constants.isRTL;
@@ -50,16 +62,23 @@ const Icon = (props: Props) => {
     return source;
   }, [source, assetGroup, assetName]);
 
-  return isSvg(source) ? (
-    <SvgImage data={source} {...props}/>
-  ) : (
+  const renderImage = () => (
     <Image
       {...others}
+      ref={ref}
       source={iconSource}
       style={[style, margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {tintColor}]}
     />
   );
-};
+
+  const renderSvg = () => <SvgImage data={source} {...props}/>;
+
+  if (typeof source === 'string' && isBase64ImageContent(source) && Constants.isWeb) {
+    return renderImage();
+  }
+
+  return isSvg(source) ? renderSvg() : renderImage();
+});
 
 Icon.displayName = 'Icon';
 Icon.defaultProps = {

src/components/modal/index.tsx

@@ -80,7 +80,7 @@ class Modal extends Component<ModalProps> {
   renderTouchableOverlay() {
     const {testID, overlayBackgroundColor, onBackgroundPress, accessibilityLabel = 'Dismiss'} = this.props;
     if (_.isFunction(onBackgroundPress) || !!overlayBackgroundColor) {
-      const isScreenReaderEnabled = Constants.accessibility.isScreenReaderEnabled;
+      const isScreenReaderEnabled = !Constants.isWeb && Constants.accessibility.isScreenReaderEnabled;
       const accessibilityProps = isScreenReaderEnabled
         ? {accessible: true, accessibilityLabel, accessibilityRole: 'button'}
         : undefined;

src/components/svgImage/index.web.tsx

@@ -1,7 +1,9 @@
 import React, {useState} from 'react';
+import Image from '../image';
 import {isSvg, isSvgUri, isBase64ImageContent} from '../../utils/imageUtils';
 
 const EMPTY_STYLE = '{}';
+const DEFAULT_SIZE = 16;
 export interface SvgImageProps {
   /**
    * the asset tint
@@ -12,29 +14,36 @@ export interface SvgImageProps {
 }
 
 function SvgImage(props: SvgImageProps) {
-  const {
-    data,
-    style,
-    ...other
-  } = props;
+  const {data, style, tintColor, ...others} = props;
 
   const styleObj = Object.assign({}, ...(style || []));
 
-  
   const [svgStyleCss, setSvgStyleCss] = useState<string>(EMPTY_STYLE);
   const [postCssStyleCalled, setPostCssStyleCalled] = useState(false);
 
-  const createStyleSvgCss = async (PostCssPackage: {postcss: any, cssjs:any}) => {
+  const createStyleSvgCss = async (PostCssPackage: {postcss: any; cssjs: any}) => {
     setPostCssStyleCalled(true);
     const {postcss, cssjs} = PostCssPackage;
-    postcss().process(styleObj, {parser: cssjs})
+    postcss()
+      .process(styleObj, {parser: cssjs})
       .then((style: {css: any}) => setSvgStyleCss(`{${style.css}}`));
   };
 
   if (isSvgUri(data)) {
-    return <img {...other} src={data.uri} style={styleObj}/>;
+    return <img {...others} src={data.uri} style={styleObj}/>;
   } else if (isBase64ImageContent(data)) {
-    return <img {...other} src={data} style={styleObj}/>;
+    if (tintColor) {
+      return (
+        <Image
+          source={{uri: data}}
+          width={DEFAULT_SIZE}
+          height={DEFAULT_SIZE}
+          style={[style, {tintColor}]}
+          {...others}
+        />
+      );
+    }
+    return <img {...others} src={data} style={styleObj}/>;
   } else if (data) {
     const PostCssPackage = require('../../optionalDependencies').PostCssPackage;
     if (PostCssPackage) {
@@ -43,16 +52,15 @@ function SvgImage(props: SvgImageProps) {
         return null;
       }
       const svgStyleTag = `<style> svg ${svgStyleCss} </style>`;
-  
+
       return (
         <div
-          {...other}
+          {...others}
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{__html: svgStyleTag + data}}
         />
       );
     }
-    
   }
   return null;
 }