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

cht8687 · cht8687 · commit eff587c65315 · 2017-10-18T22:39:38.000+11:00
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'
     },

Original file line number	Diff line number	Diff line change
`@@ -1,69 +1,69 @@`
`1`	`1`	`export const DATA = [`
`2`	`2`	`{`
`3`		`- headerName: 'ListA',`
	`3`	`+ headerName: 'Electronics',`
`4`	`4`	`items: [{`
`5`		`- title: 'items1'`
	`5`	`+ title: 'Macbook'`
`6`	`6`	`},`
`7`	`7`	`{`
`8`		`- title: 'items2'`
	`8`	`+ title: 'Dell'`
`9`	`9`	`},`
`10`	`10`	`{`
`11`		`- title: 'items3'`
	`11`	`+ title: 'HP'`
`12`	`12`	`},`
`13`	`13`	`{`
`14`		`- title: 'items4'`
	`14`	`+ title: 'Asus'`
`15`	`15`	`},`
`16`	`16`	`{`
`17`		`- title: 'items5'`
	`17`	`+ title: 'SAMSUNG'`
`18`	`18`	`},`
`19`	`19`	`{`
`20`		`- title: 'items6'`
	`20`	`+ title: 'Office Works'`
`21`	`21`	`}]`
`22`	`22`	`},`
`23`	`23`	`{`
`24`		`- headerName: 'ListB is bravo',`
	`24`	`+ headerName: 'Home Appliances',`
`25`	`25`	`items: [{`
`26`		`- title: 'items1'`
	`26`	`+ title: 'LG'`
`27`	`27`	`},`
`28`	`28`	`{`
`29`		`- title: 'items2'`
	`29`	`+ title: 'Philips'`
`30`	`30`	`},`
`31`	`31`	`{`
`32`		`- title: 'items3'`
	`32`	`+ title: 'BEKO'`
`33`	`33`	`},`
`34`	`34`	`{`
`35`		`- title: 'items4'`
	`35`	`+ title: 'Breville'`
`36`	`36`	`},`
`37`	`37`	`{`
`38`		`- title: 'items5'`
	`38`	`+ title: 'Fisher & Paykel'`
`39`	`39`	`},`
`40`	`40`	`{`
`41`		`- title: 'items6'`
	`41`	`+ title: 'Hisense'`
`42`	`42`	`}]`
`43`	`43`	`},`
`44`	`44`	`{`
`45`		`- headerName: 'ListC is Charlie',`
	`45`	`+ headerName: 'Headphones & DJ',`
`46`	`46`	`items: [{`
`47`		`- title: 'items1'`
	`47`	`+ title: 'BOSE'`
`48`	`48`	`},`
`49`	`49`	`{`
`50`		`- title: 'items2'`
	`50`	`+ title: 'Beats'`
`51`	`51`	`},`
`52`	`52`	`{`
`53`		`- title: 'items3'`
	`53`	`+ title: 'Sony'`
`54`	`54`	`},`
`55`	`55`	`{`
`56`		`- title: 'items4'`
	`56`	`+ title: 'JBL'`
`57`	`57`	`},`
`58`	`58`	`{`
`59`		`- title: 'items5'`
	`59`	`+ title: 'Marley'`
`60`	`60`	`},`
`61`	`61`	`{`
`62`		`- title: 'items6'`
	`62`	`+ title: 'Pioneer DJ'`
`63`	`63`	`}]`
`64`	`64`	`},`
`65`	`65`	`{`
`66`		`- headerName: 'ListD is Dynamic',`
	`66`	`+ headerName: 'Kitchen',`
`67`	`67`	`items: [{`
`68`	`68`	`title: 'items1'`
`69`	`69`	`},`