0.5.3 • Published 7 years ago
react-layout-plugin-edit v0.5.3
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');