I am seeing few complexities with working on react-grid-layout (from https://github.com/STRML/react-grid-layout) when i integrate it with onlayoutChange method.
Whenever i add a new item, I do add a layout and item to existing state with customized id for layout. (In this case for simplicity i am using date.now(). But i have some more complex logic for it based on my requirement)
I add a new item, resize and drag it to a new position which triggers 'onLayoutChange' of ResponsiveReactGridLayout. When observing the input for this, I am not seeing the custom id property set to layout. (Added screenshot of what i am getting as input)
I am using onLayoutChange to update store. If i dont do this, when I add a new item, the entire layout is getting reset.
below is the code I am using for this
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
import _ from 'lodash';
// React component
class Counter extends Component {
onCustomLayoutChange(layout) {
debugger
}
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value.length}</span>
<span>{this.props.layout.length}</span>
<ResponsiveReactGridLayout className="layout" layouts={{lg: this.props.layout}} verticalCompact={false}
onLayoutChange={(e) => this.onCustomLayoutChange(e)}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
rowHeight={30}
>
{
_.map(value, (item,i) => (
<div style={{border:'1px solid red', margin:'10px'}} key={i} >
{item}
</div>
))
}
</ResponsiveReactGridLayout>
<button onClick={onIncreaseClick}>Add item</button>
<ul>
{
_.map(this.props.layout, (item,i) => (
<li key={i} >
{item.i}
</li>
))
}
</ul>
</div>
)
}
}
Counter.propTypes = {
value: PropTypes.array,
onIncreaseClick: PropTypes.func.isRequired
}
// Action
const increaseAction = { type: 'increase' }
const onLayoutChangeAction = { type: 'update_layout' }
// Reducer
function counter(state = { count: [], layout: [] }, action) {
let count = _.cloneDeep(state.count)
let layout =_.cloneDeep( state.layout)
switch (action.type) {
case 'increase':
let id = Date.now()
count.push('hello '+id)
layout.push({
i: `${id}`,
x: 0,
y: 0,
w: 1,
h: 1
})
return Object.assign({}, state, { count: count, layout: layout });
// return { count: count, layout: layout }
case 'update_layout':
return state
default:
return state
}
}
// Store
const store = createStore(counter)
// Map Redux state to component props
function mapStateToProps(state) {
return {
value: state.count,
layout: state.layout,
}
}
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction),
onLayoutChangeAction: () => dispatch(onLayoutChangeAction)
}
}
// Connected Component
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
Can someone help me out in letting me know what am I missing here? Thanks in Advance.