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

…nimated icons

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

src/components/CustomizeIconsPanel.js

@@ -102,6 +102,7 @@ const CustomizeIconsPanel = (props) => {
           isActive={iconEditor}
           show={iconEditorToggle}
           iconNames={value.multipleIcons}
+          iconType={props.iconType}
         />
       ) : (
         ''

src/components/Tabs.js

@@ -18,33 +18,34 @@ const Tabs = (props) => {
 
   const [activeTab, setActiveTab] = useState(currentTab)
   const [checked, setChecked] = useState(false)
-  const [staticCheck, setStaticCheck] = 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(() => {
     setPosition(document.querySelector('.page-header').clientHeight + 54)
   }, [customize, showPanel, windowsSize])
 
-  useEffect(() => {
+  /* useEffect(() => {
     if (activeTab === 'Static Icons') {
       setChecked(staticCheck)
     } else {
       setChecked(false)
     }
-  }, [activeTab, staticCheck])
+  }, [staticCheck]) */
 
-  const changeCheckedStatus = () => {
+  /* const changeCheckedStatus = () => {
     if (activeTab === currentTab) {
       setStaticCheck(!checked)
     }
     setChecked(!checked)
-  }
+  } */
 
   return (
     <div className='tabs'>
@@ -71,15 +72,12 @@ const Tabs = (props) => {
             {SHOW_THEME_SWITCH ? <IconVersionToggle /> : undefined}
 
             <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

@@ -267,6 +267,7 @@ const IconsSet = (props) => {
     if (e === tab) {
       setActiveTab(e)
     } else {
+      toggleCustomize(dispatch({ type: 'TOGGLE_CUSTOMIZE_AND_DESELECT' }))
       setActiveTab(e)
       if (e === 'Static Icons') {
         setAnimatedHistory(iconSelected)
@@ -409,49 +410,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>
@@ -489,7 +483,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)}
@@ -559,14 +553,22 @@ const IconsSet = (props) => {
               {state.animatedIcons.map((icon, index) => (
                 <div
                   className={`icon-container ${
-                    icon === iconSelected?.name ? 'active' : ''
+                    isActive(icon, state) ? 'active' : ''
                   }`}
                   key={index}
                   onClick={() => {
-                    setIconSelected({ name: icon })
-                    setShowPanel(true)
-                    setSearchValue(icon)
-                    if (selectMultiple) {
+                    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',

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
   },
   selectAllTagsIcons(tagName) {
     if (tagName === 'all') return this.iconsCategory
@@ -87,7 +92,7 @@ export const eosIconsState = {
     this.cookiesToggle = !this.cookiesToggle
     return window.location.reload()
   },
-  selectAllIcons(search) {
+  selectAllStaticIcons(search) {
     multipleIcons.splice(0, multipleIcons.length)
     for (let i = 0; i < this.icons.length; i++) {
       if (
@@ -102,6 +107,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) => {
@@ -182,15 +195,27 @@ 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,
         customize: eosIconsState.toggleCustomize()
       }
-    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 {