feat: multiselect mode - select all and deselect all

Author: guansss

src/components/OperationList.tsx

@@ -1,24 +1,24 @@
-import { Button, NonIdealState } from '@blueprintjs/core'
+import { Button, Callout, NonIdealState } from '@blueprintjs/core'
+import { Tooltip2 } from '@blueprintjs/popover2'
 
 import { UseOperationsParams, useOperations } from 'apis/operation'
 import { useAtomValue } from 'jotai'
-import { ComponentType, ReactNode, useEffect } from 'react'
+import { ComponentType, ReactNode, useEffect, useState } from 'react'
 
 import { neoLayoutAtom } from 'store/pref'
 
 import { Operation } from '../models/operation'
 import { NeoOperationCard, OperationCard } from './OperationCard'
 import { withSuspensable } from './Suspensable'
+import { AddToOperationSetButton } from './operation-set/AddToOperationSet'
 
 interface OperationListProps extends UseOperationsParams {
   multiselect?: boolean
-  selectedOperations?: Operation[]
-  onSelect?: (operation: Operation, selected: boolean) => void
   onUpdate?: (params: { total: number }) => void
 }
 
 export const OperationList: ComponentType<OperationListProps> = withSuspensable(
-  ({ multiselect, selectedOperations, onSelect, onUpdate, ...params }) => {
+  ({ multiselect, onUpdate, ...params }) => {
     const neoLayout = useAtomValue(neoLayoutAtom)
 
     const { operations, total, setSize, isValidating, isReachingEnd } =
@@ -34,6 +34,25 @@ export const OperationList: ComponentType<OperationListProps> = withSuspensable(
       onUpdate?.({ total })
     }, [total, onUpdate])
 
+    const [selectedOperations, setSelectedOperations] = useState<Operation[]>(
+      [],
+    )
+    const updateSelection = (add: Operation[], remove: Operation[]) => {
+      setSelectedOperations((old) => {
+        return [
+          ...old.filter((op) => !remove.some((o) => o.id === op.id)),
+          ...add.filter((op) => !old.some((o) => o.id === op.id)),
+        ]
+      })
+    }
+    const onSelect = (operation: Operation, selected: boolean) => {
+      if (selected) {
+        updateSelection([operation], [])
+      } else {
+        updateSelection([], [operation])
+      }
+    }
+
     const items: ReactNode = neoLayout ? (
       <div
         className="grid gap-4"
@@ -59,6 +78,60 @@ export const OperationList: ComponentType<OperationListProps> = withSuspensable(
 
     return (
       <>
+        {multiselect && (
+          <Callout className="mb-4 p-0 select-none">
+            <details>
+              <summary className="px-2 py-4 cursor-pointer hover:bg-zinc-500 hover:bg-opacity-5">
+                已选择 {selectedOperations.length} 份作业
+              </summary>
+              <div className="p-2 flex flex-wrap gap-1">
+                {selectedOperations.map((operation) => (
+                  <Button
+                    key={operation.id}
+                    small
+                    minimal
+                    outlined
+                    rightIcon="cross"
+                    onClick={() => updateSelection([], [operation])}
+                  >
+                    {operation.parsedContent.doc.title}
+                  </Button>
+                ))}
+              </div>
+            </details>
+            <div className="absolute top-2 right-2 flex">
+              <Tooltip2 content="只能选择已加载的项目" placement="top">
+                <Button
+                  minimal
+                  icon="tick"
+                  onClick={() => updateSelection(operations, [])}
+                >
+                  全选
+                </Button>
+              </Tooltip2>
+              <Button
+                minimal
+                intent="danger"
+                icon="trash"
+                onClick={() => setSelectedOperations([])}
+              >
+                清空
+              </Button>
+              <AddToOperationSetButton
+                minimal
+                outlined
+                intent="primary"
+                icon="add-to-folder"
+                className="ml-2"
+                disabled={selectedOperations.length === 0}
+                operationIds={selectedOperations.map((op) => op.id)}
+              >
+                添加到作业集
+              </AddToOperationSetButton>
+            </div>
+          </Callout>
+        )}
+
         {items}
 
         {isReachingEnd && operations.length === 0 && (

src/components/Operations.tsx

@@ -1,7 +1,6 @@
 import {
   Button,
   ButtonGroup,
-  Callout,
   Card,
   Divider,
   H6,
@@ -22,12 +21,10 @@ import { OperationList } from 'components/OperationList'
 import { OperationSetList } from 'components/OperationSetList'
 import { neoLayoutAtom } from 'store/pref'
 
-import { Operation } from '../models/operation'
 import { LevelSelect } from './LevelSelect'
 import { OperatorFilter, useOperatorFilter } from './OperatorFilter'
 import { withSuspensable } from './Suspensable'
 import { UserFilter } from './UserFilter'
-import { AddToOperationSetButton } from './operation-set/AddToOperationSet'
 
 export const Operations: ComponentType = withSuspensable(() => {
   const [queryParams, setQueryParams] = useState<
@@ -46,7 +43,6 @@ export const Operations: ComponentType = withSuspensable(() => {
   const [neoLayout, setNeoLayout] = useAtom(neoLayoutAtom)
   const [tab, setTab] = useState<'operation' | 'operationSet'>('operation')
   const [multiselect, setMultiselect] = useState(false)
-  const [selectedOperations, setSelectedOperations] = useState<Operation[]>([])
 
   return (
     <>
@@ -191,43 +187,6 @@ export const Operations: ComponentType = withSuspensable(() => {
                 </ButtonGroup>
               </div>
             </div>
-            {multiselect && (
-              <Callout className="mt-2 p-0 select-none">
-                <details>
-                  <summary className="px-2 py-4 cursor-pointer hover:bg-zinc-500 hover:bg-opacity-5">
-                    已选择 {selectedOperations.length} 份作业
-                  </summary>
-                  <div className="p-2 flex flex-wrap gap-1">
-                    {selectedOperations.map((operation) => (
-                      <Button
-                        key={operation.id}
-                        small
-                        minimal
-                        rightIcon="cross"
-                        onClick={() =>
-                          setSelectedOperations((old) =>
-                            old.filter((op) => op.id !== operation.id),
-                          )
-                        }
-                      >
-                        {operation.parsedContent.doc.title}
-                      </Button>
-                    ))}
-                  </div>
-                </details>
-                <AddToOperationSetButton
-                  minimal
-                  outlined
-                  intent="primary"
-                  icon="add-to-folder"
-                  className="absolute top-2 right-2"
-                  disabled={selectedOperations.length === 0}
-                  operationIds={selectedOperations.map((op) => op.id)}
-                >
-                  添加到作业集
-                </AddToOperationSetButton>
-              </Callout>
-            )}
           </>
         )}
 
@@ -269,16 +228,6 @@ export const Operations: ComponentType = withSuspensable(() => {
           <OperationList
             {...queryParams}
             multiselect={multiselect}
-            selectedOperations={selectedOperations}
-            onSelect={(operation, selected) =>
-              setSelectedOperations((old) => {
-                const newList = old.filter((op) => op.id !== operation.id)
-                if (selected) {
-                  newList.push(operation)
-                }
-                return newList
-              })
-            }
             operator={operatorFilter.enabled ? operatorFilter : undefined}
             // 按热度排序时列表前几页的变化不会太频繁，可以不刷新第一页，节省点流量
             revalidateFirstPage={queryParams.orderBy !== 'hot'}