Skip to content

Commit 798adad

Browse files
author
gemini2035
committed
mutiple select completed
1 parent eab9eb5 commit 798adad

File tree

4 files changed

+77
-161
lines changed

4 files changed

+77
-161
lines changed

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

Lines changed: 36 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useRef } from 'react'
1+
import { FC, useCallback, useRef } from 'react'
22

33
import { SheetContainerSkeleton } from './SheetContainerSkeleton'
44
import { OperatorNoData } from './SheetNoneData'
@@ -9,6 +9,7 @@ import {
99
} from './sheetOperator/SheetOperatorFilterProvider'
1010
import { SheetOperatorItem } from './sheetOperator/SheetOperatorItem'
1111
import { ShowMore } from './sheetOperator/ShowMore'
12+
import { OperatorMutipleSelect } from './sheetOperator/toolBox/OperatorMutipleSelect'
1213

1314
export interface SheetOperatorProps {}
1415

@@ -22,71 +23,37 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
2223
// const getOperatorRarity = (target: string) =>
2324
// operatorsGroupedByProf.find((item) => item.name === target)!.rarity
2425

25-
// const selectAll = () => {
26-
// operatorsGroupedBySubProf.forEach((item) => {
27-
// submitOperator(item, () => {})
28-
// })
29-
// }
30-
31-
// const cancelAll = () => {
32-
// const deleteIndexList: number[] = []
33-
// operatorsGroupedBySubProf.forEach(({ name }) => {
34-
// const index = existedOperators.findIndex((item) => item.name === name)
35-
// if (index !== -1) deleteIndexList.push(index)
36-
// })
37-
// removeOperator(deleteIndexList)
38-
// }
39-
40-
// const ActionList = (
41-
// <div className="absolute bottom-0">
42-
// <Popover2
43-
// content={
44-
// <RaritySelector
45-
// {...{
46-
// operatorRarity,
47-
// setOperatorRarity,
48-
// rarityReverse,
49-
// setRarityReverse,
50-
// }}
51-
// />
52-
// }
53-
// >
54-
// <Button minimal icon="filter-list" />
55-
// </Popover2>
56-
// <Button
57-
// minimal
58-
// icon="circle"
59-
// disabled={
60-
// !operatorsGroupedBySubProf.some(({ name }) =>
61-
// checkOperatorSelected(name),
62-
// )
63-
// }
64-
// title={`取消选择全部${existedOperators.length}位干员`}
65-
// onClick={cancelAll}
66-
// />
67-
// <Button
68-
// minimal
69-
// icon="selection"
70-
// title={`全选${operatorsGroupedBySubProf.length}位干员`}
71-
// disabled={operatorsGroupedBySubProf.every(({ name }) =>
72-
// checkOperatorSelected(name),
73-
// )}
74-
// onClick={selectAll}
75-
// />
76-
// <Button
77-
// minimal
78-
// icon="symbol-triangle-up"
79-
// disabled={!backToTop}
80-
// title={backToTop ? '回到顶部' : undefined}
81-
// onClick={resetPaginationState}
82-
// />
83-
// </div>
84-
// )
85-
86-
// console.log(selectedProf, selectedSubProf)
87-
88-
const toTop = () => operatorScrollRef?.current?.scrollIntoView()
26+
const ToolBox = (
27+
<div className="flex">
28+
{/* <Popover2
29+
content={
30+
<RaritySelector
31+
{...{
32+
operatorRarity,
33+
setOperatorRarity,
34+
rarityReverse,
35+
setRarityReverse,
36+
}}
37+
/>
38+
}
39+
>
40+
<Button minimal icon="filter-list" />
41+
</Popover2> */}
42+
<OperatorMutipleSelect />
43+
{/* <Button
44+
minimal
45+
icon="symbol-triangle-up"
46+
disabled={!backToTop}
47+
title={backToTop ? '回到顶部' : undefined}
48+
onClick={resetPaginationState}
49+
/> */}
50+
</div>
51+
)
8952

53+
const toTop = useCallback(
54+
() => operatorScrollRef?.current?.scrollIntoView(),
55+
[operatorScrollRef],
56+
)
9057
const {
9158
operatorFiltered: { data: operatorFilteredData },
9259
} = useOperatorFilterProvider()
@@ -112,8 +79,10 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
11279
OperatorNoData
11380
)}
11481
</div>
115-
{/* {ProfSelect} */}
116-
<ProfClassification {...{ toTop }} />
82+
<div className="h-screen sticky top-0 sticky flex flex-col">
83+
<ProfClassification {...{ toTop }} />
84+
{ToolBox}
85+
</div>
11786
</div>
11887
)
11988
}

‎src/components/editor/operator/sheet/sheetOperator/ProfClassification.tsx‎

Lines changed: 22 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -62,54 +62,8 @@ export const ProfClassification: FC<ProfClassificationProp> = ({ toTop }) => {
6262
setPaginationFilter(defaultPagination)
6363
}, [selectedProf, setPaginationFilter, toTop])
6464

