add getLayout Api

example/changelog.md

@@ -0,0 +1,3 @@
+v0.1.1
+
+- 新增组件api:```getLayout```，用于获取当前的layout.

src/LayoutRestore/index.css

@@ -0,0 +1,12 @@
+.layout-Item {
+    background: white;
+    height: 100%;
+}
+
+.layout-item:hover {
+    cursor: -webkit-grab;
+}
+
+.normal-layout {
+    background: #d9d9d9;
+}

src/LayoutRestore/index.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Dragact } from '../lib/dragact'
+import './index.css';
+
+
+interface CardItem {
+    content: string,
+    img: string
+}
+
+const Words = [
+    { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+]
+
+
+const Card = (props: any) => {
+    const item: CardItem = props.item;
+    return (
+        <div className='layout-Item'>
+            <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
+            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
+        </div>
+    )
+}
+
+
+var storeLayout: any = {};
+export class LayoutRestore extends React.Component<{}, {}> {
+    dragactNode: Dragact;
+    handleOnDragEnd = () => {
+        const maping: any = {};
+        this.dragactNode.getLayout().forEach((item) => {
+            if (item.key)
+                maping[item.key] = item;
+        })
+        const parsedLayout = JSON.stringify(maping);
+
+        localStorage.setItem('layout', parsedLayout);
+    }
+    componentWillMount() {
+        const lastLayout = localStorage.getItem('layout');
+        if (lastLayout) {
+            storeLayout = JSON.parse(lastLayout);
+        }
+    }
+
+    getLayoutItemForKey(key: string) {
+        return storeLayout[key]
+    }
+
+    renderDragact = () => {
+        const margin: [number, number] = [5, 5];
+        const dragactInit = {
+            width: 800,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout'
+        }
+
+        return (
+            <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} onDragEnd={this.handleOnDragEnd}>
+                {Words.map((el, index) => {
+                    const dataSet = this.getLayoutItemForKey(index + '');
+                    if (dataSet)
+                        return <Card item={el} key={index} data-set={...dataSet} />
+                    else
+                        return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
+                })}
+            </Dragact>
+        )
+    }
+
+    render() {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <div>
+                    <h1 style={{ textAlign: 'center' }}>Normal Layout Demo</h1>
+                    {this.renderDragact()}
+                </div>
+            </div>
+        )
+    }
+}

src/NormalLayout/index.tsx

@@ -28,18 +28,39 @@ const Card = (props: any) => {
 }
 
 
-export const LayoutDemo = () => {
+export class LayoutDemo extends React.Component<{}, {}> {
+    dragactNode: Dragact;
+    state = {
+        layout: []
+    }
 
-    return (
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <div>
-                <h1 style={{ textAlign: 'center' }}>Normal Layout Demo</h1>
-                <Dragact width={800} col={12} rowHeight={800 / 12} margin={[5, 5]} className='normal-layout'>
-                    {Words.map((el, index) => {
-                        return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
-                    })}
-                </Dragact>
+    componentDidMount() {
+        this.setState({
+            layout: this.dragactNode.getLayout()
+        })
+    }
+
+    render() {
+        const margin: [number, number] = [5, 5];
+        const dragactInit = {
+            width: 800,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout'
+        }
+
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <div>
+                    <h1 style={{ textAlign: 'center' }}>Normal Layout Demo</h1>
+                    <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
+                        {Words.map((el, index) => {
+                            return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
+                        })}
+                    </Dragact>
+                </div>
             </div>
-        </div>
-    )
+        )
+    }
 }

src/index.tsx

@@ -3,14 +3,17 @@ import * as ReactDOM from "react-dom";
 import { LayoutDemo } from './NormalLayout/index';
 import { SortedTable } from "./SortedTable/index";
 import { SortedTableWithStatic } from "./StaticHeader/index";
+import { LayoutRestore } from "./LayoutRestore/index";
 
 import './index.css'
 
 
