tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update antd3.0

pull/17/head
nikogu 9 years ago
parent
e6d23aed9b
commit
dcb5f76751
6 changed files with 127 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/index.less
  2. 32
      src/routes/List/BasicList.js
  3. 51
      src/routes/List/CardList.js
  4. 61
      src/routes/List/CoverCardList.js
  5. 51
      src/routes/List/FilterCardList.js
  6. 51
      src/routes/List/SearchList.js

2
src/index.less
View File

@ -1,3 +1,5 @@
@import '~antd/lib/style/v2-compatible-reset.less';
html, body, :global(#root) {
height: 100%;
}

32
src/routes/List/BasicList.js
View File

@ -119,25 +119,23 @@ export default class BasicList extends PureComponent {
<Icon type="plus" /> 添加
</Button>
<List
rowKey="id"
loading={loading}
pagination={paginationProps}
>
{
list && list.map(item => (
<List.Item
key={item.id}
actions={[<a>编辑</a>, <MoreBtn />]}
>
<List.Item.Meta
avatar={<Avatar src={item.logo} shape="square" size="large" />}
title={<a href={item.href}>{item.title}</a>}
description={item.subDescription}
/>
<ListContent data={item} />
</List.Item>
))
}
</List>
dataSource={list}
renderItem={item => (
<List.Item
actions={[<a>编辑</a>, <MoreBtn />]}
>
<List.Item.Meta
avatar={<Avatar src={item.logo} shape="square" size="large" />}
title={<a href={item.href}>{item.title}</a>}
description={item.subDescription}
/>
<ListContent data={item} />
</List.Item>
)}
/>
</Card>
</div>
</PageHeaderLayout>

51
src/routes/List/CardList.js
View File

@ -55,34 +55,35 @@ export default class CardList extends PureComponent {
>
<div className={styles.cardList}>
<List
rowKey="id"
loading={loading}
grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }}
>
<List.Item>
<Button type="dashed" className={styles.newButton}>
<Icon type="plus" /> 新增产品
</Button>
</List.Item>
{
list && list.map(item => (
<List.Item key={item.id}>
<Link to="/list/card-list">
<Card actions={[<a>操作一</a>, <a>操作二</a>]}>
<Card.Meta
avatar={<Avatar size="large" src={item.avatar} />}
title={item.title}
description={(
<p className={styles.cardDescription}>
<span>{item.description}</span>
</p>
)}
/>
</Card>
</Link>
dataSource={['', ...list]}
renderItem={item => (item ? (
<List.Item key={item.id}>
<Link to="/list/card-list">
<Card actions={[<a>操作一</a>, <a>操作二</a>]}>
<Card.Meta
avatar={<Avatar size="large" src={item.avatar} />}
title={item.title}
description={(
<p className={styles.cardDescription}>
<span>{item.description}</span>
</p>
)}
/>
</Card>
</Link>
</List.Item>
) : (
<List.Item>
<Button type="dashed" className={styles.newButton}>
<Icon type="plus" /> 新增产品
</Button>
</List.Item>
))
}
</List>
)
)}
/>
</div>
</PageHeaderLayout>
);

61
src/routes/List/CoverCardList.js
View File

@ -73,40 +73,39 @@ export default class CoverCardList extends PureComponent {
const cardList = list ? (
<List
rowKey="id"
loading={loading}
grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }}
>
{
list.map(item => (
<List.Item key={item.id}>
<Card
cover={<img alt={item.title} src={item.cover} />}
>
<Card.Meta
title={item.title}
description={item.subDescription}
/>
<div className={styles.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={styles.avatarList}>
<AvatarList size="small">
{
item.members.map((member, i) => (
<AvatarList.Item
key={`${item.id}-avatar-${i}`}
src={member.avatar}
tips={member.name}
/>
))
}
</AvatarList>
</div>
dataSource={list}
renderItem={item => (
<List.Item>
<Card
cover={<img alt={item.title} src={item.cover} />}
>
<Card.Meta
title={item.title}
description={item.subDescription}
/>
<div className={styles.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={styles.avatarList}>
<AvatarList size="small">
{
item.members.map((member, i) => (
<AvatarList.Item
key={`${item.id}-avatar-${i}`}
src={member.avatar}
tips={member.name}
/>
))
}
</AvatarList>
</div>
</Card>
</List.Item>
))
}
</List>
</div>
</Card>
</List.Item>
)}
/>
) : null;
const tabList = [

51
src/routes/List/FilterCardList.js
View File

@ -195,36 +195,35 @@ export default class FilterCardList extends PureComponent {
</Form>
</Card>
<List
rowKey="id"
style={{ marginTop: 16 }}
grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
loading={loading}
>
{
list && list.map(item => (
<List.Item key={item.id}>
<Card
actions={[
<Tooltip title="复制"><Icon type="copy" /></Tooltip>,
<Tooltip title="用户"><Icon type="solution" /></Tooltip>,
<Tooltip title="设置"><Icon type="setting" /></Tooltip>,
<Tooltip title="删除"><Icon type="delete" /></Tooltip>,
]}
>
<Card.Meta
avatar={<Avatar size="large" src={item.avatar} />}
title={item.title}
dataSource={list}
renderItem={item => (
<List.Item key={item.id}>
<Card
actions={[
<Tooltip title="复制"><Icon type="copy" /></Tooltip>,
<Tooltip title="用户"><Icon type="solution" /></Tooltip>,
<Tooltip title="设置"><Icon type="setting" /></Tooltip>,
<Tooltip title="删除"><Icon type="delete" /></Tooltip>,
]}
>
<Card.Meta
avatar={<Avatar size="large" src={item.avatar} />}
title={item.title}
/>
<div className={styles.cardItemContent}>
<CardInfo
activeUser={formatWan(item.activeUser)}
newUser={numeral(item.newUser).format('0,0')}
/>
<div className={styles.cardItemContent}>
<CardInfo
activeUser={formatWan(item.activeUser)}
newUser={numeral(item.newUser).format('0,0')}
/>
</div>
</Card>
</List.Item>
))
}
</List>
</div>
</Card>
</List.Item>
)}
/>
</div>
</PageHeaderLayout>
);

51
src/routes/List/SearchList.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
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 StandardFormRow from '../../components/StandardFormRow';
@ -90,7 +90,7 @@ export default class SearchList extends Component {
render() {
const { showLoadMore, loadingMore } = this.state;
const { form, list: { list } } = this.props;
const { form, list: { list, loading } } = this.props;
const { getFieldDecorator } = form;
const owners = [
@ -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 (
<PageHeaderLayout
title="搜索列表"
@ -264,27 +273,25 @@ export default class SearchList extends Component {
</Card>
<Card style={{ marginTop: 16 }} bordered={false}>
<List
loadingMore={loadingMore}
showLoadMore={(list.length > 0) && showLoadMore}
onLoadMore={this.handleLoadMore}
loading={loading}
rowKey="id"
itemLayout="vertical"
>
{
list && list.map(item => (
<List.Item
key={item.id}
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} />}
>
<List.Item.Meta
title={<a href={item.href}>{item.title}</a>}
description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
/>
<ListContent data={item} />
</List.Item>
))
}
</List>
loadMore={loadMore}
dataSource={list}
renderItem={item => (
<List.Item
key={item.id}
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} />}
>
<List.Item.Meta
title={<a href={item.href}>{item.title}</a>}
description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
/>
<ListContent data={item} />
</List.Item>
)}
/>
</Card>
</div>
</PageHeaderLayout>

Write Preview
Loading…
Cancel
Save