refactor(sheet): abandon using eventProxyHandle

Author: gemini2035

src/components/editor/operator/EditorSheet.tsx

@@ -14,25 +14,6 @@ type EditorSheetProps = SheetOperatorProps & SheetGroupProps
 export type Group = CopilotDocV1.Group
 export type Operator = CopilotDocV1.Operator
 
-export enum OperatorEventType {
-  BOX,
-  SKILL,
-}
-export enum GroupEventType {
-  ADD,
-  REMOVE,
-  PIN,
-  OPERS,
-  RENAME,
-  UPDATE,
-}
-export type SheetSubmitEventHandleType<
-  eventType extends OperatorEventType | GroupEventType,
-> = (
-  type: eventType,
-  value: eventType extends OperatorEventType ? Operator : Group,
-) => void
-
 const EditorOperatorSheet = (sheetProps: EditorSheetProps) => (
   <article className="overflow-y-auto">
     <SheetOperatorContainer {...sheetProps} />

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

@@ -3,13 +3,13 @@ import { Divider, H3, Icon, IconName, MaybeElement } from '@blueprintjs/core'
 import clsx from 'clsx'
 import { ReactNode } from 'react'
 
-interface SheetContainerSkeletonProps {
+export interface SheetContainerSkeletonProps {
   title: string
   icon: IconName | MaybeElement
   mini?: boolean
   className?: string
   rightOptions?: ReactNode
-  children: ReactNode
+  children?: ReactNode
 }
 
 export const SheetContainerSkeleton = ({

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

@@ -18,12 +18,7 @@ import { OPERATORS, PROFESSIONS } from 'models/operator'
 import { favGroupAtom, ignoreKeyDic } from 'store/useFavGroups'
 
 import { EditorPerformerGroupProps } from '../EditorPerformerGroup'
-import {
-  Group,
-  GroupEventType,
-  Operator,
-  SheetSubmitEventHandleType,
-} from '../EditorSheet'
+import { Group, Operator } from '../EditorSheet'
 import { SheetContainerSkeleton } from './SheetContainerSkeleton'
 import { GroupNoData } from './SheetNoneData'
 import { GroupItem } from './sheetGroup/SheetGroupItem'
@@ -35,7 +30,54 @@ export interface SheetGroupProps {
   removeGroup: UseFieldArrayRemove
 }
 
-export type GroupEventHandleType = SheetSubmitEventHandleType<GroupEventType>
+export interface GroupListModifyProp {
+  groupAddHandle?: (value: Group) => void
+  groupRemoveHandle?: (_id: string) => void
+  groupPinHandle?: (value: Group) => void
+  groupUpdateHandle?: (value: Group) => void
+}
+
+const EditorGroupName = ({
+  groupAddHandle,
+}: {
+  groupAddHandle: GroupListModifyProp['groupAddHandle']
+}) => {
+  const [groupName, setGroupName] = useState('')
+
+  const addGroupHandle = () => {
+    const name = groupName.trim()
+    if (!name) {
+      AppToaster.show({
+        message: '干员组名不能为空',
+        intent: Intent.DANGER,
+      })
+    } else {
+      groupAddHandle?.({ name })
+      setGroupName('')
+    }
+  }
+
+  return (
+    <div className="flex px-3 items-center">
+      <InputGroup
+        type="text"
+        value={groupName}
+        placeholder="输入干员组名"
+        onChange={(e) => setGroupName(e.target.value)}
+        fill
+      />
+      <div className="flex items-center">
+        <Button minimal icon="tick" title="添加" onClick={addGroupHandle} />
+        <Button
+          minimal
+          icon="reset"
+          title="重置"
+          onClick={() => setGroupName('')}
+        />
+      </div>
+    </div>
+  )
+}
 
 const SheetGroup = ({
   submitGroup,
@@ -116,48 +158,32 @@ const SheetGroup = ({
       { ...value },
     ])
 
-  const eventHandleProxy: GroupEventHandleType = (type, value) => {
-    switch (type) {
-      case GroupEventType.ADD: {
-        if (checkGroupExisted(value.name)) {
-          AppToaster.show({
-            message: '干员组已存在！',
-            intent: Intent.DANGER,
-          })
-        } else {
-          if (checkGroupPinned(value)) changeOperatorOfOtherGroups(value.opers)
-          submitGroup(value, undefined, true)
-        }
-        break
-      }
-      case GroupEventType.REMOVE: {
-        removeGroup(existedGroups.findIndex((item) => item._id === value._id))
-        break
-      }
-      case GroupEventType.PIN: {
-        if (checkGroupPinned(value))
-          setFavGroups([...favGroups].filter(({ name }) => name !== value.name))
-        else {
-          if (checkSamePinned(value.name)) setCoverGroup(value)
-          else updateFavGroup(value)
-        }
-        break
-      }
-      case GroupEventType.RENAME: {
-        submitGroup(value, undefined, true)
-        break
-      }
-      case GroupEventType.OPERS: {
-        changeOperatorOfOtherGroups(value.opers)
-        submitGroup(value, undefined, true)
-        break
-      }
-      case GroupEventType.UPDATE: {
-        submitGroup(value, undefined, true)
-        break
-      }
+  const groupAddHandle = (value: Group) => {
+    if (checkGroupExisted(value.name)) {
+      AppToaster.show({
+        message: '干员组已存在！',
+        intent: Intent.DANGER,
+      })
+    } else {
+      if (checkGroupPinned(value)) changeOperatorOfOtherGroups(value.opers)
+      submitGroup(value, undefined, true)
+    }
+  }
+  const groupRemoveHandle = (_id: string) => {
+    removeGroup(existedGroups.findIndex((item) => item._id === _id))
+  }
+  const groupPinHandle = (value: Group) => {
+    if (checkGroupPinned(value))
+      setFavGroups([...favGroups].filter(({ name }) => name !== value.name))
+    else {
+      if (checkSamePinned(value.name)) setCoverGroup(value)
+      else updateFavGroup(value)
     }
   }
+  const groupUpdateHandle = (value: Group) => {
+    changeOperatorOfOtherGroups(value.opers)
+    submitGroup(value, undefined, true)
+  }
 
   const [favGroups, setFavGroups] = useAtom(favGroupAtom)
 
@@ -172,7 +198,7 @@ const SheetGroup = ({
               mini
               className="sticky top-0 z-10 backdrop-blur-lg py-1"
             >
-              <EditorGroupName {...{ eventHandleProxy }} />
+              <EditorGroupName {...{ groupAddHandle }} />
             </SheetContainerSkeleton>
             <SheetContainerSkeleton title="已设置的干员组" icon="cog" mini>
               <div>
@@ -184,10 +210,11 @@ const SheetGroup = ({
                         existedGroup={existedGroups}
                         existedOperator={existedOperators}
                         groupInfo={item}
-                        editable
                         exist={checkGroupExisted(item.name)}
                         pinned={checkGroupPinned(item)}
-                        eventHandleProxy={eventHandleProxy}
+                        groupRemoveHandle={groupRemoveHandle}
+                        groupPinHandle={groupPinHandle}
+                        groupUpdateHandle={groupUpdateHandle}
                       />
                     ))}
                     <H6 className="my-2 text-center">
@@ -210,9 +237,8 @@ const SheetGroup = ({
                     <GroupItem
                       key={item.name}
                       groupInfo={item}
-                      editable={false}
                       exist={checkGroupExisted(item.name)}
-                      eventHandleProxy={eventHandleProxy}
+                      groupAddHandle={groupAddHandle}
                       pinned={false}
                     />
                   ))
@@ -226,9 +252,9 @@ const SheetGroup = ({
                     <GroupItem
                       key={item.name}
                       groupInfo={item}
-                      editable={false}
                       exist={checkGroupExisted(item.name)}
-                      eventHandleProxy={eventHandleProxy}
+                      groupAddHandle={groupAddHandle}
+                      groupPinHandle={groupPinHandle}
                       pinned
                     />
                   ))
@@ -255,48 +281,6 @@ const SheetGroup = ({
   )
 }
 
-const EditorGroupName = ({
-  eventHandleProxy,
-}: {
-  eventHandleProxy: GroupEventHandleType
-}) => {
-  const [groupName, setGroupName] = useState('')
-
-  const addGroupHandle = () => {
-    const name = groupName.trim()
-    if (!name) {
-      AppToaster.show({
-        message: '干员组名不能为空',
-        intent: Intent.DANGER,
-      })
-    } else {
-      eventHandleProxy(GroupEventType.ADD, { name })
-      setGroupName('')
-    }
-  }
-
-  return (
-    <div className="flex px-3 items-center">
-      <InputGroup
-        type="text"
-        value={groupName}
-        placeholder="输入干员组名"
-        onChange={(e) => setGroupName(e.target.value)}
-        fill
-      />
-      <div className="flex items-center">
-        <Button minimal icon="tick" title="添加" onClick={addGroupHandle} />
-        <Button
-          minimal
-          icon="reset"
-          title="重置"
-          onClick={() => setGroupName('')}
-        />
-      </div>
-    </div>
-  )
-}
-
 export const SheetGroupContainer: FC<SheetGroupProps> = (sheetGroupProps) => (
   <SheetContainerSkeleton title="设置干员组" icon="people">
     <SheetGroup {...sheetGroupProps} />

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

@@ -8,12 +8,7 @@ import { AppToaster } from 'components/Toaster'
 import { OPERATORS, PROFESSIONS } from 'models/operator'
 
 import { EditorPerformerOperatorProps } from '../EditorPerformerOperator'
-import {
-  Group,
-  Operator,
-  OperatorEventType,
-  SheetSubmitEventHandleType,
-} from '../EditorSheet'
+import { Group, Operator } from '../EditorSheet'
 import { SheetContainerSkeleton } from './SheetContainerSkeleton'
 import { OperatorNoData } from './SheetNoneData'
 import { OperatorItem } from './SheetOperatorItem'
@@ -25,9 +20,6 @@ export interface SheetOperatorProps {
   removeOperator: UseFieldArrayRemove
 }
 
-export type OperatorEventHandleType =
-  SheetSubmitEventHandleType<OperatorEventType>
-
 const defaultProf = [
   {
     id: 'all',
@@ -113,28 +105,22 @@ const SheetOperator = ({
       )
   }, [selectedSubProf, operatorsGroupedByProf, checkOperatorSelected])
 
-  const eventHandleProxy: OperatorEventHandleType = (type, value) => {
-    switch (type) {
-      case OperatorEventType.BOX: {
-        if (checkOperatorSelected(value.name))
-          if (existedOperators.find((item) => item.name === value.name))
-            removeOperator(
-              existedOperators.findIndex((item) => item._id === value._id),
-            )
-          else
-            AppToaster.show({
-              message: '该干员已被编组',
-              intent: Intent.DANGER,
-            })
-        else submitOperator(value, undefined, true)
+  const operatorSelectHandle = (operatorName: string) => {
+    if (checkOperatorSelected(operatorName))
+      if (existedOperators.find((item) => item.name === operatorName))
+        removeOperator(
+          existedOperators.findIndex(({ name }) => name === operatorName),
+        )
+      else
+        AppToaster.show({
+          message: `干员 ${operatorName} 已被编组`,
+          intent: Intent.DANGER,
+        })
+    else submitOperator({ name: operatorName }, undefined, true)
+  }
 
-        break
-      }
-      case OperatorEventType.SKILL: {
-        submitOperator(value, undefined, true)
-        break
-      }
-    }
+  const operatorSkillHandle = (value: Operator) => {
+    submitOperator(value, undefined, true)
   }
 
   // pagination about
@@ -294,9 +280,10 @@ const SheetOperator = ({
                     >
                       <OperatorItem
                         selected={checkOperatorSelected(operatorInfoName)}
-                        submitOperator={eventHandleProxy}
+                        onSkillChange={operatorSkillHandle}
                         operator={operatorDetail}
                         name={operatorInfoName}
+                        onClick={() => operatorSelectHandle(operatorInfoName)}
                       />
                     </div>
                   )

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

@@ -3,7 +3,6 @@ import { Card, CardProps } from '@blueprintjs/core'
 import clsx from 'clsx'
 
 import { OperatorAvatar } from '../EditorOperator'
-import { OperatorEventType } from '../EditorSheet'
 import { SkillAboutProps, SkillAboutTrigger } from './SheetOperatorSkillAbout'
 
 export interface OperatorItemPorps extends CardProps, SkillAboutProps {
@@ -18,10 +17,10 @@ export const OperatorItem = ({
   name,
   selected,
   operator,
-  submitOperator,
   horizontal,
   scaleDisable,
   readOnly,
+  onSkillChange,
   ...cardProps
 }: OperatorItemPorps) => (
   <Card
@@ -31,9 +30,6 @@ export const OperatorItem = ({
       !horizontal && 'flex-col justify-center',
     )}
     interactive={!selected}
-    onClick={() =>
-      submitOperator?.(OperatorEventType.BOX, operator || { name })
-    }
     {...cardProps}
   >
     <>
@@ -48,7 +44,7 @@ export const OperatorItem = ({
       </p>
     </>
     {!readOnly && selected && (
-      <SkillAboutTrigger {...{ operator, submitOperator }} />
+      <SkillAboutTrigger {...{ operator, onSkillChange }} />
     )}
   </Card>
 )