refactor/recyclerview

packages/rax-recyclerview/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.0.0
+
+- Refactor `rax-recyclerview` in web and runtime miniapp:
+  - Replace `rax-view` with `rax-scrollview`;
+  - Update placeholder boxes size instead of updating item style: top or left ;
+- upgrade deps: `rax-scrollview` from `^3.3.3` to `^3.6.0`
+
 ## 1.3.6
 
 - Fix RecyclerView error: "Uncaught TypeError: Cannot add property style, object is not extensible", when use virtual list mode.

packages/rax-recyclerview/demo/base.jsx

@@ -1,53 +1,57 @@
-import { createElement, Component, render } from 'rax';
+import { createElement, render, useRef } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';
 import DriverUniversal from "driver-universal"
 import RecyclerView from 'rax-recyclerview';
 
-function Thumb() {
+
+function Thumb({val}) {
   return (
     <RecyclerView.Cell>
       <View style={styles.button}>
-        <View style={styles.box} />
+        <View style={styles.box}>{val}</View>
       </View>
     </RecyclerView.Cell>
   );
 }
 let THUMBS = [];
-for (let i = 0; i < 20; i++) THUMBS.push(i);
-let createThumbRow = (val, i) => <Thumb key={i} />;
+for (let i = 0; i < 100; i++) THUMBS.push(`box_${i}`);
+let createThumbRow = (val) => <Thumb key={val} val={val} />;
 
 function App() {
+  const viewRef = useRef(null);
+
   return (
     <View style={styles.root}>
-      <View style={styles.container}>
-        <RecyclerView
-          style={{
-            height: 500
-          }}>
-
-          <RecyclerView.Header style={styles.sticky}>
-            <Text>Sticky view is not header</Text>
-          </RecyclerView.Header>
-
-          <RecyclerView.Header>
-            <View style={styles.sticky}>
-              <Text>Sticky view must in header root</Text>
-            </View>
-          </RecyclerView.Header>
-
-          {THUMBS.map(createThumbRow)}
-
-        </RecyclerView>
+      <RecyclerView
+        ref={viewRef}
+        style={styles.container}
+        itemSize={88}
+        onScroll={(e) => {console.log(e.nativeEvent.contentOffset.y)}}
+      >
+        <RecyclerView.Header style={styles.sticky}>
+          <Text>Sticky view is not header</Text>
+        </RecyclerView.Header>
+        <RecyclerView.Header>
+          <View style={styles.sticky}>
+            <Text>Sticky view must in header root</Text>
+          </View>
+        </RecyclerView.Header>
+        {THUMBS.map(createThumbRow)}
+      </RecyclerView>
+      <View
+        style={styles.fixButton}
+        onClick={() => viewRef.current.scrollTo({ y: 0 })}
+      >
+        <Text>Scroll to top</Text>
       </View>
     </View>
   );
 }
 
 let styles = {
   root: {
-    width: 750,
-    paddingTop: 20
+    display: 'block'
   },
   sticky: {
     position: 'sticky',
@@ -56,14 +60,7 @@ let styles = {
     backgroundColor: '#cccccc'
   },
   container: {
-    padding: 20,
-    borderStyle: 'solid',
-    borderColor: '#dddddd',
-    borderWidth: 1,
-    marginLeft: 20,
-    height: 1000,
-    marginRight: 20,
-    marginBottom: 10,
+    height: '100vh'
   },
   button: {
     margin: 7,
@@ -75,6 +72,13 @@ let styles = {
   box: {
     width: 64,
     height: 64,
+  },
+  fixButton: {
+    position: 'fixed',
+    bottom: 20,
+    right: 20,
+    border: 1,
+    backgroundColor: '#fff'
   }
 };
 

packages/rax-recyclerview/demo/index.md

@@ -7,14 +7,15 @@ basic usage
 
 ```jsx
 
-import {createElement, Component, render} from 'rax';
-import DriverUniversal from 'driver-universal';
-import View from 'rax-view';
-import Text from 'rax-text';
-import {isWeex} from 'universal-env';
-import RecyclerView from '../src/index';
+import { createElement, Component, render } from "rax";
 
-const vwh = isWeex ? 667 * 2 : document.documentElement.clientHeight * 750 / document.documentElement.clientWidth;
+import View from "rax-view";
+
+import Text from "rax-text";
+
+import DriverUniversal from "driver-universal";
+
+import RecyclerView from "rax-recyclerview";
 
 class Thumb extends Component {
   shouldComponentUpdate(nextProps, nextState) {
@@ -23,143 +24,150 @@ class Thumb extends Component {
 
   render() {
     return (
-      <RecyclerView.Cell style={this.props.style}>
+      <RecyclerView.Cell>
         <View style={styles.button}>
-          <View style={styles.box}>
-            <Text>{this.props.index}</Text>
-          </View>
+          <View style={styles.box} />
         </View>
       </RecyclerView.Cell>
     );
   }
 }
 
-let THUMBS = [];
-for (let i = 0; i < 30; i++) THUMBS.push(i);
-let createThumbRow = (val, i) => <Thumb key={i} index={i} />;
+class Row extends Component {
+  handleClick = e => {
+    this.props.onClick(this.props.data);
+  };
 
-export default class App extends Component {
+  render() {
+    return (
+      <View onClick={this.handleClick}>
+        <View style={styles.row}>
+          <Text style={styles.text}>
+            {this.props.data.text + " (" + this.props.data.clicks + " clicks)"}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const THUMBS = [];
+
+for (let i = 0; i < 20; i++) THUMBS.push(i);
+
+const createThumbRow = (val, i) => <Thumb key={i} />;
+
+class App extends Component {
   state = {
     horizontalScrollViewEventLog: false,
-    scrollViewEventLog: false,
+    scrollViewEventLog: false
   };
 
   render() {
     return (
       <View style={styles.root}>
         <View style={styles.container}>
           <RecyclerView
-            ref={(scrollView) => {
+            ref={scrollView => {
               this.scrollView = scrollView;
             }}
             style={{
-              height: vwh
+              height: 500
             }}
-            onEndReached={() => console.log('reach end')}>
-            <RecyclerView.Header style={styles.header}>
-              <Text style={styles.headerText}>Simple Header</Text>
+            onEndReached={() => alert("reach end")}
+          >
+            <RecyclerView.Header style={styles.sticky}>
+              <Text>Sticky view is not header</Text>​{" "}
+            </RecyclerView.Header>
+            <RecyclerView.Header>
+              <View style={styles.sticky}>
+                <Text>Sticky view must in header root</Text>
+              </View>
             </RecyclerView.Header>
-
             {THUMBS.map(createThumbRow)}
-
           </RecyclerView>
-
           <View
-            style={styles.topIcon}
-            onClick={() => this.scrollView.scrollTo({y: 0})}>
-            <Text>Top</Text>
+            style={styles.button}
+            onClick={() => this.scrollView.scrollTo({ y: 0 })}
+          >
+            <Text>Scroll to top</Text>
+          </View>
+          <View style={styles.eventLogBox}>
+            <Text>{this.state.scrollViewEventLog ? "onEndReached" : ""}</Text>
           </View>
         </View>
       </View>
     );
   }
 }
 
-let styles = {
+const styles = {
   root: {
-    width: 750
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     width: 750,
-    height: 350,
-    backgroundColor: 'tomato',
-  },
-  headerText: {
-    color: 'white',
-    fontSize: 40,
+    paddingTop: 20
   },
+
   sticky: {
-    position: 'sticky',
+    position: "sticky",
     width: 750,
-    backgroundColor: '#cccccc'
+    backgroundColor: "#cccccc"
   },
+
   container: {
-    borderStyle: 'solid',
-    borderColor: '#dddddd',
-    // borderWidth: 1,
-    height: vwh,
-    backgroundColor: '#eeeeee',
+    padding: 20,
+    borderStyle: "solid",
+    borderColor: "#dddddd",
+    borderWidth: 1,
+    marginLeft: 20,
+    height: 1000,
+    marginRight: 20,
+    marginBottom: 10
   },
+
   button: {
-    backgroundColor: '#ffffff',
-    width: 710,
-    height: 250,
-    marginTop: 20,
-    marginLeft: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 10,
+    margin: 7,
+    padding: 5,
+    alignItems: "center",
+    backgroundColor: "#eaeaea",
+    borderRadius: 3
   },
+
   box: {
     width: 64,
-    height: 64,
+    height: 64
   },
+
   eventLogBox: {
     padding: 10,
     margin: 10,
     height: 80,
     borderWidth: 1,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
+    borderColor: "#f0f0f0",
+    backgroundColor: "#f9f9f9"
   },
+
   row: {
-    borderColor: 'grey',
+    borderColor: "grey",
     borderWidth: 1,
     padding: 20,
-    margin: 5,
+    margin: 5
   },
+
   text: {
-    alignSelf: 'center',
-    color: 'black',
+    alignSelf: "center",
+    color: "black"
   },
+
   refreshView: {
     height: 80,
     width: 750,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center"
   },
+
   refreshArrow: {
     fontSize: 30,
-    color: '#45b5f0'
-  },
-  topIcon: {
-    position: 'fixed',
-    right: 40,
-    bottom: 40,
-    width: 100,
-    height: 100,
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: '#cccccc',
-    borderRadius: 100,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-    cursor: 'pointer',
+    color: "#45b5f0"
   }
 };