fix(icon-picker-modal): use icon that auto generated1

stakwork · Oct 7, 2024 · d9c9e30 · d9c9e30
1 parent 8fcef5c
commit d9c9e30
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 199 deletions.
diff --git a/.../BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts b/.../BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts
diff --git a/...BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx b/...BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
-import { icons } from './icons'
+import { Icons } from '~/components/Icons'
 import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils'
 import { useAppStore } from '~/stores/useAppStore'
@@ -18,16 +18,16 @@ export const IconPicker: React.FC = () => {
         <PickerContainer>
           <IconPaletteWrapper>
             <IconGrid>
-              {Object.keys(icons).map((iconKey) => {
-                const IconComponent = icons[iconKey as keyof typeof icons]
+              {Object.keys(Icons).map((iconKey) => {
+                const IconComponent = Icons[iconKey as keyof typeof Icons]
 
                 return (
                   <IconBox
                     key={iconKey}
                     isSelected={selectedIcon === iconKey}
                     onClick={() => handleIconChange(iconKey)}
                   >
-                    <IconComponent />
+                    {IconComponent && <IconComponent />}
                   </IconBox>
                 )
               })}

diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
@@ -18,7 +18,7 @@ import { useModal } from '~/stores/useModalStore'
 import { colors } from '~/utils'
 import { CreateCustomNodeAttribute } from './CustomAttributesStep'
 import MediaOptions from './MediaOptions'
-import { icons } from './ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons'
+import { Icons } from '~/components/Icons'
 import { convertAttributes, parsedObjProps, parseJson } from './utils'
 import { ColorPickerPopover } from './ColorPickerPopover'
 import { useAppStore } from '~/stores/useAppStore'
@@ -480,7 +480,7 @@ export const Editor = ({
     return undefined
   }, [selectedSchema, attributes])
 
-  const IconComponent = icons[selectedIcon as keyof typeof icons]
+  const IconComponent = Icons[selectedIcon as keyof typeof Icons]
 
   return (
     <Flex>
@@ -533,7 +533,7 @@ export const Editor = ({
                           />
                         </InputWrapper>
                         <ColorPickerIconWrapper onClick={handleColorPickerPopover} selectedColor={selectedColor}>
-                          <IconComponent />
+                          {IconComponent && <IconComponent />}
                         </ColorPickerIconWrapper>
                       </InputIconWrapper>
                     </Flex>

diff --git a/src/stores/useAppStore/index.ts b/src/stores/useAppStore/index.ts
@@ -50,7 +50,7 @@ const defaultData = {
   currentPlayingAudio: null,
   showCollapseButton: true,
   selectedColor: '#962777',
-  selectedIcon: 'ColorPickerIcon',
+  selectedIcon: 'ConstructionIcon',
 }
 
 export const useAppStore = create<AppStore>((set, get) => ({