Remove usage of React.findDOMNode()

[zhusee2]

Purpose

As of React 16.6, ReactDOM.findDOMNode() is added to list of deprecated API.
But even before that, usage of the API has been advised to be prevented.

This PR removes calls to the listed API from anchored() HOC mixin, and instead introduces an approach that requires you to manually set refs to both anchor element and wrapped element.

The anchored(Component) HOC now only accept an HTMLElement node for the anchor prop it's taking.
Also it now passes an additional nodeRef prop to the wrapped component, which is a React.createRef() to collect ref to the DOM node that should be positioned to anchor.

Example

Configuring wrapped component

function Component({ placement, arrowStyle, style, nodeRef }) {
    return (
        <div ref={nodeRef} className={placement} style={style}>
            <div className="arrow" style={arrowStyle} />
            content body
        </div>
    );
}
const AnchoredComponent = anchored(options)(Component);

setting anchor

The anchored(Component) HOC only renders if the anchor prop is a valid DOM node.
So please be sure to render it after the ref to anchor is set.

class Example extends React.Component {
    static propTypes = {
        show: PropTypes.bool.isRequired,
    };

    anchorRef = React.createRef();

    render() {
        return (
            <div>
                <div className="anchor" ref={this.anchorRef} />
                {this.props.show && (
                    <AnchoredComponent anchor={this.anchorRef.current} />
                )}
            </div>
        );
    }
}

[hsunpei]

Nice code with clear examples 🥇 🚢