Skip to content

Commit bc613d3

Browse files
giogonzogiogonzo
committed
Merge pull request #7 from buildo/6-add-flexview
#6: add FlexView (closes #6)
2 parents 96e690f + e83acfb commit bc613d3

File tree

11 files changed

+193
-31
lines changed

11 files changed

+193
-31
lines changed

‎examples/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.css
2+
!example.css

‎examples/components/FlexView.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import {FlexView, FlexCell} from '../../src/flex';
3+
4+
const Example = React.createClass({
5+
6+
propTypes: {},
7+
8+
getTemplate() {
9+
return (
10+
<div>
11+
<FlexView className='hello' style={{backgroundColor: 'blue'}}>
12+
<div className='ui segment' style={{backgroundColor: 'red'}}/>
13+
<div className='ui segment' style={{backgroundColor: 'green'}}/>
14+
</FlexView>
15+
</div>
16+
);
17+
},
18+
19+
render() {
20+
return this.getTemplate();
21+
}
22+
23+
});
24+
25+
export default Example;

‎examples/components/Menu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Menu from '../../src/menu'
2+
import Menu from '../../src/panel-menu'
33

44
const onClick = (option) => {
55
console.log(option.title);

‎examples/examples.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import DropdownTest from './components/Dropdown'
33
import MenuTest from './components/Menu'
44
import ModalTest from './components/Modal'
55
import PopoverTest from './components/Popover'
6+
import FlexViewTest from './components/FlexView'
67

78
const modules = [
89
// DropdownTest,
910
// MenuTest,
10-
PopoverTest
11+
// PopoverTest,
12+
FlexViewTest
1113
];
1214

1315
const template = (

‎examples/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel='stylesheet' href='example.css'>
99
<link rel='stylesheet' href='styles/dropdown-default.css'>
1010
<link rel='stylesheet' href='styles/dropdown-semantic.css'>
11+
<link rel='stylesheet' href='flex/flexView.css'>
1112
</head>
1213
<body>
1314
<div id='container'></div>

‎examples/webpack.config.build.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
"main": "index.js",
66
"scripts": {
77
"test": "./node_modules/karma/bin/karma start",
8-
"build": "rm -rf lib && mkdir lib && babel --loose --stage 0 --out-dir lib src",
8+
"build": "rm -rf lib && mkdir lib && node-sass src -o lib && babel --loose --stage 0 --out-dir lib src",
99
"lint": "eslint src",
1010
"preversion": "npm run lint && npm run test && npm run build-examples",
1111
"prepublish": "npm run build",
1212
"build-kitchen-sink": "npm run clean && webpack --config kitchen-sink/webpack.config.build.js --progress",
1313
"kitchen-sink": "npm run clean && webpack-dev-server --config kitchen-sink/webpack.config.js --progress --hot --inline",
1414
"build-examples": "npm run clean && webpack --config examples/webpack.config.build.js --progress",
15-
"start": "npm run clean && webpack-dev-server --config examples/webpack.config.js --progress --hot --inline",
15+
"start": "npm run clean && node-sass src -o examples && webpack-dev-server --config examples/webpack.config.js --progress --hot --inline",
1616
"clean": "rm -f examples/bundle.js examples/bundle.js.map"
1717
},
1818
"repository": {
@@ -31,7 +31,8 @@
3131
"react-autosize-textarea": "0.2.4",
3232
"react-cookie-banner": "0.0.7",
3333
"react-input-link": "0.0.3",
34-
"react-select": "0.5.2"
34+
"react-select": "0.5.2",
35+
"sass-flex-mixins": "^0.1.0"
3536
},
3637
"devDependencies": {
3738
"babel": "^5.4.7",
@@ -51,6 +52,7 @@
5152
"lodash": "^3.9.3",
5253
"mocha": "^2.2.5",
5354
"node-libs-browser": "^0.5.2",
55+
"node-sass": "^3.2.0",
5456
"react": "^0.13.3",
5557
"require-dir": "^0.3.0",
5658
"webpack": "^1.9.12",

‎src/flex/FlexCell.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import FlexView from './FlexView';
3+
4+
export default React.createClass({
5+
6+
getDefaultProps() {
7+
return {
8+
className: '',
9+
grow: true
10+
};
11+
},
12+
13+
render() {
14+
return <FlexView {...this.props} className={`react-flex-cell ${this.props.className}`}/>;
15+
}
16+
17+
});

‎src/flex/FlexView.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from 'react';
2+
3+
export default React.createClass({
4+
5+
propTypes: {
6+
children: React.PropTypes.node,
7+
row: React.PropTypes.bool,
8+
column: React.PropTypes.bool,
9+
auto: React.PropTypes.bool,
10+
centerVertically: React.PropTypes.bool,
11+
grow: React.PropTypes.oneOfType([
12+
React.PropTypes.number,
13+
React.PropTypes.string
14+
]),
15+
height: React.PropTypes.oneOfType([
16+
React.PropTypes.number,
17+
React.PropTypes.string
18+
]),
19+
width: React.PropTypes.oneOfType([
20+
React.PropTypes.number,
21+
React.PropTypes.string
22+
]),
23+
flexBasis: React.PropTypes.oneOfType([
24+
React.PropTypes.number,
25+
React.PropTypes.string
26+
]),
27+
className: React.PropTypes.string,
28+
style: React.PropTypes.object
29+
},
30+
31+
getDefaultProps() {
32+
return {
33+
className: '',
34+
style: {}
35+
};
36+
},
37+
38+
getGrow() {
39+
if (typeof this.props.grow === 'number') {
40+
return this.props.grow;
41+
} else if (this.props.grow) {
42+
return 1;
43+
} else {
44+
return 0; // auto === true or default
45+
}
46+
},
47+
48+
getShrink() {
49+
if (this.props.flexBasis || this.props.auto) {
50+
return 0;
51+
} else {
52+
return 1; // grow === true or default
53+
}
54+
},
55+
56+
getBasis() {
57+
if (this.props.flexBasis) {
58+
const suffix = typeof this.props.flexBasis === 'number' ? 'px' : '';
59+
return this.props.flexBasis + suffix;
60+
} else if (this.props.grow) {
61+
return '100%';
62+
} else {
63+
return 'auto'; // auto === true or default
64+
}
65+
},
66+
67+
getFlexStyle() {
68+
const grow = this.getGrow();
69+
const shrink = this.getShrink();
70+
const basis = this.getBasis();
71+
const values = `${grow} ${shrink} ${basis}`;
72+
return {
73+
WebkitBoxFlex: values,
74+
MozBoxFlex: values,
75+
msFlex: values,
76+
WebkitFlex: values,
77+
flex: values
78+
};
79+
},
80+
81+
getStyle() {
82+
const sizeStyle = {
83+
width: this.props.width,
84+
height: this.props.height
85+
};
86+
return {...this.getFlexStyle(), ...sizeStyle, ...this.props.style};
87+
},
88+
89+
getClasses() {
90+
const direction = this.props.column ? 'flex-column' : 'flex-row';
91+
const centerVertically = this.props.centerVertically === true ? 'flex-vertically-centered' : '';
92+
return `react-flex-view ${direction} ${centerVertically} ${this.props.className}`;
93+
},
94+
95+
render() {
96+
const className = this.getClasses();
97+
const style = this.getStyle();
98+
return <div className={className} style={style}>{this.props.children}</div>;
99+
}
100+
101+
});

‎src/flex/flexView.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@import '../../node_modules/sass-flex-mixins/src/sass-flex-mixins.scss';
2+
3+
.react-flex-view {
4+
box-sizing: 'border-box';
5+
@include display_flex();
6+
@include flex_flex-wrap(nowrap);
7+
@include flex_align-items(stretch);
8+
9+
&.flex-vertically-centered {
10+
@include flex_align-items(center);
11+
}
12+
13+
&.flex-column {
14+
@include flex_flex-direction(column);
15+
}
16+
17+
&.flex-row {
18+
@include flex_flex-direction(row);
19+
}
20+
21+
&.flex-auto {
22+
@include flex_flex(0 0 auto);
23+
}
24+
25+
&.flex-grow {
26+
@include flex_flex(1 1 100%);
27+
}
28+
29+
}
30+
31+
.react-flex-view.react-flex-cell {
32+
@include flex_justify-content(space-between);
33+
@include flex_align-content(space-between);
34+
}

‎src/flex/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import FlexView from './FlexView';
2+
import FlexCell from './FlexCell';
3+
4+
export default { FlexView, FlexCell };

0 commit comments

Comments
 (0)