Skip to content

Commit 305ca89

Browse files
author
guosw
committed
pref: granulated components
1 parent 5c80fea commit 305ca89

File tree

4 files changed

+135
-105
lines changed

4 files changed

+135
-105
lines changed

‎src/App.jsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,20 @@ const App = props => {
2525
children: []
2626
}
2727
}
28-
29-
if (item.component) {
30-
if (item.childRoutes) {
31-
const childRoutes = renderRoutes(item.childRoutes, newContextPath)
32-
children.push(
33-
<Route
34-
key={newContextPath}
35-
render={props => <item.component {...props}>{childRoutes}</item.component>}
36-
path={newContextPath}
37-
/>
38-
)
39-
item.childRoutes.forEach(r => renderRoute(r, newContextPath))
40-
} else {
41-
children.push(<Route key={newContextPath} component={item.component} path={newContextPath} exact />)
42-
}
28+
if (!item.component) return
29+
30+
if (item.childRoutes) {
31+
const childRoutes = renderRoutes(item.childRoutes, newContextPath)
32+
children.push(
33+
<Route
34+
key={newContextPath}
35+
render={props => <item.component {...props}>{childRoutes}</item.component>}
36+
path={newContextPath}
37+
/>
38+
)
39+
item.childRoutes.forEach(r => renderRoute(r, newContextPath))
40+
} else {
41+
children.push(<Route key={newContextPath} component={item.component} path={newContextPath} exact />)
4342
}
4443
}
4544

‎src/views/web/home/List.jsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useState, useEffect } from 'react'
2+
import { useHistory } from 'react-router-dom'
3+
import { calcCommentsCount } from '@/utils'
4+
5+
// components
6+
import { Divider } from 'antd'
7+
import SvgIcon from '@/components/SvgIcon'
8+
import ArticleTag from '@/components/ArticleTag'
9+
10+
const ArticleList = props => {
11+
const history = useHistory()
12+
const { list } = props
13+
14+
function jumpTo(id) {
15+
history.push(`/article/${id}`)
16+
}
17+
18+
return (
19+
<ul className='app-home-list'>
20+
{list.map(item => (
21+
<li key={item.id} className='app-home-list-item'>
22+
<Divider orientation='left'>
23+
<span className='title' onClick={() => jumpTo(item.id)}>
24+
{item.title}
25+
</span>
26+
<span className='posted-time'>{item.createdAt.slice(0, 10)}</span>
27+
</Divider>
28+
29+
<div
30+
onClick={() => jumpTo(item.id)}
31+
className='article-detail content'
32+
dangerouslySetInnerHTML={{ __html: item.content }}
33+
/>
34+
35+
<div className='list-item-others'>
36+
<SvgIcon type='iconcomment' />
37+
<span style={{ marginRight: 5 }}> {calcCommentsCount(item.comments)}</span>
38+
39+
<SvgIcon type='iconview' style={{ marginRight: 5 }} />
40+
<span>{item.viewCount}</span>
41+
42+
<ArticleTag tagList={item.tags} categoryList={item.categories} />
43+
</div>
44+
</li>
45+
))}
46+
</ul>
47+
)
48+
}
49+
50+
export default ArticleList

‎src/views/web/home/QuickLink.jsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { useState, useEffect } from 'react'
2+
import { Link } from 'react-router-dom'
3+
4+
import { useMediaQuery } from 'react-responsive'
5+
6+
// components
7+
import { Icon, Divider, Empty, Drawer, Tag, Spin } from 'antd'
8+
9+
const title = '快速导航'
10+
11+
const List = props => {
12+
const { list, showTitle = true } = props
13+
return (
14+
<ul className='preview'>
15+
{showTitle && <Divider>{title}</Divider>}
16+
{list.map(item => (
17+
<li key={item.id}>
18+
<Link to={`/article/${item.id}`}>{item.title}</Link>
19+
</li>
20+
))}
21+
</ul>
22+
)
23+
}
24+
25+
/**
26+
* article quick link
27+
*/
28+
const QuickLink = props => {
29+
const isGreaterThan1300 = useMediaQuery({ query: '(min-width: 1300px)' })
30+
const { list } = props
31+
32+
const [drawerVisible, setDrawerVisible] = useState(false)
33+
34+
return isGreaterThan1300 ? <List list={list} /> : (
35+
<>
36+
<div className='drawer-btn' onClick={e => setDrawerVisible(true)}>
37+
<Icon type='menu-o' className='nav-phone-icon' />
38+
</div>
39+
<Drawer
40+
title={title}
41+
placement='right'
42+
closable={false}
43+
onClose={e => setDrawerVisible(false)}
44+
visible={drawerVisible}
45+
getContainer={() => document.querySelector('.app-home')}>
46+
<List list={list} showTitle={false} />
47+
</Drawer>
48+
</>
49+
)
50+
}
51+
52+
export default QuickLink
53+

‎src/views/web/home/index.jsx‎

