up list-view, refresh-control

ant-design · Sep 21, 2016 · d9d3f0a · d9d3f0a
1 parent 2f76536
commit d9d3f0a
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 294 deletions.
diff --git a/components/list-view/MyScroller.tsx b/components/list-view/MyScroller.tsx
diff --git a/components/list-view/handleProps.tsx b/components/list-view/handleProps.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 /* tslint:enable:no-unused-variable */
 import splitObject from '../_util/splitObject';
-import MyScroller from './MyScroller';
 import List from '../list';
 const { Item } = List;
 
@@ -15,7 +14,6 @@ export default function handleProps(props) {
     renderHeader: null as any,
     renderFooter: null as any,
     renderSectionHeader: null as any,
-    renderScrollComponent: scrollerProps => <MyScroller {...scrollerProps} />,
     renderBodyComponent: () => <div className={`${listPrefixCls}-body`} />,
     renderRow,
   };

diff --git a/components/refresh-control/PropsType.tsx b/components/refresh-control/PropsType.tsx
@@ -4,9 +4,6 @@ interface Props {
   refreshing?: boolean;
   /** web only */
   prefixCls?: string;
-  children?: any;
-  contentClassName?: string;
-  contentStyle?: {};
   icon?: ReactNode;
   loading?: ReactNode;
   distanceToRefresh?: number;

diff --git a/components/refresh-control/demo/basic.md b/components/refresh-control/demo/basic.md
@@ -1,57 +1,121 @@
 ---
 order: 0
-title: 基本
+title: ListView RefreshControl
 ---
 
 下拉刷新
 
 
 ````jsx
-import { RefreshControl, List } from 'antd-mobile';
+/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
+import { RefreshControl, ListView } from 'antd-mobile';
+
+const data = [
+  {
+    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
+    title: '相约酒店',
+    des: '不是所有的兼职汪都需要风吹日晒',
+  },
+  {
+    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
+    title: '麦当劳邀您过周末',
+    des: '不是所有的兼职汪都需要风吹日晒',
+  },
+  {
+    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
+    title: '食惠周',
+    des: '不是所有的兼职汪都需要风吹日晒',
+  },
+];
+let index = data.length - 1;
+
+let pageIndex = 0;
 
-let count = 1;
 const App = React.createClass({
   getInitialState() {
+    const dataSource = new ListView.DataSource({
+      rowHasChanged: (row1, row2) => row1 !== row2,
+    });
+
+    this.initData = [];
+    for (let i = 0; i < 20; i++) {
+      this.initData.push(`r${i}`);
+    }
     return {
-      items: null,
+      dataSource: dataSource.cloneWithRows(this.initData),
       refreshing: false,
     };
   },
   onRefresh() {
     this.setState({ refreshing: true });
     setTimeout(() => {
-      this.addItem();
-      this.setState({ refreshing: false });
+      this.initData = [`ref${pageIndex++}`, ...this.initData];
+      this.setState({
+        dataSource: this.state.dataSource.cloneWithRows(this.initData),
+        refreshing: false,
+      });
     }, 1000);
   },
-  addItem() {
-    const newItems = this.state.items ? [...this.state.items] : [];
-    newItems.unshift(
-      <List.Item key={`item-${count}`} extra="horizontal,箭头向右" arrow="horizontal">标题文字 {count++}</List.Item>
-    );
-    this.setState({
-      items: newItems,
-    });
+  onScroll() {
+    console.log('sss');
   },
   render() {
+    const separator = (sectionID, rowID) => (
+      <div key={`${sectionID}-${rowID}`} style={{
+        backgroundColor: '#F5F5F9',
+        height: 8,
+        borderTop: '1px solid #ECECED',
+        borderBottom: '1px solid #ECECED',
+      }} />
+    );
+    const row = (rowData, sectionID, rowID) => {
+      if (index < 0) {
+        index = data.length - 1;
+      }
+      const obj = data[index--];
+      return (
+        <div key={rowID}
+          style={{
+            padding: '8px 16px',
+            backgroundColor: 'white',
+          }}
+        >
+          <h3 style={{
+            padding: 2,
+            marginBottom: 8,
+            borderBottom: '1px solid #F6F6F6',
+          }}>{obj.title}</h3>
+          <div style={{ display: '-webkit-box', display: 'flex' }}>
+            <img style={{ height: 64 * (window.viewportScale || 1), marginRight: 8 }} src={obj.img} />
+            <div style={{ display: 'inline-block' }}>
+              <p>{obj.des}-{rowData}</p>
+              <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>35</span>元/任务</p>
+            </div>
+          </div>
+        </div>
+      );
+    };
     return (
-      <RefreshControl
-        refreshing={this.state.refreshing}
-        onRefresh={this.onRefresh}
-        resistance={1}
-        className="am-refresh-control-demo1"
+      <ListView
+        dataSource={this.state.dataSource}
+        renderRow={row}
+        renderSeparator={separator}
+        initialListSize={5}
+        pageSize={5}
+        scrollRenderAheadDistance={200}
+        scrollEventThrottle={20}
+        onScroll={this.onScroll}
         style={{
-          height: 600,
-          textAlign: 'center',
+          height: document.body.clientHeight / 2,
+          border: '1px solid #ddd',
+          margin: '10px 0',
         }}
-      >
-        <List renderHeader={() => '下拉刷新'}>
-          {this.state.items}
-          <List.Item extra="horizontal,箭头向右" arrow="horizontal">标题文字</List.Item>
-          <List.Item extra="down,箭头向下" arrow="down">标题文字</List.Item>
-          <List.Item extra="up,箭头向上" arrow="up">标题文字</List.Item>
-        </List>
-      </RefreshControl>
+        scrollerOptions={{ scrollbars: true }}
+        refreshControl={<RefreshControl
+          refreshing={this.state.refreshing}
+          onRefresh={this.onRefresh}
+        />}
+      />
     );
   },
 });

diff --git a/components/refresh-control/demo/basic1.md b/components/refresh-control/demo/basic1.md
diff --git a/components/refresh-control/index.md b/components/refresh-control/index.md
@@ -8,7 +8,7 @@ english: RefreshControl
 通过触发，立刻重新加载内容。
 
 ### 规则
-- 一般多运用在 List 和 ListView 中。
+- 只能和 ListView 结合使用，不能单独使用。
 - 可考虑定期自动刷新，eg：登录 app 后，自动刷新首页 List。