From d9d3f0a8c7d048cbc51ee2694fa9b38f44878237 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Thu, 22 Sep 2016 01:16:43 +0800 Subject: [PATCH] up list-view, refresh-control --- components/list-view/MyScroller.tsx | 82 -------------- components/list-view/handleProps.tsx | 2 - components/refresh-control/PropsType.tsx | 3 - components/refresh-control/demo/basic.md | 122 ++++++++++++++++----- components/refresh-control/demo/basic1.md | 125 ---------------------- components/refresh-control/index.md | 2 +- components/refresh-control/index.web.tsx | 85 ++++++++------- package.json | 3 +- site/mobile/template/KitchenSink/Demo.jsx | 8 +- 9 files changed, 138 insertions(+), 294 deletions(-) delete mode 100644 components/list-view/MyScroller.tsx delete mode 100644 components/refresh-control/demo/basic1.md diff --git a/components/list-view/MyScroller.tsx b/components/list-view/MyScroller.tsx deleted file mode 100644 index a4f07923a1..0000000000 --- a/components/list-view/MyScroller.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import DOMScroller from 'zscroller'; -import assign from 'object-assign'; - -const throttle = function (fn, delay) { - let allowSample = true; - return function (e) { - if (allowSample) { - allowSample = false; - setTimeout(function () { allowSample = true; }, delay); - fn(e); - } - }; -}; - -const SCROLLVIEW = 'ScrollView'; -const INNERVIEW = 'InnerScrollView'; - -export default class MyScroller extends React.Component { - domScroller: any; - throttleScrollExec: any; - refs: any; - componentDidMount() { - this.throttleScrollExec = this.throttleScroll(); - if (this.props.useZscroller) { - this.domScroller = new DOMScroller(ReactDOM.findDOMNode(this.refs[INNERVIEW]), assign({}, { - scrollingX: false, - onScroll: this.throttleScrollExec, - }, this.props.scrollerOptions)); - } else { - ReactDOM.findDOMNode(this.refs[SCROLLVIEW]).addEventListener('scroll', this.throttleScrollExec); - } - } - componentWillUnmount() { - if (this.props.useZscroller) { - this.domScroller.destroy(); - } else { - ReactDOM.findDOMNode(this.refs[SCROLLVIEW]).removeEventListener('scroll', this.throttleScrollExec); - } - } - handleScroll = (e) => { - const { onScroll = (ev) => { }, useZscroller, refreshControl } = this.props; - if (useZscroller && refreshControl && this.refs.refreshControl) { - this.refs.refreshControl.refs.refreshControl.refs.placeholder.style.height = - `${ReactDOM.findDOMNode(this.refs[INNERVIEW]).offsetHeight}px`; - } - onScroll(e); - } - throttleScroll = () => { - let handleScroll = (ev) => {}; - if (this.props.scrollEventThrottle && this.props.onScroll) { - handleScroll = throttle(this.handleScroll, this.props.scrollEventThrottle); - } - return handleScroll; - } - render() { - const { - children, className, prefixCls, listPrefixCls, listViewPrefixCls, - style = {}, contentContainerStyle, useZscroller, refreshControl, - } = this.props; - const preCls = prefixCls || listViewPrefixCls || ''; - return React.cloneElement( -
, - { - style: useZscroller ? assign({}, { - position: 'relative', - overflow: 'hidden', - flex: 1, - }, style) : style, - }, - useZscroller && refreshControl ? React.cloneElement(refreshControl, { - ref: 'refreshControl', - outerContainer: true, - }) : undefined, -
{children}
- ); - } -} diff --git a/components/list-view/handleProps.tsx b/components/list-view/handleProps.tsx index 4d83358b5e..66e7b55d42 100644 --- 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 => , renderBodyComponent: () =>
, renderRow, }; diff --git a/components/refresh-control/PropsType.tsx b/components/refresh-control/PropsType.tsx index 4f3ea75872..aadd176f84 100644 --- 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 index d6ec323623..164d650376 100644 --- 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( - 标题文字 {count++} - ); - this.setState({ - items: newItems, - }); + onScroll() { + console.log('sss'); }, render() { + const separator = (sectionID, rowID) => ( +
+ ); + const row = (rowData, sectionID, rowID) => { + if (index < 0) { + index = data.length - 1; + } + const obj = data[index--]; + return ( +
+

{obj.title}

+
+ +
+

{obj.des}-{rowData}

+

35元/任务

+
+
+
+ ); + }; return ( - - '下拉刷新'}> - {this.state.items} - 标题文字 - 标题文字 - 标题文字 - - + scrollerOptions={{ scrollbars: true }} + refreshControl={} + /> ); }, }); diff --git a/components/refresh-control/demo/basic1.md b/components/refresh-control/demo/basic1.md deleted file mode 100644 index af395919f1..0000000000 --- a/components/refresh-control/demo/basic1.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -order: 1 -title: ListView RefreshControl ---- - -下拉刷新 - - -````jsx -/* 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; - -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 { - dataSource: dataSource.cloneWithRows(this.initData), - refreshing: false, - }; - }, - onRefresh() { - this.setState({ refreshing: true }); - setTimeout(() => { - this.initData = [`ref${pageIndex++}`, ...this.initData]; - this.setState({ - dataSource: this.state.dataSource.cloneWithRows(this.initData), - refreshing: false, - }); - }, 1000); - }, - onScroll() { - console.log('sss'); - }, - render() { - const separator = (sectionID, rowID) => ( -
- ); - const row = (rowData, sectionID, rowID) => { - if (index < 0) { - index = data.length - 1; - } - const obj = data[index--]; - return ( -
-

{obj.title}

-
- -
-

{obj.des}-{rowData}

-

35元/任务

-
-
-
- ); - }; - return ( - } - /> - ); - }, -}); - -ReactDOM.render(, mountNode); -```` diff --git a/components/refresh-control/index.md b/components/refresh-control/index.md index 4a9840d69b..f4fe82ffd0 100644 --- a/components/refresh-control/index.md +++ b/components/refresh-control/index.md @@ -8,7 +8,7 @@ english: RefreshControl 通过触发，立刻重新加载内容。 ### 规则 -- 一般多运用在 List 和 ListView 中。 +- 只能和 ListView 结合使用，不能单独使用。 - 可考虑定期自动刷新，eg：登录 app 后，自动刷新首页 List。 diff --git a/components/refresh-control/index.web.tsx b/components/refresh-control/index.web.tsx index 4117029d13..66bf55eb8c 100644 --- a/components/refresh-control/index.web.tsx +++ b/components/refresh-control/index.web.tsx @@ -1,47 +1,46 @@ +/* tslint:disable:no-unused-variable */ import React from 'react'; -import PullToRefresh from 'rmc-pull-to-refresh'; +/* tslint:enable:no-unused-variable */ +import ListView from 'rmc-list-view'; import Icon from '../icon'; -import tsPropsType from './PropsType'; -import splitObject from '../_util/splitObject'; +// import tsPropsType from './PropsType'; +import assign from 'object-assign'; -export default class RefreshControl extends React.Component { - static defaultProps = { - prefixCls: 'am-refresh-control', - icon:
-
- 下拉 -
-
- 释放 -
-
, - loading:
, - refreshing: false, - }; +ListView.RefreshControl.defaultProps = assign({}, ListView.RefreshControl.defaultProps, { + prefixCls: 'am-refresh-control', + icon:
+
+ 下拉 +
+
+ 释放 +
+
, + loading:
, + refreshing: false, +}); +export default ListView.RefreshControl; - resolveCallback: Function; - - loadingFunction = () => { - return new Promise((resolve, reject) => { - this.props.onRefresh(); - this.resolveCallback = resolve; - }); - }; - - render() { - let [{ refreshing }, restProps] = splitObject(this.props, - ['onRefresh', 'refreshing']); - const refreshProps = { - loadingFunction: this.loadingFunction, - }; - if (!refreshing && this.resolveCallback) { - this.resolveCallback(); - } - return ( - - ); - } -} +// export default class RefreshControl extends React.Component { +// static defaultProps = assign({}, ListView.RefreshControl.defaultProps, { +// prefixCls: 'am-refresh-control', +// icon:
+//
+// 下拉 +//
+//
+// 释放 +//
+//
, +// loading:
, +// refreshing: false, +// }); +// render() { +// return ( +// +// ); +// } +// } diff --git a/package.json b/package.json index 607f491d3f..c30339c114 100644 --- a/package.json +++ b/package.json @@ -56,9 +56,8 @@ "react-timer-mixin": "~0.13.3", "rmc-cascader": "3.0.x", "rmc-date-picker": "5.0.x", - "rmc-list-view": "~0.7.0-beta.1", + "rmc-list-view": "~0.7.0-beta.3", "rmc-picker": "3.4.x", - "rmc-pull-to-refresh": "~0.5.0", "rn-topview": "^0.1.0", "zscroller": "~0.2.2" }, diff --git a/site/mobile/template/KitchenSink/Demo.jsx b/site/mobile/template/KitchenSink/Demo.jsx index b8d8f8c4c4..156bdfc84f 100644 --- a/site/mobile/template/KitchenSink/Demo.jsx +++ b/site/mobile/template/KitchenSink/Demo.jsx @@ -100,7 +100,7 @@ export default class Home extends React.Component { } }); - const whiteList = ['drawer', 'list-view', 'refresh-control']; + const whiteList = ['drawer', 'list-view']; const drawerDemos = [ { order: 0, title: '基本' }, { order: 1, title: '嵌入文档模式' }, @@ -112,10 +112,6 @@ export default class Home extends React.Component { { order: 3, title: 'IndexedList' }, { order: 4, title: 'IndexedList 吸顶' }, ]; - const refreshControlDemos = [ - { order: 0, title: '基本' }, - { order: 1, title: 'ListView RefreshControl' }, - ]; const sidebar = (
@@ -132,8 +128,6 @@ export default class Home extends React.Component { let subDemos; if (fileName === 'drawer') { subDemos = drawerDemos; - } else if (fileName === 'refresh-control') { - subDemos = refreshControlDemos; } else { subDemos = listDemos; }