[#13]:First item have height issue when scroll back

cht8687 · Oct 18, 2017 · eff587c · eff587c
1 parent d4d6290
commit eff587c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -116,35 +116,35 @@ In above example, it's `items`.
 ```js
 let styles = {
   outerDiv: {
-    height: '400px',
+    height: '420px',
     overflowY: 'auto',
-    outline: '1px dashed blue',
-    width: '400px',
+    outline: '#b9ceb6 dashed 1px',
+    width: '383px'
   },
 
   ul: {
     margin: '0px',
     listStyleType: 'none',
-    padding: '0'
+    padding: '0px'
   },
 
   fixedPosition: {
-    position : 'fixed',
-    width : '383px',
+    position: 'fixed',
+    width: '383px',
     top: '0px'
   },
 
   listHeader: {
     width: '383px',
-    height: '20px',
-    background: 'green',
+    height: '27px',
+    background: '#94D6CF',
     color: 'white'
   },
 
   listItems: {
-    color: 'blue'
-  },
-};
+    color: '#a9adab'
+  }
+}
 ```
 
 `outerDiv`, `ul`, `fixedPosition`, `listHeader`, `listItems` are required, you can modify the CSS to meet your needs.

diff --git a/src/ReactListView.js b/src/ReactListView.js
@@ -28,7 +28,7 @@ export default class ReactListView extends Component {
   }
 
   componentWillUnmount () {
-     // unRegister events listeners with the listview div
+    // unRegister events listeners with the listview div
     this.state.events.forEach((type) => {
       if (window.addEventListener) {
         findDOMNode(this.refs.listview).removeEventListener(type, this.onScroll.bind(this), false)
@@ -40,7 +40,7 @@ export default class ReactListView extends Component {
 
   refsToArray (ctx, prefix) {
     let results = []
-    for (let i = 0; ;i++) {
+    for (let i = 0; ; i++) {
       let ref = ctx.refs[prefix + '-' + String(i)]
       if (ref) results.push(ref)
       else return results
@@ -57,7 +57,7 @@ export default class ReactListView extends Component {
       return headerAndPosInfo
     })
     this.setState({
-      _instances: Object.assign(this.state._instances, {_originalPositions}),
+      _instances: Object.assign(this.state._instances, { _originalPositions }),
       _firstChildWrapper: listHeaders[0].refs.followWrap,
       _headerFixedPosition: listHeaders[0].refs.header.getBoundingClientRect().top
     })
@@ -85,15 +85,14 @@ export default class ReactListView extends Component {
         nextNode = this.state._instances._originalPositions[index + 1]
       }
       if (nextNode) {
-        // temporily disable the clapsed effect
       }
       if (index === 0) {
         if (currentWindowScrollTop === c.originalPosition) {
           currentNode.style.position = ''
           ignoreCheck = true
         }
       }
-      if (!ignoreCheck && (c.originalPosition) < (currentWindowScrollTop + this.state._headerFixedPosition + currentHeaderHeight)) {
+      if (!ignoreCheck && (c.originalPosition) < (currentWindowScrollTop + this.state._headerFixedPosition + index * currentHeaderHeight)) {
         Object.assign(currentNode.style, this.props.styles.fixedPosition)
         // apply top value
         currentNode.style.top = `${this.state._headerFixedPosition}px`
@@ -109,7 +108,7 @@ export default class ReactListView extends Component {
 
   render () {
     const { data, headerAttName, itemsAttName } = this.props
-    const { styles: {outerDiv, ul, listHeader, listItems, li} } = this.props
+    const { styles: { outerDiv, ul, listHeader, listItems, li } } = this.props
     let _refi = 0
     let makeRef = () => {
       return `ListHeader-${_refi++}`
@@ -118,25 +117,25 @@ export default class ReactListView extends Component {
     return (
       <div ref='listview' style={outerDiv}>
         <ul style={ul}>
-        {
-          Object.keys(data).map((k) => {
-            const header = data[k][headerAttName]
-            const items = data[k][itemsAttName]
-            return (
-              <li key={k}>
-                <ListHeader
-                  ref={makeRef()}
-                  header={header}
-                  styles={listHeader}
-                />
-                <ListItems
-                  items={items}
-                  styles={listItems}
-                />
-              </li>
-            )
-          })
-        }
+          {
+            Object.keys(data).map((k) => {
+              const header = data[k][headerAttName]
+              const items = data[k][itemsAttName]
+              return (
+                <li key={k}>
+                  <ListHeader
+                    ref={makeRef()}
+                    header={header}
+                    styles={listHeader}
+                  />
+                  <ListItems
+                    items={items}
+                    styles={listItems}
+                  />
+                </li>
+              )
+            })
+          }
         </ul>
       </div>
     )

diff --git a/src/example/Example.js b/src/example/Example.js
@@ -5,10 +5,11 @@ import { DATA } from './data'
 
 let styles = {
   outerDiv: {
-    height: '400px',
+    height: '420px',
     overflowY: 'auto',
-    outline: '1px dashed blue',
-    width: '400px'
+    outline: '#b9ceb6 dashed 1px',
+    width: '383px',
+    margin: '0 auto'
   },
 
   ul: {
@@ -26,12 +27,12 @@ let styles = {
   listHeader: {
     width: '383px',
     height: '27px',
-    background: 'green',
+    background: '#94D6CF',
     color: 'white'
   },
 
   listItems: {
-    color: 'blue'
+    color: '#a9adab'
   }
 }
 

diff --git a/src/example/data.js b/src/example/data.js
@@ -1,69 +1,69 @@
 export const DATA = [
   {
-    headerName: 'ListA',
+    headerName: 'Electronics',
     items: [{
-      title: 'items1'
+      title: 'Macbook'
     },
       {
-        title: 'items2'
+        title: 'Dell'
       },
       {
-        title: 'items3'
+        title: 'HP'
       },
       {
-        title: 'items4'
+        title: 'Asus'
       },
       {
-        title: 'items5'
+        title: 'SAMSUNG'
       },
       {
-        title: 'items6'
+        title: 'Office Works'
       }]
   },
   {
-    headerName: 'ListB is bravo',
+    headerName: 'Home Appliances',
     items: [{
-      title: 'items1'
+      title: 'LG'
     },
       {
-        title: 'items2'
+        title: 'Philips'
       },
       {
-        title: 'items3'
+        title: 'BEKO'
       },
       {
-        title: 'items4'
+        title: 'Breville'
       },
       {
-        title: 'items5'
+        title: 'Fisher & Paykel'
       },
       {
-        title: 'items6'
+        title: 'Hisense'
       }]
   },
   {
-    headerName: 'ListC is Charlie',
+    headerName: 'Headphones & DJ',
     items: [{
-      title: 'items1'
+      title: 'BOSE'
     },
       {
-        title: 'items2'
+        title: 'Beats'
       },
       {
-        title: 'items3'
+        title: 'Sony'
       },
       {
-        title: 'items4'
+        title: 'JBL'
       },
       {
-        title: 'items5'
+        title: 'Marley'
       },
       {
-        title: 'items6'
+        title: 'Pioneer DJ'
       }]
   },
   {
-    headerName: 'ListD is Dynamic',
+    headerName: 'Kitchen',
     items: [{
       title: 'items1'
     },