Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
nuke-listview
Advanced tools
nuke-listview - npm Package Compare versions
Comparing version 0.0.24 to 0.0.25
328
index.js
| /** @jsx createElement */ | ||
| /** | ||
| * Copyright (c) 2015-present, Alibaba Group Holding Limited. | ||
| * All rights reserved. | ||
| * | ||
| * @providesModule ListView | ||
| */ | ||
| import {mount} from 'nuke-mounter'; | ||
| import {createElement, Component, findDOMNode, setNativeProps} from 'weex-rx'; | ||
| import {Dimensions} from 'nuke-core'; | ||
| import {View} from 'nuke-components'; | ||
| import {MultiRow} from 'nuke-grid'; | ||
| import throttle from './throttle'; | ||
| import List, {Loading, Refresh, Header,Cell} from 'nuke-list'; | ||
| let isWeex = typeof callNative === 'function'; | ||
| let isWeb = typeof window === 'object'; | ||
| import {createElement, Component} from 'weex-rx'; | ||
| import {View,RecyclerView} from 'nuke-components'; | ||
| import {env} from 'nuke-core'; | ||
| const isWeex=env.isWeex; | ||
| let styles = { | ||
| scrollViewBox: { | ||
| display: 'block', | ||
| overflow: 'scroll', | ||
| height: Dimensions.get('window').height | ||
| // height:'100%' | ||
| } | ||
| }; | ||
| const SCROLLVIEW_REF = 'scrollview'; | ||
| if(isWeb){ | ||
| styles.scrollViewBox.height=styles.scrollViewBox.height+'px'; | ||
| } | ||
| class ListView extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state={ | ||
| refresh_display: 'hide', | ||
| loading_display: 'hide' | ||
| } | ||
| // debugger; | ||
| } | ||
| static defaultProps = { | ||
| renderScrollComponent: props => <RecyclerView {...props} />, | ||
| dataSource: [], | ||
| }; | ||
| initScroll() { | ||
| let self = this; | ||
| if (self.loadMore) { | ||
| if (!isWeex) { | ||
| this._EventHandler = window.addEventListener('scroll', throttle(this.windowScroll, 100)); | ||
| } else { | ||
| // findDOMNode(self.parentScrollViewId).onLoadMore = self.handleLoadingMore; | ||
| } | ||
| scrollTo = (options) => { | ||
| if (this.refs[SCROLLVIEW_REF]) { | ||
| this.refs[SCROLLVIEW_REF].scrollTo(options); | ||
| } | ||
| } | ||
| // 真对 h5 的降级方案 | ||
| windowScroll = () => { | ||
| let self = this; | ||
| let st = document.body.scrollTop, | ||
| vh = window.innerHeight; | ||
| self.newViewHeight = document.body.scrollHeight; | ||
| if (self.newViewHeight - self.loadMoreOffset <= st + vh) { | ||
| self.canLoading = true; | ||
| } else { | ||
| self.canLoading = false; | ||
| } | ||
| if (self.canLoading) { | ||
| self.canLoading = false; | ||
| if (self.newViewHeight != self.oldViewHeight && !self.stop && self.loadMore) { | ||
| self.oldViewHeight = self.newViewHeight; | ||
| setTimeout(function() { | ||
| self.loadMore(); | ||
| }, 30); | ||
| } | ||
| } | ||
| } | ||
| // 计算内部 scrollview | ||
| handleScroll = () => { | ||
| let self = this; | ||
| if (isWeb) { | ||
| if (!self.listViewDom) { | ||
| self.listViewDom = findDOMNode(this.refs.list); | ||
| self.listViewHeaderDom = findDOMNode(this.refs.listHeader); | ||
| self.listViewBodyDom = findDOMNode(this.refs.listBody); | ||
| } | ||
| if (!self.windowHeight) { | ||
| self.windowHeight = Dimensions.get('window').height; | ||
| } | ||
| // 时时卷上去的高度 | ||
| self.scrollTop = self.listViewDom.scrollTop; | ||
| // 加载数据后新的高度 | ||
| self.newViewHeight = self.listViewBodyDom.offsetHeight; | ||
| // 计算出可视列表高度 | ||
| if (!self.scrollHeight) { | ||
| self.scrollHeight = self.listViewDom.offsetHeight; | ||
| } | ||
| // 列表上方高度 | ||
| let offsetTop = self.windowHeight - self.scrollHeight; | ||
| if (self.ifHeader) { | ||
| self.newViewHeight += self.listViewHeaderDom.offsetHeight; | ||
| } | ||
| if ((self.scrollTop + self.windowHeight - offsetTop + self.loadMoreOffset) > self.newViewHeight && !self.canLoading) { | ||
| self.canLoading = true; | ||
| } else if ((self.scrollTop + self.windowHeight - offsetTop) < self.newViewHeight) { | ||
| self.canLoading = false; | ||
| } | ||
| // fix for h5 | ||
| if (self.canLoading) { | ||
| self.canLoading = false; | ||
| if (self.newViewHeight != self.oldViewHeight) { | ||
| self.oldViewHeight = self.newViewHeight; | ||
| self.handleLoadingMore(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // 加载更多数据 | ||
| handleLoadingMore = () => { | ||
| let self = this; | ||
| if (!self.stop && self.loadMore) { | ||
| setTimeout(function() { | ||
| self.loadMore(); | ||
| }, 30); | ||
| } | ||
| } | ||
| refreshHandler(){ | ||
| var self=this; | ||
| self.setState({refresh_display:'show'}); | ||
| self.props.onrefresh && self.props.onrefresh(); | ||
| // setTimeout(function(){ | ||
| self.setState({refresh_display:'hide'}); | ||
| // },300) | ||
| } | ||
| loadingHandler(){ | ||
| var self=this; | ||
| self.setState({loading_display:'show'}); | ||
| self.props.onloading && self.props.onloading(); | ||
| // setTimeout(function(){ | ||
| self.setState({loading_display:'hide'}); | ||
| // },1000) | ||
| } | ||
| // 设置 listview 子元素 | ||
| setChildren() { | ||
| let self = this; | ||
| if (self.props.header) { | ||
| self.ifHeader = true; | ||
| if(self.props.fixHeader){ | ||
| self.head = <Header ref="listHeader">{self.props.header}</Header>; | ||
| }else{ | ||
| self.head = <Cell ref="listHeader">{self.props.header}</Cell>; | ||
| } | ||
| } | ||
| if (self.props.refresh) { | ||
| self.refresh = <Refresh ref="listRefresh" display={self.state.refresh_display} onrefresh={self.refreshHandler.bind(self)}>{self.props.refresh}</Refresh>; | ||
| } | ||
| if (self.props.loading) { | ||
| self.loading = <Loading ref="listloading" display={self.state.loading_display} onloading={self.loadingHandler.bind(self)}>{self.props.loading}</Loading>; | ||
| } | ||
| self.body = self.getbody(); | ||
| // self.loading = <Loading style={{textAlign: 'center', paddingTop: '30rem', paddingBottom: '30rem'}}>加载中...</Loading>; | ||
| if (self.stop) { | ||
| self.loading = <View/>; | ||
| } else { | ||
| // if (self.props.loadingRow) { | ||
| // self.loading = <View>{self.props.loadingRow}</View>; | ||
| // } | ||
| } | ||
| } | ||
| getbody(){ | ||
| let self=this; | ||
| let bodyarr=[]; | ||
| for (var i = 0; i < self.data.length; i++) { | ||
| var item=self.data[i]; | ||
| var cellItem=<Cell> | ||
| { | ||
| self.props.renderRow(item, i) | ||
| } | ||
| </Cell>; | ||
| bodyarr.push(cellItem); | ||
| if(this.props.renderSeparator && i != self.data.length-1){ | ||
| var separator = this.props.renderSeparator(item,i); | ||
| if (separator) { | ||
| bodyarr.push(<Cell>{separator}</Cell>) | ||
| } | ||
| } | ||
| } | ||
| if(isWeex){ | ||
| return bodyarr; | ||
| }else{ | ||
| return (<View ref="listBody">{bodyarr}</View>); | ||
| } | ||
| } | ||
| render() { | ||
| let { | ||
| renderScrollComponent, | ||
| renderHeader, | ||
| renderFooter, | ||
| renderRow, | ||
| dataSource, | ||
| onEndReached, | ||
| onEndReachedThreshold, | ||
| id, | ||
| className, | ||
| style, | ||
| } = this.props; | ||
| let self = this; | ||
| let header = typeof renderHeader == 'function' ? renderHeader() : null; | ||
| let footer = typeof renderFooter == 'function' ? renderFooter() : null; | ||
| let body = dataSource.map((i, index) => { | ||
| return renderRow(i, index); | ||
| }); | ||
| // get props | ||
| let noScroll = this.props.noScroll; | ||
| self.loadMore = this.props.onEndReached || this.props.loadMore || this.props.onLoadMore; | ||
| self.data = this.props.data || this.props.dataSource; | ||
| self.stop = this.props.stop; // stop loadmore | ||
| self.loadMoreOffset = this.props.onEndReachedThreshold || this.props.loadMoreOffset || 100; | ||
| if (typeof(self.loadMoreOffset) == 'string') { | ||
| self.loadMoreOffset = parseInt(self.loadMoreOffset.split('rem')[0]); | ||
| } | ||
| self.parentScrollViewId = this.props.parentScrollViewId || 'scrollview'; | ||
| // goTop | ||
| if (this.props.goTop) { | ||
| if (isWeex) { | ||
| let weexModule = '@weex-module/dom'; | ||
| let dom = require(weexModule); | ||
| let top = findDOMNode(self.refs.listBody); | ||
| dom.scrollToElement(top.ref, { | ||
| offset: 0 | ||
| }); | ||
| } else { | ||
| if (self.listViewDom) { | ||
| self.listViewDom.scrollTop = 0; | ||
| } | ||
| } | ||
| } | ||
| // for h5 scroll 流畅滚动 | ||
| if (isWeb) { | ||
| styles.scrollViewBox.webkitOverflowScrolling = 'touch'; | ||
| } | ||
| // init children | ||
| self.setChildren(); | ||
| let style = { | ||
| ...styles.scrollViewBox, | ||
| ...this.props.style, | ||
| ...{ | ||
| flex: 2, | ||
| display: 'block' | ||
| } | ||
| let props = { | ||
| id, | ||
| className, | ||
| ref: SCROLLVIEW_REF, | ||
| style, | ||
| children: [].concat(header, body, footer), | ||
| onEndReached, | ||
| onEndReachedThreshold, | ||
| }; | ||
| if (noScroll) { | ||
| self.initScroll(); | ||
| return <View style={this.props.style}> | ||
| {self.head} | ||
| {self.body} | ||
| {self.loading} | ||
| {self.foot} | ||
| </View>; | ||
| } else { | ||
| // if(isWeex){ | ||
| return (<List | ||
| ref="list" | ||
| style={style} | ||
| onScroll={throttle(this.handleScroll, 100)} | ||
| onLoadMore={this.handleLoadingMore} | ||
| loadmoreoffset={self.loadMoreOffset} | ||
| onloading={this.onloading} | ||
| onrefresh={this.onrefresh}> | ||
| {self.head} | ||
| {self.body} | ||
| {self.loading} | ||
| {self.foot} | ||
| </List>); | ||
| // }else{ | ||
| // return (<View style={this.props.style}> | ||
| // {self.head} | ||
| // {self.body} | ||
| // {self.loading} | ||
| // {self.foot} | ||
| // </View>); | ||
| // } | ||
| } | ||
| return renderScrollComponent(props); | ||
| } | ||
| } | ||
| export default ListView; |
| { | ||
| "name": "nuke-listview", | ||
| "version": "0.0.24", | ||
| "version": "0.0.25", | ||
| "description": "", | ||
@@ -10,7 +10,7 @@ "main": "index.js", | ||
| "dependencies": { | ||
| "nuke-components": "^0.0.28", | ||
| "nuke-components": "^0.0.29", | ||
| "nuke-mounter": "0.0.x", | ||
| "nuke-core": "^0.0.20", | ||
| "nuke-grid": "^0.0.20", | ||
| "nuke-list": "^0.0.23" | ||
| "nuke-list": "^0.0.24" | ||
| }, | ||
@@ -17,0 +17,0 @@ "author": "heww@live.cn", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-73.82%
2455
- Lines of code
- decreased by-73.87%
75
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addednuke-components@0.0.29(transitive)
+ Addednuke-list@0.0.24(transitive)
- Removednuke-components@0.0.28(transitive)
- Removednuke-list@0.0.23(transitive)
Updatednuke-components@^0.0.29
Updatednuke-list@^0.0.24