Merge pull request #198 from ruby-hyperloop/feature/refs_callback

zetachang · web-flow · commit 920ebbb04ed7 · 2016-12-26T13:33:49.000+08:00
Attach actual Ruby instance in ref callback
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ Whitespace conventions:
 
 ### Deprecated
 
+- Current ref callback behavior is deprecated. Require `"react/ref_callback"` to get the updated behavior. (#188)
 - `React.render_to_string` & `React.render_to_static_markup` is deprecated, use `React::Server.render_to_string` & `React::Server.render_to_static_markup` instead. (#186)
 - `react/react-source` is deprecated, use `react/react-source-browser` or `react/react-source-server` instead. For most usecase, `react/react-source-browser` is sufficient. If you are using the built-in server side rendering feature, the actual `ReactDOMServer` is already provided by the `react-rails` gem. Therefore, unless you are building a custom server side rendering mechanism, it's not suggested to use `react/react-source-server` in browser code. (#186)
 
diff --git a/lib/react/api.rb b/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
diff --git a/lib/react/ref_callback.rb b/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
diff --git a/spec/react/refs_callback_spec.rb b/spec/react/refs_callback_spec.rb
@@ -0,0 +1,56 @@
+require 'spec_helper'
+
+if opal?
+
+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
+
+    Foo.class_eval do
+      def my_bar=(bar)
+        $bar = 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($bar).to be_a(Bar)
+    $bar = nil
+  end
+
+  it "is invoked with the actual DOM node" do
+    Foo.class_eval do
+      def my_div=(div)
+        $div = 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(`#{$div}.nodeType`).to eq(1)
+    $div = nil
+  end
+end
+
+end
diff --git a/spec/spec_helper.rb b/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__)
