feat: 🎸 add <InfiniteScroll> component

Author: streamich

src/InfiniteScroll/__story__/story.tsx

@@ -0,0 +1,50 @@
+import*asReactfrom'react';
+import{storiesOf}from'@storybook/react';
+import{InfiniteScroll}from'..';
+
+consth=React.createElement;
+
+constBlock=()=>{
+return<divstyle={{
+width: 100,
+height: 100,
+margin: 20,
+background: 'red',
+}}></div>
+};
+
+classDemoextendsReact.Component{
+state={
+items: [],
+cursor: 1,
+};
+
+constructor(props){
+super(props);
+this.load();
+}
+
+load=(cnt=5)=>{
+console.log('loading for cursor: '+this.state.cursor);
+constitems=[...this.state.items];
+for(leti=0;i<cnt;i++){
+items.push(<Blockkey={items.length}/>);
+}
+this.setState({
+ items,
+cursor: this.state.cursor+1,
+});
+};
+
+render(){
+return(
+<InfiniteScrollhasMore={this.state.cursor<5}loadMore={this.load}cursor={this.state.cursor}>
+{this.state.items}
+</InfiniteScroll>
+);
+}
+}
+
+storiesOf('UI/InfiniteScroll',module)
+// .add('Documentation', () => h(ShowDocs,{md: require('../../../docs/en/Lifecycles.md')}))
+.add('Example',()=><Demo/>)

src/InfiniteScroll/index.ts

@@ -0,0 +1,44 @@
+import*asReactfrom'react';
+import{ViewportSensor}from'../ViewportSensor';
+import{ViewportScrollSensor}from'../ViewportScrollSensor';
+
+consth=React.createElement;
+constdefaultSentinel=h('div',{style: {width: 1,height: 1}});
+
+exportinterfaceInfiniteScrollProps{
+cursor?: number|string;
+sentinel?: React.ReactElement<any>;
+hasMore?: boolean;
+loadMore: ()=>void;
+}
+
+exportinterfaceInfiniteScrollState{
+}
+
+exportclassInfiniteScrollextendsReact.Component<InfiniteScrollProps,InfiniteScrollProps>{
+staticdefaultProps={
+sentinel: defaultSentinel,
+hasMore: true,
+};
+
+lastLoadMoreCursor: number|string|null=null;
+
+onViewportChange=({visible})=>{
+if(visible){
+if(this.lastLoadMoreCursor!==this.props.cursor){
+this.lastLoadMoreCursor=this.props.cursor;
+this.props.loadMore();
+}
+}
+};
+
+render(){
+const{props}=this;
+const{children, hasMore, sentinel}=props;
+returnh(React.Fragment,null,
+children,
+hasMore&&
+h(ViewportScrollSensor,{onChange: this.onViewportChange},()=>sentinel),
+);
+}
+}

src/ViewportScrollSensor/index.ts

@@ -1,4 +1,4 @@
-import{Component,cloneElement,SFCElement}from'react';
+import*asReactfrom'react';
 import{on,off,noop}from'../util';
 import{throttle}from'throttle-debounce';
 importrenderPropfrom'../util/renderProp';
@@ -56,12 +56,12 @@ export interface IViewportScrollSensorState{
 visible: boolean;
 }
 
-exportclassViewportScrollSensorextendsComponent<IViewportScrollSensorProps,IViewportScrollSensorState>{
+exportclassViewportScrollSensorextendsReact.Component<IViewportScrollSensorProps,IViewportScrollSensorState>{
 staticdefaultProps={
 threshold: 0,
 throttle: 50,
 margin: [0,0,0,0]
-};
+}asany;
 
 mounted: boolean=false;
 el: HTMLElement;
@@ -134,7 +134,7 @@ export class ViewportScrollSensor extends Component<IViewportScrollSensorProps,
 }
 }
 
-returncloneElement(element,{
+returnReact.cloneElement(element,{
 ref: this.ref(element.ref)
 });
 }