Module: React::Component::NativeComponentConstructor

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

Class Method Summary collapse

Class Method Details

.extended(base) ⇒ Object

for should_component_update we apply ruby semantics for comparing props to do so, we convert the props to ruby hashes and then compare this makes sure, that for example rubys Nil object gets handled properly



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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
# File 'lib/react/component/native_component_constructor.rb', line 7

def self.extended(base)
  component_name = base.to_s
  # language=JS
  %x{
    base.react_component = class extends Opal.global.React.Component {
      constructor(props) {
        super(props);
        if (base.$default_state_defined()) {
          this.state = base.$state().$to_n();
        } else {
          this.state = {};
        };
        this.__ruby_instance = base.$new(this);
        var event_handlers = #{base.event_handlers};
        for (var i = 0; i < event_handlers.length; i++) {
          this[event_handlers[i]] = this[event_handlers[i]].bind(this);
        }
        var defined_refs = #{base.defined_refs};
        for (var ref in defined_refs) {
          if (defined_refs[ref] != null) {
            this[ref] = function(element) {
              element = Opal.React.native_element_or_component_to_ruby(element);
              #{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
            }
            this[ref] = this[ref].bind(this);
          } else {
            this[ref] = Opal.global.React.createRef();
          }
        }
      }
      static get displayName() {
        return #{component_name};
      }
      render() {
        Opal.React.render_buffer.push([]);
        // console.log("react component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
        Opal.React.active_components.push(this);
        let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
        if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
        // console.log("react component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
        Opal.React.active_components.pop();
        return Opal.React.render_buffer.pop();
      }
      shouldComponentUpdate(next_props, next_state) {
        if (base.has_custom_should_component_update) {
          return this.__ruby_instance["$should_component_update"](#{(Hash.new(next_props))}, #{Hash.new(next_state)});
        } else {
          var next_props_keys = Object.keys(next_props);
          var this_props_keys = Object.keys(this.props);
          if (next_props_keys.length !== this_props_keys.length) { return true; }

          var next_state_keys = Object.keys(next_state);
          var this_state_keys = Object.keys(this.state);
          if (next_state_keys.length !== this_state_keys.length) { return true; }

          for (var property in next_props) {
            if (next_props.hasOwnProperty(property)) {
              if (!this.props.hasOwnProperty(property)) { return true; }
              if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
              else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
                       typeof next_props[property]['$!='] !== "undefined" &&
                       typeof this.props[property] !== "undefined" && this.props[property] !== null &&
                       typeof this.props[property]['$!='] !== "undefined") {
                if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; }
              } else if (next_props[property] !== this.props[property]) { return true; }
            }
          }
          for (var property in next_state) {
            if (next_state.hasOwnProperty(property)) {
              if (!this.state.hasOwnProperty(property)) { return true; };
              if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
                  this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
                if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true }
              } else if (next_state[property] !== this.state[property]) { return true }
            }
          }
          return false;
        }
      }
      validateProp(props, propName, componentName) {
        try { base.$validate_prop(propName, props[propName]) }
        catch (e) { return new Error(componentName + " Error: prop validation failed: " + e.message); }
        return null;
      }
    }
  }
end