├── .gitignore
├── README.md
├── examples
└── simple
│ ├── Makefile
│ ├── index.html
│ ├── index.js
│ ├── package.json
│ └── webpack.config.js
├── lib
├── HorizontalLayout.js
├── Layout.js
├── VerticalLayout.js
├── index.js
├── react-native-defaults.css
└── styles.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .idea/
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-style-layout
2 |
3 | Port of Polymer's layout system to React + React Style
4 |
5 | HorizontalLayout
6 | ===
7 | var HorizontalLayout = require('react-style-layout').HorizontalLayout;
8 |
9 |
18 |
19 | VerticalLayout
20 | ---
21 | var VerticalLayout = require('react-style-layout').VerticalLayout;
22 |
23 |
32 |
33 | Available styles for elements
34 | ---
35 | var styles = require('react-style-layout').Styles;
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/examples/simple/Makefile:
--------------------------------------------------------------------------------
1 | build::
2 | ../../node_modules/.bin/webpack
3 |
4 | watch::
5 | ../../node_modules/.bin/webpack --hide-modules --watch
6 |
7 | clean::
8 | rm -rf build/
9 |
--------------------------------------------------------------------------------
/examples/simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/simple/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | 'use strict';
5 |
6 | var StyleSheet = require('react-style');
7 | var React = require('react');
8 | var ReactStyleLayout = require('react-style-layout');
9 | var HorizontalLayout = ReactStyleLayout.HorizontalLayout;
10 | var VerticalLayout = ReactStyleLayout.VerticalLayout;
11 | var Styles = ReactStyleLayout.Styles;
12 |
13 |
14 | var Application = React.createClass({
15 |
16 | getInitialState: function() {
17 | return {
18 | textAlign: 'left'
19 | };
20 | },
21 |
22 | render: function() {
23 | return (
24 |
25 |
26 |
27 |
28 |
29 |
30 | a
31 |
32 |
33 | b
34 |
35 |
36 |
37 | );
38 | }
39 |
40 | });
41 |
42 | var ApplicationStyles = StyleSheet.create({
43 |
44 | menuBar: {
45 | backgroundColor: 'orange',
46 | width: 300
47 | },
48 |
49 | content: {
50 | backgroundColor: 'purple'
51 | }
52 |
53 | });
54 |
55 | if (typeof window !== 'undefined') {
56 | React.render(, document.getElementById('app'));
57 | }
58 |
--------------------------------------------------------------------------------
/examples/simple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-style-simple-example",
3 | "version": "1.0.0",
4 | "description": "Example app which demonstrates React Style",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "css-loader": "^0.9.1",
13 | "jsx-loader": "^0.12.2",
14 | "style-loader": "^0.8.2",
15 | "url-loader": "^0.5.5"
16 | },
17 | "dependencies": {
18 | "react": "^0.13.0",
19 | "react-style": "^0.5.0"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/examples/simple/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var webpack = require('webpack');
4 |
5 | module.exports = {
6 | entry: './index.js',
7 | output: {
8 | filename: 'bundle.js',
9 | path: __dirname + '/build',
10 | publicPath: __dirname + '/build/'
11 | },
12 | resolve: {
13 | alias: {
14 | 'react-style-layout$': require.resolve('../../lib/index')
15 | }
16 | },
17 | module: {
18 | loaders: [
19 | {
20 | test: /\.js$/,
21 | loader: 'jsx-loader?harmony'
22 | }
23 | ]
24 | },
25 | plugins: [
26 | new webpack.DefinePlugin({
27 | 'process.env': {
28 | // NODE_ENV: JSON.stringify('production')
29 | }
30 | })
31 | ]
32 | };
33 |
--------------------------------------------------------------------------------
/lib/HorizontalLayout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | 'use strict';
5 |
6 | var React = require('react');
7 | var Layout = require('./Layout');
8 |
9 | var HorizontalLayout = React.createClass({
10 | render: function() {
11 | return React.createElement(Layout, this.props);
12 | }
13 | });
14 |
15 | module.exports = HorizontalLayout;
16 |
--------------------------------------------------------------------------------
/lib/Layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | 'use strict';
5 |
6 | var React = require('react');
7 | var styles = require('./styles');
8 |
9 | var Layout = React.createClass({
10 |
11 | render: function() {
12 | var props = this.props;
13 | var _styles = [];
14 |
15 | if (props.inline === true) {
16 | _styles.push(styles.inlineFlex);
17 | } else {
18 | _styles.push(styles.flex);
19 | }
20 |
21 | if (props.isVertical === true) {
22 | if (props.reverse === true) {
23 | _styles.push(styles.verticalLayoutReverse);
24 | }
25 | else {
26 | _styles.push(styles.verticalLayout);
27 | }
28 | }
29 | else {
30 | if (props.reverse === true) {
31 | _styles.push(styles.horizontalLayoutReverse);
32 | }
33 | else {
34 | _styles.push(styles.horizontalLayout);
35 | }
36 | }
37 |
38 | var align = props.align;
39 | if (align) {
40 | if (align === 'left' || align === 'top') {
41 | _styles.push(styles.alignStart);
42 | }
43 | else if (align === 'center') {
44 | _styles.push(styles.alignCenter);
45 | }
46 | else if (align === 'right' || align === 'bottom') {
47 | _styles.push(styles.alignEnd);
48 | }
49 | }
50 |
51 | var justify = props.justify;
52 | if (justify) {
53 | if (justify === 'left' || align === 'top') {
54 | _styles.push(styles.justifyStart);
55 | }
56 | else if (justify === 'justify') {
57 | _styles.push(styles.justify);
58 | }
59 | else if (justify === 'around') {
60 | _styles.push(styles.justifyAround);
61 | }
62 | else if (justify === 'center') {
63 | _styles.push(styles.justifyCenter)
64 | }
65 | else if (justify === 'right' || align === 'bottom') {
66 | _styles.push(styles.justifyEnd);
67 | }
68 | }
69 |
70 | var wrap = props.wrap;
71 | if (wrap === true) {
72 | _styles.push(styles.wrap);
73 | }
74 |
75 | var wrapReverse = props.wrapReverse;
76 | if (wrapReverse === true) {
77 | _styles.push(styles.wrapReverse);
78 | }
79 |
80 | var additionalStyles = props.styles;
81 | if (additionalStyles) {
82 | _styles = _styles.concat(additionalStyles);
83 | }
84 |
85 | return React.createElement('div', {styles:_styles}, props.children);
86 | }
87 | });
88 |
89 | module.exports = Layout;
90 |
--------------------------------------------------------------------------------
/lib/VerticalLayout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | 'use strict';
5 |
6 | var React = require('react');
7 | var Layout = require('./Layout');
8 | var assign = require('react/lib/Object.assign');
9 |
10 | var VerticalLayout = React.createClass({
11 | render: function() {
12 | var verticalProps = assign({}, this.props, {isVertical: true});
13 | return React.createElement(Layout, verticalProps);
14 | }
15 | });
16 |
17 | module.exports = VerticalLayout;
18 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var HorizontalLayout = require('./HorizontalLayout');
4 | var VerticalLayout = require('./VerticalLayout');
5 | var styles = require('./styles');
6 |
7 | module.exports = {
8 | HorizontalLayout: HorizontalLayout,
9 | VerticalLayout: VerticalLayout,
10 | Styles: styles
11 | };
12 |
--------------------------------------------------------------------------------
/lib/react-native-defaults.css:
--------------------------------------------------------------------------------
1 | div, span {
2 | box-sizing: border-box;
3 | position: relative;
4 |
5 | display: flex;
6 | flex-direction: column;
7 | align-items: stretch;
8 | flex-shrink: 0;
9 |
10 | border: 0 solid black;
11 | margin: 0;
12 | padding: 0;
13 | }
--------------------------------------------------------------------------------
/lib/styles.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var StyleSheet = require('react-style');
4 |
5 | var styles = StyleSheet.create({
6 |
7 | flex: {
8 | display: 'flex'
9 | },
10 |
11 | inlineFlex: {
12 | display: 'inline-flex'
13 | },
14 |
15 | horizontalLayout: {
16 | flexDirection: 'row'
17 | },
18 |
19 | horizontalLayoutReverse: {
20 | flexDirection: 'row-reverse'
21 | },
22 |
23 | verticalLayout: {
24 | flexDirection: 'column'
25 | },
26 |
27 | verticalLayoutReverse: {
28 | flexDirection: 'column-reverse'
29 | },
30 |
31 | justifyStart: {
32 | justifyContent: 'flex-start'
33 | },
34 |
35 | justifyEnd: {
36 | justifyContent: 'flex-end'
37 | },
38 |
39 | justifyCenter: {
40 | justifyContent: 'center'
41 | },
42 |
43 | justifyAround: {
44 | justifyContent: 'space-around'
45 | },
46 |
47 | justify: {
48 | justifyContent: 'space-between'
49 | },
50 |
51 | alignCenter: {
52 | alignItems: 'center'
53 | },
54 |
55 | alignStart: {
56 | alignItems: 'flex-start'
57 | },
58 |
59 | alignEnd: {
60 | alignItems: 'flex-end'
61 | },
62 |
63 | wrap: {
64 | flexWrap: 'wrap'
65 | },
66 |
67 | wrapReverse: {
68 | flexWrap: 'wrap-reverse'
69 | },
70 |
71 | fit: {
72 | position: 'absolute',
73 | top: 0,
74 | left: 0,
75 | right: 0,
76 | bottom: 0
77 | },
78 |
79 | fixedTop: {
80 | position: 'fixed',
81 | top: 0,
82 | left: 0,
83 | right: 0
84 | },
85 |
86 | fixedRight: {
87 | position: 'fixed',
88 | top: 0,
89 | right: 0,
90 | bottom: 0
91 | },
92 |
93 | fixedBottom: {
94 | position: 'fixed',
95 | right: 0,
96 | bottom: 0,
97 | left: 0
98 | },
99 |
100 | fixedLeft: {
101 | position: 'fixed',
102 | top: 0,
103 | bottom: 0,
104 | left: 0
105 | },
106 |
107 | stretch: {
108 | flex: 1
109 | },
110 |
111 | fill: {
112 | height: '100%',
113 | width: '100%'
114 | }
115 |
116 | });
117 |
118 | module.exports = styles;
119 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name":"react-style-layout",
3 | "version": "0.0.3",
4 | "main": "lib/index.js",
5 | "peerDependencies": {
6 | "react": "^0.13.0",
7 | "react-style": "^0.5.0"
8 | },
9 | "devDependencies": {
10 | "react": "^0.13.0",
11 | "react-style": "^0.5.0",
12 | "jsx-loader": "^0.12.2",
13 | "webpack": ">=1.4.0 || >= 1.5.0 || >= 1.6.0 || >= 1.7.0"
14 | }
15 | }
--------------------------------------------------------------------------------