新增响应式布局

czf0321 · Mar 5, 2018 · 5a65b3d · 5a65b3d
1 parent adcfdb8
commit 5a65b3d
Show file tree

Hide file tree

Showing 15 changed files with 313 additions and 285 deletions.
diff --git a/example/changelog.md b/example/changelog.md
@@ -1,6 +1,9 @@
 v0.2.0
 - 版本跳跃
 - 添加增加add/remove
+- 新增记忆布局demo
+- 响应式布局，开启后会按照window进行缩放
+- 更新col,width,rowHeight以后，会动态进行更新
 
 v0.1.7
 - 优化性能-使用reselect的原理

diff --git a/src/HandleLayout/index.tsx b/src/HandleLayout/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dragact, DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
+import { DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact-type'
 
 import './index.css';
 

diff --git a/src/HistoryLayout/HistoryLayout.tsx b/src/HistoryLayout/HistoryLayout.tsx
@@ -1,121 +1,122 @@
 import * as React from 'react';
 
-import { DragactProps, DragactLayoutItem, Dragact } from '../lib/dragact';
+import { DragactProps, DragactLayoutItem } from '../lib/dragact-type';
 import { GridItemEvent } from '../lib/GridItem';
+import { Dragact } from '../lib/dragact';
 
 interface HistoryDragactState {
-  layout: DragactLayoutItem[]
+    layout: DragactLayoutItem[]
 }
 
-export class HistoryDragact extends React.Component<DragactProps, HistoryDragactState > {
-  _actionsHistory : string[] = []
-  _cacheLayouts: string;
-  _activeItem: GridItemEvent
-  _dragact: Dragact | null
-  constructor(props: DragactProps) {
-      super(props);
-      this.state= {layout: props.layout} as any;
-  }
-
-  _cacheCurrentLayoutStart = (layoutItem: GridItemEvent) => {
-      this._activeItem = layoutItem
-      if (!this._dragact) {
-          return;
-      }
-      this._cachingLayouts(this._dragact);
-  }
-
-  _cacheCurrentLayoutEnd = (layoutItem: GridItemEvent) => {
-      const { GridY, GridX, h, w } = this._activeItem;
-      if (GridX === layoutItem.GridX && GridY === layoutItem.GridY && h === layoutItem.h && w === layoutItem.w) {
-          return;
-  }
-      this._storeLayoutToHistory(this._cacheLayouts)
-  }
- 
-  _cachingLayouts = (d: Dragact) => {
-      const initiateSnapShot = JSON.stringify({
-          layout: d.getLayout(),
-      })
-      return this._cacheLayouts = initiateSnapShot;
-  }
-
-  goBack = () => {
-      const mapLayoutHistory = this._actionsHistory;
-      if (mapLayoutHistory.length > 1) {
-          const last = mapLayoutHistory.pop();
-          if(!last) {
-              return;
-          }
-          this._changeDragactLayouts(last);
-      }
-  }
-
-  reset = () => {
-      if (!this._dragact) {
-          return;
-      }
-      this._cachingLayouts(this._dragact);
-      this._storeLayoutToHistory(this._cacheLayouts);
-      const initiateSnapShot = this._actionsHistory[0];
-      this._changeDragactLayouts(initiateSnapShot);        
-  }
-  
-  clear = () => {
-      this._actionsHistory = this._actionsHistory.slice(0, 1);
-      this._changeDragactLayouts(this._actionsHistory[0]);
-  }
-
-  onDragStart = (event: GridItemEvent) => {
-      this._cacheCurrentLayoutStart(event)
-      this.props.onDragStart && this.props.onDragStart(event)
-  }
-
-  onDragEnd = (event: GridItemEvent) => {
-      this._cacheCurrentLayoutEnd(event);
-      this.props.onDragEnd && this.props.onDragEnd(event)
-  }
-
-  _changeDragactLayouts = (snapshot: string) => {
-      if(!this._dragact) {
-          return;
-      }
-      try {
-          const {layout} = JSON.parse(snapshot);
-          this.setState({
-              layout
-          })
-      }catch (e) {
-      }
-     
-  }
-
-  _storeLayoutToHistory = (layouts: string) => {
-      this._actionsHistory.push(layouts);
-  }
-
-  componentDidMount() {
-      if (this._dragact) {
-          const initiateSnapShot = this._cachingLayouts(this._dragact);
-          this._storeLayoutToHistory(initiateSnapShot)
-      }
-  }
-
-  componentWillReceiveProps(nextProps: DragactProps) {
-      this.setState({
-          layout: nextProps.layout
-      })
-  }
-  _dragactRefCallback = (d: Dragact) => {
-      this._dragact = d;
-  }
-
-  get getDragact() {
-      return this._dragact;
-  }
-
-  render () {
-      const layout = this.state.layout;
-      return <Dragact ref={this._dragactRefCallback} {...this.props} layout={layout} onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
+export class HistoryDragact extends React.Component<DragactProps, HistoryDragactState> {
+    _actionsHistory: string[] = []
+    _cacheLayouts: string;
+    _activeItem: GridItemEvent
+    _dragact: Dragact | null
+    constructor(props: DragactProps) {
+        super(props);
+        this.state = { layout: props.layout } as any;
+    }
+
+    _cacheCurrentLayoutStart = (layoutItem: GridItemEvent) => {
+        this._activeItem = layoutItem
+        if (!this._dragact) {
+            return;
+        }
+        this._cachingLayouts(this._dragact);
+    }
+
+    _cacheCurrentLayoutEnd = (layoutItem: GridItemEvent) => {
+        const { GridY, GridX, h, w } = this._activeItem;
+        if (GridX === layoutItem.GridX && GridY === layoutItem.GridY && h === layoutItem.h && w === layoutItem.w) {
+            return;
+        }
+        this._storeLayoutToHistory(this._cacheLayouts)
+    }
+
+    _cachingLayouts = (d: Dragact) => {
+        const initiateSnapShot = JSON.stringify({
+            layout: d.getLayout(),
+        })
+        return this._cacheLayouts = initiateSnapShot;
+    }
+
+    goBack = () => {
+        const mapLayoutHistory = this._actionsHistory;
+        if (mapLayoutHistory.length > 1) {
+            const last = mapLayoutHistory.pop();
+            if (!last) {
+                return;
+            }
+            this._changeDragactLayouts(last);
+        }
+    }
+
+    reset = () => {
+        if (!this._dragact) {
+            return;
+        }
+        this._cachingLayouts(this._dragact);
+        this._storeLayoutToHistory(this._cacheLayouts);
+        const initiateSnapShot = this._actionsHistory[0];
+        this._changeDragactLayouts(initiateSnapShot);
+    }
+
+    clear = () => {
+        this._actionsHistory = this._actionsHistory.slice(0, 1);
+        this._changeDragactLayouts(this._actionsHistory[0]);
+    }
+
+    onDragStart = (event: GridItemEvent) => {
+        this._cacheCurrentLayoutStart(event)
+        this.props.onDragStart && this.props.onDragStart(event)
+    }
+
+    onDragEnd = (event: GridItemEvent) => {
+        this._cacheCurrentLayoutEnd(event);
+        this.props.onDragEnd && this.props.onDragEnd(event)
+    }
+
+    _changeDragactLayouts = (snapshot: string) => {
+        if (!this._dragact) {
+            return;
+        }
+        try {
+            const { layout } = JSON.parse(snapshot);
+            this.setState({
+                layout
+            })
+        } catch (e) {
+        }
+
+    }
+
+    _storeLayoutToHistory = (layouts: string) => {
+        this._actionsHistory.push(layouts);
+    }
+
+    componentDidMount() {
+        if (this._dragact) {
+            const initiateSnapShot = this._cachingLayouts(this._dragact);
+            this._storeLayoutToHistory(initiateSnapShot)
+        }
+    }
+
+    componentWillReceiveProps(nextProps: DragactProps) {
+        this.setState({
+            layout: nextProps.layout
+        })
+    }
+    _dragactRefCallback = (d: Dragact) => {
+        this._dragact = d;
+    }
+
+    get getDragact() {
+        return this._dragact;
+    }
+
+    render() {
+        const layout = this.state.layout;
+        return <Dragact ref={this._dragactRefCallback} {...this.props} layout={layout} onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
     }
 }
diff --git a/src/HistoryLayout/index.tsx b/src/HistoryLayout/index.tsx
@@ -1,5 +1,5 @@
 import *as React from 'react';
-import { DragactLayoutItem, GridItemProvided} from '../../src/lib/dragact'
+import { DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact-type'
 import { HistoryDragact } from './HistoryLayout'
 import { Words } from './largedata';
 import './index.css';
@@ -69,17 +69,17 @@ export class HistoryDemo extends React.Component<{}, {}> {
                     <h1 style={{ textAlign: 'center' }}>
                         复原操作demo
                     </h1>
-                    <button onClick={ () => {
+                    <button onClick={() => {
                         if (this.drag) {
                             this.drag.goBack();
                         }
                     }}>back</button>
-                    <button onClick={ () => {
+                    <button onClick={() => {
                         if (this.drag) {
                             this.drag.reset();
                         }
                     }}>reset</button>
-                    <button onClick={ () => {
+                    <button onClick={() => {
                         if (this.drag) {
                             this.drag.clear();
                         }

diff --git a/src/NormalLayout/index.tsx b/src/NormalLayout/index.tsx
@@ -1,5 +1,6 @@
 import *as React from 'react';
-import { Dragact, DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
+import { DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact-type'
 import { Words } from './largedata';
 import './index.css';