feat: rarity select ready

Author: GeorgeZhang2035

src/components/editor/operator/sheet/sheetOperator/SheetOperatorFilterProvider.tsx

@@ -92,7 +92,11 @@ export const OperatorFilterProvider: FC<OperatorFilterProviderProp> = ({
         usePaginationFilterState: [paginationFilter, setPaginationFilter],
         useProfFilterState: [profFilter, setProfFilter],
         useRarityFilterState: [rarityFilter, setRarityFilter],
-        operatorFiltered: useOperatorFiltered(profFilter, paginationFilter),
+        operatorFiltered: useOperatorFiltered(
+          profFilter,
+          paginationFilter,
+          rarityFilter,
+        ),
       }}
     >
       {children}
@@ -115,22 +119,25 @@ const generateCustomizedOperInfo = (name: string): OperatorInfo => ({
 const useOperatorFiltered = (
   profFilter: ProfFilter,
   paginationFilter: PaginationFilter,
+  rarityFilter: RarityFilter,
 ) => {
   // Priority: prof > sub prof > rarity/rarityReverse
   // filterResult init and prof filter about
-  const filterResult = useProfFilterHandle(profFilter)
+  const profFilterResult = useProfFilterHandle(profFilter)
   //   rarity about
-
-  const dataTotal = filterResult.length
+  const rarityFilterResult = rarityFilterHandle(rarityFilter, profFilterResult)
   //   pagination about
-
   //   filterResult
+  const filterResult = paginationFilterHandle(
+    paginationFilter,
+    rarityFilterResult,
+  )
   //   console.log(filterResult)
   return {
     // return data after being paginated
-    data: paginationFilterHandle(paginationFilter, filterResult),
+    data: filterResult,
     meta: {
-      dataTotal,
+      dataTotal: profFilterResult.length,
     },
   }
 }
@@ -217,3 +224,13 @@ const paginationFilterHandle = (
   { current, size }: PaginationFilter,
   originData: OperatorInfo[] = OPERATORS,
 ) => originData.slice(0, current * size)
+
+const rarityFilterHandle = (
+  { selectedRarity, reverse }: RarityFilter,
+  originData: OperatorInfo[] = OPERATORS,
+) =>
+  originData
+    .filter(({ rarity }) => selectedRarity.includes(rarity))
+    .sort(({ rarity: rarityA }, { rarity: rarityB }) =>
+      reverse ? rarityA - rarityB : rarityB - rarityA,
+    )

src/components/editor/operator/sheet/sheetOperator/toolBox/OperatorRaritySelect.tsx

@@ -1,6 +1,7 @@
 import { Button, Divider, H5 } from '@blueprintjs/core'
 
 import clsx from 'clsx'
+import { debounce } from 'lodash-es'
 import { FC } from 'react'
 
 import {
@@ -20,7 +21,7 @@ export const OperatorRaritySelect: FC<OperatorRaritySelectProp> = () => {
   return (
     <>
       <div className="flex items-center">
-        <H5 className="m-0 mr-1">按干员稀有度展示</H5>
+        <H5 className="m-0 mr-1">按干员星级展示</H5>
         <Button
           icon="reset"
           minimal
@@ -38,17 +39,20 @@ export const OperatorRaritySelect: FC<OperatorRaritySelectProp> = () => {
               text={rarityIndex}
               minimal
               className={clsx(isSelect && selectClass)}
-              onClick={() =>
-                setRarityFilter(({ selectedRarity, ...rest }) => ({
-                  ...rest,
-                  selectedRarity: isSelect
-                    ? selectedRarity.filter(
-                        (selectedRarityIndex) =>
-                          selectedRarityIndex !== rarityIndex,
-                      )
-                    : [...selectedRarity, rarityIndex],
-                }))
-              }
+              rightIcon="star"
+              onClick={debounce(
+                () =>
+                  setRarityFilter(({ selectedRarity, ...rest }) => ({
+                    ...rest,
+                    selectedRarity: isSelect
+                      ? selectedRarity.filter(
+                          (selectedRarityIndex) =>
+                            selectedRarityIndex !== rarityIndex,
+                        )
+                      : [...selectedRarity, rarityIndex],
+                  })),
+                150,
+              )}
             />
           )
         })}