React-grid-layout: Change "static" property does not affect resize/drag ability

[elmeister]

First of all - thanks for the great grid layout system, it helped a lot to create dynamic widgets pages!

The problem we have - after change static property of layout item to true/false - when user clicks at grid layout item button, designed for it - it doesn't affect item behaviour anyhow.
If we save layout with static = true and reload page - item will stay static until next page reload - without any difference if static will be set to true or false. Same with static = false - console.error(layout); before render() with ReactGridLayout shows static true or false for item, but its behaviour doesn't change and stays same as static property was set when page was loaded.
layout.map((item, index) => inside ReactGridLayout shows item.static correctly set to true or false

// item.static = `true` or `false` - `borderColor` changes correctly
console.error(layout);

return (
  <ReactGridLayout
    layout={layout}>
    {layout.map((item, index) =>
      <div
        style={{
          borderColor: item.static ? 'crimson' : ''
        }}>

Please let me know what additional code / info should I provide to describe situation better.

[felixbouleau]

I'm having the same problem. @elmeister did you end up solving this somehow?

[elmeister]

@felixbouleau, nope, the problem is still present unfortunately.

[STRML]

Could you please create a reproduction? http://www.webpackbin.com/VymTE3zWG

On Dec 29, 2016 9:19 AM, "Sergey" [e-mail] wrote:

@felixbouleau https://github.com/felixbouleau, nope, the problem is
still present unfortunately.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/STRML/react-grid-layout/issues/400#issuecomment-269644509,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJFP_cUr4Rju0u_7jFkyYydJ1O8R1piks5rM896gaJpZM4Kq-Wq
.

[felixbouleau]

@STRML I really don't know what I'm doing. But here's an attempt to show what's failing for me: http://www.webpackbin.com/E1e8-mAVf

After pressing "Freeze #0" I expect item 0 to be static. The proper style is applied, but I can still move and resize it.

[mnemanja]

I'm experiencing the same bug.

I'm currently trying to do I believe the same thing, dynamically turn drag and resize on or off.
Toggling the static property seems simple enough, but as @felixbouleau showed already, the change simply doesn't get applied.

By the way I'm experiencing the same problem when I'm not using "static" but "isDraggable" and "isResizable" properties.

Is there some part that is not documented, or that I've missed to make this work?

Thanks and I would appreciate if this bug could be expedited.
Cheers,
Nemanja

p.s.
Similar problem
https://github.com/STRML/react-grid-layout/issues/327

[bsherrill480]

Not sure if this applies to everyone, but I was having the same issue.

I was passing data-grid on each element, instead of using layout.

I then transitioned to using layout instead of data-grid on each element, and then static functioned correctly for me.

[mnemanja]

I am only using layouts property for this.

[liuandrew]

I've been trying to handle the same problem, and for me it looks like it's being caused by the componentWillReceiveProps function in ReactGridLayout.js

  ReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var newLayoutBase = void 0;
    // Allow parent to set layout directly.
    if (!(0, _lodash2.default)(nextProps.layout, this.props.layout)) {
      newLayoutBase = nextProps.layout;
    }

    // If children change, also regenerate the layout. Use our state
    // as the base in case because it may be more up to date than
    // what is in props.
    else if (!(0, _utils.childrenEqual)(this.props.children, nextProps.children)) {
        newLayoutBase = this.state.layout;
      }

    // We need to regenerate the layout.
    if (newLayoutBase) {
      var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, nextProps.verticalCompact);
      var _oldLayout = this.state.layout;
      this.setState({ layout: newLayout });
      this.onLayoutMaybeChanged(newLayout, _oldLayout);
    }
  };

ReactGridLayout holds it's own state, and sometimes it seems to believe that it's layout is more correct than the one you pass it as props (see lines 8-13 of the above code).

The way I got around this was to have the component always trust the layout passed in props. Be careful, I believe this turns it into a more "controlled" component, so there's less room for error on your part, but it should now exactly follow the layout you give it.

Here is my edited componentWillReceiveProps function:

  ReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    // Always assume that the passed layout is correcct
    var newLayoutBase = nextProps.layout;

    // We need to regenerate the layout.
    if (newLayoutBase) {
      var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, nextProps.verticalCompact);
      var _oldLayout = this.state.layout;
      this.setState({ layout: newLayout });
      this.onLayoutMaybeChanged(newLayout, _oldLayout);
    }
  };

This seems to me like a slightly destructive/hacky solution, mostly because I don't really understand how !(0, _lodash2.default)(nextProps.layout, this.props.layout)) resolves. If any dev could shed some light on a better solution, it would be appreciated! Good luck

[andrestylianos]

I've also been affected by this today. After lots of head scratching we figured out a solution that worked for us: setting an i property for each of the layout items, and also setting the same value as the react key for the item elements.

[rockyhuber]

I've also been affected by this today. After lots of head scratching we figured out a solution that worked for us: setting an i property for each of the layout items, and also setting the same value as the react key for the item elements.

Any more info you can shed on your solution Andre?

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days