Skip to content

Commit 56a350d

Browse files
author
gemini2035
committed
temp storage
1 parent ec589d6 commit 56a350d

File tree

6 files changed

+167
-147
lines changed

6 files changed

+167
-147
lines changed

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

Lines changed: 6 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
import { Button } from '@blueprintjs/core'
2+
import { Popover2 } from '@blueprintjs/popover2'
3+
14
import { FC, useCallback, useRef } from 'react'
25

36
import { SheetContainerSkeleton } from './SheetContainerSkeleton'
47
import { OperatorNoData } from './SheetNoneData'
5-
import { ProfClassification } from './sheetOperator/ProfClassification'
8+
import { ProfClassificationWithFilters } from './sheetOperator/ProfClassificationWithFilters'
69
import {
710
OperatorFilterProvider,
811
useOperatorFilterProvider,
@@ -11,6 +14,7 @@ import { SheetOperatorItem } from './sheetOperator/SheetOperatorItem'
1114
import { ShowMore } from './sheetOperator/ShowMore'
1215
import { OperatorBackToTop } from './sheetOperator/toolBox/OperatorBackToTop'
1316
import { OperatorMutipleSelect } from './sheetOperator/toolBox/OperatorMutipleSelect'
17+
import { OperatorRaritySelect } from './sheetOperator/toolBox/OperatorRaritySelect'
1418

1519
export interface SheetOperatorProps {}
1620

@@ -26,30 +30,6 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
2630
[operatorScrollRef],
2731
)
2832

29-
// const getOperatorRarity = (target: string) =>
30-
// operatorsGroupedByProf.find((item) => item.name === target)!.rarity
31-
32-
const ToolBox = (
33-
<div className="flex pb-2 pr-2">
34-
{/* <Popover2
35-
content={
36-
<RaritySelector
37-
{...{
38-
operatorRarity,
39-
setOperatorRarity,
40-
rarityReverse,
41-
setRarityReverse,
42-
}}
43-
/>
44-
}
45-
>
46-
<Button minimal icon="filter-list" />
47-
</Popover2> */}
48-
<OperatorMutipleSelect />
49-
<OperatorBackToTop {...{ toTop }} />
50-
</div>
51-
)
52-
5333
const {
5434
operatorFiltered: { data: operatorFilteredData },
5535
} = useOperatorFilterProvider()
@@ -76,88 +56,12 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
7656
)}
7757
</div>
7858
<div className="h-screen sticky top-0 sticky flex flex-col">
79-
<ProfClassification {...{ toTop }} />
80-
{ToolBox}
59+
<ProfClassificationWithFilters {...{ toTop }} />
8160
</div>
8261
</div>
8362
)
8463
}
8564

86-
// const RaritySelector = ({
87-
// operatorRarity,
88-
// setOperatorRarity,
89-
// rarityReverse,
90-
// setRarityReverse,
91-
// }: {
92-
// operatorRarity: number[]
93-
// setOperatorRarity: (target: number[]) => void
94-
// rarityReverse: boolean
95-
// setRarityReverse: (target: boolean) => void
96-
// }) => {
97-
// const selectClass = 'scale-90'
98-
// const [rarity, setRarity] = useState<number[]>(operatorRarity)
99-
// const [reverse, setReverse] = useState<boolean>(rarityReverse)
100-
101-
// const resetFilter = () => {
102-
// setRarity(defaultRarityFilter)
103-
// setReverse(false)
104-
// }
105-
// const submitFilter = () => {
106-
// setOperatorRarity(rarity)
107-
// setRarityReverse(reverse)
108-
// }
109-
110-
// return (
111-
// <div>
112-
// <div className="flex items-center">
113-
// <H5 className="m-0 mr-1">按干员稀有度展示</H5>
114-
// <Button icon="reset" minimal title="重置选择" onClick={resetFilter} />
115-
// </div>
116-
// <div className="flex my-1">
117-
// {Array(7)
118-
// .fill(0)
119-
// .map((_, index) => {
120-
// const isSelect = rarity.findIndex((item) => item === index) !== -1
121-
// return (
122-
// <Button
123-
// key={index}
124-
// active={isSelect}
125-
// text={index}
126-
// minimal
127-
// className={clsx(isSelect && selectClass)}
128-
// onClick={() =>
129-
// isSelect
130-
// ? setRarity([...rarity].filter((item) => item !== index))
131-
// : setRarity([...rarity, index])
132-
// }
133-
// />
134-
// )
135-
// })}
136-
// </div>
137-
// <div className="flex">
138-
// <Button
139-
// minimal
140-
// icon="arrow-up"
141-
// className={clsx(!reverse && selectClass)}
142-
// active={!reverse}
143-
// onClick={() => setReverse(false)}
144-
// title="按从下至上升序排列"
145-
// />
146-
// <Button
147-
// minimal
148-
// icon="arrow-down"
149-
// className={clsx(reverse && selectClass)}
150-
// active={reverse}
151-
// onClick={() => setReverse(true)}
152-
// title="按从下至上降序排列"
153-
// />
154-
// </div>
155-
// <Divider />
156-
// <Button text="确认" className={POPOVER2_DISMISS} onClick={submitFilter} />
157-
// </div>
158-
// )
159-
// }
160-
16165
export const SheetOperatorContainer = (
16266
sheetOperatorProp: SheetOperatorProps,
16367
) => (

‎src/components/editor/operator/sheet/sheetOperator/ProfClassification.tsx‎ renamed to ‎src/components/editor/operator/sheet/sheetOperator/ProfClassificationWithFilters.tsx‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Divider, H4, H5 } from '@blueprintjs/core'
1+
import { Button, Divider, H4, H5 } from '@blueprintjs/core'
2+
import { Popover2 } from '@blueprintjs/popover2'
23

