Module: React::Component::Api

Defined in:
lib/react/component/api.rb

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.included(base) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'lib/react/component/api.rb', line 4

def self.included(base)
  base.instance_exec do
    base_module = base.to_s.deconstantize
    if base_module != ''
      base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
        `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
      end
    else
      Object.define_method(base.to_s) do |*args, &block|
        `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
      end
    end

    attr_accessor :props
    attr_accessor :state

    def ref(ref_name, &block)
      defined_refs.JS[ref_name] = block_given? ? block : `null`
    end

    def defined_refs
      @defined_ref ||= `{}`
    end

    def default_state_defined
      @default_state_defined
    end

    def state
      return @default_state if @default_state
      @default_state_defined = true
      %x{
        var native_state = {state: {}};
        native_state.setState = function(new_state, callback) {
          for (var key in new_state) {
            this.state[key] = new_state[key];
          }
          if (callback) { callback.call(); }
        }
      }
      @default_state = React::Component::State.new(`native_state`)
    end

    def render(&block)
      `base.render_block = #{block}`
    end

    def should_component_update?(&block)
      `base.should_component_update_block = block`
    end
  end
end

Instance Method Details

#component_fun(class_name, **ruby_props) ⇒ Object 



70
71
72
73
74
75
76
77
78
 
# File 'lib/react/component/api.rb', line 70

def component_fun(class_name, **ruby_props)
  %x{
    return function(props) {
      let outer_props = Opal.React.to_native_react_props(#{ruby_props});
      let new_props = Object.assign({}, props, outer_props);
      return Opal.global.React.createElement(#{class_name.constantize}.react_component, new_props)
    }
  }
end

#display_name ⇒ Object 



57
58
59
 
# File 'lib/react/component/api.rb', line 57

def display_name
  @native.JS[:displayName]
end

#force_update(&block) ⇒ Object 



61
62
63
64
65
66
67
68
 
# File 'lib/react/component/api.rb', line 61

def force_update(&block)
  if block_given?
    # this maybe needs instance_exec too
    @native.JS.forceUpdate(`function() { block.$call(); }`)
  else
    @native.JS.forceUpdate
  end
end

#get_react_element(arg, &block) ⇒ Object Also known as: gre 



80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
# File 'lib/react/component/api.rb', line 80

def get_react_element(arg, &block)
  if block_given?
    # execute block, fetch last element from buffer
    %x{
      let last_buffer_length = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].length;
      let last_buffer_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1][last_buffer_length - 1];
      block.$call();
      // console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())
      let new_element = Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop();
      if (last_buffer_element === new_element) { #{Isomorfeus.raise_error(message: "Block did not create any React element!")} }
      return new_element;
    }
  else
    # element was rendered before being passed as arg
    # fetch last element from buffer
    # `console.log("get_react_element popping", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
    `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].pop()`
  end
end

#method_ref(method_symbol, *args) ⇒ Object Also known as: m_ref 



101
102
103
104
105
106
107
108
109
 
# File 'lib/react/component/api.rb', line 101

def method_ref(method_symbol, *args)
  method_key = "#{method_symbol}#{args}"
  %x{
    if (#@native.method_refs && #@native.method_refs[#{method_key}]) { return #@native.method_refs[#{method_key}]; }
    if (!#@native.method_refs) { #@native.method_refs = {}; }
    #@native.method_refs[#{method_key}] = { m: #{method(method_symbol)}, a: args };
    return #@native.method_refs[#{method_key}];
  }
end

#ref(name) ⇒ Object 



120
121
122
 
# File 'lib/react/component/api.rb', line 120

def ref(name)
  `#@native[name]`
end

#render_react_element(el) ⇒ Object Also known as: rre 



112
113
114
115
116
117
 
# File 'lib/react/component/api.rb', line 112

def render_react_element(el)
  # push el to buffer
  `Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(el)`
  # `console.log("render_react_element pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString())`
  nil
end

#ruby_ref(name) ⇒ Object 



124
125
126
127
 
# File 'lib/react/component/api.rb', line 124

def ruby_ref(name)
  return `#@native[name]` if `(typeof #@native[name] === 'function')`
  React::Ref::new(`#@native[name]`)
end

#set_state(updater, &callback) ⇒ Object 



129
130
131
 
# File 'lib/react/component/api.rb', line 129

def set_state(updater, &callback)
  @state.set_state(updater, &callback)
end