Merge pull request #7 from buildo/6-add-flexview

#6: add FlexView (closes #6)
buildo · Jul 21, 2015 · bc613d3 · bc613d3
2 parents 96e690f + e83acfb
commit bc613d3
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 31 deletions.
diff --git a/examples/.gitignore b/examples/.gitignore
@@ -0,0 +1,2 @@
+*.css
+!example.css
diff --git a/examples/components/FlexView.js b/examples/components/FlexView.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {FlexView, FlexCell} from '../../src/flex';
+
+const Example = React.createClass({
+
+  propTypes: {},
+
+  getTemplate() {
+    return (
+      <div>
+        <FlexView className='hello' style={{backgroundColor: 'blue'}}>
+          <div className='ui segment' style={{backgroundColor: 'red'}}/>
+          <div className='ui segment' style={{backgroundColor: 'green'}}/>
+        </FlexView>
+      </div>
+    );
+  },
+
+  render() {
+    return this.getTemplate();
+  }
+
+});
+
+export default Example;
diff --git a/examples/components/Menu.js b/examples/components/Menu.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Menu from '../../src/menu'
+import Menu from '../../src/panel-menu'
 
 const onClick = (option) => {
   console.log(option.title);

diff --git a/examples/examples.js b/examples/examples.js
@@ -3,11 +3,13 @@ import DropdownTest from './components/Dropdown'
 import MenuTest from './components/Menu'
 import ModalTest from './components/Modal'
 import PopoverTest from './components/Popover'
+import FlexViewTest from './components/FlexView'
 
 const modules = [
   // DropdownTest,
   // MenuTest,
-  PopoverTest
+  // PopoverTest,
+  FlexViewTest
 ];
 
 const template = (

diff --git a/examples/index.html b/examples/index.html
@@ -8,6 +8,7 @@
     <link rel='stylesheet' href='example.css'>
     <link rel='stylesheet' href='styles/dropdown-default.css'>
     <link rel='stylesheet' href='styles/dropdown-semantic.css'>
+    <link rel='stylesheet' href='flex/flexView.css'>
   </head>
   <body>
     <div id='container'></div>

diff --git a/examples/webpack.config.build.js b/examples/webpack.config.build.js
diff --git a/package.json b/package.json
@@ -5,14 +5,14 @@
   "main": "index.js",
   "scripts": {
     "test": "./node_modules/karma/bin/karma start",
-    "build": "rm -rf lib && mkdir lib && babel --loose --stage 0 --out-dir lib src",
+    "build": "rm -rf lib && mkdir lib && node-sass src -o lib && babel --loose --stage 0 --out-dir lib src",
     "lint": "eslint src",
     "preversion": "npm run lint && npm run test && npm run build-examples",
     "prepublish": "npm run build",
     "build-kitchen-sink": "npm run clean && webpack --config kitchen-sink/webpack.config.build.js --progress",
     "kitchen-sink": "npm run clean && webpack-dev-server --config kitchen-sink/webpack.config.js --progress --hot --inline",
     "build-examples": "npm run clean && webpack --config examples/webpack.config.build.js --progress",
-    "start": "npm run clean && webpack-dev-server --config examples/webpack.config.js --progress --hot --inline",
+    "start": "npm run clean && node-sass src -o examples && webpack-dev-server --config examples/webpack.config.js --progress --hot --inline",
     "clean": "rm -f examples/bundle.js examples/bundle.js.map"
   },
   "repository": {
@@ -31,7 +31,8 @@
     "react-autosize-textarea": "0.2.4",
     "react-cookie-banner": "0.0.7",
     "react-input-link": "0.0.3",
-    "react-select": "0.5.2"
+    "react-select": "0.5.2",
+    "sass-flex-mixins": "^0.1.0"
   },
   "devDependencies": {
     "babel": "^5.4.7",
@@ -51,6 +52,7 @@
     "lodash": "^3.9.3",
     "mocha": "^2.2.5",
     "node-libs-browser": "^0.5.2",
+    "node-sass": "^3.2.0",
     "react": "^0.13.3",
     "require-dir": "^0.3.0",
     "webpack": "^1.9.12",

diff --git a/src/flex/FlexCell.js b/src/flex/FlexCell.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import FlexView from './FlexView';
+
+export default React.createClass({
+
+  getDefaultProps() {
+    return {
+      className: '',
+      grow: true
+    };
+  },
+
+  render() {
+    return <FlexView {...this.props} className={`react-flex-cell ${this.props.className}`}/>;
+  }
+
+});
diff --git a/src/flex/FlexView.js b/src/flex/FlexView.js
@@ -0,0 +1,101 @@
+import React from 'react';
+
+export default React.createClass({
+
+  propTypes: {
+    children: React.PropTypes.node,
+    row: React.PropTypes.bool,
+    column: React.PropTypes.bool,
+    auto: React.PropTypes.bool,
+    centerVertically: React.PropTypes.bool,
+    grow: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
+    height: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
+    width: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
+    flexBasis: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
+    className: React.PropTypes.string,
+    style: React.PropTypes.object
+  },
+
+  getDefaultProps() {
+    return {
+      className: '',
+      style: {}
+    };
+  },
+
+  getGrow() {
+    if (typeof this.props.grow === 'number') {
+      return this.props.grow;
+    } else if (this.props.grow) {
+      return 1;
+    } else {
+      return 0; // auto === true or default
+    }
+  },
+
+  getShrink() {
+    if (this.props.flexBasis || this.props.auto) {
+      return 0;
+    } else {
+      return 1; // grow === true or default
+    }
+  },
+
+  getBasis() {
+    if (this.props.flexBasis) {
+      const suffix = typeof this.props.flexBasis === 'number' ? 'px' : '';
+      return this.props.flexBasis + suffix;
+    } else if (this.props.grow) {
+      return '100%';
+    } else {
+      return 'auto'; // auto === true or default
+    }
+  },
+
+  getFlexStyle() {
+    const grow = this.getGrow();
+    const shrink = this.getShrink();
+    const basis = this.getBasis();
+    const values = `${grow} ${shrink} ${basis}`;
+    return {
+      WebkitBoxFlex: values,
+      MozBoxFlex: values,
+      msFlex: values,
+      WebkitFlex: values,
+      flex: values
+    };
+  },
+
+  getStyle() {
+    const sizeStyle = {
+      width: this.props.width,
+      height: this.props.height
+    };
+    return {...this.getFlexStyle(), ...sizeStyle, ...this.props.style};
+  },
+
+  getClasses() {
+    const direction = this.props.column ? 'flex-column' : 'flex-row';
+    const centerVertically = this.props.centerVertically === true ? 'flex-vertically-centered' : '';
+    return `react-flex-view ${direction} ${centerVertically} ${this.props.className}`;
+  },
+
+  render() {
+    const className = this.getClasses();
+    const style = this.getStyle();
+    return <div className={className} style={style}>{this.props.children}</div>;
+  }
+
+});
diff --git a/src/flex/flexView.scss b/src/flex/flexView.scss
@@ -0,0 +1,34 @@
+@import '../../node_modules/sass-flex-mixins/src/sass-flex-mixins.scss';
+
+.react-flex-view {
+  box-sizing: 'border-box';
+  @include display_flex();
+  @include flex_flex-wrap(nowrap);
+  @include flex_align-items(stretch);
+
+  &.flex-vertically-centered {
+    @include flex_align-items(center);
+  }
+
+  &.flex-column {
+    @include flex_flex-direction(column);
+  }
+
+  &.flex-row {
+    @include flex_flex-direction(row);
+  }
+
+  &.flex-auto {
+    @include flex_flex(0 0 auto);
+  }
+
+  &.flex-grow {
+    @include flex_flex(1 1 100%);
+  }
+
+}
+
+.react-flex-view.react-flex-cell {
+  @include flex_justify-content(space-between);
+  @include flex_align-content(space-between);
+}
diff --git a/src/flex/index.js b/src/flex/index.js
@@ -0,0 +1,4 @@
+import FlexView from './FlexView';
+import FlexCell from './FlexCell';
+
+export default { FlexView, FlexCell };