Merge pull request #7 from GeorgeZhang2035/perf/sheet

Perf/sheet

Author: Gemini2035

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

@@ -1,18 +1,14 @@
-import { FC, useEffect, useRef, useState } from 'react'
+import { FC, useRef } from 'react'
 
 import { SheetContainerSkeleton } from './SheetContainerSkeleton'
 import { OperatorNoData } from './SheetNoneData'
+import { ProfClassification } from './sheetOperator/ProfClassification'
 import {
-  ProfClassification,
-  ProfClassificationProp,
-  defaultProfFilter,
-} from './sheetOperator/ProfClassification'
+  OperatorFilterProvider,
+  useOperatorFilterProvider,
+} from './sheetOperator/SheetOperatorFilterProvider'
 import { SheetOperatorItem } from './sheetOperator/SheetOperatorItem'
-import { ShowMore, defaultPagination } from './sheetOperator/ShowMore'
-import {
-  PaginationFilter,
-  useOperatorAfterFiltered,
-} from './sheetOperator/useOperatorFilter'
+import { ShowMore } from './sheetOperator/ShowMore'
 
 export interface SheetOperatorProps {}
 
@@ -23,18 +19,9 @@ export interface SheetOperatorProps {}
 const SheetOperator: FC<SheetOperatorProps> = () => {
   const operatorScrollRef = useRef<HTMLDivElement>(null)
 
-  const [profFilter, setProfFilter] =
-    useState<ProfClassificationProp['profFilter']>(defaultProfFilter)
-
   // const getOperatorRarity = (target: string) =>
   //   operatorsGroupedByProf.find((item) => item.name === target)!.rarity
 
-  // pagination about via frontened
-  const [pagination, setPagination] =
-    useState<PaginationFilter>(defaultPagination)
-
-  // useEffect(resetPaginationState, [selectedProf, selectedSubProf])
-
   // const selectAll = () => {
   //   operatorsGroupedBySubProf.forEach((item) => {
   //     submitOperator(item, () => {})
@@ -98,55 +85,36 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
 
   // console.log(selectedProf, selectedSubProf)
 
-  const toTop = () => {
-    operatorScrollRef?.current?.scrollIntoView()
-  }
+  const toTop = () => operatorScrollRef?.current?.scrollIntoView()
 
   const {
-    data: operatorsAfterFiltered,
-    meta: { dataTotal },
-  } = useOperatorAfterFiltered(profFilter, pagination)
-
-  // prof listener
-  useEffect(() => {
-    setPagination(defaultPagination)
-    toTop()
-  }, [profFilter])
-
-  // pagination listener
-  useEffect(() => {
-    if (pagination.current === 1) toTop()
-  }, [pagination])
+    operatorFiltered: { data: operatorFilteredData },
+  } = useOperatorFilterProvider()
 
   return (
-    <>
-      <div className="flex h-full">
-        <div className="flex-auto px-1" ref={operatorScrollRef}>
-          {operatorsAfterFiltered.length ? (
-            <>
-              <div
-                key="operatorContainer"
-                className="flex flex-wrap items-start content-start overscroll-contain relative"
-              >
-                {operatorsAfterFiltered.map(({ name }, index) => (
-                  <div
-                    className="flex items-center flex-0 w-32 h-32"
-                    key={index}
-                  >
-                    <SheetOperatorItem {...{ name }} />
-                  </div>
-                ))}
-              </div>
-              <ShowMore {...{ pagination, setPagination, dataTotal }} />
-            </>
-          ) : (
-            OperatorNoData
-          )}
-        </div>
-        {/* {ProfSelect} */}
-        <ProfClassification {...{ profFilter, setProfFilter }} />
+    <div className="flex h-full">
+      <div className="flex-auto px-1" ref={operatorScrollRef}>
+        {operatorFilteredData.length ? (
+          <>
+            <div
+              key="operatorContainer"
+              className="flex flex-wrap items-start content-start overscroll-contain relative"
+            >
+              {operatorFilteredData.map(({ name }, index) => (
+                <div className="flex items-center flex-0 w-32 h-32" key={index}>
+                  <SheetOperatorItem {...{ name }} />
+                </div>
+              ))}
+            </div>
+            <ShowMore {...{ toTop }} />
+          </>
+        ) : (
+          OperatorNoData
+        )}
       </div>
-    </>
+      {/* {ProfSelect} */}
+      <ProfClassification {...{ toTop }} />
+    </div>
   )
 }
 
