react-basic Ref component

Ref.js

"use strict";

var React = require("react");
var ReactDOM = require("react-dom");

exports.makeRef = function(toMaybe) {
  var Ref = function(props) {
    this.DOMNode = null;
    return this;
  };

  Ref.prototype = Object.create(React.Component.prototype);

  Ref.displayName = "Ref";

  Ref.prototype.updateDOMNode = function() {
    var newDOMNode = ReactDOM.findDOMNode(this);
    if (this.DOMNode !== newDOMNode) {
      this.DOMNode = newDOMNode;
      this.forceUpdate();
    }
  };

  Ref.prototype.componentDidMount = function() {
    this.updateDOMNode();
  };

  Ref.prototype.componentDidUpdate = function() {
    this.updateDOMNode();
  };

  Ref.prototype.render = function() {
    return this.props.render(toMaybe(this.DOMNode));
  };

  return Ref;
};

Ref.purs

module Lumi.Components.Molecules.Ref where

import Prelude

import Data.Maybe (Maybe)
import Data.Nullable (Nullable, toMaybe)
import React.Basic (JSX, ReactComponent)
import React.Basic.DOM.Events (DOMNode)

type RefProps =
  { render :: Maybe DOMNode -> JSX
  }

foreign import makeRef :: (Nullable ~> Maybe) -> ReactComponent RefProps

ref :: ReactComponent RefProps
ref = makeRef toMaybe