update antd3.0

src/index.less

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

src/routes/List/BasicList.js

@@ -119,13 +119,12 @@ export default class BasicList extends PureComponent {
               <Icon type="plus" /> 添加
             </Button>
             <List
+              rowKey="id"
               loading={loading}
               pagination={paginationProps}
-            >
-              {
-                list && list.map(item => (
+              dataSource={list}
+              renderItem={item => (
                 <List.Item
-                    key={item.id}
                   actions={[<a>编辑</a>, <MoreBtn />]}
                 >
                   <List.Item.Meta
@@ -135,9 +134,8 @@ export default class BasicList extends PureComponent {
                   />
                   <ListContent data={item} />
                 </List.Item>
-                ))
-              }
-            </List>
+              )}
+            />
           </Card>
         </div>
       </PageHeaderLayout>

src/routes/List/CardList.js

@@ -55,16 +55,11 @@ 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 => (
+            dataSource={['', ...list]}
+            renderItem={item => (item ? (
               <List.Item key={item.id}>
                 <Link to="/list/card-list">
                   <Card actions={[<a>操作一</a>, <a>操作二</a>]}>
@@ -80,9 +75,15 @@ export default class CardList extends PureComponent {
                   </Card>
                 </Link>
               </List.Item>
-              ))
-            }
-          </List>
+              ) : (
+                <List.Item>
+                  <Button type="dashed" className={styles.newButton}>
+                    <Icon type="plus" /> 新增产品
+                  </Button>
+                </List.Item>
+              )
+            )}
+          />
         </div>
       </PageHeaderLayout>
     );

src/routes/List/CoverCardList.js

@@ -73,12 +73,12 @@ 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}>
+        dataSource={list}
+        renderItem={item => (
+          <List.Item>
             <Card
               cover={<img alt={item.title} src={item.cover} />}
             >
@@ -104,9 +104,8 @@ export default class CoverCardList extends PureComponent {
               </div>
             </Card>
           </List.Item>
-          ))
-        }
-      </List>
+        )}
+      />
     ) : null;
 
     const tabList = [

src/routes/List/FilterCardList.js

@@ -195,12 +195,12 @@ 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 => (
+            dataSource={list}
+            renderItem={item => (
               <List.Item key={item.id}>
                 <Card
                   actions={[
@@ -222,9 +222,8 @@ export default class FilterCardList extends PureComponent {
                   </div>
                 </Card>
               </List.Item>
-              ))
-            }
-          </List>
+            )}
+          />
         </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,13 +273,12 @@ 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 => (
+              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} />]}
@@ -282,9 +290,8 @@ export default class SearchList extends Component {
                   />
                   <ListContent data={item} />
                 </List.Item>
-                ))
-              }
-            </List>
+              )}
+            />
           </Card>
         </div>
       </PageHeaderLayout>