Merge pull request #10 from GeorgeZhang2035/perf/sheet

temp storage

Author: Gemini2035

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

@@ -93,22 +93,4 @@ export const OperatorItem = ({
       )}
     </Card>
   )
-}
-
-// export interface OperatorItemV2Prop {
-//   name: string
-//   selected: boolean
-//   grouped: boolean
-//   simpleMode: boolean
-// }
-
-// export const OperatorItemV2: FC<OperatorItemV2Prop> = ({
-//   name,
-//   selected,
-//   grouped,
-// }) => {
-//   const horizontal = selected && grouped
-//   const { existedOperators, existedGroups } = useSheet()
-
-//   return <>111</>
-// }
+}

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

@@ -73,6 +73,7 @@ export const GroupItem = ({
         {groupInfo.opers?.length
           ? groupInfo.opers?.map((item) => (
               <OperatorInGroupItem
+                key={item.name}
                 operatorInfo={item}
                 onOperatorSkillChange={changeGroupedOperatorSkillHandle}
               />

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

@@ -14,11 +14,21 @@ import {
 import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
-import { DetailedHTMLProps, FC, useState } from 'react'
+import {
+  DetailedHTMLProps,
+  Dispatch,
+  FC,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from 'react'
 
 import { OperatorAvatar } from '../../EditorOperator'
 import { Group, Operator } from '../../EditorSheet'
-import { SheetContainerSkeleton } from '../SheetContainerSkeleton'
+import {
+  SheetContainerSkeleton,
+  SheetContainerSkeletonProps,
+} from '../SheetContainerSkeleton'
 import { OperatorItem } from '../SheetOperatorItem'
 import { useSheet } from '../SheetProvider'
 import {
@@ -48,9 +58,8 @@ export const SheetOperatorEditor: FC<SheetOperatorEditorProp> = ({
 }
 
 type OperatorInSheetOperatorEditor = {
-  groupName: string | undefined
-  operatorInfo: Operator
-  selected: boolean
+  groupName?: string
+  operName: string
 }
 
 interface SheetOperatorEditorFormProp {
@@ -67,46 +76,138 @@ const SheetOperatorEditorForm: FC<SheetOperatorEditorFormProp> = ({
   name,
   opers = [],
 }) => {
-  const { existedOperators } = useSheet()
+  const { existedOperators, existedGroups } = useSheet()
   const [selectedOperators, setSelectedOperators] = useState<
     OperatorInSheetOperatorEditor[]
   >(
-    opers.map((item) => ({
+    opers.map(({ name: operName }) => ({
       groupName: name,
-      operatorInfo: item,
-      selected: true,
+      operName,
     })),
   )
 
   const onSubmit: FormHTMLElement['onSubmit'] = (e) => {
     e.preventDefault()
   }
 
+  const onReset: FormHTMLElement['onReset'] = (e) => {
+    // e.preventDefault()
+    console.log('111')
+    setSelectedOperators(
+      opers.map(({ name: operName }) => ({
+        groupName: name,
+        operName,
+      })),
+    )
+  }
+
   return (
     <SheetContainerSkeleton title="选择干员" icon="select">
-      <form
-        className="flex mt-3"
-        onSubmit={onSubmit}
-        onReset={() => console.log('222')}
-      >
-        <Button text="确认" className={Classes.POPOVER_DISMISS} type="submit" />
-        <Popover2
-          captureDismiss
-          content={
-            <div className="flex items-center">
-              <p>所有未保存的数据均会丢失，确认继续？</p>
-              <Button
-                type="reset"
-                text="继续"
-                className={clsx(Classes.POPOVER_DISMISS, 'mx-1')}
+      <form className="mt-3" onSubmit={onSubmit} onReset={onReset}>
+        <div className="max-h-96 overflow-y-auto overflow-x-hidden">
+          <OperatorSelectorSkeleton
+            icon="person"
+            title="已选择干员"
+            collapseDisabled={!opers.length}
+          >
+            {opers.map(({ name }) => (
+              <OperatorItemInSheetOperatorEditor
+                setSelectedOperators={setSelectedOperators}
+                selected={
+                  !!selectedOperators.find(({ operName }) => operName === name)
+                }
+                operName={name}
               />
-              <Button text="取消" className={Classes.POPOVER_DISMISS} />
-            </div>
-          }
-          position={Position.TOP}
-        >
-          <Button intent={Intent.DANGER} className="ml-1" text="重置" />
-        </Popover2>
+            ))}
+          </OperatorSelectorSkeleton>
+          <OperatorSelectorSkeleton
+            icon="person"
+            title="未选择干员"
+            collapseDisabled={!existedOperators.length}
+          >
+            {existedOperators.map(({ name }) => (
+              <OperatorItemInSheetOperatorEditor
+                operName={name}
+                selected={
+                  !!selectedOperators.find(({ operName }) => operName === name)
+                }
+                setSelectedOperators={setSelectedOperators}
+              />
+            ))}
+          </OperatorSelectorSkeleton>
+          <OperatorSelectorSkeleton
+            icon="people"
+            title="其他分组干员"
+            collapseDisabled={!existedOperators?.length}
+          >
+            {existedGroups
+              .filter(
+                ({ name: existedName, opers }) =>
+                  existedName !== name && !!opers?.length,
+              )
+              .map(({ name: otherGroupName, opers }) => (
+                <div key={otherGroupName}>
+                  <div className="flex flex-row-reverse items-center">
+                    <H6 className="p-0 m-0">{otherGroupName}</H6>
+                    <Button
+                      minimal
+                      icon="arrow-top-left"
+                      title="全选"
+                      onClick={() =>
+                        opers?.forEach(({ name }) => {
+                          if (
+                            selectedOperators.find(
+                              ({ operName }) => operName === name,
+                            )
+                          )
+                            return
+                          setSelectedOperators((prev) => [
+                            ...prev,
+                            { operName: name, groupName: otherGroupName },
+                          ])
+                        })
+                      }
+                    />
+                  </div>
+                  {opers?.map(({ name }) => (
+                    <OperatorItemInSheetOperatorEditor
+                      operName={name}
+                      setSelectedOperators={setSelectedOperators}
+                      selected={
+                        !!selectedOperators.find(
+                          ({ operName }) => operName === name,
+                        )
+                      }
+                    />
+                  ))}
+                </div>
+              ))}
+          </OperatorSelectorSkeleton>
+        </div>
+        <div className="flex p-0.5">
+          <Button
+            text="确认"
+            className={Classes.POPOVER_DISMISS}
+            type="submit"
+          />
+          <Popover2
+            captureDismiss
+            content={
+              <div className="flex items-center">
+                <p>所有未保存的数据均会丢失，确认继续？</p>
+                <Button
+                  type="reset"
+                  text="继续"
+                  className={clsx(Classes.POPOVER_DISMISS, 'mx-1')}
+                />
+                <Button text="取消" className={Classes.POPOVER_DISMISS} />
+              </div>
+            }
+            position={Position.TOP}
+          >
+            <Button intent={Intent.DANGER} className="ml-1" text="重置" />
+          </Popover2>
+        </div>
       </form>
     </SheetContainerSkeleton>
   )
@@ -115,15 +216,63 @@ const SheetOperatorEditorForm: FC<SheetOperatorEditorFormProp> = ({
 const OperatorItemInSheetOperatorEditor: FC<
   {
     selected: boolean
-    name: Operator['name']
-  } & CardProps
-> = ({ selected, name, ...cardProps }) => (
-  <Card {...cardProps} className={clsx(selected && 'scale-90 bg-gray-200')}>
-    <OperatorAvatar name={name} />
-    <p className="font-bold leading-none text-center mt-3 truncate">{name}</p>
-  </Card>
-)
-
+    setSelectedOperators: Dispatch<
+      SetStateAction<OperatorInSheetOperatorEditor[]>
+    >
+  } & OperatorInSheetOperatorEditor
+> = ({ selected, operName, groupName, setSelectedOperators }) => {
+  const onOperatorSelect = () => {
+    setSelectedOperators((prev) =>
+      selected
+        ? prev.filter(
+            ({ operName: selectedOperName }) => selectedOperName !== operName,
+          )
+        : [...prev, { groupName, operName }],
+    )
+  }
+  return (
+    <Card
+      interactive={!selected}
+      className={clsx(
+        selected && 'scale-90 bg-gray-200',
+        'w-1/4 p-0.5 flex flex-col items-center cursor-pointer',
+      )}
+      onClick={onOperatorSelect}
+    >
+      <OperatorAvatar name={operName} size="large" />
+      <p className="font-bold leading-none text-center mt-3 truncate">
+        {operName}
+      </p>
+    </Card>
+  )
+}
 
+const OperatorSelectorSkeleton: FC<{
+  collapseDisabled: boolean
+  title: SheetContainerSkeletonProps['title']
+  icon: SheetContainerSkeletonProps['icon']
+  children: ReactNode
+}> = ({ children, collapseDisabled, ...sheetContainerSkeletonProps }) => {
+  const [isOpen, setIsOpen] = useState(true)
 
-const OperatorSelectInGroupItem: FC = () => {}
+  return (
+    <SheetContainerSkeleton
+      {...sheetContainerSkeletonProps}
+      mini
+      className="w-96"
+      rightOptions={
+        <Button
+          onClick={() => setIsOpen((prev) => !prev)}
+          icon={isOpen ? 'collapse-all' : 'expand-all'}
+          title={`${isOpen ? '折叠' : '展开'}所包含干员`}
+          minimal
+          className="cursor-pointer ml-1"
+        />
+      }
+    >
+      <Collapse isOpen={isOpen} className="m-0.5">
+        {children}
+      </Collapse>
+    </SheetContainerSkeleton>
+  )
+}