third party react icons are rendered: Chakra and prop Icons are yet t…

…o be
Codebrahma · Feb 26, 2021 · f8718c8 · f8718c8
1 parent 6a269d2
commit f8718c8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 47 deletions.
diff --git a/src/components/editor/PreviewContainer.tsx b/src/components/editor/PreviewContainer.tsx
@@ -1,10 +1,9 @@
-import React, { FunctionComponent, ComponentClass, Suspense } from 'react'
+import React, { FunctionComponent, ComponentClass } from 'react'
 import { useInteractive } from '../../hooks/useInteractive'
 import { Box } from '@chakra-ui/core'
 import findAndReplaceExposedPropValue from '../../utils/findAndReplaceExposedPropValue'
 import stringToIconConvertor from '../../utils/stringToIconConvertor'
 import { useDropComponent } from '../../hooks/useDropComponent'
-import { CopyIcon } from '@chakra-ui/icons'
 
 export const isPropRelatedToIcon = (type: string, propName: string) => {
   if (
@@ -51,21 +50,18 @@ const PreviewContainer: React.FC<{
 
   //Converting the icon in string to reactElement
   Object.keys(propsKeyValue).forEach((key: string) => {
-    if (isPropRelatedToIcon(component.type, key))
-      propsKeyValue[key] = (
-        <Suspense fallback={<CopyIcon />}>
-          {stringToIconConvertor(key, propsKeyValue[key])}
-        </Suspense>
-      )
+    if (isPropRelatedToIcon(component.type, key)) {
+      propsKeyValue[key] = stringToIconConvertor(key, propsKeyValue[key])
+    }
   })
 
-  console.log(propsKeyValue)
-
-  const children = React.createElement(type, {
+  let props = {
     ...propsKeyValue,
     ...forwardedProps,
     ref: drop(ref),
-  })
+  }
+  if (component.type === 'Icon') delete props.ref
+  const children = React.createElement(type, props)
 
   if (isBoxWrapped) {
     let boxProps: any = {}

diff --git a/src/components/editor/previews/EditablePreviewContainer.tsx b/src/components/editor/previews/EditablePreviewContainer.tsx
@@ -1,7 +1,5 @@
-import React, { FunctionComponent, ComponentClass, Suspense } from 'react'
+import React, { FunctionComponent, ComponentClass } from 'react'
 import { Box } from '@chakra-ui/core'
-import { CopyIcon } from '@chakra-ui/icons'
-
 import { useInteractive } from '../../../hooks/useInteractive'
 import findAndReplaceExposedPropValue from '../../../utils/findAndReplaceExposedPropValue'
 import {
@@ -98,17 +96,10 @@ const EditablePreviewContainer: React.FC<{
   propsKeyValue['onDoubleClick'] = doubleClickHandler
 
   //Converting the icon in string to reactElement
-  Object.keys(propsKeyValue).forEach((key: string) => {
+  Object.keys(propsKeyValue).forEach(async (key: string) => {
     if (isPropRelatedToIcon(component.type, key)) {
-      const Icon = stringToIconConvertor(key, propsKeyValue[key])
-      console.log(Icon)
-      console.log(<CopyIcon />)
-
-      propsKeyValue[key] = (
-        <Suspense fallback={<CopyIcon />}>
-          {stringToIconConvertor(key, propsKeyValue[key])}
-        </Suspense>
-      )
+      const Icon = await stringToIconConvertor(key, propsKeyValue[key])
+      propsKeyValue[key] = Icon
     }
   })
 

diff --git a/src/utils/stringToIconConvertor.ts b/src/utils/stringToIconConvertor.ts
@@ -1,30 +1,32 @@
 // @ts-nocheck
+const ReactIcon = (iconName: string) => {
+  let resolved
+  switch (getFirstTwoCharacters(iconName)) {
+    case 'Fa': {
+      resolved = require('react-icons/fa')
+      break
+    }
+    case 'Md': {
+      resolved = require('react-icons/md')
+      break
+    }
+    case 'Ai': {
+      resolved = require('react-icons/ai')
+      break
+    }
+    default: {
+      resolved = require('react-icons/fa')
+      break
+    }
+  }
 
-export const getFirstTwoCharacters = (value: string) => value.substring(0, 2)
-
-// This function will find the type of icon and return the icon based on the type.
-// const findIconType = (iconValue: string) => {
-//   const subValue = getFirstTwoCharacters(iconValue)
+  return resolved[iconName]
+}
 
-//   switch (subValue) {
-//     case 'Fa': {
-//       return fontAwesomeIcons[iconValue]
-//     }
-//     case 'Md': {
-//       return materialDesignIcons[iconValue]
-//     }
-//     case 'Ai': {
-//       return antDesignIcons[iconValue]
-//     }
-//     default: {
-//       return chakraIcons[iconValue]
-//     }
-//   }
-// }
+export const getFirstTwoCharacters = (value: string) => value.substring(0, 2)
 
 const stringToIconConvertor = (propName: string, propValue: string) => {
-  let Icon: any
-
+  let Icon = ReactIcon(propValue)
   //convert to icon element
   if (propName !== 'as') {
     if (Icon !== undefined) Icon = propValue