Research how layers will work

[jasonkuhrt]

After trying to refactor into a usable and likely more-correct system from the current nonsense that this sketch is using, I quickly realized that I've got the hardest part of the problem ahead of me:

• Use Tether in place of Bootstrap overlays? react-bootstrap/react-bootstrap#27
• ReactLayersMixin. facebook/react#379
• https://github.com/pieterv/react-layers
• http://khan.github.io/react-components/#layered-component

@stresslimit So the current takeaways:

• Indeed the popover is not supposed to be rendered around its target as-far-as the DOM tree is concerned
• Another concept is required altogether which goes along the lines of "layers" but has different implementations.

Example from React Bootstrap: http://react-bootstrap.github.io/components.html#popovers

    <OverlayTrigger trigger='click' placement='left' overlay={<Popover title='Popover left'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
      <Button bsStyle='default'>Holy guacamole!</Button>
    </OverlayTrigger>

The good news is I am not crazy; all my concerns and notes about the problem I'm seeing unfold/thinking-through are leading to the right place. For example I basically came to this conclusion on the way home repeated by someone else way before:

react-bootstrap/react-bootstrap#27 (comment)

2. Attach the modal pane to the document body, and wire it up to the trigger via refs and callbacks. The communication chain in React will be fiddly, but this will be an implementation-internal issue. I think this will involve some black magic, but will be a more solid implementation.

To paraphrase, have popover completely pass-through its children in its render and then render its own popover component to the body.

It seems that all discussion culminate in the OverlayTrigger component in Bootstrap React and the dedicated repo linked above pieterv/react-layers.

Lastly, in case readers do not read the links, keep in mind these links include discussions and references from the core community so this issue is taking from "trusted" minds in this domain.

[stresslimit]

Hmpf. Definitely react doesn't solve all problems :) And no you're not crazy thankfully. Let me know how it goes!

[jasonkuhrt]

Ok the three implementations that seem to "matter" are:

• https://github.com/Khan/react-components/blob/master/js/layered-component-mixin.jsx
• https://github.com/react-bootstrap/react-bootstrap/blob/master/src/OverlayTrigger.js
• https://github.com/pieterv/react-layers

Observations:

• There seems to generally be an assortment of mixins and components that use those mixins.
• The simplest source code seems to be Khan, then BS, then react-layers; correspondingly their features seem to increase as well so its not, so far, "obvious", which is best.
• No other serious code references beyond these that I am aware of.
• React BS We cannot use its code since its coupled to its framework; we can just be inspired by it and port it. It has a lot of opinions about fade-in/out etc. that deviates heavily from our specs.
• react-layers offers three abstractions: layers, portals, containers. The source code quality is so-so; there are no docs and the project doesn't appear to be actively developed anymore so other than inspiration I cannot see how this is a directly usable library for us.
• Kahn Academy's implementation is very small, to the point that we can understand the concept and rewrite it to suit our needs better.
• I don't know exactly how long it would take, but surely for me to research a solution up to the point these people have would not be fast, so I should learn from them. This is good, its something, but I am pretty sure that using their source code is not going to be feasible. So we just have to learn this stuff and write our own.

[jasonkuhrt]

Thanks to conversation on IRC I got some nice help and a tip from @jquense (thanks!) leading to his repo https://github.com/jquense/react-layer

[jasonkuhrt]

The conclusion is the following:

• Create a React Mixin that hooks into component-lifecycle hooks. It relies on an implementation of renderLayers which acts like a render except that the returned value is sent to a different DOM point completely unrelated to the render tree of render. So in sum the render and renderLayers share an owner that provides a "common control context" but do _not_ share in any way their render trees.
• We an integration challenge to integrate renderLayer ref into owner refs. A workaround for some use-cases is to expose the return value of React.render on the owner instance. This allows the owner to get a hold of the layer DOM Node via React.findDOMNode.
• We have a design decision to make regarding how many layers a component may have. Currently only one but it seems that the facebook team internally used a system wherein renderLayer could return multiple layers. They modelled this by allowed renderLayer to return an object of views rather than a single view. So far our system is simple, making renderLayer act like render.
• We have a design decision to make about what life-cycle methods if any layer will get. For instance should there be layerWillUnmount and layerDidMount etc.?

Overall we have a system that just-works, leaving various design tradeoffs un-studied and refs unresolved. Our shortcuts unblock us in the small but a wise product development cycle would provide time to fully design test and extract this layer component into its own module. For that matter it could make a good presentation topic at the NYC React Meetup.

[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