Decouple flowtip-react-dom rendering logic

[10xjs]

Remove the component rendering and style generation logic from within the FlowTip react component and allow it to be pluggable through a render interface.

The previous behavior is preserved through the default configuration. Different renderer types (other than a Content and Tail component interface) can be easily replace the default renderer.

Consumer-facing Changes:

Previously, the appearance could only be customized through the tail and content components. This interface remains supported and unchanged.

import FlowTip from 'flowtip-react-dom';

  <FlowTip target={this.state.target} content={Content} tail={Tail}>
    FlowTip Content
  </FlowTip>

Using the render prop, the consumer has lower-level access to the rendering behavior. This pattern has far fewer assumptions about the style or shape of the rendered DOM nodes.

import FlowTip from 'flowtip-react-dom';

  <FlowTip
    target={this.state.target}
    render={({onContentSize, onTailSize, state, props}) => {
      // entirely custom render logic
    }}
  >
    FlowTip Content
  </FlowTip>

[izaakschroeder]

The ideas behind this seem pretty great to me. Left a few thoughts. The only thing that might be an area to dry up is there seems to be some repeat logic around document.documentElement. Nothing critical though.

[izaakschroeder]

Spelling 😄

[izaakschroeder]

Should there be a warning in this case? Or use of invariant instead?

[izaakschroeder]

What is this used for? There's no reference to it anywhere. Is this intended to be part of a separate thing to help consumers quickly generate carets for use in a tail component?

[izaakschroeder]

I know you've used this term before but is there a definition of what "linear" overlap is vs some other kind of overlap? This comment has little to do with the PR itself, just if it's going to be part of the nomenclature for this library a working definition would be handy. A cursory google reveals no common definition or use of this term.

[10xjs]

overlap is one of the named config options of flowtip-core

[izaakschroeder]

No concern with overlap – as above more curious what the linear qualifier means.

[10xjs]

"Linear" here refers to parallel with the edge of the target facing the content, as opposed to perpendicular.

The overlap related computations are effectively 2D with respect to one of the four regions.

[izaakschroeder]

Is there a reason this object is lowercase and all the other ones are not?