feat(react-infinitegrid): add README and InfiniteGrid prototype (#134)

* feat(react-infinitegrid): add README and InfiniteGrid module
* fix(react-infinitegrid): fix README
* fix(react-infinitegrid): fix variable naming

packages/react-infinitegrid/.babelrc

@@ -0,0 +1,4 @@
+{
+	"presets": ["env", "react", "stage-2"],
+	"plugins": ["add-module-exports"]
+}

packages/react-infinitegrid/.eslintrc

@@ -0,0 +1,31 @@
+{
+	"extends": ["naver"],
+	"rules": {
+		"comma-dangle": ["error", {
+			"arrays": "always-multiline",
+			"objects": "always-multiline",
+			"imports": "always-multiline",
+			"exports": "always-multiline",
+			"functions": "never"
+		}],
+		"react/jsx-uses-react": "error",
+		"react/jsx-uses-vars": "error",
+		"class-methods-use-this": ["error", {
+			"exceptMethods": [
+				"render",
+				"getInitialState",
+				"getDefaultProps",
+				"getChildContext",
+				"componentWillMount",
+				"componentDidMount",
+				"componentWillReceiveProps",
+				"shouldComponentUpdate",
+				"componentWillUpdate",
+				"componentDidUpdate",
+				"componentWillUnmount"
+			]
+		}]
+	},
+	"parser": "babel-eslint",
+	"plugins": ["react"]
+}

packages/react-infinitegrid/.npmignore

@@ -0,0 +1,3 @@
+build/
+examples/
+node_modules/

packages/react-infinitegrid/README.md

@@ -0,0 +1,117 @@
+# react-infinitegrid [![npm version](https://badge.fury.io/js/%40egjs%2Freact-infinitegrid.svg)](https://badge.fury.io/js/%40egjs%2Freact-infinitegrid)
+
+A react component that can easily use [egjs-infinitegrid](https://github.com/naver/egjs-infinitegrid)
+
+* Demo
+* [API Documentation](https://github.com/naver/egjs-infinitegrid/wiki/react-infinitegrid-API-documentation)
+
+## Install
+```bash
+$ npm install @egjs/react-infinitegrid  --save
+```
+
+## How to use
+```js
+// GridLayout, JustifiedLayout, FrameLayout, SquareLayout, PackingLayout
+import {GridLayout} from "@egjs/react-infinitegrid";
+```
+
+```jsx
+<GridLayout
+	tag = "div"
+	threshold = {100}
+	isOverflowScroll = {false}
+	isEqualSize = {false}
+	useRecycle = {true}
+	horizontal = {false}
+	percentage = {false}
+	onAppend = {e => append}
+	onPrepend = {e => append}
+	onLayoutComplete = {e => layoutComplete}
+	onImageError = {e => imageError}
+	onChange = {e => chnage}>
+	<Item/>
+	<Item/>
+	<Item/>
+	<Item/>
+	<Item/>
+	<Item/>
+	<Item/>
+</GridLayout>
+```
+
+### More examples
+```jsx
+this.loading = (<LoadingBar append>Loading... append</LoadingBar>);
+this.state = {
+	loading: false,
+	list: loadItems(0, 0),
+};
+this.onAppend = this.onAppend.bind(this);
+this.onLayoutComplete = this.onLayoutComplete.bind(this);
+loadItems(groupKey, start) {
+	const items = [];
+
+	for (let i = 0; i < 20; ++i) {
+		items.push(<Item groupKey={groupKey} key={start + i} />);
+	}
+	return items;
+}
+onAppend({groupKey}) {
+	const list = this.state.list;
+	const start = list.length;
+	const items = this.loadItems(groupKey + 1, start);
+
+	this.setState({loading: this.loading, list: list.concat(items)});
+}
+onLayoutComplete() {
+	this.setState({loading: false});
+}
+render() {
+	return (<GridLayout onAppend={this.onAppend}
+	onLayoutComplete={this.onLayoutComplete}
+	loading={this.state.loading}>
+		{this.state.list}
+	</GridLayout>);
+}
+
+```
+
+## Development
+
+```bash
+# Run webpack-dev-server server and see examples for development
+$ npm run start
+```
+
+
+## Bug Report
+
+If you find a bug, please report it to us using the [Issues](https://github.com/naver/egjs-infinitegrid/issues) page on GitHub.
+
+
+## License
+react-layout is released under the [MIT license](https://github.com/naver/egjs-infinitegrid/blob/master/LICENSE).
+
+
+```
+Copyright (c) 2017 NAVER Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

packages/react-infinitegrid/examples/html/GridLayout.html

@@ -0,0 +1,44 @@
+
+<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+<div class="demobox">
+    <div id="__react-content"></div>
+</div>
+
+<style>
+body {
+	margin: 0;
+	left: 0;
+}
+.item {
+	width: 250px;
+	opacity: 0;
+}
+.item .thumbnail {
+	max-height: 300px;
+	overflow: hidden;
+	border-radius: 8px;
+}
+.item .thumbnail img {
+	width: 100%;
+}
+.item .info {
+	margin-top: 10px;
+	font-weight: bold;
+	color: #777;
+}
+.item.animate {
+	transition: opacity ease 1s;
+	transition-delay: 0.2s;
+	opacity: 1;
+}
+.loading {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+	font-weight: bold;
+}
+</style>
+
+<script src="../build/commons.js"></script>
+<script src="../build/GridLayout.js"></script>

packages/react-infinitegrid/examples/js/GridLayout.js

@@ -0,0 +1,69 @@
+import React, {Component} from "react";
+import ReactDOM from "react-dom";
+import {GridLayout} from "../../src/index.js";
+
+class Item {
+	render() {
+		const no = this.props.num;
+		const text = `egjs ${no}`;
+
+		return (<div class="item">
+			<div class="thumbnail">
+				<img src={`https://naver.github.io/egjs-infinitegrid/assets/image/${no}.jpg`}/>
+			</div>
+			<div class="info">
+				{text}
+			</div>
+		</div>);
+	}
+}
+
+class App extends Component {
+	constructor(prop) {
+		super(prop);
+		this.loading = (<div class="loading" append>Loading...</div>);
+		this.state = {
+			loading: null,
+			list: [],
+		};
+		this.onAppend = this.onAppend.bind(this);
+		this.onLayoutComplete = this.onLayoutComplete.bind(this);
+	}
+	loadItems(groupKey, start = this.state.list.length) {
+		const items = [];
+
+		for (let i = 0; i < 20; ++i) {
+			items.push(<Item groupKey={groupKey} num={start + i} key={start + i} />);
+		}
+		return items;
+	}
+	onAppend({groupKey}) {
+		if (this.state.loading) {
+			return;
+		}
+		const list = this.state.list;
+		const start = list.length;
+		const items = this.loadItems(groupKey + 1, start);
+
+		this.setState({loading: this.loading, list: list.concat(items)});
+	}
+	onLayoutComplete(e) {
+		this.setState({loading: false});
+	}
+	render() {
+		const {list} = this.state;
+
+		return (
+			<GridLayout margin={10}
+				align={"center"}
+				onAppend={this.onAppend}
+				onLayoutComplete={this.onLayoutComplete}
+			>
+				{list}
+			</GridLayout>
+		);
+	}
+}
+
+ReactDOM.render(<App />, document.getElementById("__react-content"));
+