34
import clsx from 'clsx'
45
import { FC, ImgHTMLAttributes, useEffect, useMemo, useState } from 'react'
@@ -8,10 +9,12 @@ import { PROFESSIONS } from 'models/operator'
89
import {
910
DEFAULTPROFID,
1011
DEFAULTSUBPROFID,
11-
ProfFilter as ProfFilterOuter,
12+
defaultPagination,
1213
useOperatorFilterProvider,
1314
} from './SheetOperatorFilterProvider'
14-
import { defaultPagination } from './ShowMore'
15+
import { OperatorBackToTop } from './toolBox/OperatorBackToTop'
16+
import { OperatorMutipleSelect } from './toolBox/OperatorMutipleSelect'
17+
import { OperatorRaritySelect } from './toolBox/OperatorRaritySelect'
1518

1619
const formattedProfessions = [
1720
{
@@ -32,17 +35,13 @@ const formattedProfessions = [
3235
},
3336
]
3437

35-
type ProfFilter = ProfFilterOuter
36-
37-
export const defaultProfFilter: ProfFilter = {
38-
selectedProf: [DEFAULTPROFID.ALL, DEFAULTSUBPROFID.ALL],
39-
}
40-
41-
export interface ProfClassificationProp {
38+
export interface ProfClassificationWithFiltersProp {
4239
toTop: () => void
4340
}
4441

45-
export const ProfClassification: FC<ProfClassificationProp> = ({ toTop }) => {
42+
export const ProfClassificationWithFilters: FC<
43+
ProfClassificationWithFiltersProp
44+
> = ({ toTop }) => {
4645
const {
4746
useProfFilterState: [{ selectedProf }, setProfFilter],
4847
usePaginationFilterState: [_, setPaginationFilter],
@@ -62,6 +61,22 @@ export const ProfClassification: FC<ProfClassificationProp> = ({ toTop }) => {
6261
setPaginationFilter(defaultPagination)
6362
}, [selectedProf, setPaginationFilter, toTop])
6463

64+
const ToolBox = (
65+
<div className="flex flex-col absolute bottom-0">
66+
<Popover2
67+
content={
68+
<>
69+
<OperatorRaritySelect />
70+
</>
71+
}
72+
>
73+
<Button minimal icon="filter-list" />
74+
</Popover2>
75+
<OperatorMutipleSelect />
76+
<OperatorBackToTop {...{ toTop }} />
77+
</div>
78+
)
79+
6580
return (
6681
<div className="flex flex-row-reverse relative h-full">
6782
<ul className="h-full flex flex-col w-6 sm:w-12">
@@ -81,27 +96,30 @@ export const ProfClassification: FC<ProfClassificationProp> = ({ toTop }) => {
8196
))}
8297
</ul>
8398
<Divider className="mr-0" />
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>
99+
<div className="h-full flex flex-col justify-center items-end absolute right-full sm:relative sm:left-0">
100+
<ul>
101+
{subProfs.map(({ id, name }) => (
102+
<li key={id}>
103+
<H4
104+
className={clsx(
105+
'truncate cursor-pointer my-3 opacity-50 hover:underline hover:opacity-90',
106+
selectedProf.includes(id) && '!opacity-100 underline',
107+
name.length > 3 && '!text-base',
108+
)}
109+
onClick={() =>
110+
setProfFilter(({ selectedProf, ...rest }) => ({
111+
selectedProf: [selectedProf[0], id],
112+
...rest,
113+
}))
114+
}
115+
>
116+
{name}
117+
</H4>
118+
</li>
119+
))}
120+
</ul>
121+
{ToolBox}
122+
</div>
105123
</div>
106124
)
107125
}

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import { OperatorInfo as ModelsOperator, OPERATORS } from 'models/operator'
1414
import { favOperatorAtom } from 'store/useFavOperators'
1515

1616
import { useSheet } from '../SheetProvider'
17-
import { defaultProfFilter } from './ProfClassification'
18-
import { defaultPagination } from './ShowMore'
1917

2018
type OperatorInfo = ModelsOperator
2119

@@ -33,16 +31,29 @@ export enum DEFAULTSUBPROFID {
3331
export interface ProfFilter {
3432
selectedProf: [string, string]
3533
}
34+
export const defaultProfFilter: ProfFilter = {
35+
selectedProf: [DEFAULTPROFID.ALL, DEFAULTSUBPROFID.ALL],
36+
}
3637

3738
export interface RarityFilter {
3839
selectedRarity: number[]
3940
reverse: boolean
4041
}
42+
export const defaultRarityFilter: RarityFilter = {
43+
selectedRarity: Array.from(
44+
new Array(Math.max(...OPERATORS.map(({ rarity }) => rarity)) + 1).keys(),
45+
).slice(Math.min(...OPERATORS.map(({ rarity }) => rarity))),
46+
reverse: false,
47+
}
4148

4249
export interface PaginationFilter {
4350
size: number
4451
current: number
4552
}
53+
export const defaultPagination: PaginationFilter = {
54+
current: 1,
55+
size: 60,
56+
}
4657

4758
interface OperatorFilterProviderProp {
4859
children: ReactNode
@@ -53,7 +64,7 @@ type UseState<T> = [T, Dispatch<SetStateAction<T>>]
5364
type OperatorFilterProviderData = {
5465
usePaginationFilterState: UseState<PaginationFilter>
5566
useProfFilterState: UseState<ProfFilter>
56-
// useRarityFilterState: UseState<RarityFilter>
67+
useRarityFilterState: UseState<RarityFilter>
5768
operatorFiltered: {
5869
data: OperatorInfo[]
5970
meta: {
@@ -72,13 +83,15 @@ export const OperatorFilterProvider: FC<OperatorFilterProviderProp> = ({
7283
const [paginationFilter, setPaginationFilter] =
7384
useState<PaginationFilter>(defaultPagination)
7485
const [profFilter, setProfFilter] = useState<ProfFilter>(defaultProfFilter)
86+
const [rarityFilter, setRarityFilter] =
87+
useState<RarityFilter>(defaultRarityFilter)
7588

7689
return (
7790
<OperatorFilterContext.Provider
7891
value={{
7992
usePaginationFilterState: [paginationFilter, setPaginationFilter],
8093
useProfFilterState: [profFilter, setProfFilter],
81-
// useRarityFilterState: []
94+
useRarityFilterState: [rarityFilter, setRarityFilter],
8295
operatorFiltered: useOperatorFiltered(profFilter, paginationFilter),
8396
}}
8497
>
@@ -141,7 +154,7 @@ const useProfFilterHandle = (
141154
? undefined
142155
: generateCustomizedOperInfo(name),
143156
)
144-
.filter((item) => !!item),
157+
.filter((item) => !!item) as OperatorInfo[],
145158
[existedOperators],
146159
)
147160
const favOperatorsInfo = useMemo<OperatorInfo[]>(

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,14 @@ import { H6 } from '@blueprintjs/core'
33
import { FC, useEffect } from 'react'
44

55
import {
6-
PaginationFilter,
6+
defaultPagination,
77
useOperatorFilterProvider,
88
} from './SheetOperatorFilterProvider'
99

1010
export interface ShowMoreProp {
1111
toTop: () => void
1212
}
1313

14-
export const defaultPagination: PaginationFilter = {
15-
current: 1,
16-
size: 60,
17-
}
18-
1914
export const ShowMore: FC<ShowMoreProp> = ({ toTop }) => {
2015
const {
2116
operatorFiltered: {

‎src/components/editor/operator/sheet/sheetOperator/toolBox/OperatorBackToTop.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { Button } from '@blueprintjs/core'
22

33
import { FC } from 'react'
44

5-
import { useOperatorFilterProvider } from '../SheetOperatorFilterProvider'
6-
import { defaultPagination } from '../ShowMore'
5+
import {
6+
defaultPagination,
7+
useOperatorFilterProvider,
8+
} from '../SheetOperatorFilterProvider'
79

810
export interface OperatorBackToTopProp {
911
toTop: () => void

0 commit comments

Comments
 (0)