React Layout Plugin Edit

A plugin for the react-layout-core package. This plugin enables other plugins to edit the layoutState by dispatching redux actions. It also adds an onChange prop to react-layout-core Layout.

Usage

import React, { Component} from 'react';
import { Layout, LayoutState } from 'react-layout-core';
import Edit from 'react-layout-plugin-edit';

class MyComponent extends Component {

  constructor() {
    super();
    this.state = {
      layoutState: new LayoutState('div')
    }
  }

  layoutChange = layoutState => {
    this.setState({ layoutState });
  }

  render() {
    return (
      <Layout
        layoutState={this.state.layoutState}
        onChange={this.layoutChange}
        plugins={[Edit]}
      />
    )
  }
}

Action creators

insertOrMoveItem

insertOrMoveItem(parentId, idx, item)

Name	Type	Description
parentId	string	The id of the parent this item will be assigned
idx	integer	The index in the parent's children the item will be placed
item	LayoutState item	The item that is being inserted or moved

Example

This example will insert a new item, adding it to the layoutState and putting it in the root item's children and index 0.

insertOrMoveItem('root', 0, { type: 'div', props: {}, children: [] })

updateItem

updateItem(id, updater)

Name	Type	Description
id	string	The id of the item to be updated
updater	object	The object passed as the second argument of update from immutability-helper

Example

This example will update item with id as873k's name prop to 'New Name'.

updateItem('as873k', { props: { name: { $set: 'New Name' } } });

removeItem

removeItem(id)

Name	Type	Description
id	string	The id of the item to be removed

Example

This example will remove the item with id as873k.

removeItem('as873k');