Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit799a127

Browse files
committed
feat(meetups): add two Card style & switch toggler
1 parent5f15140 commit799a127

File tree

12 files changed

+229
-76
lines changed

12 files changed

+229
-76
lines changed
Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
importReactfrom'react'
2+
importTfrom'prop-types'
23

34
import{Wrapper,Divider,WeekName,DateNum}from'../styles/card/date'
45

5-
constDate=()=>{
6+
constDate=({ size})=>{
67
return(
7-
<Wrapper>
8+
<Wrappersize={size}>
89
<WeekName>周五</WeekName>
9-
<Divider/>
10+
<Dividersize={size}/>
1011
<DateNum>18</DateNum>
1112
</Wrapper>
1213
)
1314
}
1415

16+
Date.propTypes={
17+
size:T.oneOf(['default','small']),
18+
}
19+
20+
Date.defaultProps={
21+
size:'default',// 'text',
22+
}
23+
1524
exportdefaultReact.memo(Date)
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
importReactfrom'react'
2+
3+
import{ICON_CMD}from'@/config'
4+
5+
importDotDividerfrom'@/components/DotDivider'
6+
import{Br}from'@/components/Common'
7+
8+
importDatefrom'./Date'
9+
10+
import{
11+
Wrapper,
12+
ContentsWrapper,
13+
Label,
14+
Title,
15+
Desc,
16+
PreviewImg,
17+
FooterWrapper,
18+
Company,
19+
Icon,
20+
}from'../styles/card/text_card'
21+
22+
constCard=({ item})=>{
23+
return(
24+
<Wrapper>
25+
<Date/>
26+
<ContentsWrapper>
27+
<Label>前端</Label>
28+
<Title>Groupher 从构想到实现</Title>
29+
<Desc>
30+
GNU计划有多反资本家呢？他们甚至，此协议 规定不得阻止用户再分发。
31+
</Desc>
32+
<FooterWrapper>
33+
<Company>{item.company}</Company>
34+
<DotDividerradius="3px"space="7px"/>
35+
<Iconsrc={`${ICON_CMD}/navi/chair.svg`}/> 200
36+
<DotDividerradius="3px"/>
37+
<Iconsrc={`${ICON_CMD}/navi/money-yuan.svg`}/> 200-300
38+
</FooterWrapper>
39+
<Brtop="3px"/>
40+
<FooterWrapper>
41+
<Iconsrc={`${ICON_CMD}/navi/location.svg`}/>
42+
深圳（南山区）
43+
</FooterWrapper>
44+
</ContentsWrapper>
45+
</Wrapper>
46+
)
47+
}
48+
49+
exportdefaultReact.memo(Card)
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
importReactfrom'react'
2+
3+
import{ICON_CMD,ASSETS_ENDPOINT}from'@/config'
4+
importDotDividerfrom'@/components/DotDivider'
5+
6+
importDatefrom'./Date'
7+
8+
import{
9+
Wrapper,
10+
ContentsWrapper,
11+
Header,
12+
TitleWrapper,
13+
Label,
14+
Title,
15+
Body,
16+
Desc,
17+
PreviewImg,
18+
FooterWrapper,
19+
Company,
20+
Icon,
21+
}from'../styles/card/text_with_img_card'
22+
23+
constCard=({ item})=>{
24+
return(
25+
<Wrapper>
26+
<ContentsWrapper>
27+
<Header>
28+
<TitleWrapper>
29+
<Label>前端?</Label>
30+
<Title>Groupher 从构想到实现</Title>
31+
</TitleWrapper>
32+
<Datesize="small"/>
33+
</Header>
34+
<Body>
35+
<Desc>
36+
GNU计划有多反资本家呢？他们甚至，此协议 规定不得阻止用户再分发。
37+
</Desc>
38+
<PreviewImgsrc={`${ASSETS_ENDPOINT}/works/market1.jpeg`}/>
39+
</Body>
40+
<FooterWrapper>
41+
<Company>{item.company}</Company>
42+
<DotDividerradius="3px"space="7px"/>
43+
<Iconsrc={`${ICON_CMD}/navi/chair.svg`}/> 200
44+
<DotDividerradius="3px"/>
45+
<Iconsrc={`${ICON_CMD}/navi/money-yuan.svg`}/> 200-300
46+
</FooterWrapper>
47+
<FooterWrapper>
48+
<Iconsrc={`${ICON_CMD}/navi/location.svg`}/>
49+
深圳（南山区）
50+
</FooterWrapper>
51+
</ContentsWrapper>
52+
</Wrapper>
53+
)
54+
}
55+
56+
exportdefaultReact.memo(Card)
Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,25 @@
11
importReactfrom'react'
2+
importTfrom'prop-types'
23

3-
import{ICON_CMD,ASSETS_ENDPOINT}from'@/config'
4-
importDotDividerfrom'@/components/DotDivider'
4+
import{GALLERY}from'@/constant'
55

6-
importDatefrom'./Date'
6+
importTextCardfrom'./TextCard'
7+
importTextWithImgCardfrom'./TextWithImgCard'
78

8-
import{
9-
Wrapper,
10-
ContentsWrapper,
11-
Label,
12-
Title,
13-
Body,
14-
Desc,
15-
PreviewImg,
16-
BodyWrapper,
17-
LocationWrapper,
18-
Company,
19-
Icon,
20-
}from'../styles/card'
21-
22-
constCard=({ item})=>{
23-
return(
24-
<Wrapper>
25-
<Date/>
26-
<ContentsWrapper>
27-
<Label>前端</Label>
28-
<Title>Groupher 从构想到实现</Title>
29-
<Body>
30-
<Desc>
31-
GNU计划有多反资本家呢？他们甚至，此协议 规定不得阻止用户再分发。
32-
</Desc>
33-
<PreviewImgsrc={`${ASSETS_ENDPOINT}/works/market1.jpeg`}/>
34-
</Body>
35-
<BodyWrapper>
36-
<Company>{item.company}</Company>
37-
<DotDividerradius="3px"space="7px"/>
38-
<Iconsrc={`${ICON_CMD}/navi/chair.svg`}/> 200
39-
<DotDividerradius="3px"/>
40-
<Iconsrc={`${ICON_CMD}/navi/money-yuan.svg`}/> 200-300
41-
</BodyWrapper>
42-
<LocationWrapper>
43-
<Iconsrc={`${ICON_CMD}/navi/location.svg`}/>
44-
深圳（南山区）
45-
</LocationWrapper>
46-
</ContentsWrapper>
47-
</Wrapper>
9+
constCard=({ item, type})=>{
10+
returntype===GALLERY.TEXT_ONLY ?(
11+
<TextCarditem={item}/>
12+
) :(
13+
<TextWithImgCarditem={item}/>
4814
)
4915
}
5016

17+
Card.propTypes={
18+
type:T.oneOf([GALLERY.TEXT_ONLY,GALLERY.TEXT_WITH_IMAGE]),
19+
}
20+
21+
Card.defaultProps={
22+
type:GALLERY.TEXT_ONLY,
23+
}
24+
5125
exportdefaultReact.memo(Card)

‎src/containers/content/MeetupsContent/index.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@
66

77
importReactfrom'react'
88

9+
import{ASSETS_ENDPOINT}from'@/config'
10+
import{GALLERY}from'@/constant'
911
import{connectStore,buildLog}from'@/utils'
1012

1113
importPagifrom'@/components/Pagi'
14+
import{PagiOptionSwitcher}from'@/components/Switcher'
1215

1316
importFilterBarfrom'./FilterBar'
1417
importDateSelectorfrom'./DateSelector'
@@ -19,25 +22,27 @@ import filtersItems from './fakeFiltersItems'
1922
importmeetupsfrom'./fakeMeetups'
2023

2124
import{Wrapper,InnerWrapper,ContentWrapper,CardsWrapper}from'./styles'
22-
import{useInit}from'./logic'
25+
import{useInit,changeGalleryType}from'./logic'
2326

2427
/* eslint-disable-next-line */
2528
constlog=buildLog('C:CoolGuideContent')
2629

27-
//const GALLERY_TYPES = [
28-
// {
29-
// icon: GALLERY.MAIN_COLUMN,
30-
//key:'0',
31-
// },
32-
// {
33-
// icon: GALLERY.MASONRY_COLUMN,
34-
//key:'1',
35-
// },
36-
//]
30+
constGALLERY_TYPES=[
31+
{
32+
iconSrc:`${ASSETS_ENDPOINT}/words_only.svg`,
33+
key:GALLERY.TEXT_ONLY,
34+
},
35+
{
36+
iconSrc:`${ASSETS_ENDPOINT}/text_with_image.svg`,
37+
key:GALLERY.TEXT_WITH_IMAGE,
38+
},
39+
]
3740

3841
constMeetupsContentContainer=({meetupsContent:store})=>{
3942
useInit(store)
4043

44+
const{ activeGalleryType}=store
45+
4146
return(
4247
<Wrapper>
4348
<InnerWrapper>
@@ -46,18 +51,18 @@ const MeetupsContentContainer = ({ meetupsContent: store }) => {
4651
<DateSelector/>
4752
<CardsWrapper>
4853
{meetups.map(item=>(
49-
<Cardkey={item.id}item={item}/>
54+
<Cardkey={item.id}item={item}type={activeGalleryType}/>
5055
// <ActivityCard key={item.id} item={item} />
5156
))}
5257
</CardsWrapper>
5358

5459
<Pagimargin={{top:'60px',bottom:'80px'}}>
55-
{/*<PagiOptionSwitcher
60+
<PagiOptionSwitcher
5661
activeKey={activeGalleryType}
5762
title="显示模式"
5863
items={GALLERY_TYPES}
59-
onChange={item => console.log(item.key)}
60-
/> */}
64+
onChange={changeGalleryType}
65+
/>
6166
</Pagi>
6267
</ContentWrapper>
6368
</InnerWrapper>

‎src/containers/content/MeetupsContent/logic.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ let store = null
1313
/* eslint-disable-next-line */
1414
constlog=buildLog('L:MeetupsContent')
1515

16-
exportconstsomeMethod=()=>{}
16+
exportconstchangeGalleryType=({key:activeGalleryType})=>{
17+
store.mark({ activeGalleryType})
18+
}
1719

1820
// const const cancleLoading = () => {}
1921

‎src/containers/content/MeetupsContent/store.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@
55

66
import{typesasT,getParent}from'mobx-state-tree'
77

8+
import{GALLERY}from'@/constant'
89
import{markStates,buildLog}from'@/utils'
910
/* eslint-disable-next-line */
1011
constlog=buildLog('S:MeetupsContent')
1112

12-
// NOTE: add me to stores/index && stores/RootStore/index
13-
constMeetupsContent=T.model('MeetupsContent',{})
13+
constMeetupsContent=T.model('MeetupsContent',{
14+
activeGalleryType:T.optional(
15+
T.enumeration([GALLERY.TEXT_ONLY,GALLERY.TEXT_WITH_IMAGE]),
16+
GALLERY.TEXT_ONLY
17+
),
18+
})
1419
.views(self=>({
1520
getroot(){
1621
returngetParent(self)

‎src/containers/content/MeetupsContent/styles/card/date.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ import { cs } from '@/utils'
44

55
exportconstWrapper=styled.div`
66
${cs.flexColumn('align-center')};
7-
width: 70px;
8-
margin-right: 5px;
7+
width:${({ size})=>(size=='default' ?'70px' :'50px')};
8+
margin-right:${({ size})=>(size=='default' ?'5px' :'2px')};
9+
margin-top:${({ size})=>(size=='default' ?'0' :'-2px')};
910
`
1011
exportconstDivider=styled.div`
1112
height: 2px;
1213
width: 80%;
1314
background: #054252;
14-
margin-top: 5px;
15-
margin-bottom: 5px;
15+
margin-top:${({ size})=>(size=='default' ?'5px' :'2px')};
16+
margin-bottom:${({ size})=>(size=='default' ?'5px' :'1px')};
1617
`
1718
exportconstDateWrapper=styled.div`
1819
${cs.flexColumn('align-center')};
@@ -22,5 +23,5 @@ export const WeekName = styled.div`
2223
font-size: 13px;
2324
`
2425
exportconstDateNum=styled.div`
25-
font-size: 15px;
26+
font-size:${({ size})=>(size=='default' ?'15px' :'14px')};
2627
`

‎src/containers/content/MeetupsContent/styles/card/index.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@ export const Title = styled.div`
3030
margin-bottom: 10px;
3131
cursor: pointer;
3232
`
33-
exportconstBody=styled.div`
34-
${cs.flex()};
35-
`
3633
exportconstDesc=styled.div`
3734
font-size: 13px;
3835
color:${theme('thread.articleDigest')};
@@ -47,14 +44,11 @@ export const PreviewImg = styled(Img)`
4744
display: block;
4845
margin-left: 10px;
4946
`
50-
exportconstBodyWrapper=styled.div`
47+
exportconstFooterWrapper=styled.div`
5148
${cs.flex('align-center')}
5249
font-size: 13px;
5350
color:${theme('thread.articleDigest')};
5451
`
55-
exportconstLocationWrapper=styled(BodyWrapper)`
56-
margin-top: 3px;
57-
`
5852
exportconstCompany=styled.div`
5953
color:${theme('thread.articleTitle')};
6054
`
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
importstyledfrom'styled-components'
2+
3+
importImgfrom'@/Img'
4+
import{cs,theme}from'@/utils'
5+
6+
export{
7+
ContentsWrapper,
8+
Label,
9+
Title,
10+
Desc,
11+
FooterWrapper,
12+
Company,
13+
Icon,
14+
}from'./index'
15+
16+
import{WrapperasWrapperBase}from'./index'
17+
18+
exportconstWrapper=styled(WrapperBase)`
19+
padding-right: 18px;
20+
`

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp