Fixed: #9: Added New feature to download multiple animated icons

src/components/CustomizeIconsPanel.js

@@ -75,9 +75,12 @@ const CustomizeIconsPanel = (props) => {
         <div className='generate-div'>
           <span>{value.multipleIcons.length} icons selected</span>
           <span>Export as: </span>
-          <Button type='submit' onClick={generateFont}>
-            Font
-          </Button>
+          {props.iconType !== 'animated' ? (
+            <Button type='submit' onClick={generateFont}>
+              Font
+            </Button>
+          ) : null}
+
           <Button type='button' onClick={iconEditorToggle}>
             Images
           </Button>
@@ -105,6 +108,7 @@ const CustomizeIconsPanel = (props) => {
           isActive={iconEditor}
           show={iconEditorToggle}
           iconNames={value.multipleIcons}
+          iconType={props.iconType}
         />
       ) : (
         ''

src/components/Tabs.js

@@ -20,13 +20,13 @@ const Tabs = (props) => {
 
   const [activeTab, setActiveTab] = useState(currentTab)
   const [checked, setChecked] = useState(false)
-  const [staticCheck, setStaticCheck] = useState(false)
   const [position, setPosition] = useState(0)
   const [windowsSize] = useWindow()
   const { dispatch } = useContext(AppContext)
 
   useEffect(() => {
     setActiveTab(currentTab)
+    setChecked(false)
   }, [currentTab])
 
   useEffect(() => {
@@ -35,26 +35,17 @@ const Tabs = (props) => {
 
   useEffect(() => {
     if (tabChangeHandler) tabChangeHandler()
-    if (activeTab === 'Static Icons') {
-      setChecked(staticCheck)
-    } else {
-      setChecked(false)
-    }
-  }, [activeTab, staticCheck, tabChangeHandler])
+  }, [tabChangeHandler])
 
   const changeCheckedStatus = useCallback(() => {
-    if (activeTab === currentTab) {
-      setStaticCheck(!checked)
-    }
     setChecked(!checked)
-  }, [activeTab, checked, currentTab])
+  }, [checked])
 
   const resetTabsStateFromNavbarLogo = useCallback(() => {
     changeCheckedStatus()
     dispatch({ type: 'RESET_CUSTOMIZE' })
     setActiveTab(currentTab)
     setChecked(false)
-    setStaticCheck(false)
     setPosition(0)
   }, [changeCheckedStatus, currentTab, dispatch])
 
@@ -94,7 +85,6 @@ const Tabs = (props) => {
             )}
 
             <Toggle
-              disabledStatus={activeTab === 'Animated Icons'}
               name='Select multiple'
               id='js-icon-picker'
               activeTab={activeTab}

src/modules/IconsSet.js

@@ -27,7 +27,7 @@ const IconsSet = (props) => {
   const urlIconName = urlParams.get('iconName')
   const urlTagName = urlParams.get('tagName')
   const tabType = urlParams.get('type')
-  const [selectMultiple, setSelectMultiple] = useState(true)
+  const selectMultiple = state.customize
   const [emptySearchResult, setEmptySearchResult] = useState(false)
   const [suggestedString, setSuggestedString] = useState('')
   const [iconEditor, setIconEditor] = useState(false)
@@ -95,7 +95,6 @@ const IconsSet = (props) => {
     setIconSelected('')
     setActiveTab('Static Icons')
     setStaticHistory('')
-    setSelectMultiple(true)
     setAnimatedHistory('')
     setEmptySearchResult(false)
     setSuggestedString('')
@@ -311,7 +310,7 @@ const IconsSet = (props) => {
   }
 
   const selectIcon = (icon, callback) => {
-    if (selectMultiple) {
+    if (!selectMultiple) {
       const iconObj = { name: icon.name, tags: icon.tags }
       setIconSelected(
         JSON.stringify(iconObj) === JSON.stringify(iconSelected) ? '' : iconObj
@@ -332,33 +331,36 @@ const IconsSet = (props) => {
     return callback
   }
 
-  const selectAnimatedIcon = (icon) => {
-    setIconSelected({ name: icon } === iconSelected ? '' : { name: icon })
-    setShowPanel({ name: icon } !== iconSelected)
-    setSearchValue(icon === searchValue ? '' : icon)
-    if (selectMultiple) {
+  const selectAnimatedIcon = (icon, callback) => {
+    if (!selectMultiple) {
+      setIconSelected({ name: icon })
+      setShowPanel(true)
+      setSearchValue(icon)
       window.history.replaceState(
         '',
         'EOS Icons',
         `${window.location.pathname}?iconName=${icon}&type=animated`
       )
     }
+    return callback
   }
 
   /* Toggle customizable functionality */
   const toggleCustomize = (callback) => {
     setShowPanel(false)
     setSearchValue('')
     setIconSelected('')
-    setSelectMultiple(!selectMultiple)
     window.history.replaceState('', 'EOS Icons', `${window.location.pathname}`)
     props.action()
     return callback
   }
 
   /* Function to close HowToPanel upon switching tabs */
   const tabSwitch = (e) => {
-    if (e !== tab) {
+    if (e === tab) {
+      setActiveTab(e)
+    } else {
+      toggleCustomize(dispatch({ type: 'TOGGLE_CUSTOMIZE_AND_DESELECT' }))
       setActiveTab(e)
       if (e === 'Static Icons') {
         setAnimatedHistory(iconSelected)
@@ -508,49 +510,42 @@ const IconsSet = (props) => {
           </div>
         </div>
         <div className='icon-information'>
-          {tab === 'Static Icons' ? (
-            !state.customize ? (
-              <div>
-                <ShowHowToUse
-                  tab={tab}
-                  showPanel={showPanel}
-                  iconSelected={iconSelected}
-                  closeHowTo={closeHowTo}
-                  theme={state.iconsTheme}
-                />
-              </div>
-            ) : (
-              <div className='how-to-use-block'>
-                <CustomizeIconsPanel
-                  selectAll={() =>
-                    dispatch({
-                      type: 'ADD_ALL_ICONS',
-                      search: searchValue
-                    })
-                  }
-                  deselectAll={() => {
-                    dispatch({ type: 'REMOVE_ALL_ICONS' })
-                    setSearchValue('')
-                    window.history.replaceState(
-                      '',
-                      'EOS Icons',
-                      `${window.location.pathname}`
-                    )
-                  }}
-                />
-              </div>
-            )
-          ) : (
+          {!state.customize ? (
             <div>
               <ShowHowToUse
                 tab={tab}
                 showPanel={showPanel}
                 iconSelected={iconSelected}
                 closeHowTo={closeHowTo}
-                setSearchValue={setSearchValue}
                 theme={state.iconsTheme}
               />
             </div>
+          ) : (
+            <div className='how-to-use-block'>
+              <CustomizeIconsPanel
+                iconType={tab === 'Animated Icons' ? 'animated' : 'static'}
+                selectAll={() =>
+                  dispatch({
+                    type:
+                      tab === 'Animated Icons'
+                        ? 'ADD_ALL_ANIMATED_ICONS'
+                        : 'ADD_ALL_STATIC_ICONS',
+                    search: searchValue
+                  })
+                }
+                deselectAll={() => {
+                  dispatch({
+                    type: 'REMOVE_ALL_ICONS'
+                  })
+                  setSearchValue('')
+                  window.history.replaceState(
+                    '',
+                    'EOS Icons',
+                    `${window.location.pathname}`
+                  )
+                }}
+              />
+            </div>
           )}
         </div>
       </PageHeader>
@@ -590,7 +585,7 @@ const IconsSet = (props) => {
                   <div className='icons-list'>
                     {categoryObject.icons.map((icon, i) =>
                       isActive(icon.name, state) ? (
-                        <div ref={activeIconRef}>
+                        <div ref={activeIconRef} key={i}>
                           <Icon
                             size={36}
                             active={isActive(icon.name, state)}
@@ -609,7 +604,9 @@ const IconsSet = (props) => {
                                 })
                               )
                             }
-                            onDoubleClickAction={() => iconEditorToggle()}
+                            onDoubleClickAction={() =>
+                              !selectMultiple ? iconEditorToggle() : null
+                            }
                           />
                         </div>
                       ) : (
@@ -631,7 +628,9 @@ const IconsSet = (props) => {
                               })
                             )
                           }
-                          onDoubleClickAction={() => iconEditorToggle()}
+                          onDoubleClickAction={() =>
+                            !selectMultiple ? iconEditorToggle() : null
+                          }
                         />
                       )
                     )}
@@ -663,14 +662,23 @@ const IconsSet = (props) => {
             <div className='icons-list'>
               {state.animatedIcons.map((icon, index) => (
                 <Icon
-                  key={index}
+                  size={36}
+                  key={icon}
+                  active={isActive(icon, state)}
                   name={icon}
-                  type={'animated'}
-                  active={icon === iconSelected?.name}
-                  onClickAction={() => {
-                    selectAnimatedIcon(icon)
-                  }}
-                  onDoubleClickAction={() => iconEditorToggle()}
+                  iconsTheme={state.iconsTheme}
+                  onClickAction={() =>
+                    selectAnimatedIcon(
+                      icon,
+                      dispatch({
+                        type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
+                        selection: icon
+                      })
+                    )
+                  }
+                  onDoubleClickAction={() =>
+                    !selectMultiple ? iconEditorToggle() : null
+                  }
                 />
               ))}
             </div>

src/utils/EosIcons.store.js

@@ -59,8 +59,13 @@ export const eosIconsState = {
   toggleCustomize() {
     /* Clear arrays when switching between customize */
     multipleIcons.splice(0, multipleIcons.length)
-
-    return (this.customize = !this.customize)
+    this.customize = !this.customize
+    return this.customize
+  },
+  toggleCustomizeAndDeselect() {
+    multipleIcons.splice(0, multipleIcons.length)
+    this.customize = false
+    return this.customize
   },
   resetCustomize() {
     return (this.customize = false)
@@ -89,7 +94,7 @@ export const eosIconsState = {
     }
     this.cookiesToggle = !this.cookiesToggle
   },
-  selectAllIcons(search) {
+  selectAllStaticIcons(search) {
     multipleIcons.splice(0, multipleIcons.length)
     for (let i = 0; i < this.icons.length; i++) {
       if (
@@ -104,6 +109,14 @@ export const eosIconsState = {
     multipleIcons.splice(0, multipleIcons.length)
     return multipleIcons
   },
+  selectAllAnimatedIcons(search) {
+    multipleIcons.splice(0, multipleIcons.length)
+    for (let i = 0; i < this.animatedIcons.length; i++) {
+      if (this.animatedIcons[i].includes(search))
+        multipleIcons.push(this.animatedIcons[i])
+    }
+    return multipleIcons
+  },
   setSearchRegularList: function (value) {
     if (value === '') {
       return this.iconsCategory.map((ele) => {
@@ -184,6 +197,13 @@ export const iconsReducer = (state, action) => {
         ...state,
         iconsCategory: eosIconsState.selectAllTagsIcons(action.selection)
       }
+    case 'TOGGLE_CUSTOMIZE_AND_DESELECT': {
+      return {
+        ...state,
+        multipleIcons: eosIconsState.deselectAllIcons(),
+        customize: eosIconsState.toggleCustomizeAndDeselect()
+      }
+    }
     case 'TOGGLE_CUSTOMIZE':
       return {
         ...state,
@@ -194,10 +214,15 @@ export const iconsReducer = (state, action) => {
         ...state,
         customize: eosIconsState.resetCustomize()
       }
-    case 'ADD_ALL_ICONS':
+    case 'ADD_ALL_STATIC_ICONS':
+      return {
+        ...state,
+        multipleIcons: eosIconsState.selectAllStaticIcons(action.search)
+      }
+    case 'ADD_ALL_ANIMATED_ICONS':
       return {
         ...state,
-        multipleIcons: eosIconsState.selectAllIcons(action.search)
+        multipleIcons: eosIconsState.selectAllAnimatedIcons(action.search)
       }
     case 'REMOVE_ALL_ICONS':
       return {