Merge pull request #14 from GeorgeZhang2035/perf/sheet

feat: onSubmit ready

Author: Gemini2035

src/components/editor/operator/EditorPerformer.tsx

@@ -312,13 +312,6 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
     setError,
     fromSheet,
   ) => {
-    const removeOperatorByArray = () =>
-      removeOperator(
-        group.opers
-          ?.map((item) => operators.findIndex(({ name }) => name === item.name))
-          .filter((item) => item !== -1),
-      )
-
     if (
       groups.find(({ name, _id }) => name === group.name && _id !== group._id)
     ) {
@@ -331,7 +324,6 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
         : findGroupById(getId(editingGroup!))
       if (existingGroup) {
         group._id = getId(existingGroup)
-        if (fromSheet) removeOperatorByArray()
         updateGroup(
           groups.findIndex(({ _id }) => _id === existingGroup._id),
           group,
@@ -344,7 +336,15 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
     } else {
       group._id = uniqueId()
       appendGroup(group)
-      if (group.opers?.length) removeOperatorByArray()
+      if (group.opers?.length) {
+        removeOperator(
+          group.opers
+            ?.map((item) =>
+              operators.findIndex(({ name }) => name === item.name),
+            )
+            .filter((item) => item !== -1),
+        )
+      }
     }
 
     return true

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

@@ -12,10 +12,6 @@ import { ShowMore } from './sheetOperator/ShowMore'
 
 export interface SheetOperatorProps {}
 
-// const defaultRarityFilter = Array.from(
-//   new Array(Math.max(...OPERATORS.map(({ rarity }) => rarity)) + 1).keys(),
-// ).slice(Math.min(...OPERATORS.map(({ rarity }) => rarity)))
-
 const SheetOperator: FC<SheetOperatorProps> = () => {
   const operatorScrollRef = useRef<HTMLDivElement>(null)
 

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

@@ -15,17 +15,20 @@ export interface SheetGroupOperatorSelectProp {
 interface CollapseButtonProps {
   isCollapse: boolean
   onClick: ButtonProps['onClick']
+  disabled?: ButtonProps['disabled']
 }
 
 export const CollapseButton: FC<CollapseButtonProps> = ({
   isCollapse,
   onClick,
+  disabled,
 }) => (
   <Button
     icon={isCollapse ? 'collapse-all' : 'expand-all'}
     title={`${isCollapse ? '折叠' : '展开'}所包含干员`}
     minimal
     className="cursor-pointer ml-1"
+    disabled={disabled}
     onClick={onClick}
   />
 )

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

@@ -185,7 +185,7 @@ export const SheetGroupItem: FC<SheetGroupItemProp> = ({
                   onOperatorSkillChange={onOperatorSkillChange}
                 />
               ))
-            : OperatorNoData}
+            : !selected && OperatorNoData}
           {selected && <SheetOperatorEditor {...groupInfo} />}
         </div>
       </Collapse>

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

@@ -17,6 +17,7 @@ import {
   FC,
   ReactNode,
   SetStateAction,
+  useMemo,
   useState,
 } from 'react'
 
@@ -26,6 +27,7 @@ import {
   SheetContainerSkeleton,
   SheetContainerSkeletonProps,
 } from '../SheetContainerSkeleton'
+import { OperatorNoData } from '../SheetNoneData'
 import { useSheet } from '../SheetProvider'
 import { CollapseButton } from './CollapseButton'
 
@@ -38,6 +40,7 @@ export const SheetOperatorEditor: FC<SheetOperatorEditorProp> = ({
     <Popover2
       className="w-full"
       content={<SheetOperatorEditorForm {...SheetOperatorEditorFormProps} />}
+      position={Position.TOP}
     >
       <Card
         className="flex items-center justify-center"
@@ -74,27 +77,53 @@ const SheetOperatorEditorForm: FC<SheetOperatorEditorFormProp> = ({
       operName,
     })),
   )
+  const otherGroups = useMemo(
+    () =>
+      existedGroups.filter(
+        ({ name: existedName, opers }) =>
+          existedName !== name && !!opers?.length,
+      ),
+    [existedGroups, name],
+  )
 
   const onSubmit: DetailedHTMLProps<
     React.FormHTMLAttributes<HTMLFormElement>,
     HTMLFormElement
   >['onSubmit'] = (e) => {
+    console.log(selectedOperators)
     e.preventDefault()
+    const targetGroup = existedGroups.find(
+      ({ name: exsitedName }) => exsitedName === name,
+    ) || { name, opers: [] }
     const deleteArray: number[] = []
+    // const needModifyGroup: Record<Group['name']>
     const opers = selectedOperators.map(({ groupName, operName }) => {
       if (groupName) {
-        const targetGroup = existedGroups.find(({ name }) => name === groupName)
-        return existedGroups
-          .find(({ name }) => name === groupName)
-          ?.opers?.find(({ name }) => name === operName)
+        const { opers: otherGroupOpers, ...rest } = existedGroups.find(
+          ({ name }) => name === groupName,
+        ) || { name: groupName, opers: [] }
+        const targetIndex =
+          otherGroupOpers?.findIndex(
+            ({ name: otherOpersName }) => otherOpersName === operName,
+          ) || -1
+        const target = otherGroupOpers?.splice(
+          Math.max(targetIndex - 1, 0),
+          1,
+        )[0]
+        console.log(target)
+        console.log(otherGroupOpers)
+        submitGroup({ ...rest, opers: otherGroupOpers }, undefined, true)
+        return target
       } else {
         const index = existedOperators.findIndex(
           ({ name }) => name === operName,
         )
         deleteArray.push(index)
+        removeOperator(deleteArray)
         return existedOperators[index]
       }
-    })
+    }) as Group['opers']
+    submitGroup({ ...targetGroup, opers }, undefined, true)
   }
 
   const onReset = () => {
@@ -135,42 +164,42 @@ const SheetOperatorEditorForm: FC<SheetOperatorEditorFormProp> = ({
           <OperatorSelectorSkeleton
             icon="people"
             title="其他分组干员"
-            collapseDisabled={!existedOperators?.length}
+            collapseDisabled={!otherGroups?.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,
-                            )
+            {otherGroups.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>
-                  <OperatorSelectorItem
-                    {...{ selectedOperators, setSelectedOperators, opers }}
+                        )
+                          return
+                        setSelectedOperators((prev) => [
+                          ...prev,
+                          { operName: name, groupName: otherGroupName },
+                        ])
+                      })
+                    }
                   />
                 </div>
-              ))}
+                <OperatorSelectorItem
+                  {...{
+                    selectedOperators,
+                    setSelectedOperators,
+                    opers,
+                    groupName: otherGroupName,
+                  }}
+                />
+              </div>
+            ))}
           </OperatorSelectorSkeleton>
         </div>
         <div className="flex p-0.5">
@@ -264,12 +293,17 @@ const OperatorSelectorSkeleton: FC<{
         <CollapseButton
           isCollapse={isOpen}
           onClick={() => setIsOpen((prev) => !prev)}
+          disabled={collapseDisabled}
         />
       }
     >
-      <Collapse isOpen={isOpen} className="m-0.5">
-        {children}
-      </Collapse>
+      {collapseDisabled ? (
+        OperatorNoData
+      ) : (
+        <Collapse isOpen={isOpen} className="m-0.5">
+          {children}
+        </Collapse>
+      )}
     </SheetContainerSkeleton>
   )
 }