增加／删除逻辑

example/changelog.md

@@ -2,6 +2,8 @@ v0.1.5
 - 修正zIndex的错误
 - 新增拖拽把手
 - 自由选择拖拽和resize
+- 添加删除逻辑
+
 
 v0.1.3
 

src/AddRemove/index.tsx

@@ -0,0 +1,78 @@
+import *as React from 'react';
+import { Dragact } from '../lib/dragact';
+
+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: any = props.item;
+    const dataSet: any = props['data-set'];
+    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' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
+        </div>
+    )
+}
+
+
+export class AddRemove extends React.Component<{}, {}> {
+    layoutWrap: HTMLDivElement | null
+    dragactNode: Dragact;
+    state = {
+        layout: [1]
+    }
+
+    componentDidMount() {
+        this.setState({
+            layout: this.dragactNode.getLayout()
+        })
+    }
+    handleClick = () => {
+        this.setState({
+            layout: [...this.state.layout, 1]
+        })
+        console.log(this.state.layout)
+    }
+    handleDeleteClick = () => {
+        this.state.layout.shift()
+        this.setState({
+            layout: [...this.state.layout]
+        })
+    }
+
+    render() {
+        const margin: [number, number] = [5, 5];
+        const dragactInit = {
+            width: 800,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout'
+        }
+        return (
+            <div>
+                <div style={{ display: 'flex', justifyContent: 'center' }} >
+                    <div>
+                        <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
+                        <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
+                            {this.state.layout.map((el, i) => {
+                                return (
+                                    <Card item={Words[0]} key={i} data-set={{ GridX: i * 3, GridY: 0, w: 3, h: 3 }} />
+                                )
+                            })}
+                        </Dragact>
+                        <button onClick={this.handleClick}>新增</button>
+                        <button onClick={this.handleDeleteClick}>删除</button>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/HandleLayout/index.tsx

@@ -1,4 +1,4 @@
-import *as React from 'react';
+import * as React from 'react';
 import { Dragact } from '../lib/dragact';
 
 import './index.css';
@@ -42,6 +42,12 @@ export class HandleLayout extends React.Component<{}, {}> {
         })
         console.log(this.state.layout)
     }
+    handleDeleteClick = () => {
+        this.state.layout.shift()
+        this.setState({
+            layout: [...this.state.layout]
+        })
+    }
 
     render() {
         const margin: [number, number] = [5, 5];
@@ -58,13 +64,11 @@ export class HandleLayout extends React.Component<{}, {}> {
                     <div>
                         <h1 style={{ textAlign: 'center' }}>Handle Layout Demo</h1>
                         <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
-                            {this.state.layout.map((el, i) => {
-                                return (
-                                    <Card item={Words[0]} key={i} data-set={{ GridX: i*3, GridY: 0, w: 3, h: 3 }} />
-                                )
-                            })}
+                            <Card item={Words[0]} key={0} data-set={{ GridX: 0 * 3, GridY: 0, w: 3, h: 3 }} />
+                            <Card item={Words[1]} key={1} data-set={{ GridX: 1 * 3, GridY: 0, w: 3, h: 3 }} />
+                            <Card item={Words[2]} key={2} data-set={{ GridX: 2 * 3, GridY: 0, w: 3, h: 3, handle: true }} />
+                            <Card item={Words[3]} key={3} data-set={{ GridX: 3 * 3, GridY: 0, w: 3, h: 3 }} />
                         </Dragact>
-                        <button onClick={this.handleClick}>新增</button>
                     </div>
                 </div>
             </div>

src/index.tsx

@@ -5,15 +5,17 @@ import { SortedTable } from "./SortedTable/index";
 import { SortedTableWithStatic } from "./StaticHeader/index";
 import { LayoutRestore } from "./LayoutRestore/index";
 import { HandleLayout } from "./HandleLayout/index";
-
+import { AddRemove } from "./AddRemove/index";
 import './index.css'
 
+
 const DemoMap: any = {
     normalLayout: <LayoutDemo />,
     SortedTable: <SortedTable />,
     StaticHeader: <SortedTableWithStatic />,
     LayoutRestore: <LayoutRestore />,
-    HandleLayout: <HandleLayout />
+    HandleLayout: <HandleLayout />,
+    AddRemove: <AddRemove />
 }
 
 class DemoDispatcher extends React.Component<{}, {}> {
@@ -38,6 +40,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
                     <button onClick={() => this.handleLayoutChange('StaticHeader')}>StaticHeader</button>
                     <button onClick={() => this.handleLayoutChange('LayoutRestore')}>LayoutRestore</button>
                     <button onClick={() => this.handleLayoutChange('HandleLayout')}>HandleLayout</button>
+                    <button onClick={() => this.handleLayoutChange('AddRemove')}>AddRemove</button>
                 </div>
                 {this.state.demo}
             </div>

src/lib/dragact.tsx

@@ -245,13 +245,48 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
 
     componentWillReceiveProps(nextProps: any) {
-        const layout = getDataSet(nextProps.children);
-        let newlayout = correctLayout(layout, this.props.col)
-        const { compacted } = compactLayout(newlayout, undefined);
-        console.log(layout)
-        this.setState({
-            layout: compacted
-        })
+        if (this.props.children.length > nextProps.children.length) { //remove
+            const mapLayoutCopy = { ...this.state.mapLayout };
+            nextProps.children.forEach((child: any) => {
+                if ((mapLayoutCopy as any)[child.key] !== void 666) delete (mapLayoutCopy as any)[child.key];
+            })
+            for (const key in mapLayoutCopy) {
+                const newLayout = this.state.layout.filter((child) => {
+                    if (child.key !== key) return child
+                })
+                const { compacted, mapLayout } = compactLayout(newLayout, undefined);
+                this.setState({
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
+                    layout: compacted,
+                    mapLayout
+                })
+            }
+        }
+
+        if (this.props.children.length < nextProps.children.length) { //add
+            var item;
+            for (const idx in nextProps.children) {
+                const i = nextProps.children[idx];
+                if (this.state.mapLayout && !this.state.mapLayout[i.key]) {
+                    item = i;
+                    break;
+                }
+            }
+            if (item !== void 666) {
+                const dataSet = { ...item.props['data-set'], isUserMove: false, key: item.key };
+                var newLayout = [...this.state.layout, dataSet]
+                newLayout = correctLayout(newLayout, this.props.col)
+                const { compacted, mapLayout } = compactLayout(newLayout, undefined);
+                console.log(mapLayout)
+                // console.log(layout)
+                this.setState({
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
+                    layout: compacted,
+                    mapLayout
+                })
+            }
+        }
+
     }
 
 
@@ -323,5 +358,12 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     //api
     getLayout() {
         return this.state.layout;
+    }
+
+    //api
+    deleteItem(key: any) {
+
+
+
     }
 }