initial commit

dlmanning · Apr 23, 2015 · 63fde0c · 63fde0c
commit 63fde0c
Show file tree

Hide file tree

Showing 10 changed files with 418 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-svg-flexbox",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test-serve" : "webpack-dev-server --content-base test/ --hot --inline"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "css-layout": "0.0.2"
+  },
+  "devDependencies": {
+    "babel-core": "^5.1.10",
+    "babel-loader": "^5.0.0",
+    "webpack": "^1.8.5",
+    "webpack-dev-server": "^1.8.0"
+  }
+}
diff --git a/src/container.jsx b/src/container.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import computeLayout from 'css-layout';
+
+const { Component } = React;
+
+const layout = {
+  children: []
+};
+
+let flexLayout;
+
+function setFlexContainerStyle (style) {
+  layout.layout = {width: undefined, height: undefined, top: 0, left: 0};
+  layout.style = style;
+}
+
+function setFlexItemStyle (style) {
+  layout.children.push({
+    layout: { width: undefined, height: undefined, top: 0, left: 0 },
+     style: style
+   });
+}
+
+function getFlexItemStyle () {
+  if (flexLayout && flexLayout.children) {
+    return flexLayout.children.shift();
+  } else {
+    return undefined;
+  }
+}
+
+export const FlexContainer = (Composed, style = {}) => class extends Component {
+  static displayName = "FlexContainer";
+
+  static childContextTypes = {
+    setFlexStyle: React.PropTypes.func.isRequired,
+    getFlexStyle: React.PropTypes.func.isRequired
+  };
+
+  constructor () {
+    super();
+    console.log('Constructor called');
+    this.state = {};
+
+    setFlexContainerStyle(style);
+  }
+
+  componentDidMount () {
+    flexLayout = computeLayout(layout);
+    this.setState({flexLayout: flexLayout});
+  }
+
+  getChildContext () {
+    console.log('getChildContext called');
+    return { 
+      setFlexStyle: setFlexItemStyle,
+      getFlexStyle: getFlexItemStyle,
+    };
+  }
+
+  getFlexStyle = () => this.state.flexLayout;
+
+  render () {
+    return <Composed {...this.props} setFlexStyle={setFlexContainerStyle} getFlexStyle={this.getFlexStyle}/>;
+  }
+}
+
+export const FlexItem = (Composed, style = {}) => class extends Component {
+  static displayName = "FlexItem";
+
+  static contextTypes = {
+    setFlexStyle: React.PropTypes.func.isRequired,
+    getFlexStyle: React.PropTypes.func.isRequired
+  };
+
+  constructor (props, context) {
+    super();
+
+    context.setFlexStyle(style);
+  }
+
+  render () {
+    //const context = this._reactInternalInstance._context;
+    return <Composed {...this.props} setFlexStyle={this.context.setFlexStyle} getFlexStyle={this.context.getFlexStyle}/>;
+  }
+}
diff --git a/src/flex.jsx b/src/flex.jsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import computeLayout from 'css-layout';
+
+const { Component } = React;
+
+const styles = { children: [] };
+
+function setLayout (style, layout = styles, path = []) {
+  if (layout.style === undefined) {
+    layout.style = style;
+  } else {
+    let childLayout = { style: style, children: [] };
+    layout.children.push(childLayout);
+    path.push(layout.children.length - 1);
+
+    layout = childLayout;
+  }
+
+  return {
+    path: path.slice(),
+    setLayout : function (style) {
+      return setLayout(style, layout, path.slice());
+    } 
+  }
+}
+
+export class FlexContext extends Component {
+  static childContextTypes = {
+    setLayout: React.PropTypes.func.isRequired,
+    getLayout: React.PropTypes.func.isRequired
+  }
+
+  constructor (props, context) {
+    super();
+
+    this.state = {};
+
+    const layout = props.layout || {}
+    const { setLayout: layoutFunc } = setLayout(layout);
+    this.setLayout = layoutFunc;
+  }
+
+  getLayout = (path = []) => {
+    if (this.state.flexStyles !== undefined && path.length > 0) {
+      let layout = this.state.flexStyles;
+      path.forEach(childIndex => {
+        layout = layout.children[childIndex]
+      });
+
+      return layout;
+    } else {
+      return {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+    }
+  }
+
+  getChildContext () {
+    return {
+      setLayout: this.setLayout,
+      getLayout: this.getLayout
+    }
+  }
+
+  render () {
+    console.log('Rendering FlexContainer');
+    return <g>{this.props.children}</g>;
+  }
+
+  componentDidMount () {
+    console.log('FlexContainer did mount');
+    const flexStyles = computeLayout(styles);
+    this.setState({ flexStyles: flexStyles });
+  }
+}
+
+export const FlexBox = (Composed, style = {}) => class extends Component {
+  static displayName = 'FlexBox';
+
+  static contextTypes = {
+    setLayout: React.PropTypes.func.isRequired,
+    getLayout: React.PropTypes.func.isRequired
+  }
+
+  static childContextTypes = {
+    setLayout: React.PropTypes.func.isRequired
+  }
+
+  constructor (props, context) {
+    super();
+
+    const { setLayout: layoutFunc, path} = context.setLayout(style);
+
+    this.setLayout = layoutFunc;
+    this.pathToNode = path;
+  }
+
+  getChildContext () {
+    return {
+      setLayout: this.setLayout
+    }
+  }
+
+  render () {
+    const layout = this.context.getLayout(this.pathToNode);
+    const transformation = `translate(${layout.left},${layout.top})`
+    return <g transform={transformation}><Composed {...this.props} layout={layout}/></g>;
+  }
+
+}
diff --git a/test/app.jsx b/test/app.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { FlexContext, FlexBox } from 'flex';
+
+const { Component } = React;
+
+class Container extends Component {
+  render () {
+    console.log('Rendering Container');
+    return (
+      <g>
+        <rect fill={this.props.color} 
+          x="0"
+          y="0"
+          width={this.props.layout.width}
+          height={this.props.layout.height} />
+        {this.props.children}
+      </g>
+    );
+  }
+}
+
+const Backdrop = FlexBox(Container, {
+  flexDirection: 'row',
+  flex: 1,
+  padding: 40,
+  justifyContent: 'flex-start'
+});
+
+const Square = FlexBox(Container, {
+  height: 40,
+  width: 40
+});
+
+const containerStyle = {
+  width: 400,
+  height: 400
+}
+
+export default class App extends Component {
+  render () {
+    const board = [];
+
+    for (let i = 0; i < 64; i++) {
+      board[i] = i;
+    }
+
+
+    return (
+      <svg height="600" width="600">
+        <FlexContext layout={containerStyle}>
+          <Backdrop color="#CE6E09">
+            {board.map(id => <Square key={id} color={id % 2 ? '#470300' : '#F6B968'} />)}
+          </Backdrop>
+        </FlexContext>
+      </svg>
+    )
+  }
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>react-svg-flexbox</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="assets/bundle.js"></script>
+</body>
+</html>
diff --git a/test/main.js b/test/main.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import App from './app.jsx';
+
+window.React = React;
+
+React.render(<App />, document.getElementById('app'));
diff --git a/test/ref.html b/test/ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Flexbox reference</title>
+  <style>
+    #flex-container {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      display: flex;
+
+      flex-direction: row;
+      flex-wrap: wrap;
+      flex: 1;
+      justify-content: space-between;
+    }
+
+    .flex-item {
+      background: tomato;
+      padding: 5px;
+      width: 200px;
+      height: 150px;
+      margin-top: 10px;
+
+      line-height: 150px;
+      color: white;
+      font-weight: bold;
+      font-size: 3em;
+      text-align: center;
+    }
+
+    .flex-item-small {
+      background: blue;
+      padding: 5px;
+      width: 20px;
+      height: 15px;
+      margin-top: 1px;
+
+      line-height: 15px;
+      color: white;
+      font-weight: bold;
+      font-size: 0.5em;
+      text-align: center;      
+    }
+  </style>
+</head>
+<body>
+  <ul id="flex-container">
+    <li class="flex-item">
+      <ul id="flex-container">
+        <li class="flex-item-small">1</li>
+        <li class="flex-item-small">2</li>
+        <li class="flex-item-small">3</li>
+        <li class="flex-item-small">4</li>
+        <li class="flex-item-small">5</li>
+        <li class="flex-item-small">6</li>
+        <li class="flex-item-small">7</li>
+        <li class="flex-item-small">8</li>
+        <li class="flex-item-small">9</li>
+        <li class="flex-item-small">10</li>
+      </ul>
+    </li>
+    <li class="flex-item">b</li>
+    <li class="flex-item">c</li>
+    <li class="flex-item">d</li>
+    <li class="flex-item">e</li>
+  </ul>
+</body>
+</html>