Skip to content

GitLab

P
pro-blocks
Commit dcb5f767 authored by nikogu's avatar nikogu
Browse files
Options

update antd3.0

parent e6d23aed
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 121 deletions
src/index.less
View file @ dcb5f767
@import '~antd/lib/style/v2-compatible-reset.less';
html, body, :global(#root) { html, body, :global(#root) {
height: 100%; height: 100%;
} }
......
src/routes/List/BasicList.js
View file @ dcb5f767
...@@ -119,25 +119,23 @@ export default class BasicList extends PureComponent { ...@@ -119,25 +119,23 @@ export default class BasicList extends PureComponent {
<Icon type="plus" /> 添加 <Icon type="plus" /> 添加
</Button> </Button>
<List <List
rowKey="id"
loading={loading} loading={loading}
pagination={paginationProps} pagination={paginationProps}
> dataSource={list}
{ renderItem={item => (
list && list.map(item => ( <List.Item
<List.Item actions={[<a>编辑</a>, <MoreBtn />]}
key={item.id} >
actions={[<a>编辑</a>, <MoreBtn />]} <List.Item.Meta
> avatar={<Avatar src={item.logo} shape="square" size="large" />}
<List.Item.Meta title={<a href={item.href}>{item.title}</a>}
avatar={<Avatar src={item.logo} shape="square" size="large" />} description={item.subDescription}
title={<a href={item.href}>{item.title}</a>} />
description={item.subDescription} <ListContent data={item} />
/> </List.Item>
<ListContent data={item} /> )}
</List.Item> />
))
}
</List>
</Card> </Card>
</div> </div>
</PageHeaderLayout> </PageHeaderLayout>
......
src/routes/List/CardList.js
View file @ dcb5f767
...@@ -55,34 +55,35 @@ export default class CardList extends PureComponent { ...@@ -55,34 +55,35 @@ export default class CardList extends PureComponent {
> >
<div className={styles.cardList}> <div className={styles.cardList}>
<List <List
rowKey="id"
loading={loading} loading={loading}
grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }} grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }}
> dataSource={['', ...list]}
<List.Item> renderItem={item => (item ? (
<Button type="dashed" className={styles.newButton}> <List.Item key={item.id}>
<Icon type="plus" /> 新增产品 <Link to="/list/card-list">
</Button> <Card actions={[<a>操作一</a>, <a>操作二</a>]}>
</List.Item> <Card.Meta
{ avatar={<Avatar size="large" src={item.avatar} />}
list && list.map(item => ( title={item.title}
<List.Item key={item.id}> description={(
<Link to="/list/card-list"> <p className={styles.cardDescription}>
<Card actions={[<a>操作一</a>, <a>操作二</a>]}> <span>{item.description}</span>
<Card.Meta </p>
avatar={<Avatar size="large" src={item.avatar} />} )}
title={item.title} />
description={( </Card>
<p className={styles.cardDescription}> </Link>
<span>{item.description}</span> </List.Item>
</p> ) : (
)} <List.Item>
/> <Button type="dashed" className={styles.newButton}>
</Card> <Icon type="plus" /> 新增产品
</Link> </Button>
</List.Item> </List.Item>
)) )
} )}
</List> />
</div> </div>
</PageHeaderLayout> </PageHeaderLayout>
); );
......
src/routes/List/CoverCardList.js
View file @ dcb5f767
...@@ -73,40 +73,39 @@ export default class CoverCardList extends PureComponent { ...@@ -73,40 +73,39 @@ export default class CoverCardList extends PureComponent {
const cardList = list ? ( const cardList = list ? (
<List <List
rowKey="id"
loading={loading} loading={loading}
grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }} grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }}
> dataSource={list}
{ renderItem={item => (
list.map(item => ( <List.Item>
<List.Item key={item.id}> <Card
<Card cover={<img alt={item.title} src={item.cover} />}
cover={<img alt={item.title} src={item.cover} />} >
> <Card.Meta
<Card.Meta title={item.title}
title={item.title} description={item.subDescription}
description={item.subDescription} />
/> <div className={styles.cardItemContent}>
<div className={styles.cardItemContent}> <span>{moment(item.updatedAt).fromNow()}</span>
<span>{moment(item.updatedAt).fromNow()}</span> <div className={styles.avatarList}>
<div className={styles.avatarList}> <AvatarList size="small">
<AvatarList size="small"> {
{ item.members.map((member, i) => (
item.members.map((member, i) => ( <AvatarList.Item
<AvatarList.Item key={`${item.id}-avatar-${i}`}
key={`${item.id}-avatar-${i}`} src={member.avatar}
src={member.avatar} tips={member.name}
tips={member.name} />
/> ))
)) }
} </AvatarList>
</AvatarList>
</div>
</div> </div>
</Card> </div>
</List.Item> </Card>
)) </List.Item>
} )}
</List> />
) : null; ) : null;
const tabList = [ const tabList = [
......
src/routes/List/FilterCardList.js
View file @ dcb5f767
...@@ -195,36 +195,35 @@ export default class FilterCardList extends PureComponent { ...@@ -195,36 +195,35 @@ export default class FilterCardList extends PureComponent {
</Form> </Form>
</Card> </Card>
<List <List
rowKey="id"
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }} grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
loading={loading} loading={loading}
> dataSource={list}
{ renderItem={item => (
list && list.map(item => ( <List.Item key={item.id}>
<List.Item key={item.id}> <Card
<Card actions={[
actions={[ <Tooltip title="复制"><Icon type="copy" /></Tooltip>,
<Tooltip title="复制"><Icon type="copy" /></Tooltip>, <Tooltip title="用户"><Icon type="solution" /></Tooltip>,
<Tooltip title="用户"><Icon type="solution" /></Tooltip>, <Tooltip title="设置"><Icon type="setting" /></Tooltip>,
<Tooltip title="设置"><Icon type="setting" /></Tooltip>, <Tooltip title="删除"><Icon type="delete" /></Tooltip>,
<Tooltip title="删除"><Icon type="delete" /></Tooltip>, ]}
]} >
> <Card.Meta
<Card.Meta avatar={<Avatar size="large" src={item.avatar} />}
avatar={<Avatar size="large" src={item.avatar} />} title={item.title}
title={item.title} />
<div className={styles.cardItemContent}>
<CardInfo
activeUser={formatWan(item.activeUser)}
newUser={numeral(item.newUser).format('0,0')}
/> />
<div className={styles.cardItemContent}> </div>
<CardInfo </Card>
activeUser={formatWan(item.activeUser)} </List.Item>
newUser={numeral(item.newUser).format('0,0')} )}
/> />
</div>
</Card>
</List.Item>
))
}
</List>
</div> </div>
</PageHeaderLayout> </PageHeaderLayout>
); );
......
src/routes/List/SearchList.js
View file @ dcb5f767
...@@ -2,7 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import { routerRedux } from 'dva/router'; import { routerRedux } from 'dva/router';
import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col } from 'antd'; import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow'; import StandardFormRow from '../../components/StandardFormRow';
...@@ -90,7 +90,7 @@ export default class SearchList extends Component { ...@@ -90,7 +90,7 @@ export default class SearchList extends Component {
render() { render() {
const { showLoadMore, loadingMore } = this.state; const { showLoadMore, loadingMore } = this.state;
const { form, list: { list } } = this.props; const { form, list: { list, loading } } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const owners = [ const owners = [
...@@ -161,6 +161,15 @@ export default class SearchList extends Component { ...@@ -161,6 +161,15 @@ export default class SearchList extends Component {
}, },
}; };
const loadMore = showLoadMore ? (
<div style={{ textAlign: 'center', marginTop: 8 }}>
<Button onClick={this.handleLoadMore}>
{loadingMore && (<span><Icon type="loading" /> 加载中...</span>)}
{!loadingMore && (<span>加载更多</span>)}
</Button>
</div>
) : null;
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="搜索列表" title="搜索列表"
...@@ -264,27 +273,25 @@ export default class SearchList extends Component { ...@@ -264,27 +273,25 @@ export default class SearchList extends Component {
</Card> </Card>
<Card style={{ marginTop: 16 }} bordered={false}> <Card style={{ marginTop: 16 }} bordered={false}>
<List <List
loadingMore={loadingMore} loading={loading}
showLoadMore={(list.length > 0) && showLoadMore} rowKey="id"
onLoadMore={this.handleLoadMore}
itemLayout="vertical" itemLayout="vertical"
> loadMore={loadMore}
{ dataSource={list}
list && list.map(item => ( renderItem={item => (
<List.Item <List.Item
key={item.id} key={item.id}
actions={[<IconText type="star-o" text={item.star} />, <IconText type="like-o" text={item.like} />, <IconText type="message" text={item.message} />]} actions={[<IconText type="star-o" text={item.star} />, <IconText type="like-o" text={item.like} />, <IconText type="message" text={item.message} />]}
extra={<div className={styles.listItemExtra} />} extra={<div className={styles.listItemExtra} />}
> >
<List.Item.Meta <List.Item.Meta
title={<a href={item.href}>{item.title}</a>} title={<a href={item.href}>{item.title}</a>}
description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>} description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
/> />
<ListContent data={item} /> <ListContent data={item} />
</List.Item> </List.Item>
)) )}
} />
</List>
</Card> </Card>
</div> </div>
</PageHeaderLayout> </PageHeaderLayout>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment