Dragact/example/AddRemove/index.tsx

import *as React from 'react';
import { Dragact } from '../../src/lib/dragact';

const Words = [
    { content: 'You can do anything, but not everything.' },
    { content: 'Those who dare to fail miserably can achieve greatly.' },
    { content: 'You miss 100 percent of the shots you never take.' },
    { content: 'Those who believe in telekinetics, raise my hand.' },
    { content: 'I’d rather live with a good question than a bad answer.' }
]


const Card = ({ item, provided, onDelete }: any) => {
    return (
        <div
            className='layout-Item'
            {...provided.props}
            {...provided.dragHandle}
        >
            <div
                style={{
                    position: 'absolute',
                    width: 10, height: 10, right: 15, top: 5, cursor: 'pointer'
                }}
                onClick={() => onDelete(item.key)}
            >❌</div>
            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
        </div>
    )
}

const fakeData = () => {
    var Y = 0;
    return Words.map((item, index) => {
        if (index % 4 === 0) Y++;

        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index }
    })
}

const makeOne = () => {
    return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() }
}


export class AddRemove extends React.Component<{}, {}> {
    state = {
        layout: fakeData()
    }

    componentDidMount() {

    }
    handleClick = () => {
        this.setState({
            layout: [...this.state.layout, makeOne()]
        })
        console.log(this.state.layout)
    }
    hanldeOnDelete = (key: any) => {
        const layout = this.state.layout.filter((item) => {
            if (item.key !== key) {
                return item;
            }
        })
        this.setState({
            layout: layout
        })
    }

    render() {
        const margin: [number, number] = [5, 5];
        const dragactInit = {
            width: 600,
            col: 12,
            rowHeight: 800 / 12,
            margin: margin,
            className: 'normal-layout',
            layout: this.state.layout,
            placeholder: true
        }
        return (
            <div>
                <div style={{ display: 'flex', justifyContent: 'center' }} >
                    <div>

                        <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
                        <button onClick={this.handleClick}>新增</button>
                        <Dragact {...dragactInit} >
                            {(item, provided) => {
                                return <Card item={item} provided={provided} onDelete={this.hanldeOnDelete} />
                            }}
                        </Dragact>
                    </div>
                </div>
            </div>
        )
    }
}