[add] layout atrrbute

app/src/App.js

@@ -1,30 +1,47 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import GridItem from './GridItem'
-import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils'
 
 import './style.css'
 
-export default class CtmpFather extends React.Component {
-
-    onWindowResize(e) {
-        console.log(this.node.clientWidth)
+class DraggerLayout extends React.Component {
+    static PropTypes = {
+        /**外部属性 */
+        layout: PropTypes.array,
+        col: PropTypes.number,
+        width: PropTypes.number,
+        rowHeight: PropTypes.number,
+        padding: PropTypes.number,
     }
-    componentDidMount() {
-        console.log(this.node)
-        window.addEventListener('resize', this.onWindowResize.bind(this))
 
-    }
 
     render() {
+        const { col, width } = this.props
         return (
             <div
-                className='shitWrap'
+                className='DraggerLayout'
                 style={{ position: 'absolute', left: 100, width: 500, height: 500, border: '1px solid black' }}
-                ref={(node) => this.node = node}
             >
-                <GridItem/>
+                {React.Children.map(this.props.children,
+                    (child) =>
+                        <GridItem
+                            col={col}
+                            containerWidth={width}
+                            containerPadding={padding}
+                        >
+                            {child}
+                        </GridItem >
+                )}
             </div>
         )
     }
 }
+
+export const LayoutDemo = () => {
+    return (
+        <DraggerLayout>
+            <p>asdasd</p>
+            <p>asdasd</p>
+        </DraggerLayout>
+    )
+}

app/src/GridItem.js

@@ -13,10 +13,13 @@ export default class GridItem extends Component {
 
 
     static PropTypes = {
+        /**外部容器属性 */
         col: PropTypes.number,
-        margin: PropTypes.number,
         containerWidth: PropTypes.number,
         containerPadding: PropTypes.number,
+
+        /**子元素的属性 */
+        margin: PropTypes.number,
     }
 
     static defaultProps = {
@@ -47,7 +50,9 @@ export default class GridItem extends Component {
                 style={{ position: 'absolute', border: '1px solid black' }}
                 onMove={this.onDrag}
             >
-                <p>asdasdas</p>
+                <div>
+                    {React.Children.map(this.props.children, (child) => child)}
+                </div>
             </Dragger>
         )
     }

app/src/index.js

@@ -1,12 +1,12 @@
 'use strict'
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import {LayoutDemo} from './App';
 
 
 ReactDOM.render(
     <div>
-        <App />
+        <LayoutDemo />
     </div>,
     document.getElementById('root')
 );