@@ -229,6 +197,8 @@ export const SheetOperatorContainer = (
   sheetOperatorProp: SheetOperatorProps,
 ) => (
   <SheetContainerSkeleton title="选择干员" icon="person">
-    <SheetOperator {...sheetOperatorProp} />
+    <OperatorFilterProvider>
+      <SheetOperator {...sheetOperatorProp} />
+    </OperatorFilterProvider>
   </SheetContainerSkeleton>
 )

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

@@ -1,22 +1,17 @@
 import { Divider, H4, H5 } from '@blueprintjs/core'
 
 import clsx from 'clsx'
-import {
-  Dispatch,
-  FC,
-  ImgHTMLAttributes,
-  SetStateAction,
-  useMemo,
-  useState,
-} from 'react'
+import { FC, ImgHTMLAttributes, useEffect, useMemo, useState } from 'react'
 
 import { PROFESSIONS } from 'models/operator'
 
 import {
   DEFAULTPROFID,
   DEFAULTSUBPROFID,
   ProfFilter as ProfFilterOuter,
-} from './useOperatorFilter'
+  useOperatorFilterProvider,
+} from './SheetOperatorFilterProvider'
+import { defaultPagination } from './ShowMore'
 
 const formattedProfessions = [
   {
@@ -44,14 +39,15 @@ export const defaultProfFilter: ProfFilter = {
 }
 
 export interface ProfClassificationProp {
-  profFilter: ProfFilter
-  setProfFilter: Dispatch<SetStateAction<ProfFilter>>
+  toTop: () => void
 }
 
-export const ProfClassification: FC<ProfClassificationProp> = ({
-  profFilter: { selectedProf },
-  setProfFilter,
-}) => {
+export const ProfClassification: FC<ProfClassificationProp> = ({ toTop }) => {
+  const {
+    useProfFilterState: [{ selectedProf }, setProfFilter],
+    usePaginationFilterState: [_, setPaginationFilter],
+  } = useOperatorFilterProvider()
+
   const subProfs = useMemo(() => {
     return [
       { id: DEFAULTSUBPROFID.ALL, name: '全部' },
@@ -61,6 +57,11 @@ export const ProfClassification: FC<ProfClassificationProp> = ({
     ]
   }, [selectedProf])
 
+  useEffect(() => {
+    toTop()
+    setPaginationFilter(defaultPagination)
+  }, [selectedProf, setPaginationFilter, toTop])
+
   //   const ActionList = (
   //     <div className="absolute bottom-0">
   //       <Popover2

src/components/editor/operator/sheet/sheetOperator/useOperatorFilter.tsx renamed to src/components/editor/operator/sheet/sheetOperator/SheetOperatorFilterProvider.tsx

@@ -1,10 +1,21 @@
 import { useAtomValue } from 'jotai'
-import { useMemo } from 'react'
+import {
+  Dispatch,
+  FC,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 
 import { OperatorInfo as ModelsOperator, OPERATORS } from 'models/operator'
 import { favOperatorAtom } from 'store/useFavOperators'
 
 import { useSheet } from '../SheetProvider'
+import { defaultProfFilter } from './ProfClassification'
+import { defaultPagination } from './ShowMore'
 
 type OperatorInfo = ModelsOperator
 
@@ -33,6 +44,51 @@ export interface PaginationFilter {
   current: number
 }
 
+interface OperatorFilterProviderProp {
+  children: ReactNode
+}
+
+type UseState<T> = [T, Dispatch<SetStateAction<T>>]
+
+type OperatorFilterProviderData = {
+  usePaginationFilterState: UseState<PaginationFilter>
+  useProfFilterState: UseState<ProfFilter>
+  // useRarityFilterState: UseState<RarityFilter>
+  operatorFiltered: {
+    data: OperatorInfo[]
+    meta: {
+      dataTotal: number
+    }
+  }
+}
+
+const OperatorFilterContext = createContext<OperatorFilterProviderData>(
+  {} as OperatorFilterProviderData,
+)
+
+export const OperatorFilterProvider: FC<OperatorFilterProviderProp> = ({
+  children,
+}) => {
+  const [paginationFilter, setPaginationFilter] =
+    useState<PaginationFilter>(defaultPagination)
+  const [profFilter, setProfFilter] = useState<ProfFilter>(defaultProfFilter)
+
+  return (
+    <OperatorFilterContext.Provider
+      value={{
+        usePaginationFilterState: [paginationFilter, setPaginationFilter],
+        useProfFilterState: [profFilter, setProfFilter],
+        // useRarityFilterState: []
+        operatorFiltered: useOperatorFiltered(profFilter, paginationFilter),
+      }}
+    >
+      {children}
+    </OperatorFilterContext.Provider>
+  )
+}
+
+export const useOperatorFilterProvider = () => useContext(OperatorFilterContext)
+
 const generateCustomizedOperInfo = (name: string): OperatorInfo => ({
   id: 'customized-' + name,
   name,
@@ -43,7 +99,7 @@ const generateCustomizedOperInfo = (name: string): OperatorInfo => ({
   alt_name: 'custormized operator named' + name,
 })
 
-export const useOperatorAfterFiltered = (
+const useOperatorFiltered = (
   profFilter: ProfFilter,
   paginationFilter: PaginationFilter,
 ) => {

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

@@ -1,27 +1,35 @@
 import { H6 } from '@blueprintjs/core'
 
-import { Dispatch, FC, SetStateAction } from 'react'
+import { FC, useEffect } from 'react'
 
-import { PaginationFilter } from './useOperatorFilter'
+import {
+  PaginationFilter,
+  useOperatorFilterProvider,
+} from './SheetOperatorFilterProvider'
 
 export interface ShowMoreProp {
-  pagination: PaginationFilter
-  dataTotal: number
-  setPagination: Dispatch<SetStateAction<PaginationFilter>>
+  toTop: () => void
 }
 
 export const defaultPagination: PaginationFilter = {
   current: 1,
   size: 60,
 }
 
-export const ShowMore: FC<ShowMoreProp> = ({
-  pagination: { current, size },
-  dataTotal,
-  setPagination,
-}) => {
+export const ShowMore: FC<ShowMoreProp> = ({ toTop }) => {
+  const {
+    operatorFiltered: {
+      meta: { dataTotal },
+    },
+    usePaginationFilterState: [{ current, size }, setPagination],
+  } = useOperatorFilterProvider()
+
   const lastIndex = current * size
 
+  useEffect(() => {
+    if (current === 1) toTop()
+  }, [current, toTop])
+
   return (
     <div className="flex items-center justify-center pt-3 cursor-default">
       {lastIndex >= dataTotal ? (

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

@@ -1,7 +1,17 @@
-import { FC } from 'react'
+import { Dispatch, FC, SetStateAction } from 'react'
 
-export interface ToolBoxProp {}
+import { RarityFilter } from './SheetOperatorFilterProvider'
 
-export const ToolBox: FC<ToolBoxProp> = () => {
+export interface ToolBoxProp {
+  toTop: () => void
+  rarityFilter: RarityFilter
+  setRarityFilter: Dispatch<SetStateAction<RarityFilter>>
+}
+
+export const ToolBox: FC<ToolBoxProp> = ({
+  toTop,
+  rarityFilter,
+  setRarityFilter,
+}) => {
   return <>111</>
 }

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

@@ -0,0 +1,47 @@
+import { Button } from '@blueprintjs/core'
+
+import { FC, useMemo } from 'react'
+
+import { useSheet } from '../../SheetProvider'
+import { useOperatorFilterProvider } from '../SheetOperatorFilterProvider'
+
+export interface MutipleSelectProp {}
+
+export const MutipleSelect: FC<MutipleSelectProp> = () => {
+  const {
+    operatorFiltered: { data: operatorFilteredData },
+  } = useOperatorFilterProvider()
+  const { existedOperators } = useSheet()
+
+  const { cancelAllDisabled, selectAllDisabled } = useMemo(() => {
+    console.log('111')
+    const existedOperatorsNames = existedOperators.map(({ name }) => name)
+    return {
+      cancelAllDisabled: !operatorFilteredData.some(({ name }) =>
+        existedOperatorsNames.includes(name),
+      ),
+      selectAllDisabled: operatorFilteredData.every(({ name }) =>
+        existedOperatorsNames.includes(name),
+      ),
+    }
+  }, [existedOperators, operatorFilteredData])
+
+  return (
+    <div className="flex justify-center content-center">
+      <Button
+        minimal
+        icon="circle"
+        disabled={cancelAllDisabled}
+        title={`取消选择全部${existedOperators.length}位干员`}
+        onClick={cancelAll}
+      />
+      <Button
+        minimal
+        icon="selection"
+        title={`全选${operatorFilteredData.length}位干员`}
+        disabled={selectAllDisabled}
+        onClick={selectAll}
+      />
+    </div>
+  )
+}