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

Commit 341232e

Browse files
mydearxymmydearxym
authored
feat(masonary-cards): card view concept (#1035)
* fix(generators): component ts template * chore(deps): add react-masonry-css * refactor(masonry-cards): basic thought on job card * refactor(jobs-thread): adjust filterMenu's margin * refactor(jobs-thread): mv card to JobsThread dir * chore(mosonary-cards): clean up * refactor(jobs-thread): improve card naming
1 parent fc3d971 commit 341232e

File tree

16 files changed

+406
-104
lines changed

16 files changed

+406
-104
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
"react-highlight-words": "^0.16.0",
112112
"react-lazy-load-image-component": "1.5.0",
113113
"react-masonry-component": "^6.0.1",
114+
"react-masonry-css": "^1.0.14",
114115
"react-resize-detector": "4.2.3",
115116
"react-select": "^3.1.0",
116117
"react-sortable-hoc": "1.7.1",

‎src/components/MasonryCards/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
*
3+
* MasonryCards
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import Masonry from 'react-masonry-css'
9+
10+
import { buildLog } from '@/utils'
11+
12+
import { Wrapper } from './styles'
13+
14+
/* eslint-disable-next-line */
15+
const log = buildLog('c:MasonryCards:index')
16+
17+
type TProps = {
18+
testid?: string
19+
column?: number
20+
children: React.ReactNode
21+
}
22+
23+
const MasonryCards: React.FC<TProps> = ({
24+
testid = 'masonry-cards',
25+
column = 2,
26+
children,
27+
}) => {
28+
return (
29+
<Wrapper testid={testid}>
30+
<Masonry
31+
breakpointCols={column}
32+
className="masonry-cards-grid"
33+
columnClassName="masonry-cards-grid_column"
34+
>
35+
{children}
36+
</Masonry>
37+
</Wrapper>
38+
)
39+
}
40+
41+
export default React.memo(MasonryCards)

‎src/components/MasonryCards/styles/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styled from 'styled-components'
2+
3+
import type { TTestable } from '@/spec'
4+
// import { css, theme } from '@/utils'
5+
6+
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
7+
'data-test-id': testid,
8+
}))<TTestable>``
9+
10+
export const Title = styled.div``

