Fixed: EOS-uiux-Solutions#9: Added New feature to download multiple a…

…nimated icons

Signed-off-by: chinmaym07 <[email protected]>

src/components/CustomizeIconsPanel.js

@@ -105,6 +105,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)
-    }
+  const changeCheckedStatus = () => {
     setChecked(!checked)
-  }, [activeTab, checked, currentTab])
+  }
 
   const resetTabsStateFromNavbarLogo = useCallback(() => {
     changeCheckedStatus()
     dispatch({ type: 'RESET_CUSTOMIZE' })
     setActiveTab(currentTab)
     setChecked(false)
-    setStaticCheck(false)
     setPosition(0)
   }, [changeCheckedStatus, currentTab, dispatch])
 
@@ -94,15 +85,12 @@ const Tabs = (props) => {
             )}
 
             <Toggle
-              disabledStatus={activeTab === 'Animated Icons'}
               name='Select multiple'
               id='js-icon-picker'
               activeTab={activeTab}
               checkedStatus={checked}
-              onChange={() => {
-                changeCheckedStatus()
-              }}
               onClick={() => {
+                setChecked(!checked)
                 toggleCustomize(dispatch({ type: 'TOGGLE_CUSTOMIZE' }))
               }}
             />

src/modules/IconsSet.js

@@ -358,7 +358,10 @@ const IconsSet = (props) => {
 
   /* 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 +511,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 +586,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)}
@@ -662,13 +658,30 @@ const IconsSet = (props) => {
             )}
             <div className='icons-list'>
               {state.animatedIcons.map((icon, index) => (
-                <Icon
+                <div
+                  className={`icon-container ${
+                    isActive(icon, state) ? 'active' : ''
+                  }`}
                   key={index}
-                  name={icon}
-                  type={'animated'}
-                  active={icon === iconSelected?.name}
-                  onClickAction={() => {
-                    selectAnimatedIcon(icon)
+                  onClick={() => {
+                    if (state.customize) {
+                      selectIcon(
+                        icon,
+                        dispatch({
+                          type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
+                          selection: icon
+                        })
+                      )
+                    } else {
+                      setIconSelected({ name: icon })
+                      setShowPanel(true)
+                      setSearchValue(icon)
+                      window.history.replaceState(
+                        '',
+                        'EOS Icons',
+                        `${window.location.pathname}?iconName=${icon}&type=animated`
+                      )
+                    }
                   }}
                   onDoubleClickAction={() => iconEditorToggle()}
                 />

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 {