Merge pull request #8 from GeorgeZhang2035/perf/sheet

Perf/sheet

Author: Gemini2035

src/components/editor/operator/sheet/SheetGroup.tsx

@@ -20,7 +20,7 @@ import { Group, Operator } from '../EditorSheet'
 import { SheetContainerSkeleton } from './SheetContainerSkeleton'
 import { GroupNoData } from './SheetNoneData'
 import { useSheet } from './SheetProvider'
-import { GroupItem } from './sheetGroup/SheetGroupItem'
+import { GroupItem, SheetGroupItem } from './sheetGroup/SheetGroupItem'
 
 export interface SheetGroupProps {}
 
@@ -199,17 +199,18 @@ const SheetGroup: FC<SheetGroupProps> = () => {
                 {existedGroups.length ? (
                   <>
                     {existedGroups.map((item) => (
-                      <GroupItem
-                        key={item.name}
-                        existedGroup={existedGroups}
-                        existedOperator={existedOperators}
-                        groupInfo={item}
-                        exist={checkGroupExisted(item.name)}
-                        pinned={checkGroupPinned(item)}
-                        groupRemoveHandle={groupRemoveHandle}
-                        groupPinHandle={groupPinHandle}
-                        groupUpdateHandle={groupUpdateHandle}
-                      />
+                      // <GroupItem
+                      //   key={item.name}
+                      //   existedGroup={existedGroups}
+                      //   existedOperator={existedOperators}
+                      //   groupInfo={item}
+                      //   exist={checkGroupExisted(item.name)}
+                      //   pinned={checkGroupPinned(item)}
+                      //   groupRemoveHandle={groupRemoveHandle}
+                      //   groupPinHandle={groupPinHandle}
+                      //   groupUpdateHandle={groupUpdateHandle}
+                      // />
+                      <SheetGroupItem groupInfo={item} itemType="selected" />
                     ))}
                     <H6 className="my-2 text-center">
                       已显示全部 {existedGroups.length} 个干员组

src/components/editor/operator/sheet/SheetOperatorSkillAbout.tsx

@@ -127,6 +127,7 @@ export const SkillAboutTrigger = ({
         if (operator) e.stopPropagation()
       }}
       role="presentation"
+      className="cursor-pointer"
     >
       <Popover2 content={SkillAboutForm} disabled={!operator}>
         {SkillAboutTrigger}

src/components/editor/operator/sheet/sheetGroup/OperatorInGroupItem.tsx

@@ -0,0 +1,34 @@
+import { Card } from '@blueprintjs/core'
+
+import { FC } from 'react'
+
+import { OperatorAvatar } from '../../EditorOperator'
+import { Operator } from '../../EditorSheet'
+import { SkillAboutTrigger } from '../SheetOperatorSkillAbout'
+
+export interface OperatorInGroupItemProp {
+  operatorInfo: Operator
+  onOperatorSkillChange?: (operatorInfo: Operator) => void
+}
+
+export const OperatorInGroupItem: FC<OperatorInGroupItemProp> = ({
+  onOperatorSkillChange,
+  operatorInfo: { name, ...restField },
+}) => (
+  <Card className="flex items-center w-full h-full justify-between">
+    <>
+      <div className="flex items-center">
+        <OperatorAvatar name={name} size="large" />
+        <p className="font-bold leading-none text-center truncate ml-2 mr-auto">
+          {name}
+        </p>
+      </div>
+      {!!onOperatorSkillChange && (
+        <SkillAboutTrigger
+          operator={{ name, ...restField }}
+          onSkillChange={onOperatorSkillChange}
+        />
+      )}
+    </>
+  </Card>
+)

src/components/editor/operator/sheet/sheetGroup/SheetGroupItem.tsx

@@ -12,15 +12,19 @@ import {
 import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
-import { useRef, useState } from 'react'
+import { useAtom, useSetAtom } from 'jotai'
+import { FC, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { CardDeleteOption } from 'components/editor/CardOptions'
+import { favGroupAtom } from 'store/useFavGroups'
 
 import { Group, Operator } from '../../EditorSheet'
 import { GroupListModifyProp } from '../SheetGroup'
 import { OperatorNoData } from '../SheetNoneData'
 import { OperatorItem } from '../SheetOperatorItem'
+import { useSheet } from '../SheetProvider'
+import { OperatorInGroupItem } from './OperatorInGroupItem'
 import {
   CollapseButton,
   SheetGroupOperatorSelectProp,
@@ -64,16 +68,20 @@ export const GroupItem = ({
       <div className="w-full pt-1">
         {groupInfo.opers?.length
           ? groupInfo.opers?.map((item) => (
-              <OperatorItem
-                key={item.name}
-                operator={item}
-                name={item.name}
-                selected
-                scaleDisable
-                interactive={false}
-                horizontal
-                readOnly={!exist}
-                onSkillChange={changeGroupedOperatorSkillHandle}
+              // <OperatorItem
+              //   key={item.name}
+              //   operator={item}
+              //   name={item.name}
+              //   selected
+              //   scaleDisable
+              //   interactive={false}
+              //   horizontal
+              //   readOnly={!exist}
+              //   onSkillChange={changeGroupedOperatorSkillHandle}
+              // />
+              <OperatorInGroupItem
+                operatorInfo={item}
+                onOperatorSkillChange={changeGroupedOperatorSkillHandle}
               />
             ))
           : !editable && OperatorNoData}
@@ -147,13 +155,14 @@ export const GroupItem = ({
 
 const GroupTitle = ({
   groupTitle,
-  editable,
+  // editable,
   renameSubmit,
 }: {
   editable: boolean
-  renameSubmit: (newName: string) => void
+  renameSubmit?: (newName: string) => void
   groupTitle: string
 }) => {
+  const editable = !!renameSubmit
   const [editName, setEditName] = useState('')
   const [nameEditState, setNameEditState] = useState(false)
   const [alertState, setAlertState] = useState(false)
@@ -200,7 +209,7 @@ const GroupTitle = ({
         className="flex items-center"
         onSubmit={handleSubmit(() => {
           ignoreBlur.current = true
-          renameSubmit(editName || groupTitle)
+          renameSubmit?.(editName || groupTitle)
           setNameEditState(false)
           inputRef.current?.blur()
         })}
@@ -240,3 +249,79 @@ const GroupTitle = ({
     </>
   )
 }
+
+type ItemType = 'recommend' | 'selected' | 'fav'
+
+export interface SheetGroupItemProp {
+  groupInfo: Group
+  itemType: ItemType
+}
+
+export const SheetGroupItem: FC<SheetGroupItemProp> = ({
+  groupInfo,
+  itemType,
+}) => {
+  const { selected, onGroupNameChange } = useSheetGroupItemController({
+    groupInfo,
+    itemType,
+  })
+
+  return (
+    <Card interactive={!selected} className="mt-1 mx-0.5">
+      <div className="flex items-center justify-between">
+        <GroupTitle
+          groupTitle={groupInfo.name}
+          editable
+          renameSubmit={onGroupNameChange}
+        />
+        <div></div>
+      </div>
+    </Card>
+  )
+}
+
+type SheetGroupItemController = {
+  selected: boolean
+  onGroupNameChange: ((name: string) => void) | undefined
+  defaultOperatorCollapseOpen: boolean
+}
+
+const useSheetGroupItemController = ({
+  groupInfo,
+  itemType,
+}: SheetGroupItemProp): SheetGroupItemController => {
+  const { submitGroup } = useSheet()
+  const [favGroup, setFavGroup] = useAtom(favGroupAtom)
+
+  switch (itemType) {
+    case 'selected':
+      return {
+        selected: true,
+        onGroupNameChange: (name: string) =>
+          submitGroup({ ...groupInfo, name }, undefined, true),
+        defaultOperatorCollapseOpen: true,
+      }
+    case 'recommend':
+      return {
+        selected: false,
+        onGroupNameChange: undefined,
+        defaultOperatorCollapseOpen: false,
+      }
+    case 'fav':
+      return {
+        selected: false,
+        onGroupNameChange: (name: string) =>
+          setFavGroup([
+            ...favGroup.filter(({ name: favName }) => favName !== name),
+            { ...groupInfo, name },
+          ]),
+        defaultOperatorCollapseOpen: false,
+      }
+    default:
+      return {
+        selected: false,
+        onGroupNameChange: undefined,
+        defaultOperatorCollapseOpen: false,
+      }
+  }
+}

src/components/editor/operator/sheet/sheetGroup/SheetGroupOperatorSelect.tsx

@@ -219,10 +219,10 @@ interface CollapseButtonProps extends ButtonProps {
   isCollapse: boolean
 }
 
-export const CollapseButton = ({
+export const CollapseButton: FC<CollapseButtonProps> = ({
   isCollapse,
   ...buttonProps
-}: CollapseButtonProps) => (
+}) => (
   <Button
     {...{
       ...buttonProps,

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,
+              )}
             />
           )
         })}