Skip to content

Commit 34bb6ad

Browse files
author
gemini2035
committed
refactor(sheet): type optimized
1 parent f8e7da6 commit 34bb6ad

File tree

10 files changed

+104
-72
lines changed

10 files changed

+104
-72
lines changed

‎src/components/editor/operator/EditorOperator.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const createArbitraryOperator = (name: string): OperatorInfo => ({
2525
name,
2626
alias: '',
2727
alt_name: '',
28-
pron: '',
2928
subProf: '',
3029
})
3130

‎src/components/editor/operator/EditorPerformer.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
256256
} else appendOperator(operator)
257257
}
258258

259-
if (fromSheet || editingOperator) {
259+
if ((fromSheet && operator._id) || editingOperator) {
260260
const existingOperator = fromSheet
261261
? operator
262262
: findOperatorById(getId(editingOperator!))
@@ -312,22 +312,20 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
312312
setError,
313313
fromSheet,
314314
) => {
315-
const removeOperatorByArray = () => {
316-
const matchNumbers: number[] = []
317-
group.opers?.forEach((item) =>
318-
matchNumbers.push(
319-
operators.findIndex(({ name }) => name === item.name),
320-
),
315+
const removeOperatorByArray = () =>
316+
removeOperator(
317+
group.opers
318+
?.map((item) => operators.findIndex(({ name }) => name === item.name))
319+
.filter((item) => item !== -1),
321320
)
322-
removeOperator(matchNumbers.filter((item) => item !== -1))
323-
}
321+
324322
if (
325323
groups.find(({ name, _id }) => name === group.name && _id !== group._id)
326324
) {
327325
setError?.('name', { message: '干员组已存在' })
328326
return false
329327
}
330-
if (editingGroup || fromSheet) {
328+
if (editingGroup || (fromSheet && group._id)) {
331329
const existingGroup = fromSheet
332330
? group
333331
: findGroupById(getId(editingGroup!))

‎src/components/editor/operator/EditorSheet.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,25 @@ type EditorSheetProps = SheetOperatorProps & SheetGroupProps
1414
export type Group = CopilotDocV1.Group
1515
export type Operator = CopilotDocV1.Operator
1616

17+
export enum OperatorEventType {
18+
BOX,
19+
SKILL,
20+
}
21+
export enum GroupEventType {
22+
ADD,
23+
REMOVE,
24+
PIN,
25+
OPERS,
26+
RENAME,
27+
UPDATE,
28+
}
29+
export type SheetSubmitEventHandleType<
30+
eventType extends OperatorEventType | GroupEventType,
31+
> = (
32+
type: eventType,
33+
value: eventType extends OperatorEventType ? Operator : Group,
34+
) => void
35+
1736
const EditorOperatorSheet = (sheetProps: EditorSheetProps) => (
1837
<article className="overflow-y-auto">
1938
<SheetOperatorContainer {...sheetProps} />

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

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,18 @@ import { UseFieldArrayRemove } from 'react-hook-form'
1616
import { AppToaster } from 'components/Toaster'
1717
import { CopilotDocV1 } from 'models/copilot.schema'
1818
import { OPERATORS, PROFESSIONS } from 'models/operator'
19-
import { favGroupAtom } from 'store/useFavGroups'
19+
import { favGroupAtom, ignoreKeyDic } from 'store/useFavGroups'
2020

2121
import { EditorPerformerGroupProps } from '../EditorPerformerGroup'
22-
import { Group } from '../EditorSheet'
22+
import {
23+
Group,
24+
GroupEventType,
25+
SheetSubmitEventHandleType,
26+
} from '../EditorSheet'
2327
import { SheetContainerSkeleton } from './SheetContainerSkeleton'
2428
import { GroupNoData } from './SheetNoneData'
2529
import { GroupItem } from './sheetGroup/SheetGroupItem'
2630

27-
export type EventType = 'add' | 'remove' | 'pin' | 'opers' | 'rename' | 'update'
28-
2931
type Operator = CopilotDocV1.Operator
3032

3133
export interface SheetGroupProps {
@@ -35,6 +37,8 @@ export interface SheetGroupProps {
3537
removeGroup: UseFieldArrayRemove
3638
}
3739

40+
export type GroupEventHandleType = SheetSubmitEventHandleType<GroupEventType>
41+
3842
const SheetGroup = ({
3943
submitGroup,
4044
existedGroups,
@@ -78,13 +82,13 @@ const SheetGroup = ({
7882
!!existedGroups.find((item) => item.name === target)
7983
const checkGroupPinned = (
8084
target: Group,
81-
ignoreKeyDic: string[] = ['_id', 'id'],
85+
ignoreKey: string[] = ignoreKeyDic,
8286
) => {
8387
const checkTarget = favGroups.find((item) => item.name === target.name)
8488
if (checkTarget) {
8589
return isEqualWith(
86-
omit(checkTarget, ignoreKeyDic),
87-
omit(target, ignoreKeyDic),
90+
checkTarget,
91+
omit(target, ignoreKey),
8892
({ opers: aOpers }, { opers: bOpers }) =>
8993
isEqual(
9094
aOpers.map((item) => omit(item, ignoreKeyDic)),
@@ -117,25 +121,25 @@ const SheetGroup = ({
117121
{ ...value },
118122
])
119123

120-
const eventHandleProxy = (type: EventType, value: Group) => {
124+
const eventHandleProxy: GroupEventHandleType = (type, value) => {
121125
switch (type) {
122-
case 'add': {
126+
case GroupEventType.ADD: {
123127
if (checkGroupExisted(value.name)) {
124128
AppToaster.show({
125129
message: '干员组已存在！',
126130
intent: Intent.DANGER,
127131
})
128132
} else {
129133
if (checkGroupPinned(value)) changeOperatorOfOtherGroups(value.opers)
130-
submitGroup(value)
134+
submitGroup(value, undefined, true)
131135
}
132136
break
133137
}
134-
case 'remove': {
138+
case GroupEventType.REMOVE: {
135139
removeGroup(existedGroups.findIndex((item) => item._id === value._id))
136140
break
137141
}
138-
case 'pin': {
142+
case GroupEventType.PIN: {
139143
if (checkGroupPinned(value))
140144
setFavGroups([...favGroups].filter(({ name }) => name !== value.name))
141145
else {
@@ -144,16 +148,16 @@ const SheetGroup = ({
144148
}
145149
break
146150
}
147-
case 'rename': {
151+
case GroupEventType.RENAME: {
148152
submitGroup(value, undefined, true)
149153
break
150154
}
151-
case 'opers': {
155+
case GroupEventType.OPERS: {
152156
changeOperatorOfOtherGroups(value.opers)
153157
submitGroup(value, undefined, true)
154158
break
155159
}
156-
case 'update': {
160+
case GroupEventType.UPDATE: {
157161
submitGroup(value, undefined, true)
158162
break
159163
}
@@ -259,7 +263,7 @@ const SheetGroup = ({
259263
const EditorGroupName = ({
260264
eventHandleProxy,
261265
}: {
262-
eventHandleProxy: (type: EventType, value: Group) => void
266+
eventHandleProxy: GroupEventHandleType
263267
}) => {
264268
const [groupName, setGroupName] = useState('')
265269

@@ -271,7 +275,7 @@ const EditorGroupName = ({
271275
intent: Intent.DANGER,
272276
})
273277
} else {
274-
eventHandleProxy('add', { name })
278+
eventHandleProxy(GroupEventType.ADD, { name })
275279
setGroupName('')
276280
}
277281
}

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@ import { Button, Divider, H4, H5, H6, Intent } from '@blueprintjs/core'
22

33
import clsx from 'clsx'
44
import { useEffect, useMemo, useRef, useState } from 'react'
5-
import { UseFieldArrayRemove, UseFormSetError } from 'react-hook-form'
5+
import { UseFieldArrayRemove } from 'react-hook-form'
66

77
import { AppToaster } from 'components/Toaster'
8-
import { CopilotDocV1 } from 'models/copilot.schema'
98
import { OPERATORS, PROFESSIONS } from 'models/operator'
109

1110
import { EditorPerformerOperatorProps } from '../EditorPerformerOperator'
12-
import { Group, Operator } from '../EditorSheet'
11+
import {
12+
Group,
13+
Operator,
14+
OperatorEventType,
15+
SheetSubmitEventHandleType,
16+
} from '../EditorSheet'
1317
import { SheetContainerSkeleton } from './SheetContainerSkeleton'
1418
import { OperatorNoData } from './SheetNoneData'
1519
import { OperatorItem } from './SheetOperatorItem'
16-
import { EventType } from './SheetOperatorSkillAbout'
1720

1821
export interface SheetOperatorProps {
1922
submitOperator: EditorPerformerOperatorProps['submit']
@@ -22,6 +25,9 @@ export interface SheetOperatorProps {
2225
removeOperator: UseFieldArrayRemove
2326
}
2427

28+
export type OperatorEventHandleType =
29+
SheetSubmitEventHandleType<OperatorEventType>
30+
2531
const defaultProf = [
2632
{
2733
id: 'all',
@@ -85,12 +91,11 @@ const SheetOperator = ({
8591

8692
const checkOperatorSelected = (target: string) => {
8793
if (existedOperators.find((item) => item.name === target)) return true
88-
else {
94+
else
8995
return !!existedGroups
9096
.map((item) => item.opers)
9197
.flat()
9298
.find((item) => item?.name === target)
93-
}
9499
}
95100

96101
const operatorsGroupedBySubProf = useMemo(() => {
@@ -105,13 +110,9 @@ const SheetOperator = ({
105110
)
106111
}, [selectedSubProf, operatorsGroupedByProf])
107112

108-
const eventHandleProxy = (
109-
type: EventType,
110-
value: Operator,
111-
setError?: UseFormSetError<CopilotDocV1.Operator>,
112-
) => {
113+
const eventHandleProxy: OperatorEventHandleType = (type, value) => {
113114
switch (type) {
114-
case 'box': {
115+
case OperatorEventType.BOX: {
115116
if (checkOperatorSelected(value.name))
116117
if (existedOperators.find((item) => item.name === value.name))
117118
removeOperator(
@@ -122,11 +123,12 @@ const SheetOperator = ({
122123
message: '该干员已被编组',
123124
intent: Intent.DANGER,
124125
})
125-
else submitOperator(value, () => {})
126+
else submitOperator(value, undefined, true)
127+
126128
break
127129
}
128-
case 'skill': {
129-
submitOperator(value, setError!, true)
130+
case OperatorEventType.SKILL: {
131+
submitOperator(value, undefined, true)
130132
break
131133
}
132134
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Card, CardProps } from '@blueprintjs/core'
33
import clsx from 'clsx'
44

55
import { OperatorAvatar } from '../EditorOperator'
6+
import { OperatorEventType } from '../EditorSheet'
67
import { SkillAboutProps, SkillAboutTrigger } from './SheetOperatorSkillAbout'
78

89
export interface OperatorItemPorps extends CardProps, SkillAboutProps {
@@ -30,8 +31,8 @@ export const OperatorItem = ({
3031
!horizontal && 'flex-col justify-center',
3132
)}
3233
interactive={!selected}
33-
onClick={
34-
readOnly ? undefined : () => submitOperator!('box', operator || { name })
34+
onClick={() =>
35+
submitOperator?.(OperatorEventType.BOX, operator || { name })
3536
}
3637
{...cardProps}
3738
>

‎src/components/editor/operator/sheet/SheetOperatorSkillAbout.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Button, Classes, Icon } from '@blueprintjs/core'
22
import { Popover2, Tooltip2 } from '@blueprintjs/popover2'
33

44
import clsx from 'clsx'
5-
import { UseFormSetError, useForm } from 'react-hook-form'
5+
import { useForm } from 'react-hook-form'
66

77
import { FormField2 } from 'components/FormField'
88
import { DetailedSelectChoice } from 'components/editor/DetailedSelect'
@@ -12,18 +12,14 @@ import { operatorSkillUsages } from 'models/operator'
1212
import { EditorOperatorSkill } from '../EditorOperatorSkill'
1313
import { EditorOperatorSkillTimes } from '../EditorOperatorSkillTimes'
1414
import { EditorOperatorSkillUsage } from '../EditorOperatorSkillUsage'
15-
import { Operator } from '../EditorSheet'
15+
import { Operator, OperatorEventType } from '../EditorSheet'
16+
import { OperatorEventHandleType } from './SheetOperator'
1617

17-
export type EventType = 'box' | 'pin' | 'skill'
1818
const needSkillTimeType = CopilotDocV1.SkillUsageType.ReadyToUseTimes
1919

2020
export interface SkillAboutProps {
2121
operator?: CopilotDocV1.Operator
22-
submitOperator?: (
23-
type: EventType,
24-
value: CopilotDocV1.Operator,
25-
setError?: UseFormSetError<CopilotDocV1.Operator>,
26-
) => void
22+
submitOperator?: OperatorEventHandleType
2723
}
2824

2925
const skillDic = operatorSkillUsages as DetailedSelectChoice[]
@@ -45,7 +41,7 @@ export const SkillAboutTrigger = ({
4541
const needSkillTime = skillUsage === needSkillTimeType
4642

4743
const submitHandle = ({ skill, skillTimes, skillUsage }: Operator) => {
48-
submitOperator!('skill', {
44+
submitOperator?.(OperatorEventType.SKILL, {
4945
...operator!,
5046
...{
5147
skill: skill || 1,

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,10 @@ import { useRef, useState } from 'react'
1616
import { useForm } from 'react-hook-form'
1717

1818
import { CardDeleteOption } from 'components/editor/CardOptions'
19-
import { CopilotDocV1 } from 'models/copilot.schema'
2019

21-
import { Group } from '../../EditorSheet'
20+
import { Group, GroupEventType, OperatorEventType } from '../../EditorSheet'
2221
import { OperatorNoData } from '../SheetNoneData'
2322
import { OperatorItem } from '../SheetOperatorItem'
24-
import { EventType } from '../SheetOperatorSkillAbout'
2523
import {
2624
CollapseButton,
2725
SheetGroupOperatorSelectProp,
@@ -46,24 +44,24 @@ export const GroupItem = ({
4644

4745
const createOrDeleteGroup = () => {
4846
if (exist) {
49-
if (editable) eventHandleProxy('remove', groupInfo)
50-
} else eventHandleProxy('add', groupInfo)
47+
if (editable) eventHandleProxy(GroupEventType.REMOVE, groupInfo)
48+
} else eventHandleProxy(GroupEventType.ADD, groupInfo)
5149
}
5250
const changeGroupedOperatorSkillHandle = (
53-
type: EventType,
54-
value: CopilotDocV1.Operator,
51+
type: OperatorEventType,
52+
value: Group,
5553
) => {
56-
if (type === 'skill') {
54+
if (type === OperatorEventType.SKILL) {
5755
// deep copy
5856
const groupInfoCopy = JSON.parse(JSON.stringify(groupInfo))
5957
groupInfoCopy.opers![
6058
groupInfoCopy.opers!.findIndex(({ name }) => name === value.name)
6159
] = value
62-
eventHandleProxy('update', groupInfoCopy)
60+
eventHandleProxy(GroupEventType.UPDATE, groupInfoCopy)
6361
}
6462
}
6563
const renameEventHandle = (name: string) => {
66-
eventHandleProxy('rename', { ...groupInfo, name })
64+
eventHandleProxy(GroupEventType.RENAME, { ...groupInfo, name })
6765
}
6866

6967
const OperatorsPart = (
@@ -132,7 +130,9 @@ export const GroupItem = ({
132130
<MenuItem
133131
text={pinText}
134132
icon={pinIcon}
135-
onClick={() => eventHandleProxy('pin', groupInfo)}
133+
onClick={() =>
134+
eventHandleProxy(GroupEventType.PIN, groupInfo)
135+
}
136136
/>
137137
</Menu>
138138
}
@@ -142,7 +142,9 @@ export const GroupItem = ({
142142
icon={pinIcon}
143143
title={pinText}
144144
onClick={
145-
pinned ? undefined : () => eventHandleProxy('pin', groupInfo)
145+
pinned
146+
? undefined
147+
: () => eventHandleProxy?.(GroupEventType.PIN, groupInfo)
146148
}
147149
/>
148150
</Popover2>

0 commit comments

Comments
 (0)