update antd3.0

src/index.less

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

src/routes/List/BasicList.js

@@ -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>

src/routes/List/CardList.js

@@ -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>
     );

src/routes/List/CoverCardList.js

@@ -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 = [

src/routes/List/FilterCardList.js

@@ -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>
     );

src/routes/List/SearchList.js

@@ -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>