‎src/components/MasonryCards/tests/index.test.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import MasonryCards from '../index'
5+
6+
describe('TODO <MasonryCards />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎src/containers/layout/ThemePalette/GlobalStyle.ts‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -145,33 +145,16 @@ const GlobalStyle = createGlobalStyle`
145145
top: 10px !important;
146146
}
147147
148-
149-
`
150-
// ${({ showCustomScrollbar }) =>
151-
// showCustomScrollbar ||
152-
// styledCss`
153-
// ::-webkit-scrollbar {
154-
// background: transparent;
155-
// width: 4px;
156-
// }
157-
// ::-webkit-scrollbar-button {
158-
// background: transparent;
159-
// }
160-
// ::-webkit-scrollbar-track {
161-
// background: transparent;
162-
// }
163-
// ::-webkit-scrollbar-track-piece {
164-
// background: transparent;
165-
// }
166-
// ::-webkit-scrollbar-thumb {
167-
// background: ${theme('banner.title')};
168-
// }
169-
// ::-webkit-scrollbar-corner {
170-
// background: grey;
171-
// }
172-
// ::-webkit-resizer {
173-
// background: grey;
174-
// }
175-
// `};
148+
// masonry cards styles
176149
150+
.masonry-cards-grid {
151+
display: flex;
152+
margin-left: -20px; /* gutter size offset */
153+
width: auto;
154+
}
155+
.masonry-cards-grid_column {
156+
padding-left: 20px; /* gutter size */
157+
background-clip: padding-box;
158+
}
159+
`
177160
export default GlobalStyle

‎src/containers/thread/JobsThread/Card.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
* cards for job MasonryCards view
3+
*/
4+
5+
import React from 'react'
6+
7+
import { ICON } from '@/config'
8+
import { buildLog } from '@/utils'
9+
10+
import { Space } from '@/components/Common'
11+
import IconText from '@/components/IconText'
12+
13+
import {
14+
Wrapper,
15+
Header,
16+
TeamScale,
17+
Title,
18+
Info,
19+
Sallery,
20+
Body,
21+
Footer,
22+
Publisher,
23+
Avatar,
24+
PublisherInfo,
25+
AuthorName,
26+
PublishExtra,
27+
TechKeywords,
28+
Keyword,
29+
} from './styles/card'
30+
31+
/* eslint-disable-next-line */
32+
const log = buildLog('c:Job:Card')
33+
34+
type TProps = {
35+
item: {
36+
id: string
37+
title: string
38+
body: string
39+
}
40+
}
41+
42+
const Card: React.FC<TProps> = ({ item }) => {
43+
return (
44+
<Wrapper key={item.id}>
45+
<Header>
46+
<Title>{item.title}</Title>
47+
<TeamScale>10~15 人</TeamScale>
48+
</Header>
49+
<Info>
50+
<Sallery>成都</Sallery>
51+
<Sallery>前端</Sallery>
52+
<Sallery>15k-30k</Sallery>
53+
</Info>
54+
<Body>{item.body}</Body>
55+
<Footer>
56+
<Publisher>
57+
<Avatar src="https://avatars.githubusercontent.com/u/809410?s=64&v=4" />
58+
<PublisherInfo>
59+
<AuthorName>mydearxym</AuthorName>
60+
<PublishExtra>
61+
<IconText iconSrc={`${ICON}/edit/publish-pen.svg`}>
62+
三天前
63+
</IconText>
64+
<Space right={10} />
65+
<IconText iconSrc={`${ICON}/article/comment.svg`}>22</IconText>
66+
</PublishExtra>
67+
</PublisherInfo>
68+
</Publisher>
69+
<TechKeywords>
70+
{/* TODO: extract a community tooltip */}
71+
<Keyword>React</Keyword>
72+
<Keyword>TS</Keyword>
73+
</TechKeywords>
74+
</Footer>
75+
</Wrapper>
76+
)
77+
}
78+
79+
export default React.memo(Card)

‎src/containers/thread/JobsThread/fakeJobItems.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const fakeItems = [
2+
{
3+
id: '1',
4+
title: '美团 # 校园招聘',
5+
body:
6+
'美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习, 美团校招内推启动啦！！！内推的优势： 免简历筛选，直通笔试，更大概率被发起面试， 极大增加通过概率 !… ',
7+
},
8+
{
9+
id: '2',
10+
title: 'Another item',
11+
body:
12+
'美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习, 我们是？我们是字节跳动教育部门，部门发展迅猛，公司投入极大！今年更是海量 HC！ 真正的海量 HC！HC 高达三位数！并非某些公司我们是？我们是字节跳动教育部门，部门发展迅猛，公司投入极大！今年更是海量 HC！ 真正的海量 HC！HC 高达三位数！并非某些公司',
13+
},
14+
{
15+
id: '3',
16+
title: '多益网络',
17+
body:
18+
'岗位多样，开发，美术，市场，运营，产品，设计，财务，法律等。不卡学历！各类岗位面试难度一般，对学历无歧视，内推保证直通笔试面试，拿个保底offer吧各位',
19+
},
20+
{
21+
id: '4',
22+
title: 'Here is the Fourth',
23+
body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习',
24+
},
25+
{
26+
id: '5',
27+
title: 'High Five',
28+
body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习',
29+
},
30+
]
31+
32+
export default fakeItems

‎src/containers/thread/JobsThread/index.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,23 @@ import { ICON_CMD } from '@/config'
1111
import { THREAD } from '@/constant'
1212
import { pluggedIn, buildLog } from '@/utils'
1313

14+
import MasonryCards from '@/components/MasonryCards'
1415
import FiltersMenu from '@/components/FiltersMenu'
1516
// import TagsBar from '@/containers/unit/TagsBar'
1617

1718
import Sticky from '@/components/Sticky'
1819
import { PublishButton } from '@/components/Buttons'
1920
import Maybe from '@/components/Maybe'
20-
import PagedContents from '@/components/PagedContents'
21+
// import PagedContents from '@/components/PagedContents'
2122
import ContentFilter from '@/components/ContentFilter'
2223

2324
import type { TStore } from './store'
2425

26+
import Card from './Card'
2527
import PublishNote from './PublishNote'
28+
2629
import filtersItems from './fakeFiltersItems'
30+
import fakeJobItems from './fakeJobItems'
2731

2832
import {
2933
Wrapper,
@@ -39,11 +43,11 @@ import {
3943
inAnchor,
4044
outAnchor,
4145
onFilterSelect,
42-
onUserSelect,
43-
onPreview,
46+
// onUserSelect,
47+
// onPreview,
4448
onContentCreate,
4549
// onTagSelect,
46-
onPageChange,
50+
// onPageChange,
4751
} from './logic'
4852

4953
/* eslint-disable-next-line */
@@ -58,12 +62,12 @@ const JobsThreadContainer: React.FC<TProps> = ({ jobsThread: store }) => {
5862

5963
const {
6064
pagedJobsData,
61-
curView,
65+
// curView,
66+
// activeJob,
67+
// curCommunity,
6268
filtersData,
6369
// activeTagData,
64-
activeJob,
6570
accountInfo,
66-
curCommunity,
6771
showPublishNote,
6872
showFilterBar,
6973
} = store
@@ -85,8 +89,13 @@ const JobsThreadContainer: React.FC<TProps> = ({ jobsThread: store }) => {
8589
/>
8690
</FilterWrapper>
8791
</Maybe>
92+
<MasonryCards>
93+
{fakeJobItems.map((item) => (
94+
<Card key={item.id} item={item} />
95+
))}
96+
</MasonryCards>
8897

89-
<PagedContents
98+
{/* <PagedContents
9099
data={pagedJobsData}
91100
community={curCommunity.raw}
92101
thread={THREAD.JOB}
@@ -96,7 +105,7 @@ const JobsThreadContainer: React.FC<TProps> = ({ jobsThread: store }) => {
96105
onPreview={onPreview}
97106
onAuthorSelect={onUserSelect}
98107
onPageChange={onPageChange}
99-
/>
108+
/> */}
100109
</LeftPart>
101110

102111
<RightPart>

‎src/containers/thread/JobsThread/styles/card.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import styled from 'styled-components'
2+
3+
import type { TTestable } from '@/spec'
4+
5+
import Img from '@/Img'
6+
import { css, theme } from '@/utils'
7+
8+
export const Wrapper = styled.div`
9+
background: #08303e;
10+
padding: 15px 20px;
11+
width: auto;
12+
height: auto;
13+
min-width: 400px;
14+
margin-bottom: 30px;
15+
border-radius: 4px;
16+
`
17+
export const Header = styled.div`
18+
${css.flex('align-baseline', 'justify-between')};
19+
`
20+
export const Title = styled.div`
21+
color: ${theme('thread.articleTitle')};
22+
font-size: 16px;
23+
`
24+
export const TeamScale = styled.div`
25+
color: ${theme('thread.articleDigest')};
26+
font-size: 12px;
27+
`
28+
export const Info = styled.div`
29+
${css.flex('align-center')};
30+
margin-top: 6px;
31+
margin-bottom: 10px;
32+
`
33+
export const Sallery = styled.div`
34+
font-size: 14px;
35+
color: #009b9c;
36+
margin-right: 10px;
37+
`
38+
export const Body = styled.div`
39+
color: ${theme('thread.articleDigest')};
40+
font-size: 15px;
41+
`
42+
export const Footer = styled.div`
43+
width: 100%;
44+
${css.flex('align-center', 'justify-between')};
45+
margin-top: 20px;
46+
`
47+
export const Publisher = styled.div`
48+
${css.flex('align-center')};
49+
`
50+
export const Avatar = styled(Img)`
51+
${css.circle(22)};
52+
`
53+
export const PublisherInfo = styled.div`
54+
${css.flexColumn()};
55+
margin-left: 14px;
56+
`
57+
export const AuthorName = styled.div`
58+
font-size: 14px;
59+
color: ${theme('thread.articleTitle')};
60+
`
61+
export const PublishExtra = styled.div`
62+
${css.flex('align-center')};
63+
`
64+
export const TechKeywords = styled.div`
65+
${css.flex('align-center')};
66+
`
67+
export const Keyword = styled.a`
68+
color: ${theme('thread.articleTitle')};
69+
margin-right: 8px;
70+
text-decoration: none;
71+
72+
&:hover {
73+
text-decoration: underline;
74+
cursor: pointer;
75+
}
76+
`

‎src/containers/thread/JobsThread/styles/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@ export const FilterWrapper = styled.div`
2929
`
3030
export const TagsWrapper = styled.div`
3131
margin-top: 20px;
32-
margin-left: 12px;
33-
margin-right: 10px;
32+
margin-left: 22px;
33+
margin-right: 12px;
3434
`

0 commit comments

Comments
 (0)