Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit e84294c

Browse files
mydearxymmydearxym
committed
refactor(Filters): split filter -> small component
1 parent ba2d5b4 commit e84294c

File tree

16 files changed

+436
-108
lines changed

16 files changed

+436
-108
lines changed

‎components/ContentFilter/ExpFilter.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//

‎components/ContentFilter/JobEducationFilter.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
import { LABEL_POOL } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER, uid } from '../../utils'
14+
15+
const JobEducationFilter = ({ onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={LABEL_POOL.education.iconSrc} />
19+
<SelectTitle>学历</SelectTitle>
20+
</SelectLable>
21+
22+
{LABEL_POOL.education.data.map(item => (
23+
<SelectItem
24+
key={uid.gen()}
25+
active={false}
26+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
27+
>
28+
{item}
29+
</SelectItem>
30+
))}
31+
</ColumnWrapper>
32+
)
33+
34+
export default JobEducationFilter

‎components/ContentFilter/JobExpFilter.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
import { LABEL_POOL } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER, uid } from '../../utils'
14+
15+
const JobExpFilter = ({ onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={LABEL_POOL.exp.iconSrc} />
19+
<SelectTitle>工作经验</SelectTitle>
20+
</SelectLable>
21+
22+
{LABEL_POOL.exp.data.map(item => (
23+
<SelectItem
24+
key={uid.gen()}
25+
active={false}
26+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
27+
>
28+
{item}
29+
</SelectItem>
30+
))}
31+
</ColumnWrapper>
32+
)
33+
34+
export default JobExpFilter

‎components/ContentFilter/JobFieldFilter.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
import { LABEL_POOL } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER, uid } from '../../utils'
14+
15+
const JobFieldFilter = ({ onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={LABEL_POOL.field.iconSrc} />
19+
<SelectTitle>领域</SelectTitle>
20+
</SelectLable>
21+
22+
{LABEL_POOL.field.data.map(item => (
23+
<SelectItem
24+
key={uid.gen()}
25+
active={false}
26+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
27+
>
28+
{item}
29+
</SelectItem>
30+
))}
31+
</ColumnWrapper>
32+
)
33+
34+
export default JobFieldFilter

‎components/ContentFilter/JobFinaceFilter.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
import { LABEL_POOL } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER, uid } from '../../utils'
14+
15+
const JobFinaceFilter = ({ onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={LABEL_POOL.finance.iconSrc} />
19+
<SelectTitle>领域</SelectTitle>
20+
</SelectLable>
21+
22+
{LABEL_POOL.finance.data.map(item => (
23+
<SelectItem
24+
key={uid.gen()}
25+
active={false}
26+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
27+
>
28+
{item}
29+
</SelectItem>
30+
))}
31+
</ColumnWrapper>
32+
)
33+
34+
export default JobFinaceFilter

‎components/ContentFilter/JobSalaryFilter.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
import { ICON_CMD, LABEL_POOL } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER, uid } from '../../utils'
14+
15+
const JobSalaryFilter = ({ onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={`${ICON_CMD}/money_frame.svg`} />
19+
<SelectTitle>月薪</SelectTitle>
20+
</SelectLable>
21+
22+
{LABEL_POOL.salary.data.map(item => (
23+
<SelectItem
24+
key={uid.gen()}
25+
active={false}
26+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
27+
>
28+
{item}
29+
</SelectItem>
30+
))}
31+
</ColumnWrapper>
32+
)
33+
34+
export default JobSalaryFilter

‎components/ContentFilter/JobScaleFilter.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
import { LABEL_POOL } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER, uid } from '../../utils'
14+
15+
const JobScaleFilter = ({ onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={LABEL_POOL.scale.iconSrc} />
19+
<SelectTitle>规模</SelectTitle>
20+
</SelectLable>
21+
22+
{LABEL_POOL.scale.data.map(item => (
23+
<SelectItem
24+
key={uid.gen()}
25+
active={false}
26+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
27+
>
28+
{item}
29+
</SelectItem>
30+
))}
31+
</ColumnWrapper>
32+
)
33+
34+
export default JobScaleFilter

‎components/ContentFilter/LengthFilter.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
3+
import { ICON_CMD } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER } from '../../utils'
14+
15+
const LengthFilter = ({ activeFilter, onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={`${ICON_CMD}/ruler.svg`} reverse />
19+
<SelectTitle>长度</SelectTitle>
20+
</SelectLable>
21+
<SelectItem
22+
item="MOST_WORDS"
23+
active={activeFilter.wordLength}
24+
onClick={onSelect.bind(this, { wordLength: FILTER.MOST_WORDS })}
25+
>
26+
字数最多
27+
</SelectItem>
28+
<SelectItem
29+
item="LEAST_WORDS"
30+
active={activeFilter.wordLength}
31+
onClick={onSelect.bind(this, { wordLength: FILTER.LEAST_WORDS })}
32+
>
33+
字数最少
34+
</SelectItem>
35+
</ColumnWrapper>
36+
)
37+
38+
export default LengthFilter

‎components/ContentFilter/SortFilter.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
3+
import { ICON_CMD } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER } from '../../utils'
14+
15+
const SortFilter = ({ activeFilter, onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={`${ICON_CMD}/click.svg`} />
19+
<SelectTitle>排序</SelectTitle>
20+
</SelectLable>
21+
<SelectItem
22+
item="MOST_VIEWS"
23+
active={activeFilter.sort}
24+
onClick={onSelect.bind(this, { sort: FILTER.MOST_VIEWS })}
25+
>
26+
最多浏览
27+
</SelectItem>
28+
<SelectItem
29+
item="MOST_STARS"
30+
active={activeFilter.sort}
31+
onClick={onSelect.bind(this, { sort: FILTER.MOST_STARS })}
32+
>
33+
最多点赞
34+
</SelectItem>
35+
<SelectItem
36+
item="MOST_FAVORITES"
37+
active={activeFilter.sort}
38+
onClick={onSelect.bind(this, { sort: FILTER.MOST_FAVORITES })}
39+
>
40+
最多收藏
41+
</SelectItem>
42+
<SelectItem
43+
item="MOST_COMMENTS"
44+
active={activeFilter.sort}
45+
onClick={onSelect.bind(this, { sort: FILTER.MOST_COMMENTS })}
46+
>
47+
最多评论
48+
</SelectItem>
49+
</ColumnWrapper>
50+
)
51+
52+
export default SortFilter

‎components/ContentFilter/TimeFilter.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
3+
import { ICON_CMD } from '../../config'
4+
5+
import {
6+
ColumnWrapper,
7+
SelectLable,
8+
SelectIcon,
9+
SelectTitle,
10+
SelectItem,
11+
} from './styles'
12+
13+
import { FILTER } from '../../utils'
14+
15+
const TimeFilter = ({ activeFilter, onSelect }) => (
16+
<ColumnWrapper>
17+
<SelectLable>
18+
<SelectIcon src={`${ICON_CMD}/duration.svg`} />
19+
<SelectTitle>时间</SelectTitle>
20+
</SelectLable>
21+
<SelectItem
22+
item="TODAY"
23+
active={activeFilter.when}
24+
onClick={onSelect.bind(this, { when: FILTER.TODAY })}
25+
>
26+
今天
27+
</SelectItem>
28+
<SelectItem
29+
item="THIS_WEEK"
30+
active={activeFilter.when}
31+
onClick={onSelect.bind(this, { when: FILTER.THIS_WEEK })}
32+
>
33+
本周
34+
</SelectItem>
35+
<SelectItem
36+
item="THIS_MONTH"
37+
active={activeFilter.when}
38+
onClick={onSelect.bind(this, { when: FILTER.THIS_MONTH })}
39+
>
40+
本月
41+
</SelectItem>
42+
<SelectItem
43+
item="THIS_YEAR"
44+
active={activeFilter.when}
45+
onClick={onSelect.bind(this, { when: FILTER.THIS_YEAR })}
46+
>
47+
今年
48+
</SelectItem>
49+
</ColumnWrapper>
50+
)
51+
52+
export default TimeFilter

0 commit comments

Comments
 (0)