Attach actual Ruby instance in ref callback

Author: zetachang

lib/react/api.rb

@@ -142,6 +142,16 @@ def self.convert_props(properties)
           props["className"] = value
         elsif ["style", "dangerously_set_inner_HTML"].include? key
           props[lower_camelize(key)] = value.to_n
+        elsif key == 'ref' && value.is_a?(Proc)
+          unless React.const_defined?(:RefsCallbackExtension)
+            %x{
+                console.error(
+                  "Warning: Using deprecated behavior of ref callback,",
+                  "require \"react/ref_callback\" to get the correct behavior."
+                );
+            }
+          end
+          props[key] = value
         elsif React::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
           value.each { |k, v| props["#{key}-#{k.tr('_', '-')}"] = v.to_n }
         else

lib/react/ref_callback.rb

@@ -0,0 +1,31 @@
+require 'react/native_library'
+
+module React
+  module RefsCallbackExtension
+  end
+
+  class API
+    class << self
+      alias :orig_convert_props :convert_props
+    end
+
+    def self.convert_props(properties)
+      props = self.orig_convert_props(properties)
+      props.map do |key, value|
+        if key == "ref" && value.is_a?(Proc)
+          new_proc = Proc.new do |native_inst|
+            if `#{native_inst}._getOpalInstance !== undefined`
+              value.call(`#{native_inst}._getOpalInstance()`)
+            elsif `React.findDOMNode !== undefined && #{native_inst}.nodeType === undefined`
+              value.call(`React.findDOMNode(#{native_inst})`)
+            else
+              value.call(native_inst)
+            end
+          end
+          props[key] = new_proc
+        end
+      end
+      props
+    end
+  end
+end

spec/react/refs_callback_spec.rb

@@ -0,0 +1,50 @@
+describe 'Refs callback' do
+  before do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+    end
+  end
+
+  it "is invoked with the actual Ruby instance" do
+    stub_const 'Bar', Class.new
+    Bar.class_eval do
+      include React::Component
+      def render
+        React.create_element('div')
+      end
+    end
+
+    stub_const 'MyBar', nil
+    Foo.class_eval do
+      def my_bar=(bar)
+        MyBar = bar
+      end
+
+      def render
+        React.create_element(Bar, ref: method(:my_bar=).to_proc)
+      end
+    end
+
+    element = React.create_element(Foo)
+    React::Test::Utils.render_into_document(element)
+    expect(MyBar).to be_a(Bar)
+  end
+
+  it "is invoked with the actual DOM node" do
+    stub_const 'MyDiv', nil
+    Foo.class_eval do
+      def my_div=(div)
+        MyDiv = div
+      end
+
+      def render
+        React.create_element('div', ref: method(:my_div=).to_proc)
+      end
+    end
+
+    element = React.create_element(Foo)
+    React::Test::Utils.render_into_document(element)
+    expect(`#{MyDiv}.nodeType`).to eq(1)
+  end
+end

spec/spec_helper.rb

@@ -21,6 +21,7 @@ def ruby?
   require 'react/test/rspec'
   require 'react/test/utils'
   require 'react/top_level_render'
+  require 'react/ref_callback'
   require 'react/server'
 
   require File.expand_path('../support/react/spec_helpers', __FILE__)