[fixed] AttachStreams to work when dom node is child
ClosedPublic

Authored by appsforartists on Sep 12 2017, 10:58 PM.

Details

Summary

AttachStreams was designed to work in conjunction with TransformTarget. However, there's no reason it shouldn't also work with a plain DOM element.

This diff enables that.

Diff Detail

Repository
R13 material-motion/material-motion-js
Lint
Lint OK
Unit
No Unit Test Coverage
Restricted Application added a reviewer: O2: Material Motion. · View Herald TranscriptSep 12 2017, 10:58 PM
Restricted Application added a project: Material Motion. · View Herald Transcript
Restricted Application added a reviewer: O3: Material JavaScript platform reviewers. · View Herald Transcript
Restricted Application added a reviewer: Material Motion. · View Herald Transcript
Restricted Application failed to build Restricted Buildable!Sep 12 2017, 11:00 PM
appsforartists edited the summary of this revision. (Show Details)Sep 19 2017, 7:20 PM
featherless accepted this revision.Sep 26 2017, 5:13 PM
featherless added a subscriber: featherless.
featherless added inline comments.
packages/views-react/src/components/AttachStreams.tsx
232

What's the difference between ref and domRef here?

This revision is now accepted and ready to land.Sep 26 2017, 5:13 PM
This revision was automatically updated to reflect the committed changes.
packages/views-react/src/components/AttachStreams.tsx
232

ref is a magic name in React. It's a function that receives whatever React creates to represent a component. When children.type is a string, that means that React will create a DOM node for that child, and the ref function will receive a reference to that DOM element.

If the child is another React component (e.g. not a DOM node), ref will receive a datastructure that represents that child, which isn't interesting to us. Instead, we pass that child a prop called domRef, with the expectation that the child will either pass it as a ref to its own DOM child, or pass it as domRef to its child (which will hopefully apply it as ref to its DOM child).

domRef is a name I made up - the contract (whatever is passed as domRef will eventually be passed to a DOM child as ref) is not enforced by React. But, it is a convention I've followed (e.g. in TransformTarget, so the two work together nicely.)

FWIW, this pattern (making up a custom prop and having a convention where it eventually gets passed as ref to a DOM child) is recommended in the React docs: https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

So, to more directly answer your question, if the child is a DOM node, we can safely use ref. If not, we use another property that will (hopefully) eventually make its way to a DOM descendent where it will be set as ref