Modal and layers

[schlaup]

First, thanks for the library! Good work!

Looking at your code, it seems that you implement modal dialogs by rendering them in the DOM and showing or hiding them. This does seem to be the Angular / Foundation for Apps way.

However, in React modals should use layers to render them on demand.

See:

https://github.com/facebook/react/issues/379

and (the solution)

https://github.com/pieterv/react-layers

What do you think?

Peter

[akiran]

@schlaup, This project uses the CSS of foundation for apps. So, we have to follow the same conventions for css to work properly with these components.

[schlaup]

I see your point. Maybe it is a compromise that we have to make if we want to use Foundation for Apps with React.

With Angular - Foundation's base - it is normal to create the modal dialog in the DOM even if it is not visible.

However, the React way would be to render the modal dialog only when it becomes visible. If it is not visible it should not exist in the DOM. (The modal could have a lot of child elements that would affect DOM's performance and memory.)

I saw that you use Foundation's event system to open and close the dialog with a trigger, so the DOM element with the specified ID has to be there. I was wondering what happens if I do not render the rest of the modal and it works!

In your modal/index.jsx file I changed one line from

{this.props.children}

to

{this.state.open ? this.props.children : null}

and now the complete modal dialog is only rendered into the DOM when it becomes visible.

The only disadvantage is that the fade-out animation when closing the dialog is without the contents of the dialog. One solution would be to add a state "visible", set it to true on open and delay setting it to false on close.

Like this:

  getInitialState: function () {
    return { open: false, visible: false };
  },

...

  componentDidMount: function () {
    foundationApi.subscribe(this.props.id, function (name, msg) {
      if (msg === 'open') {
        this.setState({open: true, visible: true});
      } else if (msg === 'close') {
        this.setState({open: false});
        setTimeout(function(){ this.setState({visible: false}); }.bind(this), 500);
      } else if (msg === 'toggle') {
        var open = !this.state.open;
        this.setState({open: open, visible: open});
      }
    }.bind(this));
  },

...

    return (
      <Animation active={this.state.open} animationIn="fadeIn" animationOut="fadeOut">
        <div className={cx(overlayClasses)} style={overlayStyle} onClick={this.hideOverlay} >
          <Animation active={this.state.open} animationIn="fadeIn" animationOut="fadeOut">
            <div id={this.props.id} data-closable={true} className={cx(modalClasses)}>
              {this.state.visible ? this.props.children : null}
            </div>
          </Animation>
        </div>
      </Animation>
    );

One way to improve it woult be to link visible to the end of the animation instead of using setTimeout().

[musha68k]

@schlaup sounds not too bad imho :+1:

[lexfrl]

I've spent some sensible time to research on this. As a result I end up with the library which permanently solved this problem for me. Check out, please, would be good to know the impressions and everything https://github.com/AlexeyFrolov/react-layer-stack