Merge branch 'master' of github.com:argelius/react-onsenui

README.md

@@ -18,7 +18,7 @@ You need to install `react`, `react-dom`, `onsenui` and `react-onsenui`. You pro
 
 Now you can import the necessary libraries in your code:
 
-```
+```jsx
 var React = require('react');
 var ReactDOM = require('react-dom');
 

demo/examples/LazyList.js

@@ -6,13 +6,21 @@ import ons from '../../OnsenUI/build/js/onsenui.js';
 import {
   Page,
   BackButton,
+  Button,
   ListItem,
   LazyList,
   Toolbar
-} from 'react-onsenui';
+} from '../../dist/react-onsenui.js';
 
 export default class extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      length: 0
+    };
+  }
+
   renderRow(index) {
     return (
       <ListItem key={index}>
@@ -25,8 +33,10 @@ export default class extends React.Component {
     return (
       <Page renderToolbar={() => <MyToolbar title='LazyList' />} >
         <div style={{height: 100}}>
+          <Button id='btn1' onClick={() => this.setState({length: 10})} > Change Length 10 </Button>
+          <Button id='btn2' onClick={() => this.setState({length: 100})} > Change Length 100 </Button>
           <LazyList
-            length={1000}
+            length={this.state.length}
             renderRow={this.renderRow}
             calculateItemHeight={() => ons.platform.isAndroid() ? 76 : 45}
           />

docs/LazyList.json

@@ -1 +1 @@
-{"description":"@original ons-lazy-repeat\n@category lazy-list\n@description\n[en] Using this component a list with millions of items can be rendered without a drop in performance.\n    It does that by \"lazily\" loading elements into the DOM when they come into view and\n    removing items from the DOM when they are not visible.\n [/en]\n[jp][/jp]\n@example\n\n  renderRow(index) {\n    return (\n      <ListItem key={index}>\n        {'Item ' + (index + 1)}\n      </ListItem>\n    );\n  }\n\n  render() {\n    return (\n      <Page renderToolbar={() => <MyToolbar title='LazyList' />} >\n        <div style={{height: 100}}>\n          <LazyList\n            length={1000}\n            renderRow={() =>\n              <ListItem key={index}>\n                {'Item ' + (index + 1)}\n              </ListItem>\n            }\n            calculateItemHeight={() => 44}\n          />\n        </div>\n      </Page>\n    );\n  }\n}","methods":[],"props":{"modifier":{"type":{"name":"string"},"required":false,"description":"@name modifier\n@type string\n@required false\n@description\n [en]The appearance of the lazy list.[/en]\n [jp] [/jp]"},"length":{"type":{"name":"number"},"required":true,"description":"@name length\n@type number\n@description\n [en]The length of the list.[/en]\n [jp] [/jp]"},"renderRow":{"type":{"name":"func"},"required":true,"description":"@name renderRow\n@type function\n@description\n [en] A function given the index of the to display row, renders it.[/en]\n [jp] [/jp]"},"calculateItemHeight":{"type":{"name":"func"},"required":true,"description":"@name calculateItemHeight\n@type function\n@description\n [en] A function given the index of the to row, returns the height of it.[/en]\n [jp] [/jp]"}}}
+{"description":"@original ons-lazy-repeat\n@category lazy-list\n@description\n[en] Using this component a list with millions of items can be rendered without a drop in performance.\n    It does that by \"lazily\" loading elements into the DOM when they come into view and\n    removing items from the DOM when they are not visible.\n [/en]\n[jp][/jp]\n@example\n\n  renderRow(index) {\n    return (\n      <ListItem key={index}>\n        {'Item ' + (index + 1)}\n      </ListItem>\n    );\n  }\n\n  render() {\n    return (\n      <Page renderToolbar={() => <MyToolbar title='LazyList' />} >\n        <div style={{height: 100}}>\n          <LazyList\n            length={1000}\n            renderRow={() =>\n              <ListItem key={index}>\n                {'Item ' + (index + 1)}\n              </ListItem>\n            }\n            calculateItemHeight={() => 44}\n          />\n        </div>\n      </Page>\n    );\n  }\n}","methods":[{"name":"update","docblock":null,"modifiers":[],"params":[{"name":"props","type":null}],"returns":null}],"props":{"modifier":{"type":{"name":"string"},"required":false,"description":"@name modifier\n@type string\n@required false\n@description\n [en]The appearance of the lazy list.[/en]\n [jp] [/jp]"},"length":{"type":{"name":"number"},"required":true,"description":"@name length\n@type number\n@description\n [en]The length of the list.[/en]\n [jp] [/jp]"},"renderRow":{"type":{"name":"func"},"required":true,"description":"@name renderRow\n@type function\n@description\n [en] A function given the index of the to display row, renders it.[/en]\n [jp] [/jp]"},"calculateItemHeight":{"type":{"name":"func"},"required":true,"description":"@name calculateItemHeight\n@type function\n@description\n [en] A function given the index of the to row, returns the height of it.[/en]\n [jp] [/jp]"}}}