+
 const DemoMap: any = {
     normalLayout: <LayoutDemo />,
     SortedTable: <SortedTable />,
-    StaticHeader: <SortedTableWithStatic />
+    StaticHeader: <SortedTableWithStatic />,
+    LayoutRestore: <LayoutRestore />
 }
 
 class DemoDispatcher extends React.Component<{}, {}> {
@@ -33,6 +36,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
                     <button onClick={() => this.handleLayoutChange('normalLayout')}>normalLayout</button>
                     <button onClick={() => this.handleLayoutChange('SortedTable')}>SortedTable</button>
                     <button onClick={() => this.handleLayoutChange('StaticHeader')}>StaticHeader</button>
+                    <button onClick={() => this.handleLayoutChange('LayoutRestore')}>LayoutRestore</button>
                 </div>
                 {this.state.demo}
             </div>

src/lib/dragact.tsx

@@ -68,7 +68,7 @@ export interface DragactProps {
     /**
      * 拖动结束的回调
      */
-    onDragEnd?: (key: number | string) => void
+    onDragEnd?: (event: GridItemEvent) => void
 
     /**
      * 每个元素的margin,第一个参数是左右，第二个参数是上下
@@ -118,6 +118,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
 
 
+
     onDragStart(bundles: GridItemEvent) {
         const { GridX, GridY, w, h, UniqueKey } = bundles
 
@@ -166,7 +167,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         this.props.onDrag && this.props.onDrag(layoutItem);
     }
 
-    onDragEnd(key: number | string) {
+    onDragEnd(layoutItem: GridItemEvent) {
         const compactedLayout = compactLayout(this.state.layout)
         this.setState({
             placeholderShow: false,
@@ -174,7 +175,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
         })
 
-        this.props.onDragEnd && this.props.onDragEnd(key);
+        this.props.onDragEnd && this.props.onDragEnd(layoutItem);
     }
     renderPlaceholder() {
         if (!this.state.placeholderShow) return null
@@ -256,4 +257,9 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
             </div>
         )
     }
+
+    //api
+    getLayout() {
+        return this.state.layout;
+    }
 }

src/lib/dragger/index.tsx

@@ -48,7 +48,7 @@ interface DraggerProps {
      */
     onDragStart?: (x: number, y: number) => void,
     onMove?: (event: MouseEvent | TouchEvent, x: number, y: number) => void,
-    onDragEnd?: (event: MouseEvent | TouchEvent) => void,
+    onDragEnd?: (event: MouseEvent | TouchEvent, x: number, y: number) => void,
 
     style?: React.CSSProperties
 }
@@ -250,7 +250,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             zIndex: 1
         })
 
-        this.props.onDragEnd && this.props.onDragEnd(event)
+        this.props.onDragEnd && this.props.onDragEnd(event, this.state.x, this.state.y)
     }
 
     componentDidMount() {

src/lib/gridItem.tsx

@@ -22,7 +22,7 @@ export interface GridItemProps {
 
     /**生命周期回掉函数 */
     onDragStart?: (event: GridItemEvent) => void,
-    onDragEnd?: (key: string | number) => void,
+    onDragEnd?: (event: GridItemEvent) => void,
     onDrag?: (event: GridItemEvent) => void
 
     isUserMove: Boolean
@@ -142,9 +142,11 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
         this.props.onDrag && this.props.onDrag({ GridX, GridY, w, h, UniqueKey: UniqueKey + '', event })
     }
 
-    onDragEnd() {
+    onDragEnd(event: any, x: number, y: number) {
         if (this.props.static) return;
-        if (this.props.onDragEnd) this.props.onDragEnd(this.props.UniqueKey + '')
+        const { GridX, GridY } = this.calGridXY(x, y);
+        const { w, h, UniqueKey } = this.props;
+        if (this.props.onDragEnd) this.props.onDragEnd({ GridX, GridY, w, h, UniqueKey: UniqueKey + '', event });
     }
 
     render() {