├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── lib
├── col.js
├── grid.js
└── index.js
├── package.json
└── src
├── col.js
├── grid.js
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_*
2 | *.log
3 | logs
4 | **/*.backup.*
5 | **/*.back.*
6 |
7 | node_modules
8 | bower_componets
9 |
10 | *.sublime*
11 |
12 | psd
13 | thumb
14 | sketch
15 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_*
2 | *.log
3 | logs
4 | **/*.backup.*
5 | **/*.back.*
6 |
7 | node_modules
8 | bower_componets
9 |
10 | *.sublime*
11 |
12 | psd
13 | thumb
14 | sketch
15 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015 thewei
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## react-native-grid 
2 |
3 | The 24-column grid component for react-native
4 |
5 | ### Installation
6 | ```bash
7 | $ npm install react-native-grid
8 | ```
9 |
10 | ### Example
11 | ```js
12 | 'use strict';
13 |
14 | import React from 'react-native';
15 | import reactNativeGrid from 'react-native-grid';
16 | const { Grid, Col } = reactNativeGrid;
17 | const { Text } = React;
18 |
19 | export default class Example extends React.Component {
20 | render(){
21 |
22 |
23 | box-1
24 |
25 |
26 | box-2
27 |
28 |
29 | }
30 | }
31 |
32 | ```
33 |
34 | ### API
35 | check this file: `lib/index.js`
36 |
37 | ### Contributing
38 | - Fork this Repo first
39 | - Clone your Repo
40 | - Install dependencies by `$ npm install`
41 | - Checkout a feature branch
42 | - Feel free to add your features
43 | - Make sure your features are fully tested
44 | - Publish your local branch, Open a pull request
45 | - Enjoy hacking <3
46 |
47 | ### MIT license
48 | Copyright (c) 2015 thewei
49 |
50 | Permission is hereby granted, free of charge, to any person obtaining a copy
51 | of this software and associated documentation files (the "Software"), to deal
52 | in the Software without restriction, including without limitation the rights
53 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
54 | copies of the Software, and to permit persons to whom the Software is
55 | furnished to do so, subject to the following conditions:
56 |
57 | The above copyright notice and this permission notice shall be included in
58 | all copies or substantial portions of the Software.
59 |
60 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
61 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
62 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
63 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
64 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
65 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
66 | THE SOFTWARE.
67 |
68 | ---
69 | ![docor]()
70 | built upon love by [docor](git+https://github.com/turingou/docor.git) v0.3.0
71 |
--------------------------------------------------------------------------------
/lib/col.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, '__esModule', {
4 | value: true
5 | });
6 |
7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
8 |
9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
10 |
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
12 |
13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
14 |
15 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
16 |
17 | var _reactNative = require('react-native');
18 |
19 | var _reactNative2 = _interopRequireDefault(_reactNative);
20 |
21 | var StyleSheet = _reactNative2['default'].StyleSheet;
22 | var View = _reactNative2['default'].View;
23 | var Component = _reactNative2['default'].Component;
24 |
25 | var Col = (function (_Component) {
26 | _inherits(Col, _Component);
27 |
28 | function Col() {
29 | _classCallCheck(this, Col);
30 |
31 | _get(Object.getPrototypeOf(Col.prototype), 'constructor', this).apply(this, arguments);
32 | }
33 |
34 | _createClass(Col, [{
35 | key: 'render',
36 | value: function render() {
37 | return _reactNative2['default'].createElement(
38 | View,
39 | { style: [styles.col, { flex: parseInt(this.props.span) }, this.props.style] },
40 | this.props.children
41 | );
42 | }
43 | }]);
44 |
45 | return Col;
46 | })(Component);
47 |
48 | exports['default'] = Col;
49 |
50 | var styles = StyleSheet.create({
51 | col: {}
52 | });
53 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/lib/grid.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, '__esModule', {
4 | value: true
5 | });
6 |
7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
8 |
9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
10 |
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
12 |
13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
14 |
15 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
16 |
17 | var _reactNative = require('react-native');
18 |
19 | var _reactNative2 = _interopRequireDefault(_reactNative);
20 |
21 | var StyleSheet = _reactNative2['default'].StyleSheet;
22 | var View = _reactNative2['default'].View;
23 | var Component = _reactNative2['default'].Component;
24 |
25 | var Row = (function (_Component) {
26 | _inherits(Row, _Component);
27 |
28 | function Row() {
29 | _classCallCheck(this, Row);
30 |
31 | _get(Object.getPrototypeOf(Row.prototype), 'constructor', this).apply(this, arguments);
32 | }
33 |
34 | _createClass(Row, [{
35 | key: 'render',
36 | value: function render() {
37 | return _reactNative2['default'].createElement(
38 | View,
39 | { style: [styles.row, this.props.rowStyle] },
40 | this.props.children
41 | );
42 | }
43 | }]);
44 |
45 | return Row;
46 | })(Component);
47 |
48 | var Grid = (function (_Component2) {
49 | _inherits(Grid, _Component2);
50 |
51 | function Grid() {
52 | _classCallCheck(this, Grid);
53 |
54 | _get(Object.getPrototypeOf(Grid.prototype), 'constructor', this).apply(this, arguments);
55 | }
56 |
57 | _createClass(Grid, [{
58 | key: 'render',
59 | value: function render() {
60 |
61 | var self = this;
62 | var children = this.props.children;
63 |
64 | children = Array.isArray(children) ? children : [children];
65 |
66 | var row = [];
67 | var rows = [];
68 |
69 | function isFullRow() {
70 |
71 | var span = 0;
72 | row.map(function (_row) {
73 | span += _row.props.span;
74 | });
75 |
76 | if (span === 24) return true;
77 | return false;
78 | }
79 |
80 | children.map(function (child, index) {
81 |
82 | row.push(child);
83 |
84 | if (isFullRow()) {
85 | rows.push(row);
86 | row = [];
87 | }
88 | });
89 |
90 | var GridComponent = rows.map(function (row, index) {
91 | var content = row.map(function (_row) {
92 | return _row;
93 | });
94 | return _reactNative2['default'].createElement(
95 | Row,
96 | { key: index, style: [styles.row, self.props.style] },
97 | content
98 | );
99 | });
100 |
101 | if (GridComponent.length > 1) {
102 | return _reactNative2['default'].createElement(
103 | View,
104 | { style: this.props.style },
105 | GridComponent
106 | );
107 | } else if (GridComponent.length === 1) {
108 | return GridComponent[0];
109 | } else {
110 | return null;
111 | }
112 | }
113 | }]);
114 |
115 | return Grid;
116 | })(Component);
117 |
118 | exports['default'] = Grid;
119 |
120 | var styles = StyleSheet.create({
121 | row: {
122 | flexDirection: 'row'
123 | }
124 | });
125 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports.Grid = require('./grid');
4 | module.exports.Col = require('./col');
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-grid",
3 | "version": "0.1.1",
4 | "description": "The 24-column grid component for react-native",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "build": "babel src --watch --stage 0 --out-dir lib"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/thewei/react-native-grid.git"
12 | },
13 | "keywords": [
14 | "react",
15 | "react-native",
16 | "grid",
17 | "react-native-grid",
18 | "flexbox",
19 | "layout"
20 | ],
21 | "author": "thewei",
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/thewei/react-native-grid/issues"
25 | },
26 | "homepage": "https://github.com/thewei/react-native-grid#readme",
27 | "devDependencies": {
28 | "babel": "^5.8.23"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/col.js:
--------------------------------------------------------------------------------
1 | import React from 'react-native';
2 |
3 | const {
4 | StyleSheet,
5 | View,
6 | Component,
7 | } = React;
8 |
9 | export default class Col extends Component {
10 | render() {
11 | return (
12 | {this.props.children}
13 | )
14 | }
15 | }
16 |
17 | const styles = StyleSheet.create({
18 | col: {
19 | }
20 | });
--------------------------------------------------------------------------------
/src/grid.js:
--------------------------------------------------------------------------------
1 | import React from 'react-native';
2 |
3 | const {
4 | StyleSheet,
5 | View,
6 | Component,
7 | } = React;
8 |
9 | class Row extends Component {
10 | render(){
11 | return (
12 |
13 | {this.props.children}
14 |
15 | )
16 | };
17 | }
18 |
19 | export default class Grid extends Component {
20 | render() {
21 |
22 | let self = this;
23 | let children = this.props.children;
24 |
25 | children = Array.isArray(children)?children:[children];
26 |
27 | let row = [];
28 | let rows = [];
29 |
30 | function isFullRow(){
31 |
32 | let span = 0;
33 | row.map(function(_row){
34 | span += _row.props.span;
35 | })
36 |
37 | if(span===24) return true;
38 | return false;
39 | }
40 |
41 | children.map(function(child, index){
42 |
43 | row.push(child);
44 |
45 | if(isFullRow()){
46 | rows.push(row);
47 | row = [];
48 | }
49 |
50 | });
51 |
52 | let GridComponent = rows.map(function(row, index){
53 | let content = row.map(function(_row){
54 | return _row;
55 | });
56 | return (
57 |
58 | {content}
59 |
60 | )
61 | });
62 |
63 |
64 | if(GridComponent.length>1){
65 | return (
66 |
67 | {GridComponent}
68 |
69 | );
70 | }else if(GridComponent.length===1){
71 | return GridComponent[0];
72 | }else{
73 | return null;
74 | }
75 |
76 | }
77 | }
78 |
79 | const styles = StyleSheet.create({
80 | row: {
81 | flexDirection: 'row'
82 | }
83 | });
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | module.exports.Grid = require('./grid');
2 | module.exports.Col = require('./col');
--------------------------------------------------------------------------------