Skip to content

Commit 4d716b0

Browse files
Gemini2035Gemini2035
authored
Merge pull request #2 from GeorgeZhang2035/guan/temp1
perf(sheet): ui of group optimized! Stage mission completed!
2 parents 7708c74 + 80e9152 commit 4d716b0

File tree

8 files changed

+65
-67
lines changed

8 files changed

+65
-67
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
229229
({ name, _id }) => name === operator.name && _id !== operator._id,
230230
)
231231
) {
232-
setError('name', { message: '干员已存在' })
232+
setError?.('name', { message: '干员已存在' })
233233
return false
234234
}
235235

@@ -297,7 +297,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
297297

298298
setEditingOperator(undefined)
299299
} else {
300-
setError('global' as any, { message: '未能找到要更新的干员' })
300+
setError?.('global' as any, { message: '未能找到要更新的干员' })
301301
return false
302302
}
303303
} else {
@@ -324,7 +324,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
324324
if (
325325
groups.find(({ name, _id }) => name === group.name && _id !== group._id)
326326
) {
327-
setError('name', { message: '干员组已存在' })
327+
setError?.('name', { message: '干员组已存在' })
328328
return false
329329
}
330330
if (editingGroup || fromSheet) {
@@ -340,7 +340,7 @@ export const EditorPerformer: FC<EditorPerformerProps> = ({ control }) => {
340340
)
341341
setEditingGroup(undefined)
342342
} else {
343-
setError('global' as any, { message: '未能找到要更新的干员组' })
343+
setError?.('global' as any, { message: '未能找到要更新的干员组' })
344344
return false
345345
}
346346
} else {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface EditorPerformerGroupProps {
1616
group?: CopilotDocV1.Group
1717
submit: (
1818
group: CopilotDocV1.Group,
19-
setError: UseFormSetError<CopilotDocV1.Group>,
19+
setError?: UseFormSetError<CopilotDocV1.Group>,
2020
fromSheet?: boolean,
2121
) => boolean
2222
onCancel: () => void

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export interface EditorPerformerOperatorProps {
2525
groups: CopilotDocV1.Group[]
2626
submit: (
2727
values: EditorOperatorFormValues,
28-
setError: UseFormSetError<EditorOperatorFormValues>,
28+
setError?: UseFormSetError<EditorOperatorFormValues>,
2929
fromSheet?: boolean,
3030
) => boolean
3131
onCancel: () => void

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Button, Drawer, DrawerSize } from '@blueprintjs/core'
22

3-
import { useMemo, useState } from 'react'
3+
import { FC, useMemo, useState } from 'react'
44

55
import { CopilotDocV1 } from 'models/copilot.schema'
66

@@ -21,7 +21,7 @@ const EditorOperatorSheet = (sheetProps: EditorSheetProps) => (
2121
</article>
2222
)
2323

24-
export const EditorSheetTrigger = (sheetProps: EditorSheetProps) => {
24+
export const EditorSheetTrigger: FC<EditorSheetProps> = (sheetProps) => {
2525
const [open, setOpen] = useState(false)
2626
const miniMedia = useMemo(() => window.innerWidth < 600, [])
2727
return (

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

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import {
33
Button,
44
Divider,
55
H5,
6+
H6,
67
InputGroup,
78
Intent,
89
} from '@blueprintjs/core'
910

1011
import { useAtom } from 'jotai'
1112
import { isEqual, omit } from 'lodash-es'
12-
import { useMemo, useState } from 'react'
13-
import { UseFieldArrayRemove, UseFormSetError } from 'react-hook-form'
14-
import { useEvent } from 'react-use'
13+
import { FC, useMemo, useState } from 'react'
14+
import { UseFieldArrayRemove } from 'react-hook-form'
1515

1616
import { AppToaster } from 'components/Toaster'
1717
import { CopilotDocV1 } from 'models/copilot.schema'
@@ -106,10 +106,7 @@ const SheetGroup = ({
106106
}
107107
const checkSamePinned = (target: string) =>
108108
!!favGroups.find(({ name }) => name === target)
109-
const changeOperatorOfOtherGroups = (
110-
target: Operator[] | undefined,
111-
errHandle: UseFormSetError<Group>,
112-
) => {
109+
const changeOperatorOfOtherGroups = (target: Operator[] | undefined) => {
113110
target?.forEach((item) => {
114111
existedGroups.forEach((groupItem) => {
115112
const oldLength = groupItem.opers?.length || 0
@@ -118,7 +115,7 @@ const SheetGroup = ({
118115
(operItem) => operItem.name !== item.name,
119116
)
120117
if (groupItem.opers?.length !== oldLength)
121-
submitGroup(groupItem, errHandle, true)
118+
submitGroup(groupItem, undefined, true)
122119
}
123120
})
124121
})
@@ -129,12 +126,7 @@ const SheetGroup = ({
129126
{ ...value },
130127
])
131128

132-
const eventHandleProxy = (
133-
type: EventType,
134-
value: Group,
135-
setError?: UseFormSetError<Group>,
136-
) => {
137-
const errHandle = setError || function () {}
129+
const eventHandleProxy = (type: EventType, value: Group) => {
138130
switch (type) {
139131
case 'add': {
140132
if (checkGroupExisted(value.name)) {
@@ -143,9 +135,8 @@ const SheetGroup = ({
143135
intent: Intent.DANGER,
144136
})
145137
} else {
146-
if (checkGroupPinned(value))
147-
changeOperatorOfOtherGroups(value.opers, errHandle)
148-
submitGroup(value, errHandle)
138+
if (checkGroupPinned(value)) changeOperatorOfOtherGroups(value.opers)
139+
submitGroup(value)
149140
}
150141
break
151142
}
@@ -163,16 +154,16 @@ const SheetGroup = ({
163154
break
164155
}
165156
case 'rename': {
166-
submitGroup(value, errHandle, true)
157+
submitGroup(value, undefined, true)
167158
break
168159
}
169160
case 'opers': {
170-
changeOperatorOfOtherGroups(value.opers, errHandle)
171-
submitGroup(value, errHandle, true)
161+
changeOperatorOfOtherGroups(value.opers)
162+
submitGroup(value, undefined, true)
172163
break
173164
}
174165
case 'update': {
175-
submitGroup(value, errHandle, true)
166+
submitGroup(value, undefined, true)
176167
break
177168
}
178169
}
@@ -200,16 +191,34 @@ const SheetGroup = ({
200191
[coverGroup?.name],
201192
)
202193

194+
const GroupCount = useMemo(
195+
() => (
196+
<H6 className="my-2 text-center">
197+
已显示全部 {existedGroups.length} 个干员组
198+
</H6>
199+
),
200+
[existedGroups.length],
201+
)
202+
203203
return (
204204
<>
205205
{FavCoverAlert}
206206
<div className="flex px-1">
207-
<div className="flex-1 sticky top-0 max-h-screen flex flex-col">
208-
<div className="grow h-full overflow-y-auto py-1">
209-
<SheetContainerSkeleton title="已设置的分组" icon="cog" mini>
207+
<div className="flex-1 sticky top-0 h-screen flex flex-col">
208+
<div className="grow overflow-y-auto">
209+
<SheetContainerSkeleton
210+
title="添加干员组"
211+
icon="add"
212+
mini
213+
className="sticky top-0 z-10 backdrop-blur-lg py-1"
214+
>
215+
<EditorGroupName {...{ eventHandleProxy }} />
216+
</SheetContainerSkeleton>
217+
<SheetContainerSkeleton title="已设置的干员组" icon="cog" mini>
210218
<div>
211-
{existedGroups.length
212-
? existedGroups.map((item) => (
219+
{existedGroups.length ? (
220+
<>
221+
{existedGroups.map((item) => (
213222
<GroupItem
214223
key={item.name}
215224
existedGroup={existedGroups}
@@ -220,14 +229,15 @@ const SheetGroup = ({
220229
pinned={checkGroupPinned(item)}
221230
eventHandleProxy={eventHandleProxy}
222231
/>
223-
))
224-
: GroupNoData}
232+
))}
233+
{GroupCount}
234+
</>
235+
) : (
236+
GroupNoData
237+
)}
225238
</div>
226239
</SheetContainerSkeleton>
227240
</div>
228-
<SheetContainerSkeleton title="添加干员组" icon="add" mini>
229-
<EditorGroupName {...{ eventHandleProxy }} />
230-
</SheetContainerSkeleton>
231241
</div>
232242
<Divider />
233243
<div className="flex-1">
@@ -272,11 +282,7 @@ const SheetGroup = ({
272282
const EditorGroupName = ({
273283
eventHandleProxy,
274284
}: {
275-
eventHandleProxy: (
276-
type: EventType,
277-
value: Group,
278-
setError?: UseFormSetError<Group> | undefined,
279-
) => void
285+
eventHandleProxy: (type: EventType, value: Group) => void
280286
}) => {
281287
const [groupName, setGroupName] = useState('')
282288

@@ -327,7 +333,7 @@ const EditorGroupName = ({
327333
)
328334
}
329335

330-
export const SheetGroupContainer = (sheetGroupProps: SheetGroupProps) => (
336+
export const SheetGroupContainer: FC<SheetGroupProps> = (sheetGroupProps) => (
331337
<SheetContainerSkeleton title="设置干员组" icon="people">
332338
<SheetGroup {...sheetGroupProps} />
333339
</SheetContainerSkeleton>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ const SheetOperator = ({
257257
className="cursor-pointer mx-auto text-sm text-gray-500 hover:text-inherit hover:underline"
258258
onClick={() => setPageIndex(pageIndex + 1)}
259259
>
260-
显示更多干员({operatorsGroupedBySubProf.length - lastIndex})
260+
显示更多干员(剩余{operatorsGroupedBySubProf.length - lastIndex})
261261
</H6>
262262
)}
263263
</div>
@@ -313,8 +313,8 @@ const SheetOperator = ({
313313
<H4
314314
key={subProf.id}
315315
className={clsx(
316-
'truncate cursor-pointer my-3 opacity-50 hover:underline hover:text-black hover:opacity-75',
317-
subProf.id === selectedSubProf.id && 'opacity-100 underline',
316+
'truncate cursor-pointer my-3 opacity-50 hover:underline hover:opacity-90',
317+
subProf.id === selectedSubProf.id && '!opacity-100 underline',
318318
)}
319319
onClick={() => setSelectedSubProf(subProf)}
320320
>

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { Popover2 } from '@blueprintjs/popover2'
1212

1313
import clsx from 'clsx'
1414
import { useMemo, useRef, useState } from 'react'
15-
import { UseFormSetError, useForm } from 'react-hook-form'
15+
import { useForm } from 'react-hook-form'
1616

1717
import { CardDeleteOption } from 'components/editor/CardOptions'
1818
import { CopilotDocV1 } from 'models/copilot.schema'
@@ -61,11 +61,8 @@ export const GroupItem = ({
6161
eventHandleProxy('update', groupInfoCopy)
6262
}
6363
}
64-
const renameEventHandle = (
65-
name: string,
66-
errorHandle: UseFormSetError<Group>,
67-
) => {
68-
eventHandleProxy('rename', { ...groupInfo, name }, errorHandle)
64+
const renameEventHandle = (name: string) => {
65+
eventHandleProxy('rename', { ...groupInfo, name })
6966
}
7067

7168
const OperatorsPart = useMemo(
@@ -175,13 +172,13 @@ const GroupTitle = ({
175172
renameSubmit,
176173
}: {
177174
editable: boolean
178-
renameSubmit: (newName: string, errorHandle: UseFormSetError<Group>) => void
175+
renameSubmit: (newName: string) => void
179176
groupTitle: string
180177
}) => {
181178
const [editName, setEditName] = useState('')
182179
const [nameEditState, setNameEditState] = useState(false)
183180
const [alertState, setAlertState] = useState(false)
184-
const { register, handleSubmit, setError, reset } = useForm<Group>()
181+
const { register, handleSubmit, reset } = useForm<Group>()
185182
// handle differ priority of capture events
186183
const ignoreBlur = useRef(false)
187184
const blurHandle = () => {
@@ -270,7 +267,7 @@ const GroupTitle = ({
270267
className="flex items-center"
271268
onSubmit={handleSubmit(() => {
272269
ignoreBlur.current = true
273-
renameSubmit(editName || groupTitle, setError)
270+
renameSubmit(editName || groupTitle)
274271
setNameEditState(false)
275272
inputRef.current?.blur()
276273
})}

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ import {
1313
import { Popover2 } from '@blueprintjs/popover2'
1414

1515
import clsx from 'clsx'
16-
import { useMemo, useState } from 'react'
17-
import { UseFormSetError } from 'react-hook-form'
16+
import { FC, useMemo, useState } from 'react'
1817

1918
import { Group, Operator } from '../../EditorSheet'
2019
import { SheetContainerSkeleton } from '../SheetContainerSkeleton'
@@ -25,11 +24,7 @@ export interface SheetGroupOperatorSelectProp {
2524
existedOperator?: Operator[]
2625
existedGroup?: Group[]
2726
groupInfo: Group
28-
eventHandleProxy: (
29-
type: EventType,
30-
value: Group,
31-
setError?: UseFormSetError<Group>,
32-
) => void
27+
eventHandleProxy: (type: EventType, value: Group) => void
3328
}
3429

3530
const SheetGroupOperatorSelect = ({
@@ -234,9 +229,9 @@ const SheetGroupOperatorSelect = ({
234229
)
235230
}
236231

237-
export const SheetGroupOperatorSelectTrigger = (
238-
sheetGroupOperatorSelectProp: SheetGroupOperatorSelectProp,
239-
) => (
232+
export const SheetGroupOperatorSelectTrigger: FC<
233+
SheetGroupOperatorSelectProp
234+
> = (sheetGroupOperatorSelectProp) => (
240235
<Popover2
241236
className="w-full mt-1"
242237
content={<SheetGroupOperatorSelect {...sheetGroupOperatorSelectProp} />}

0 commit comments

Comments
 (0)