65-
// const ActionList = (
66-
// <div className="absolute bottom-0">
67-
// <Popover2
68-
// content={
69-
// <RaritySelector
70-
// {...{
71-
// operatorRarity,
72-
// setOperatorRarity,
73-
// rarityReverse,
74-
// setRarityReverse,
75-
// }}
76-
// />
77-
// }
78-
// >
79-
// <Button minimal icon="filter-list" />
80-
// </Popover2>
81-
// <Button
82-
// minimal
83-
// icon="circle"
84-
// disabled={
85-
// !operatorsGroupedBySubProf.some(({ name }) =>
86-
// checkOperatorSelected(name),
87-
// )
88-
// }
89-
// title={`取消选择全部${existedOperators.length}位干员`}
90-
// onClick={cancelAll}
91-
// />
92-
// <Button
93-
// minimal
94-
// icon="selection"
95-
// title={`全选${operatorsGroupedBySubProf.length}位干员`}
96-
// disabled={operatorsGroupedBySubProf.every(({ name }) =>
97-
// checkOperatorSelected(name),
98-
// )}
99-
// onClick={selectAll}
100-
// />
101-
// <Button
102-
// minimal
103-
// icon="symbol-triangle-up"
104-
// disabled={!backToTop}
105-
// title={backToTop ? '回到顶部' : undefined}
106-
// onClick={resetPaginationState}
107-
// />
108-
// </div>
109-
// )
110-
11165
return (
112-
<div className="flex flex-row-reverse h-screen sticky top-0 relative">
66+
<div className="flex flex-row-reverse relative h-full">
11367
<ul className="h-full flex flex-col w-6 sm:w-12">
11468
{formattedProfessions.map(({ id, name }) => (
11569
<ProfIcon
@@ -127,30 +81,27 @@ export const ProfClassification: FC<ProfClassificationProp> = ({ toTop }) => {
12781
))}
12882
</ul>
12983
<Divider className="mr-0" />
130-
<div className="h-full flex flex-col justify-center items-end absolute right-full sm:relative sm:left-0">
131-
<ul>
132-
{subProfs.map(({ id, name }) => (
133-
<li key={id}>
134-
<H4
135-
className={clsx(
136-
'truncate cursor-pointer my-3 opacity-50 hover:underline hover:opacity-90',
137-
selectedProf.includes(id) && '!opacity-100 underline',
138-
name.length > 3 && '!text-base',
139-
)}
140-
onClick={() =>
141-
setProfFilter(({ selectedProf, ...rest }) => ({
142-
selectedProf: [selectedProf[0], id],
143-
...rest,
144-
}))
145-
}
146-
>
147-
{name}
148-
</H4>
149-
</li>
150-
))}
151-
</ul>
152-
{/* {ActionList} */}
153-
</div>
84+
<ul className="h-full flex flex-col justify-center items-end absolute right-full sm:relative sm:left-0">
85+
{subProfs.map(({ id, name }) => (
86+
<li key={id}>
87+
<H4
88+
className={clsx(
89+
'truncate cursor-pointer my-3 opacity-50 hover:underline hover:opacity-90',
90+
selectedProf.includes(id) && '!opacity-100 underline',
91+
name.length > 3 && '!text-base',
92+
)}
93+
onClick={() =>
94+
setProfFilter(({ selectedProf, ...rest }) => ({
95+
selectedProf: [selectedProf[0], id],
96+
...rest,
97+
}))
98+
}
99+
>
100+
{name}
101+
</H4>
102+
</li>
103+
))}
104+
</ul>
154105
</div>
155106
)
156107
}

‎src/components/editor/operator/sheet/sheetOperator/ToolBox.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/components/editor/operator/sheet/sheetOperator/toolBox/mutipleSelect.tsx‎ renamed to ‎src/components/editor/operator/sheet/sheetOperator/toolBox/OperatorMutipleSelect.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@ import { FC, useMemo } from 'react'
55
import { useSheet } from '../../SheetProvider'
66
import { useOperatorFilterProvider } from '../SheetOperatorFilterProvider'
77

8-
export interface MutipleSelectProp {}
8+
export interface OperatorMutipleSelectProp {}
99

10-
export const MutipleSelect: FC<MutipleSelectProp> = () => {
10+
export const OperatorMutipleSelect: FC<OperatorMutipleSelectProp> = () => {
1111
const {
1212
operatorFiltered: { data: operatorFilteredData },
1313
} = useOperatorFilterProvider()
14-
const { existedOperators } = useSheet()
14+
const { existedOperators, submitOperator, removeOperator } = useSheet()
1515

1616
const { cancelAllDisabled, selectAllDisabled } = useMemo(() => {
17-
console.log('111')
1817
const existedOperatorsNames = existedOperators.map(({ name }) => name)
1918
return {
2019
cancelAllDisabled: !operatorFilteredData.some(({ name }) =>
@@ -26,8 +25,22 @@ export const MutipleSelect: FC<MutipleSelectProp> = () => {
2625
}
2726
}, [existedOperators, operatorFilteredData])
2827

28+
const selectAll = () =>
29+
operatorFilteredData.forEach((item) => {
30+
submitOperator(item, () => {})
31+
})
32+
33+
const cancelAll = () => {
34+
const deleteIndexList: number[] = []
35+
operatorFilteredData.forEach(({ name }) => {
36+
const index = existedOperators.findIndex((item) => item.name === name)
37+
if (index !== -1) deleteIndexList.push(index)
38+
})
39+
removeOperator(deleteIndexList)
40+
}
41+
2942
return (
30-
<div className="flex justify-center content-center">
43+
<>
3144
<Button
3245
minimal
3346
icon="circle"
@@ -42,6 +55,6 @@ export const MutipleSelect: FC<MutipleSelectProp> = () => {
4255
disabled={selectAllDisabled}
4356
onClick={selectAll}
4457
/>
45-
</div>
58+
</>
4659
)
4760
}

0 commit comments

Comments
 (0)