Lines changed: 18 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,19 @@
1-
import React, { useState, useMemo } from 'react'
1+
import React, { useMemo } from 'react'
22
import './index.less'
33

4-
import { Link } from 'react-router-dom'
5-
import { useMediaQuery } from 'react-responsive'
6-
import { decodeQuery, translateMarkdown, calcCommentsCount } from '@/utils'
4+
import { decodeQuery, translateMarkdown } from '@/utils'
75
import { HOME_PAGESIZE } from '@/utils/config'
86

97
// components
10-
import { Icon, Divider, Empty, Drawer, Tag, Spin } from 'antd'
8+
import QuickLink from './QuickLink'
9+
import ArticleList from './List'
10+
11+
import { Empty, Spin } from 'antd'
1112
import Pagination from '@/components/Pagination'
12-
import ArticleTag from '@/components/ArticleTag'
13-
import SvgIcon from '@/components/SvgIcon'
1413

1514
// hooks
1615
import useFetchList from '@/hooks/useFetchList'
1716

18-
const LinkList = props => {
19-
const { list, showTitle = true } = props
20-
return (
21-
<ul className='preview'>
22-
{showTitle && <Divider>快速导航</Divider>}
23-
{list.map(item => (
24-
<li key={item.id}>
25-
<Link to={`/article/${item.id}`}>{item.title}</Link>
26-
</li>
27-
))}
28-
</ul>
29-
)
30-
}
31-
32-
/**
33-
* 快速导航
34-
*/
35-
const QuickLink = props => {
36-
const isGreaterThan1300 = useMediaQuery({ query: '(min-width: 1300px)' })
37-
38-
const { list } = props
39-
40-
const [drawerVisible, setDrawerVisible] = useState(false)
41-
42-
return isGreaterThan1300 ? (
43-
<LinkList list={list} />
44-
) : (
45-
<>
46-
<div className='drawer-btn' onClick={e => setDrawerVisible(true)}>
47-
<Icon type='menu-o' className='nav-phone-icon' />
48-
</div>
49-
<Drawer
50-
title='快速导航'
51-
placement='right'
52-
closable={false}
53-
onClose={e => setDrawerVisible(false)}
54-
visible={drawerVisible}
55-
getContainer={() => document.querySelector('.app-home')}>
56-
<LinkList list={list} showTitle={false} />
57-
</Drawer>
58-
</>
59-
)
60-
}
61-
6217
const Home = props => {
6318
const { loading, pagination, dataList } = useFetchList({
6419
requestUrl: '/article/list',
@@ -74,47 +29,18 @@ const Home = props => {
7429
})
7530
}, [dataList])
7631

77-
// 跳转到文章详情
78-
function jumpTo(id) {
79-
props.history.push(`/article/${id}`)
80-
}
81-
8232
const { keyword } = decodeQuery(props.location.search)
8333

8434
return (
8535
<Spin tip='Loading...' spinning={loading}>
8636
<div className='app-home'>
87-
<ul className='app-home-list'>
88-
{list.map(item => (
89-
<li key={item.id} className='app-home-list-item'>
90-
<Divider orientation='left'>
91-
<span className='title' onClick={() => jumpTo(item.id)}>
92-
{item.title}
93-
</span>
94-
<span className='posted-time'>{item.createdAt.slice(0, 10)}</span>
95-
</Divider>
96-
97-
<div
98-
onClick={() => jumpTo(item.id)}
99-
className='article-detail content'
100-
dangerouslySetInnerHTML={{ __html: item.content }}
101-
/>
102-
103-
<div className='list-item-others'>
104-
<SvgIcon type='iconcomment' />
105-
<span style={{ marginRight: 5 }}> {calcCommentsCount(item.comments)}</span>
106-
107-
<SvgIcon type='iconview' style={{ marginRight: 5 }} />
108-
<span>{item.viewCount}</span>
37+
{/* list */}
38+
<ArticleList list={list} />
10939

110-
<ArticleTag tagList={item.tags} categoryList={item.categories} />
111-
</div>
112-
</li>
113-
))}
114-
</ul>
40+
{/* quick link */}
11541
<QuickLink list={list} />
11642

117-
{/* 结果为空 */}
43+
{/* serach empty result */}
11844
{list.length === 0 && keyword && (
11945
<div className='no-data'>
12046
<Empty description={(
@@ -125,12 +51,14 @@ const Home = props => {
12551
</div>
12652
)}
12753

128-
<Pagination {...pagination} onChange={
129-
page => {
130-
document.querySelector('.app-main').scrollTop = 0
131-
pagination.onChange(page)
132-
}
133-
} />
54+
<Pagination
55+
{...pagination}
56+
onChange={
57+
page => {
58+
document.querySelector('.app-main').scrollTop = 0 // turn to the top
59+
pagination.onChange(page)
60+
}
61+
} />
13462
</div>
13563
</Spin>
13664
)

0 commit comments

Comments
 (0)