Блог

Я использую библиотеку react dazzlehttps://github.com/Raathigesh/dazzle и метод добавления по умолчанию допускает это таким образом, что при перетаскивании одного виджета в другой контейнер контейнер расширяется для размещения обоих виджетов. Возможно ли было бы сделать так, чтобы виджеты менялись местами. например. перетащите A в контейнер B, виджет B теперь перемещается в контейнер A, а виджет A теперь находится в контейнере b. Любая помощь была бы отличной:

 import React, { Component } from 'react';
import Dashboard, { addWidget } from 'react-dazzle';


import Header from './Header';
import EditBar from './EditBar';
import Container from './Container';
import AddWidgetDialog from './AddWidgetDialog';
import CustomFrame from './CustomFrame';


import BarChart from './widgets/BarChart';
import LineChart from './widgets/LineChart';
//import ApprovalList from './ApprovalList';
import DataTable from './tableWidget';

import 'bootstrap/dist/css/bootstrap.css';


import 'react-dazzle/lib/style/style.css';


import '../styles/custom.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

      widgets: {
        BarWidget: {
          type: BarChart,
          title: 'Bar Graph Widget',
        },
        ApprovalWidget: {
          type: DataTable,
          title: 'Order Approval',
        },
        LineWidget: {
          type: LineChart,
          title: 'Trend Graph Widget',
        },


      },

      layout: {
        rows: [{
          columns: [{
            className: 'col-md-12 col-sm-12 col-xs-12',
            widgets: [{key: 'LineWidget'}],
          }],
        }, {
          columns: [{
            className: 'col-md-8 col-sm-8 col-xs-8',
            widgets: [{key: 'BarWidget'}],
          }, {
            className: 'col-md-4 col-sm-4 col-xs-4',
            widgets: [{key: 'ApprovalWidget'}],
          }],
        }],
      },
      editMode: false,
      isModalOpen: false,
      addWidgetOptions: null,
    };
  }


  onRemove = (layout) => {
    this.setState({
      layout: layout,
    });
  }


  onAdd = (layout, rowIndex, columnIndex) => {

    this.setState({
      isModalOpen: true,
      addWidgetOptions: {
        layout,
        rowIndex,
        columnIndex,
      },
    });
  }

  onMove = (layout) => {
    this.setState({
      layout: layout,
    });
  }


  onRequestClose = () => {
    this.setState({
      isModalOpen: false,
    });
  }

  render() {
    return (
    <Container>
      <AddWidgetDialog widgets={this.state.widgets} isModalOpen={this.state.isModalOpen} onRequestClose={this.onRequestClose} onWidgetSelect={this.handleWidgetSelection}/>
      <Header />
      <EditBar onEdit={this.toggleEdit} />
      <Dashboard
        frameComponent={CustomFrame}
        onRemove={this.onRemove}
        layout={this.state.layout}
        widgets={this.state.widgets}
        editable={this.state.editMode}
        onAdd={this.onAdd}
        onMove={this.onMove}
        addWidgetComponentText="Add New Widget"
        />

    </Container>
    );
  }

  toggleEdit = () => {
    this.setState({
      editMode: !this.state.editMode,
    });
  };

  handleWidgetSelection = (widgetName) => {
    const {layout, rowIndex, columnIndex} = this.state.addWidgetOptions;


    this.setState({
      layout: addWidget(layout, rowIndex, columnIndex, widgetName),
    });

    this.onRequestClose();
  }
}

export default App;