feat(react): support react component react-layout (#103)

* feat(react): add react-layout package close #101 fixed #103
naver · Feb 13, 2018 · 063714b · 063714b
1 parent 297defc
commit 063714b
Show file tree

Hide file tree

Showing 24 changed files with 17,734 additions and 0 deletions.
diff --git a/packages/react-layout/READMD.md b/packages/react-layout/READMD.md
@@ -0,0 +1,85 @@
+# react-layout [![npm version](https://badge.fury.io/js/%40egjs%2Freact-layout.svg)](https://badge.fury.io/js/%40egjs%2Freact-layout)
+
+A react component that can easily use [egjs-infinitegrid's layouts](https://github.com/naver/egjs-infinitegrid)
+
+- [Demo](https://naver.github.io/egjs-infinitegrid/)
+
+
+## Install
+```bash
+$ npm install @egjs/react-layout
+```
+
+## Usage
+
+```jsx
+import {GridLayout, JustifiedLayout, FrameLayout, SquareLayout, PackingLayout} from "@egjs/react-layout";
+
+<GridLayout size="1000" horizontal={true} margin="10" isEqualSize={} outline={[]}>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</GridLayout>
+
+```
+
+### props
+|name|type|description|
+|---|---------------|---|
+|size|number|The viewport size of container area where items are added to a layout
+|horizontal|boolean|Direction of the scroll movement|
+|margin|number|Margin used to create space around items|
+|isEqualSize|boolean|Indicates whether sizes of all card elements are equal to one another. If true, the performance of layout arrangement can be improved.|
+|outline|array|Array of outline points to be reference points
+|other props||LayoutOptions|
+
+> #### LayoutOptions
+> * [GridLayout's options](https://naver.github.io/egjs-infinitegrid/release/latest/doc/eg.InfiniteGrid.GridLayout.html)
+> * [JustifiedLayout's options](https://naver.github.io/egjs-infinitegrid/release/latest/doc/eg.InfiniteGrid.JustifiedLayout.html)
+> * [FrameLayout's options](https://naver.github.io/egjs-infinitegrid/release/latest/doc/eg.InfiniteGrid.FrameLayout.html)
+> * [SquareLayout's options](https://naver.github.io/egjs-infinitegrid/release/latest/doc/eg.InfiniteGrid.SquareLayout.html)
+> * [PackingLayout's options](https://naver.github.io/egjs-infinitegrid/release/latest/doc/eg.InfiniteGrid.PackingLayout.html)
+
+
+
+## Development
+
+```bash
+# Run rc-tools 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.
+```
diff --git a/packages/react-layout/examples/FrameLayout.html b/packages/react-layout/examples/FrameLayout.html
@@ -0,0 +1,31 @@
+
+<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>
+    .item {
+        position: absolute;
+        width: 200px;
+        overflow: hidden;
+    }
+    .item .thumbnail {
+        /* max-height: 300px; */
+        overflow: hidden;
+        /* border-radius: 8px; */
+        padding: 0;
+        border: 0;
+    }
+    .item .thumbnail img {
+        width: 100%;
+        height: 100%;
+    }
+    .item .info {
+        margin-top: 10px;
+        font-weight: bold;
+        color: #777;
+    }
+</style>
+
+<script src="./FrameLayout.js"></script>
diff --git a/packages/react-layout/examples/FrameLayout.js b/packages/react-layout/examples/FrameLayout.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {FrameLayout} from "../index.js";
+
+class Item extends Component {
+	render() {
+		return (
+		<div className="item">
+			<div className="thumbnail">
+				<img src={`https://naver.github.io/egjs-infinitegrid/assets/image/${parseInt(Math.random() * 59 + 1)}.jpg`} />
+			</div>
+		</div>
+		);
+	}
+}
+
+class App extends Component {
+  constructor(prop) {
+		super(prop);
+  }
+  render() {
+    return (
+		<FrameLayout size={1000} margin={10} frame={[
+			[1, 1, 2, 2],
+			[3, 4, 4, 5],
+			[3, 4, 4, 5]
+		]}>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+		</FrameLayout>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('__react-content'));
diff --git a/packages/react-layout/examples/GridLayout.html b/packages/react-layout/examples/GridLayout.html
@@ -0,0 +1,31 @@
+
+<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>
+    .item {
+        position: absolute;
+        width: 200px;
+    }
+    .item .thumbnail {
+        max-height: 300px;
+        overflow: hidden;
+        border-radius: 8px;
+        padding: 0;
+        border: 0;
+    }
+    .item .thumbnail img {
+        width: 100%;
+    }
+    .item .info {
+        margin-top: 10px;
+        font-weight: bold;
+        color: #777;
+    }
+</style>
+
+<!-- <script src="character_bundle.js"></script> -->
+<script src="./GridLayout.js"></script>
+
diff --git a/packages/react-layout/examples/GridLayout.js b/packages/react-layout/examples/GridLayout.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {GridLayout} from "../index.js";
+
+class Item extends Component {
+	render() {
+		return (
+		<div className="item">
+			<div className="thumbnail">
+				<img src={`https://naver.github.io/egjs-infinitegrid/assets/image/${parseInt(Math.random() * 59 + 1)}.jpg`} />
+			</div>
+			<div className="info">egjs post</div>
+		</div>
+		);
+	}
+}
+
+class App extends Component {
+  constructor(prop) {
+		super(prop);
+  }
+  render() {
+    return (
+		<GridLayout size={1000} margin={10} isEqualSize={true}>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+		</GridLayout>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('__react-content'));
diff --git a/packages/react-layout/examples/JustifiedLayout.html b/packages/react-layout/examples/JustifiedLayout.html
@@ -0,0 +1,30 @@
+
+<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>
+    .item {
+        position: absolute;
+        width: 200px;
+    }
+    .item .thumbnail {
+        /* max-height: 300px; */
+        overflow: hidden;
+        /* border-radius: 8px; */
+        padding: 0;
+        border: 0;
+    }
+    .item .thumbnail img {
+        width: 100%;
+    }
+    .item .info {
+        margin-top: 10px;
+        font-weight: bold;
+        color: #777;
+    }
+</style>
+
+<script src="./JustifiedLayout.js"></script>
+
diff --git a/packages/react-layout/examples/JustifiedLayout.js b/packages/react-layout/examples/JustifiedLayout.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {JustifiedLayout} from "../index.js";
+
+class Item extends Component {
+	render() {
+		return (
+		<div className="item">
+			<div className="thumbnail">
+				<img src={`https://naver.github.io/egjs-infinitegrid/assets/image/${parseInt(Math.random() * 59 + 1)}.jpg`} />
+			</div>
+		</div>
+		);
+	}
+}
+
+class App extends Component {
+  constructor(prop) {
+		super(prop);
+  }
+  render() {
+    return (
+		<JustifiedLayout size={1000} margin={10}>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+			<Item/>
+
+		</JustifiedLayout>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('__react-content'));
diff --git a/packages/react-layout/examples/PackingLayout.html b/packages/react-layout/examples/PackingLayout.html
@@ -0,0 +1,23 @@
+
+<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>
+    .item {
+        position: absolute;
+        overflow: hidden;
+    }
+    .item img {
+        width: 100%;
+        min-height: 100%;
+    }
+    .item .info {
+        margin-top: 10px;
+        font-weight: bold;
+        color: #777;
+    }
+</style>
+
+<script src="./PackingLayout.js"></script>