nuke-scroll-view
Advanced tools
| { | ||
| "name": "ScrollView", | ||
| "props": { | ||
| "style": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.any" | ||
| }, | ||
| "required": false, | ||
| "description": "ScrollView 样式 style of ScrollView", | ||
| "defaultValue": { | ||
| "value": "{}", | ||
| "computed": false | ||
| }, | ||
| "docblock": "ScrollView 样式 style of ScrollView" | ||
| }, | ||
| "onScroll": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.func" | ||
| }, | ||
| "required": false, | ||
| "description": "滚动时回调 callback when scrolling", | ||
| "defaultValue": { | ||
| "value": "null", | ||
| "computed": false | ||
| }, | ||
| "docblock": "滚动时回调 callback when scrolling" | ||
| }, | ||
| "onScrollStart": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.func" | ||
| }, | ||
| "required": false, | ||
| "description": "滚动开始时回调 callback when scrolling", | ||
| "defaultValue": { | ||
| "value": "null", | ||
| "computed": false | ||
| }, | ||
| "docblock": "滚动开始时回调 callback when scrolling" | ||
| }, | ||
| "onScrollEnd": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.func" | ||
| }, | ||
| "required": false, | ||
| "description": "滚动结束时回调 callback when scrolling", | ||
| "defaultValue": { | ||
| "value": "null", | ||
| "computed": false | ||
| }, | ||
| "docblock": "滚动结束时回调 callback when scrolling" | ||
| }, | ||
| "onEndReached": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.func" | ||
| }, | ||
| "required": false, | ||
| "description": "加载到底部时回调 callback when scrolling to bottom", | ||
| "defaultValue": { | ||
| "value": "() => {}", | ||
| "computed": false | ||
| }, | ||
| "docblock": "加载到底部时回调 callback when scrolling to bottom" | ||
| }, | ||
| "horizontal": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.boolean" | ||
| }, | ||
| "required": false, | ||
| "description": "是否横向 is horizontal", | ||
| "defaultValue": { | ||
| "value": "false", | ||
| "computed": false | ||
| }, | ||
| "docblock": "是否横向 is horizontal" | ||
| }, | ||
| "onEndReachedThreshold": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.number" | ||
| }, | ||
| "required": false, | ||
| "description": "触发加载到底部回调的位移 offset of scrolling to bottom event been triggered", | ||
| "defaultValue": { | ||
| "value": "500", | ||
| "computed": false | ||
| }, | ||
| "docblock": "触发加载到底部回调的位移 offset of scrolling to bottom event been triggered" | ||
| }, | ||
| "showsHorizontalScrollIndicator": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.boolean" | ||
| }, | ||
| "required": false, | ||
| "description": "是否展示横向滚动条 is show horizontal scrollbar", | ||
| "defaultValue": { | ||
| "value": "true", | ||
| "computed": false | ||
| }, | ||
| "docblock": "是否展示横向滚动条 is show horizontal scrollbar" | ||
| }, | ||
| "showsVerticalScrollIndicator": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.boolean" | ||
| }, | ||
| "required": false, | ||
| "description": "是否展示纵向滚动条 is show vertical scrollbar", | ||
| "defaultValue": { | ||
| "value": "true", | ||
| "computed": false | ||
| }, | ||
| "docblock": "是否展示纵向滚动条 is show vertical scrollbar" | ||
| }, | ||
| "contentContainerStyle": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.any" | ||
| }, | ||
| "required": false, | ||
| "description": "内容容器样式 the style of content's wrap container", | ||
| "defaultValue": { | ||
| "value": "{}", | ||
| "computed": false | ||
| }, | ||
| "docblock": "内容容器样式 the style of content's wrap container" | ||
| }, | ||
| "scrollEventThrottle": { | ||
| "type": { | ||
| "name": "custom", | ||
| "raw": "PropTypes.number" | ||
| }, | ||
| "required": false, | ||
| "description": "onScroll 事件触发节流时间 the time inteval of next onScroll event being triggered", | ||
| "defaultValue": { | ||
| "value": "50", | ||
| "computed": false | ||
| }, | ||
| "docblock": "onScroll 事件触发节流时间 the time inteval of next onScroll event being triggered" | ||
| } | ||
| }, | ||
| "methods": [ | ||
| { | ||
| "name": "resetLoadmore", | ||
| "docblock": "兼容旧的 resetScroll", | ||
| "modifiers": [], | ||
| "params": [], | ||
| "returns": null, | ||
| "description": "兼容旧的 resetScroll" | ||
| } | ||
| ], | ||
| "description": "可滚动容器", | ||
| "subComponents": [] | ||
| } |
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.default = { | ||
| vertical: { | ||
| flex: 1, | ||
| flexDirection: 'column' | ||
| }, | ||
| horizontal: { | ||
| flex: 1, | ||
| flexDirection: 'row' | ||
| }, | ||
| contentContainerHorizontal: { | ||
| flexDirection: 'row' | ||
| }, | ||
| containerWebStyle: { | ||
| display: 'block' | ||
| }, | ||
| scrollerWeb: { | ||
| webkitOverflowScrolling: 'touch', | ||
| overflow: 'scroll' | ||
| } | ||
| }; | ||
| module.exports = exports['default']; |
+323
-240
| 'use strict'; | ||
| /** @jsx createElement */ | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -15,4 +17,2 @@ value: true | ||
| var _nukeEnv2 = _interopRequireDefault(_nukeEnv); | ||
| var _nukeView = require('nuke-view'); | ||
@@ -26,5 +26,9 @@ | ||
| var _styles = require('./styles'); | ||
| var _styles2 = _interopRequireDefault(_styles); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
@@ -37,65 +41,105 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var WebPullToRefresh = void 0; | ||
| var isWeex = _nukeEnv2.default.isWeex, | ||
| isWeb = _nukeEnv2.default.isWeb; | ||
| var SCROLLVIEW_CLS = 'rax-scrollview'; | ||
| if (isWeb) { | ||
| WebPullToRefresh = require('./mods/wptr.js'); | ||
| } | ||
| var DEFAULT_END_REACHED_THRESHOLD = 500; | ||
| var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50; | ||
| var LOADMORE_THRESHOLD = 500; | ||
| var ON_SCROLL_THROTTLE = 50; | ||
| var FULL_WIDTH = 750; | ||
| var ScrollViewTest = function (_Component) { | ||
| _inherits(ScrollViewTest, _Component); | ||
| /** | ||
| * ScrollView | ||
| * @description 可滚动容器 | ||
| */ | ||
| function ScrollViewTest(props) { | ||
| _classCallCheck(this, ScrollViewTest); | ||
| var ScrollView = function (_Component) { | ||
| _inherits(ScrollView, _Component); | ||
| var _this = _possibleConstructorReturn(this, (ScrollViewTest.__proto__ || Object.getPrototypeOf(ScrollViewTest)).call(this, props)); | ||
| function ScrollView(props) { | ||
| _classCallCheck(this, ScrollView); | ||
| var _this = _possibleConstructorReturn(this, (ScrollView.__proto__ || Object.getPrototypeOf(ScrollView)).call(this, props)); | ||
| _this.state = { | ||
| loadmoreretry: 0 | ||
| }; | ||
| _this.timer = null; | ||
| _this.childrenAll = {}; | ||
| _this.scrollStartFlag = false; | ||
| _this.lastScrollEventTriggerTime = 0; | ||
| _this.lastScrollContentSize = 0; | ||
| _this.lastScrollDistance = 0; | ||
| _this.lastScrollContentSize = 0; | ||
| _this.loadmoreretry = 1; | ||
| _this.handleScroll = function (e) { | ||
| if (isWeb) { | ||
| if (_this.props.onScroll) { | ||
| _this.handleScroll = _this.handleScroll.bind(_this); | ||
| _this.scrollTo = _this.scrollTo.bind(_this); | ||
| _this.scrollToElement = _this.scrollToElement.bind(_this); | ||
| _this.resetLoadmore = _this.resetLoadmore.bind(_this); | ||
| _this.checkScrolling = _this.checkScrolling.bind(_this); | ||
| return _this; | ||
| } | ||
| _createClass(ScrollView, [{ | ||
| key: 'checkScrolling', | ||
| value: function checkScrolling() { | ||
| var now = new Date().getTime(); | ||
| if (this.lastScrollEventTriggerTime > 0 && now - this.lastScrollEventTriggerTime > 200) { | ||
| this.scrollStartFlag = false; | ||
| clearTimeout(this.timer); | ||
| this.timer = null; | ||
| this.props.onScrollEnd && this.props.onScrollEnd(); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'handleScroll', | ||
| value: function handleScroll(e) { | ||
| var _props = this.props, | ||
| onScroll = _props.onScroll, | ||
| onScrollStart = _props.onScrollStart, | ||
| horizontal = _props.horizontal, | ||
| onEndReached = _props.onEndReached, | ||
| onEndReachedThreshold = _props.onEndReachedThreshold; | ||
| if (_nukeEnv.isWeb) { | ||
| if (!this.scrollStartFlag) { | ||
| // first time trigger onScroll | ||
| this.scrollStartFlag = true; | ||
| onScrollStart && onScrollStart(e); | ||
| } | ||
| clearTimeout(this.timer); | ||
| this.lastScrollEventTriggerTime = new Date().getTime(); | ||
| if (onScroll) { | ||
| e.nativeEvent = { | ||
| get contentOffset() { | ||
| return { | ||
| x: e.target.scrollLeft, | ||
| y: e.target.scrollTop | ||
| }; | ||
| contentOffset: { | ||
| x: e.target.scrollLeft, | ||
| y: e.target.scrollTop | ||
| } | ||
| }; | ||
| _this.props.onScroll(e); | ||
| onScroll && onScroll(e); | ||
| } | ||
| this.timer = setTimeout(this.checkScrolling, 200); | ||
| if (onEndReached) { | ||
| if (!this.scrollerNode) { | ||
| this.scrollerNode = (0, _rax.findDOMNode)(this.refs.scroller); | ||
| this.scrollerContentNode = (0, _rax.findDOMNode)(this.refs.contentContainer); | ||
| if (_this.props.onEndReached) { | ||
| if (!_this.scrollerNode) { | ||
| _this.scrollerNode = (0, _rax.findDOMNode)(_this.refs.scroller); | ||
| _this.scrollerContentNode = (0, _rax.findDOMNode)(_this.refs.contentContainer); | ||
| _this.scrollerNodeSize = _this.props.horizontal ? _this.scrollerNode.offsetWidth : _this.scrollerNode.offsetHeight; | ||
| this.scrollerNodeSize = horizontal ? this.scrollerNode.offsetWidth : this.scrollerNode.offsetHeight; | ||
| } | ||
| // NOTE:in iOS7/8 offsetHeight/Width is is inaccurate ( use scrollHeight/Width ) | ||
| var scrollContentSize = _this.props.horizontal ? _this.scrollerNode.scrollWidth : _this.scrollerNode.scrollHeight; | ||
| var scrollDistance = _this.props.horizontal ? _this.scrollerNode.scrollLeft : _this.scrollerNode.scrollTop; | ||
| var isEndReached = scrollContentSize - scrollDistance - _this.scrollerNodeSize < _this.props.onEndReachedThreshold; | ||
| var scrollContentSize = horizontal ? this.scrollerNode.scrollWidth : this.scrollerNode.scrollHeight; | ||
| var scrollDistance = horizontal ? this.scrollerNode.scrollLeft : this.scrollerNode.scrollTop; | ||
| var isEndReached = scrollContentSize - scrollDistance - this.scrollerNodeSize < onEndReachedThreshold; | ||
| var isScrollToEnd = scrollDistance > _this.lastScrollDistance; | ||
| var isLoadedMoreContent = scrollContentSize != _this.lastScrollContentSize; | ||
| var isScrollToEnd = scrollDistance > this.lastScrollDistance; | ||
| var isLoadedMoreContent = scrollContentSize !== this.lastScrollContentSize; | ||
| if (isEndReached && isScrollToEnd && isLoadedMoreContent) { | ||
| _this.lastScrollContentSize = scrollContentSize; | ||
| _this.props.onEndReached(e); | ||
| this.lastScrollContentSize = scrollContentSize; | ||
| onEndReached(e); | ||
| } | ||
| _this.lastScrollDistance = scrollDistance; | ||
| this.lastScrollDistance = scrollDistance; | ||
| } | ||
| } | ||
| if (isWeex) { | ||
| if (_nukeEnv.isWeex) { | ||
| e.nativeEvent = { | ||
@@ -108,26 +152,40 @@ contentOffset: { | ||
| }; | ||
| _this.props.onScroll(e); | ||
| onScroll && onScroll(e); | ||
| } | ||
| }; | ||
| } | ||
| /** | ||
| * 兼容旧的 resetScroll | ||
| */ | ||
| _this.resetScroll = function () { | ||
| if (isWeb) { | ||
| _this.lastScrollContentSize = 0; | ||
| _this.lastScrollDistance = 0; | ||
| }, { | ||
| key: 'resetLoadmore', | ||
| value: function resetLoadmore() { | ||
| if (_nukeEnv.isWeb) { | ||
| this.lastScrollContentSize = 0; | ||
| this.lastScrollDistance = 0; | ||
| } else { | ||
| _this.setState({ | ||
| loadmoreretry: _this.loadmoreretry++ | ||
| }); | ||
| this.refs.scroller.resetLoadmore(); | ||
| } | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'scrollTo', | ||
| value: function scrollTo() { | ||
| var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var horizontal = this.props.horizontal; | ||
| var _options$x = options.x, | ||
| x = _options$x === undefined ? 0 : _options$x, | ||
| _options$y = options.y, | ||
| y = _options$y === undefined ? 0 : _options$y, | ||
| _options$animated = options.animated, | ||
| animated = _options$animated === undefined ? true : _options$animated, | ||
| _options$offset = options.offset, | ||
| offset = _options$offset === undefined ? 0 : _options$offset; | ||
| _this.scrollTo = function (options) { | ||
| var x = parseInt(options.x); | ||
| var y = parseInt(options.y); | ||
| if (isWeex) { | ||
| var offsetResult = parseInt(horizontal ? x : y || offset, 10); | ||
| if (_nukeEnv.isWeex) { | ||
| var dom = require('@weex-module/dom'); | ||
| var contentContainer = (0, _rax.findDOMNode)(_this.refs.contentContainer); | ||
| var contentContainer = (0, _rax.findDOMNode)(this.refs.contentContainer); | ||
| dom.scrollToElement(contentContainer.ref, { | ||
| offset: x || y || 0 | ||
| offset: offsetResult, | ||
| animated: animated | ||
| }); | ||
@@ -137,203 +195,183 @@ } else { | ||
| if (x >= 0) { | ||
| (0, _rax.findDOMNode)(_this.refs.scroller).scrollLeft = pixelRatio * x; | ||
| if (horizontal) { | ||
| (0, _rax.findDOMNode)(this.refs.scroller).scrollLeft = pixelRatio * offsetResult; | ||
| } else { | ||
| (0, _rax.findDOMNode)(this.refs.scroller).scrollTop = pixelRatio * offsetResult; | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: 'scrollToElement', | ||
| value: function scrollToElement(ref) { | ||
| var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var horizontal = this.props.horizontal; | ||
| var _options$offset2 = options.offset, | ||
| offset = _options$offset2 === undefined ? 0 : _options$offset2, | ||
| _options$animated2 = options.animated, | ||
| animated = _options$animated2 === undefined ? true : _options$animated2; | ||
| if (y >= 0) { | ||
| (0, _rax.findDOMNode)(_this.refs.scroller).scrollTop = pixelRatio * y; | ||
| if (_nukeEnv.isWeex) { | ||
| var dom = require('@weex-module/dom'); | ||
| // const contentContainer = findDOMNode(this.refs.contentContainer); | ||
| dom.scrollToElement((0, _rax.findDOMNode)(ref), { | ||
| offset: offset, | ||
| animated: animated | ||
| }); | ||
| } else { | ||
| var pixelRatio = document.documentElement.clientWidth / FULL_WIDTH; | ||
| // if (offset >= 0) { | ||
| var refDOM = (0, _rax.findDOMNode)(ref); | ||
| if (refDOM) { | ||
| if (horizontal) { | ||
| (0, _rax.findDOMNode)(this.refs.scroller).scrollLeft = refDOM.offsetLeft + pixelRatio * offset; | ||
| } else { | ||
| (0, _rax.findDOMNode)(this.refs.scroller).scrollTop = refDOM.offsetTop + pixelRatio * offset; | ||
| } | ||
| // } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'splitChildren', | ||
| value: function splitChildren() { | ||
| var children = this.props.children; | ||
| _this.handleRefresh = function () { | ||
| return new Promise(function (resolve, reject) { | ||
| _this.onRefresh && _this.onRefresh(resolve, reject); | ||
| }); | ||
| }; | ||
| _this.resetLoadmore = function () { | ||
| if (isWeex) { | ||
| _this.refs.scroller.resetLoadmore(); | ||
| if (!children) { | ||
| this.childrenAll = { | ||
| contents: null, | ||
| refreshContent: null | ||
| }; | ||
| return; | ||
| } | ||
| }; | ||
| _this.state = { | ||
| loadmoreretry: 0, | ||
| initializedWptr: false | ||
| }; | ||
| _this.onRefresh = null; | ||
| return _this; | ||
| } | ||
| _createClass(ScrollViewTest, [{ | ||
| key: 'initWeb', | ||
| value: function initWeb() { | ||
| if (isWeb && !this.state.initializedWptr) { | ||
| WebPullToRefresh().init({ | ||
| bodyEl: this.refs.scroller, | ||
| ptrEl: this.refs.refreshX, | ||
| contentEl: this.refs.contentContainer, | ||
| distanceToRefresh: this.props.distanceToRefresh || undefined, | ||
| loadingFunction: this.handleRefresh, | ||
| resistance: this.props.resistance || undefined, | ||
| hammerOptions: this.props.hammerOptions || { touchAction: 'auto' } | ||
| }); | ||
| this.setState({ | ||
| initializedWptr: true | ||
| }); | ||
| var contents = []; | ||
| var refreshContent = void 0; | ||
| if (!Array.isArray(children)) { | ||
| children = [children]; | ||
| } | ||
| children.forEach(function (child) { | ||
| if (!child) return; | ||
| if (child.type && child.type.displayName === _nukeRefreshControl2.default.displayName) { | ||
| refreshContent = child; | ||
| } else { | ||
| contents.push(child); | ||
| } | ||
| }); | ||
| this.childrenAll = { | ||
| contents: contents, | ||
| refreshContent: refreshContent | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| if (!this.props.disabledPtr) { | ||
| this.initWeb(); | ||
| } | ||
| key: 'hideWebScrollBar', | ||
| value: function hideWebScrollBar() { | ||
| var styleNode = document.createElement('style'); | ||
| styleNode.id = 'rax-scrollview-style'; | ||
| document.head.appendChild(styleNode); | ||
| styleNode.innerHTML = '.' + SCROLLVIEW_CLS + '::-webkit-scrollbar{display: none;}'; | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (!this.props.disabledPtr) { | ||
| this.initWeb(); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| var _props2 = this.props, | ||
| style = _props2.style, | ||
| scrollEventThrottle = _props2.scrollEventThrottle, | ||
| showsHorizontalScrollIndicator = _props2.showsHorizontalScrollIndicator, | ||
| showsVerticalScrollIndicator = _props2.showsVerticalScrollIndicator, | ||
| onEndReached = _props2.onEndReached, | ||
| onScrollStart = _props2.onScrollStart, | ||
| onScrollEnd = _props2.onScrollEnd, | ||
| onScroll = _props2.onScroll, | ||
| children = _props2.children, | ||
| horizontal = _props2.horizontal, | ||
| onEndReachedThreshold = _props2.onEndReachedThreshold, | ||
| others = _objectWithoutProperties(_props2, ['style', 'scrollEventThrottle', 'showsHorizontalScrollIndicator', 'showsVerticalScrollIndicator', 'onEndReached', 'onScrollStart', 'onScrollEnd', 'onScroll', 'children', 'horizontal', 'onEndReachedThreshold']); | ||
| var _props = this.props, | ||
| id = _props.id, | ||
| style = _props.style, | ||
| scrollEventThrottle = _props.scrollEventThrottle, | ||
| showsHorizontalScrollIndicator = _props.showsHorizontalScrollIndicator, | ||
| showsVerticalScrollIndicator = _props.showsVerticalScrollIndicator, | ||
| onEndReached = _props.onEndReached, | ||
| onEndReachedThreshold = _props.onEndReachedThreshold, | ||
| onScroll = _props.onScroll, | ||
| children = _props.children; | ||
| var showScrollBar = this.props.showScrollBar; | ||
| // In weex must be int value | ||
| if (typeof showScrollBar === 'undefined') { | ||
| showScrollBar = horizontal ? showsHorizontalScrollIndicator : showsVerticalScrollIndicator; | ||
| } | ||
| onEndReachedThreshold = parseInt(onEndReachedThreshold, 10); | ||
| var contentContainerStyle = [horizontal && _styles2.default.contentContainerHorizontal, this.props.contentContainerStyle]; | ||
| var contentContainerStyle = [this.props.horizontal && styles.contentContainerHorizontal, this.props.contentContainerStyle]; | ||
| // bugfix: fix scrollview flex in ios 78 | ||
| if (!isWeex && !this.props.horizontal) { | ||
| contentContainerStyle.push(styles.containerWebStyle); | ||
| if (!_nukeEnv.isWeex && !horizontal) { | ||
| contentContainerStyle.push(_styles2.default.containerWebStyle); | ||
| } | ||
| if (this.props.style) { | ||
| var childLayoutProps = ['alignItems', 'justifyContent'].filter(function (prop) { | ||
| return _this2.props.style[prop] !== undefined; | ||
| }); | ||
| this.splitChildren(); | ||
| var contentChild = this.childrenAll.contents; | ||
| var refreshContent = this.childrenAll.refreshContent; | ||
| if (childLayoutProps.length !== 0) {} | ||
| } | ||
| var refreshContainer = _rax.createElement(_nukeView2.default, null), | ||
| contentChild = void 0; | ||
| if (Array.isArray(children)) { | ||
| contentChild = children.map(function (child, index) { | ||
| if (child && child.type == _nukeRefreshControl2.default) { | ||
| refreshContainer = child; | ||
| _this2.onRefresh = child.props.onRefresh; | ||
| } else { | ||
| return child; | ||
| } | ||
| }); | ||
| } else { | ||
| contentChild = children; | ||
| } | ||
| var contentContainer = _rax.createElement( | ||
| var contentContainer = (0, _rax.createElement)( | ||
| _nukeView2.default, | ||
| { | ||
| ref: 'contentContainer', | ||
| style: contentContainerStyle }, | ||
| { ref: 'contentContainer', style: contentContainerStyle }, | ||
| contentChild | ||
| ); | ||
| var baseStyle = this.props.horizontal ? styles.baseHorizontal : styles.baseVertical; | ||
| var baseStyle = horizontal ? _styles2.default.horizontal : _styles2.default.vertical; | ||
| var scrollerStyle = _extends({}, baseStyle, this.props.style); | ||
| var scrollerStyle = Object.assign({}, baseStyle, _nukeEnv.isWeb ? _styles2.default.scrollerWeb : {}, this.props.style); | ||
| var showsScrollIndicator = this.props.horizontal ? showsHorizontalScrollIndicator : showsVerticalScrollIndicator; | ||
| if (isWeex) { | ||
| return _rax.createElement( | ||
| 'scroller', | ||
| _extends({}, this.props, { | ||
| ref: 'scroller', | ||
| style: scrollerStyle, | ||
| showScrollbar: showsScrollIndicator, | ||
| onLoadmore: onEndReached, | ||
| onScroll: onScroll ? this.handleScroll : null, | ||
| loadmoreoffset: onEndReachedThreshold, | ||
| loadmoreretry: this.state.loadmoreretry, | ||
| scrollDirection: this.props.horizontal ? 'horizontal' : 'vertical' | ||
| }), | ||
| refreshContainer, | ||
| contentContainer | ||
| ); | ||
| } else { | ||
| var _Object$assign; | ||
| var handleScroll = this.handleScroll; | ||
| if (scrollEventThrottle) { | ||
| handleScroll = throttle(handleScroll, scrollEventThrottle); | ||
| } | ||
| if (!showsScrollIndicator && !document.getElementById('rax-scrollview-style')) { | ||
| var styleNode = document.createElement('style'); | ||
| styleNode.id = 'rax-scrollview-style'; | ||
| document.head.appendChild(styleNode); | ||
| styleNode.innerHTML = '.' + this.props.className + '::-webkit-scrollbar{display: none;}'; | ||
| } | ||
| scrollerStyle.webkitOverflowScrolling = 'touch'; | ||
| scrollerStyle.overflow = 'scroll'; | ||
| var webProps = _extends({}, this.props, { | ||
| if (_nukeEnv.isWeex) { | ||
| var nativeProps = _extends({ | ||
| ref: 'scroller', | ||
| style: scrollerStyle, | ||
| onScroll: handleScroll | ||
| }); | ||
| delete webProps.onEndReachedThreshold; | ||
| if (this.props.disabledPtr) { | ||
| return _rax.createElement( | ||
| _nukeView2.default, | ||
| webProps, | ||
| contentContainer | ||
| ); | ||
| } | ||
| return _rax.createElement( | ||
| _nukeView2.default, | ||
| webProps, | ||
| (0, _rax.cloneElement)(refreshContainer, { | ||
| ref: "refreshX", | ||
| className: "ptr-element", | ||
| style: Object.assign((_Object$assign = { position: 'absolute', top: 0, left: 0, width: 750, color: '#aaaaaa' }, _defineProperty(_Object$assign, 'z-index', 10), _defineProperty(_Object$assign, 'textAlign', 'center'), _Object$assign), refreshContainer.props.style) | ||
| }), | ||
| showScrollbar: showScrollBar, | ||
| onLoadmore: onEndReached, | ||
| onScrollStart: onScrollStart, | ||
| onScrollEnd: onScrollEnd, | ||
| onScroll: onScroll ? this.handleScroll : null, | ||
| loadmoreoffset: parseInt(onEndReachedThreshold, 10), | ||
| loadmoreretry: true, | ||
| offsetAccuracy: 20, | ||
| scrollDirection: horizontal ? 'horizontal' : 'vertical' | ||
| }, others); | ||
| return (0, _rax.createElement)( | ||
| 'scroller', | ||
| nativeProps, | ||
| refreshContent, | ||
| contentContainer | ||
| ); | ||
| } | ||
| /** | ||
| * trigger times throttle | ||
| */ | ||
| var handleScroll = this.handleScroll; | ||
| if (scrollEventThrottle) { | ||
| handleScroll = throttle(handleScroll, scrollEventThrottle); | ||
| } | ||
| var webProps = _extends({ | ||
| ref: 'scroller', | ||
| style: scrollerStyle, | ||
| onScroll: handleScroll, | ||
| id: 'scroller_rv' | ||
| }, others); | ||
| if (!showScrollBar) { | ||
| this.hideWebScrollBar(); | ||
| } | ||
| return (0, _rax.createElement)( | ||
| _nukeView2.default, | ||
| _extends({}, webProps, { className: SCROLLVIEW_CLS }), | ||
| refreshContent ? (0, _rax.createElement)(_nukeRefreshControl2.default, _extends({}, refreshContent.props, { | ||
| listId: webProps.id, | ||
| refreshingTime: 100, | ||
| refreshing: refreshContent.props.refreshing | ||
| })) : null, | ||
| contentContainer | ||
| ); | ||
| } | ||
| }]); | ||
| return ScrollViewTest; | ||
| return ScrollView; | ||
| }(_rax.Component); | ||
| ScrollViewTest.defaultProps = { | ||
| scrollEventThrottle: DEFAULT_SCROLL_CALLBACK_THROTTLE, | ||
| onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD, | ||
| showsHorizontalScrollIndicator: true, | ||
| showsVerticalScrollIndicator: true, | ||
| className: 'rax-scrollview' | ||
| }; | ||
| function throttle(func, wait) { | ||
| var ctx, args, rtn, timeoutID; | ||
| var ctx = void 0; | ||
| var args = void 0; | ||
| var rtn = void 0; | ||
| var timeoutID = void 0; | ||
| var last = 0; | ||
@@ -353,3 +391,5 @@ | ||
| var delta = new Date() - last; | ||
| if (!timeoutID) if (delta >= wait) call();else timeoutID = setTimeout(call, wait - delta); | ||
| if (!timeoutID) { | ||
| if (delta >= wait) call();else timeoutID = setTimeout(call, wait - delta); | ||
| } | ||
| return rtn; | ||
@@ -359,20 +399,63 @@ }; | ||
| var styles = { | ||
| baseVertical: { | ||
| flex: 1, | ||
| flexDirection: 'column' | ||
| }, | ||
| baseHorizontal: { | ||
| flex: 1, | ||
| flexDirection: 'row' | ||
| }, | ||
| contentContainerHorizontal: { | ||
| flexDirection: 'row' | ||
| }, | ||
| containerWebStyle: { | ||
| display: 'block' | ||
| } | ||
| ScrollView.propTypes = { | ||
| /** | ||
| * ScrollView 样式 style of ScrollView | ||
| */ | ||
| style: _rax.PropTypes.any, | ||
| /** | ||
| * 滚动时回调 callback when scrolling | ||
| */ | ||
| onScroll: _rax.PropTypes.func, | ||
| /** | ||
| * 滚动开始时回调 callback when scrolling | ||
| */ | ||
| onScrollStart: _rax.PropTypes.func, | ||
| /** | ||
| * 滚动结束时回调 callback when scrolling | ||
| */ | ||
| onScrollEnd: _rax.PropTypes.func, | ||
| /** | ||
| * 加载到底部时回调 callback when scrolling to bottom | ||
| */ | ||
| onEndReached: _rax.PropTypes.func, | ||
| /** | ||
| * 是否横向 is horizontal | ||
| */ | ||
| horizontal: _rax.PropTypes.boolean, | ||
| /** | ||
| * 触发加载到底部回调的位移 offset of scrolling to bottom event been triggered | ||
| */ | ||
| onEndReachedThreshold: _rax.PropTypes.number, | ||
| /** | ||
| * 是否展示横向滚动条 is show horizontal scrollbar | ||
| */ | ||
| showsHorizontalScrollIndicator: _rax.PropTypes.boolean, | ||
| /** | ||
| * 是否展示纵向滚动条 is show vertical scrollbar | ||
| */ | ||
| showsVerticalScrollIndicator: _rax.PropTypes.boolean, | ||
| /** | ||
| * 内容容器样式 the style of content's wrap container | ||
| */ | ||
| contentContainerStyle: _rax.PropTypes.any, | ||
| /** | ||
| * onScroll 事件触发节流时间 the time inteval of next onScroll event being triggered | ||
| */ | ||
| scrollEventThrottle: _rax.PropTypes.number, | ||
| children: _rax.PropTypes.any | ||
| }; | ||
| exports.default = ScrollViewTest; | ||
| ScrollView.defaultProps = { | ||
| style: {}, | ||
| contentContainerStyle: {}, | ||
| horizontal: false, | ||
| onScroll: null, | ||
| onScrollStart: null, | ||
| onScrollEnd: null, | ||
| onEndReached: function onEndReached() {}, | ||
| scrollEventThrottle: ON_SCROLL_THROTTLE, | ||
| onEndReachedThreshold: LOADMORE_THRESHOLD, | ||
| showsHorizontalScrollIndicator: true, | ||
| showsVerticalScrollIndicator: true | ||
| }; | ||
| exports.default = ScrollView; | ||
| module.exports = exports['default']; |
+2
-3
| { | ||
| "name": "nuke-scroll-view", | ||
| "version": "0.0.3", | ||
| "version": "0.0.4", | ||
| "description": "滚动组件", | ||
@@ -47,3 +47,2 @@ "main": "lib/index", | ||
| "dependencies": { | ||
| "hammerjs": "^2.0.8", | ||
| "nuke-env": "^0.x.x", | ||
@@ -54,3 +53,3 @@ "nuke-refresh-control": "^0.x.x", | ||
| "devDependencies": { | ||
| "nuke-biz-page": "^0.0.7", | ||
| "nuke-biz-page": "^0.x.x", | ||
| "nuke-button": "^0.x.x", | ||
@@ -57,0 +56,0 @@ "nuke-modal": "^0.x.x", |
40744
26.6%3
-25%10
25%847
47.56%- Removed
- Removed