fix: web load svg tag data (#2410)

* fix: web load svg tag data

* fix typo

* fix: svg base64

* fix: svg base64

* setting snapshoot version

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* jsCss optionaldep

* CR comments

* naming

Author: OrenZak

package.json

@@ -116,7 +116,9 @@
     "react-test-renderer": "^17.0.1",
     "reassure": "^0.4.1",
     "shell-utils": "^1.0.10",
-    "typescript": "4.3.2"
+    "typescript": "4.3.2",
+    "postcss": "^8.4.21",
+    "postcss-js": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=17.0.1",

src/components/button/ButtonConstants.ts

@@ -1,5 +1,6 @@
 import {ButtonSize} from './ButtonTypes';
 
+
 export const PADDINGS = {
   XSMALL: 3,
   SMALL: 4.5,

src/components/svgImage/index.web.tsx

@@ -1,41 +1,59 @@
-import React from 'react';
-import {isSvg, isSvgUri} from '../../utils/imageUtils';
-// import {SvgPackage} from '../../optionalDependencies';
-
-// const SvgXml = SvgPackage?.SvgXml;
-// const SvgCssUri = SvgPackage?.SvgCssUri;
-// const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
+import React, {useState} from 'react';
+import {isSvg, isSvgUri, isBase64ImageContent} from '../../utils/imageUtils';
 
+const EMPTY_STYLE = '{}';
 export interface SvgImageProps {
   /**
    * the asset tint
    */
   tintColor?: string | null;
   data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
+  style?: object[];
 }
 
 function SvgImage(props: SvgImageProps) {
-  // tintColor crashes Android, so we're removing this until we properly support it.
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-  // const {data, tintColor, ...others} = props;
-  const {data} = props;
+  const {
+    data,
+    style,
+    ...other
+  } = props;
+
+  const styleObj = Object.assign({}, ...(style || []));
 
-  // if (!SvgXml) {
-  //   // eslint-disable-next-line max-len
-  //   console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
-  //   return null;
-  // }
+  
+  const [svgStyleCss, setSvgStyleCss] = useState<string>(EMPTY_STYLE);
+  const [postCssStyleCalled, setPostCssStyleCalled] = useState(false);
+
+  const createStyleSvgCss = async (PostCssPackage: {postcss: any, cssjs:any}) => {
+    setPostCssStyleCalled(true);
+    const {postcss, cssjs} = PostCssPackage;
+    postcss().process(styleObj, {parser: cssjs})
+      .then((style: {css: any}) => setSvgStyleCss(`{${style.css}}`));
+  };
 
   if (isSvgUri(data)) {
-    return <img src={data.uri}/>;
-    // return <SvgCssUri {...others} uri={data.uri}/>;
-  // }
-  //  else if (typeof data === 'string') {
-  //   return <SvgXml xml={data} {...others}/>;
+    return <img {...other} src={data.uri} style={styleObj}/>;
+  } else if (isBase64ImageContent(data)) {
+    return <img {...other} src={data} style={styleObj}/>;
   } else if (data) {
-    return <img src={data}/>;
+    const PostCssPackage = require('../../optionalDependencies').PostCssPackage;
+    if (PostCssPackage) {
+      if (!postCssStyleCalled) {
+        createStyleSvgCss(PostCssPackage);
+        return null;
+      }
+      const svgStyleTag = `<style> svg ${svgStyleCss} </style>`;
+  
+      return (
+        <div
+          {...other}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{__html: svgStyleTag + data}}
+        />
+      );
+    }
+    
   }
-
   return null;
 }
 

src/optionalDependencies/PostCssPackage.ts

@@ -0,0 +1,13 @@
+let PostCssPackage: {postcss: any, cssjs: any} | undefined;
+try {
+  const postcss = require('postcss');
+  const cssjs = require('postcss-js');
+  
+
+  PostCssPackage = {
+    postcss,
+    cssjs
+  };
+} catch (error) {}
+
+export default PostCssPackage;

src/optionalDependencies/index.web.ts

@@ -0,0 +1,9 @@
+export {default as NetInfoPackage} from './NetInfoPackage';
+export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
+export {PickerPackage, CommunityPickerPackage} from './PickerPackage';
+export {default as SvgPackage} from './SvgPackage';
+export {createShimmerPlaceholder} from './ShimmerPackage';
+export {default as LinearGradientPackage} from './LinearGradientPackage';
+export {default as AsyncStoragePackage} from './AsyncStoragePackage';
+export {default as PostCssPackage} from './PostCssPackage';
+

src/utils/imageUtils.ts

@@ -11,6 +11,13 @@ export function isSvg(source: ImageProps['source']) {
   return typeof source === 'string' || typeof source === 'function' || isSvgUri(source);
 }
 
+export function isBase64ImageContent(data: string) {
+  const base64Content = data.split(',')[1];
+  const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+  return base64regex.test(base64Content);
+}
+
 export function getAsset(assetName = '', assetGroup = '') {
   return get(Assets, `${assetGroup}.${assetName}`);
 }
+

webDemo/package.json

@@ -30,7 +30,9 @@
     "react-native-svg-transformer": "^0.14.3",
     "react-native-ui-lib": "snapshot",
     "react-native-web": "^0.18.6",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "postcss": "^8.4.21",
+    "postcss-js": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

webDemo/src/App.tsx

@@ -38,6 +38,24 @@ interface ItemToRender {
   title: string,
   FC: React.FC
 }
+const svgData = `<?xml version="1.0" encoding="UTF-8"?>
+<svg data-bbox="2 2 28 28" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="800" width="800" data-type="ugc">
+    <g>
+        <defs>
+            <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(.893 0 0 .893 -64.139 -782.556)" y2="878.134" x2="105.452" y1="910.226" x1="73.714" id="1c6ca7ff-eba0-4dd0-82e3-63fdfa256791">
+                <stop stop-color="#0296d8" offset="0"/>
+                <stop stop-color="#8371d9" offset="1"/>
+            </linearGradient>
+            <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(.893 0 0 .893 -64.139 -782.556)" y2="875.745" x2="102.279" y1="905.226" x1="69.813" id="85cd62d4-a6c1-4ded-b1ca-e6c438f49e1b">
+                <stop stop-color="#cb55c0" offset="0"/>
+                <stop stop-color="#f28e0e" offset="1"/>
+            </linearGradient>
+        </defs>
+        <path d="M2 2v28h28v-.047l-6.95-7-6.95-7.007 6.95-7.012L29.938 2Z" fill="url(#1c6ca7ff-eba0-4dd0-82e3-63fdfa256791)"/>
+        <path d="M16.318 2 2 16.318V30h.124l14.008-14.008-.031-.031L23.05 8.95 29.938 2Z" fill="url(#85cd62d4-a6c1-4ded-b1ca-e6c438f49e1b)"/>
+    </g>
+</svg>
+`;
 
 const itemsToRender: ItemToRender[] = [
   {
@@ -91,6 +109,20 @@ const itemsToRender: ItemToRender[] = [
       />
     )
   },
+  {
+    title: 'Button with Svg as <svg> data tag',
+    FC: () => (
+      <Button
+        label={'Svg tag'}
+        size={Button.sizes.large}
+        iconSource={svgData}
+        iconStyle={{
+          width: 24,
+          height: 24
+        }}
+      />
+    )
+  },
   {
     title: 'Link Button',
     FC: () => (

webDemo/webpack.config.js

@@ -22,7 +22,9 @@ const baseProjectSource = [
   path.resolve(appDirectory, 'node_modules/@react-native-community/netinfo'),
   path.resolve(appDirectory, 'node_modules/@react-native-community/datetimepicker'),
   path.resolve(appDirectory, 'node_modules/react-native-color'),
-  path.resolve(appDirectory, 'node_modules/react-native-ui-lib')
+  path.resolve(appDirectory, 'node_modules/react-native-ui-lib'),
+  path.resolve(appDirectory, 'node_modules/postcss'),
+  path.resolve(appDirectory, 'node_modules/postcss-js')
 ];
 
 const useBabelForRN = {