perf(sheet): ui of group optimized!

Author: GeorgeZhang2035

src/components/editor/operator/EditorPerformer.tsx

@@ -229,7 +229,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
         ({ name, _id }) => name === operator.name && _id !== operator._id,
       )
     ) {
-      setError('name', { message: '干员已存在' })
+      setError?.('name', { message: '干员已存在' })
       return false
     }
 
@@ -297,7 +297,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
 
         setEditingOperator(undefined)
       } else {
-        setError('global' as any, { message: '未能找到要更新的干员' })
+        setError?.('global' as any, { message: '未能找到要更新的干员' })
         return false
       }
     } else {
@@ -324,7 +324,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
     if (
       groups.find(({ name, _id }) => name === group.name && _id !== group._id)
     ) {
-      setError('name', { message: '干员组已存在' })
+      setError?.('name', { message: '干员组已存在' })
       return false
     }
     if (editingGroup || fromSheet) {
@@ -340,7 +340,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
         )
         setEditingGroup(undefined)
       } else {
-        setError('global' as any, { message: '未能找到要更新的干员组' })
+        setError?.('global' as any, { message: '未能找到要更新的干员组' })
         return false
       }
     } else {

src/components/editor/operator/EditorPerformerGroup.tsx

@@ -16,7 +16,7 @@ export interface EditorPerformerGroupProps {
   group?: CopilotDocV1.Group
   submit: (
     group: CopilotDocV1.Group,
-    setError: UseFormSetError<CopilotDocV1.Group>,
+    setError?: UseFormSetError<CopilotDocV1.Group>,
     fromSheet?: boolean,
   ) => boolean
   onCancel: () => void

src/components/editor/operator/EditorPerformerOperator.tsx

@@ -25,7 +25,7 @@ export interface EditorPerformerOperatorProps {
   groups: CopilotDocV1.Group[]
   submit: (
     values: EditorOperatorFormValues,
-    setError: UseFormSetError<EditorOperatorFormValues>,
+    setError?: UseFormSetError<EditorOperatorFormValues>,
     fromSheet?: boolean,
   ) => boolean
   onCancel: () => void

src/components/editor/operator/EditorSheet.tsx

@@ -1,6 +1,6 @@
 import { Button, Drawer, DrawerSize } from '@blueprintjs/core'
 
-import { useMemo, useState } from 'react'
+import { FC, useMemo, useState } from 'react'
 
 import { CopilotDocV1 } from 'models/copilot.schema'
 
@@ -21,7 +21,7 @@ const EditorOperatorSheet = (sheetProps: EditorSheetProps) => (
   </article>
 )
 
-export const EditorSheetTrigger = (sheetProps: EditorSheetProps) => {
+export const EditorSheetTrigger: FC<EditorSheetProps> = (sheetProps) => {
   const [open, setOpen] = useState(false)
   const miniMedia = useMemo(() => window.innerWidth < 600, [])
   return (

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

@@ -10,8 +10,8 @@ import {
 
 import { useAtom } from 'jotai'
 import { isEqual, omit } from 'lodash-es'
-import { useMemo, useState } from 'react'
-import { UseFieldArrayRemove, UseFormSetError } from 'react-hook-form'
+import { FC, useMemo, useState } from 'react'
+import { UseFieldArrayRemove } from 'react-hook-form'
 
 import { AppToaster } from 'components/Toaster'
 import { CopilotDocV1 } from 'models/copilot.schema'
@@ -106,10 +106,7 @@ const SheetGroup = ({
   }
   const checkSamePinned = (target: string) =>
     !!favGroups.find(({ name }) => name === target)
-  const changeOperatorOfOtherGroups = (
-    target: Operator[] | undefined,
-    errHandle: UseFormSetError<Group>,
-  ) => {
+  const changeOperatorOfOtherGroups = (target: Operator[] | undefined) => {
     target?.forEach((item) => {
       existedGroups.forEach((groupItem) => {
         const oldLength = groupItem.opers?.length || 0
@@ -118,7 +115,7 @@ const SheetGroup = ({
             (operItem) => operItem.name !== item.name,
           )
           if (groupItem.opers?.length !== oldLength)
-            submitGroup(groupItem, errHandle, true)
+            submitGroup(groupItem, undefined, true)
         }
       })
     })
@@ -129,12 +126,7 @@ const SheetGroup = ({
       { ...value },
     ])
 
-  const eventHandleProxy = (
-    type: EventType,
-    value: Group,
-    setError?: UseFormSetError<Group>,
-  ) => {
-    const errHandle = setError || function () {}
+  const eventHandleProxy = (type: EventType, value: Group) => {
     switch (type) {
       case 'add': {
         if (checkGroupExisted(value.name)) {
@@ -143,9 +135,8 @@ const SheetGroup = ({
             intent: Intent.DANGER,
           })
         } else {
-          if (checkGroupPinned(value))
-            changeOperatorOfOtherGroups(value.opers, errHandle)
-          submitGroup(value, errHandle)
+          if (checkGroupPinned(value)) changeOperatorOfOtherGroups(value.opers)
+          submitGroup(value)
         }
         break
       }
@@ -163,16 +154,16 @@ const SheetGroup = ({
         break
       }
       case 'rename': {
-        submitGroup(value, errHandle, true)
+        submitGroup(value, undefined, true)
         break
       }
       case 'opers': {
-        changeOperatorOfOtherGroups(value.opers, errHandle)
-        submitGroup(value, errHandle, true)
+        changeOperatorOfOtherGroups(value.opers)
+        submitGroup(value, undefined, true)
         break
       }
       case 'update': {
-        submitGroup(value, errHandle, true)
+        submitGroup(value, undefined, true)
         break
       }
     }
@@ -291,11 +282,7 @@ const SheetGroup = ({
 const EditorGroupName = ({
   eventHandleProxy,
 }: {
-  eventHandleProxy: (
-    type: EventType,
-    value: Group,
-    setError?: UseFormSetError<Group> | undefined,
-  ) => void
+  eventHandleProxy: (type: EventType, value: Group) => void
 }) => {
   const [groupName, setGroupName] = useState('')
 
@@ -346,7 +333,7 @@ const EditorGroupName = ({
   )
 }
 
-export const SheetGroupContainer = (sheetGroupProps: SheetGroupProps) => (
+export const SheetGroupContainer: FC<SheetGroupProps> = (sheetGroupProps) => (
   <SheetContainerSkeleton title="设置干员组" icon="people">
     <SheetGroup {...sheetGroupProps} />
   </SheetContainerSkeleton>

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

@@ -12,7 +12,7 @@ import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
 import { useMemo, useRef, useState } from 'react'
-import { UseFormSetError, useForm } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 
 import { CardDeleteOption } from 'components/editor/CardOptions'
 import { CopilotDocV1 } from 'models/copilot.schema'
@@ -61,11 +61,8 @@ export const GroupItem = ({
       eventHandleProxy('update', groupInfoCopy)
     }
   }
-  const renameEventHandle = (
-    name: string,
-    errorHandle: UseFormSetError<Group>,
-  ) => {
-    eventHandleProxy('rename', { ...groupInfo, name }, errorHandle)
+  const renameEventHandle = (name: string) => {
+    eventHandleProxy('rename', { ...groupInfo, name })
   }
 
   const OperatorsPart = useMemo(
@@ -175,13 +172,13 @@ const GroupTitle = ({
   renameSubmit,
 }: {
   editable: boolean
-  renameSubmit: (newName: string, errorHandle: UseFormSetError<Group>) => void
+  renameSubmit: (newName: string) => void
   groupTitle: string
 }) => {
   const [editName, setEditName] = useState('')
   const [nameEditState, setNameEditState] = useState(false)
   const [alertState, setAlertState] = useState(false)
-  const { register, handleSubmit, setError, reset } = useForm<Group>()
+  const { register, handleSubmit, reset } = useForm<Group>()
   // handle differ priority of capture events
   const ignoreBlur = useRef(false)
   const blurHandle = () => {
@@ -270,7 +267,7 @@ const GroupTitle = ({
         className="flex items-center"
         onSubmit={handleSubmit(() => {
           ignoreBlur.current = true
-          renameSubmit(editName || groupTitle, setError)
+          renameSubmit(editName || groupTitle)
           setNameEditState(false)
           inputRef.current?.blur()
         })}

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

@@ -13,8 +13,7 @@ import {
 import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
-import { useMemo, useState } from 'react'
-import { UseFormSetError } from 'react-hook-form'
+import { FC, useMemo, useState } from 'react'
 
 import { Group, Operator } from '../../EditorSheet'
 import { SheetContainerSkeleton } from '../SheetContainerSkeleton'
@@ -25,11 +24,7 @@ export interface SheetGroupOperatorSelectProp {
   existedOperator?: Operator[]
   existedGroup?: Group[]
   groupInfo: Group
-  eventHandleProxy: (
-    type: EventType,
-    value: Group,
-    setError?: UseFormSetError<Group>,
-  ) => void
+  eventHandleProxy: (type: EventType, value: Group) => void
 }
 
 const SheetGroupOperatorSelect = ({
@@ -234,9 +229,9 @@ const SheetGroupOperatorSelect = ({
   )
 }
 
-export const SheetGroupOperatorSelectTrigger = (
-  sheetGroupOperatorSelectProp: SheetGroupOperatorSelectProp,
-) => (
+export const SheetGroupOperatorSelectTrigger: FC<
+  SheetGroupOperatorSelectProp
+> = (sheetGroupOperatorSelectProp) => (
   <Popover2
     className="w-full mt-1"
     content={<SheetGroupOperatorSelect {...sheetGroupOperatorSelectProp} />}