Class: React::Component

Inherits:
Object
  • Object
show all
Includes:
DSL, Window
Defined in:
lib/opal/react/component.rb

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.default_props ⇒ Object 



133
134
135
 
# File 'lib/opal/react/component.rb', line 133

def self.default_props
  nil
end

.dsl_name(name) ⇒ Object 



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

def self.dsl_name(name)
  name.gsub( /Component$/, '')
end

.inherited(subclass) ⇒ Object 



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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
# File 'lib/opal/react/component.rb', line 47

def self.inherited(subclass)
  super
  _class = `
    class extends React.Component {

      static get defaultProps() {
        return #{React.fix_props(`#{subclass}.$default_props()`)};
      }

      constructor(props) {
        super(props);
        this.self = #{subclass.new(`props`)};
        this.state = #{React.fix_state(`this.self.$initial_state()`)};
      }

      render() {
        return this.self.$bridge(this).self.$render();
      }

      componentWillMount() {
        this.self.$bridge(this).self.$component_will_mount();
      }

      componentDidMount() {
        this.self.$bridge(this).self.$component_did_mount();
      }

      componentWillReceiveProps(nextProps) {
        this.self.$bridge(this).self.$component_will_receive_props(nextProps);
      }

      shouldComponentUpdate(nextProps, nextState) {
        return ("$should_component_update?" in this.self)
          ? this.self.$bridge(this).self["$should_component_update?"](nextProps, nextState)
          : shallowCompare(this, nextProps, nextState);
      }

      componentWillUpdate(nextProps, nextState) {
        this.self.$bridge(this).self.$component_will_update(nextProps, nextState);
      }

      componentDidUpdate(prevProps, prevState) {
        this.self.$bridge(this).self.$component_did_update(prevProps, prevState);
      }

      componentWillUnmount() {
        this.self.$bridge(this).self.$component_will_unmount();
      }
    }
  `

  _create = Proc.new { |props = nil, children = nil, &block|
    if children.nil?
      if `Array.isArray(props)`
        children = props
        props = nil
      elsif !props.nil? && `typeof props !== 'object'`
        children = [props]
        props = nil
      end
    end
    `return React.createElement( #{_class}, #{React.fix_props(props)}, #{children.to_n} );`
  }

  name = subclass.dsl_name(subclass.name)
  DSL.define_method(name, _create)

  subclass.class.define_method('run') do |props = nil, container = nil|
    if container
      ReactDOM.render(_create.call(props), container)
    else
      ReactDOM.render(_create.call(props), container = $$.document.createElement('div')) do
        $$.document.body.appendChild(container)
      end
    end
  end
end

Instance Method Details

#bridge(value) ⇒ Object 



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

def bridge(value)
  @this = value
end

#component_did_mount ⇒ Object 



148
149
 
# File 'lib/opal/react/component.rb', line 148

def component_did_mount()
end

#component_did_update(next_props, next_state) ⇒ Object 



161
162
 
# File 'lib/opal/react/component.rb', line 161

def component_did_update(next_props, next_state)
end

#component_will_mount ⇒ Object 



145
146
 
# File 'lib/opal/react/component.rb', line 145

def component_will_mount()
end

#component_will_receive_props(next_props) ⇒ Object 



151
152
 
# File 'lib/opal/react/component.rb', line 151

def component_will_receive_props(next_props)
end

#component_will_unmount ⇒ Object 



164
165
 
# File 'lib/opal/react/component.rb', line 164

def component_will_unmount()
end

#component_will_update(next_props, next_state) ⇒ Object

def should_component_update?(next_props, next_state)

true

end



158
159
 
# File 'lib/opal/react/component.rb', line 158

def component_will_update(next_props, next_state)
end

#force_update ⇒ Object 



188
189
190
 
# File 'lib/opal/react/component.rb', line 188

def force_update
  `#{@this}.forceUpdate();`
end

#initial_state ⇒ Object 



137
138
139
 
# File 'lib/opal/react/component.rb', line 137

def initial_state
  nil
end

#mounted? ⇒ Boolean

deprecated (more or less)

Returns:

  • (Boolean) 


193
194
195
 
# File 'lib/opal/react/component.rb', line 193

def mounted?
  `return #{@this}.isMounted();`
end

#prop_types ⇒ Object 



141
142
143
 
# File 'lib/opal/react/component.rb', line 141

def prop_types
  nil
end

#props ⇒ Object 



170
171
172
 
# File 'lib/opal/react/component.rb', line 170

def props
  ShallowWrapper.new(`#{@this}.props`)
end

#render ⇒ Object 



167
168
 
# File 'lib/opal/react/component.rb', line 167

def render()
end

#replace_state(next_state, &block) ⇒ Object 



183
184
185
186
 
# File 'lib/opal/react/component.rb', line 183

def replace_state(next_state, &block)
  block = `null` if block.nil?
  `#{@this}.replaceState(#{React.fix_state(next_state)}, block);`
end

#set_state(next_state, &block) ⇒ Object 



178
179
180
181
 
# File 'lib/opal/react/component.rb', line 178

def set_state(next_state, &block)
  block = `null` if block.nil?
  `#{@this}.setState(#{React.fix_state(next_state)}, block);`
end

#state ⇒ Object 



174
175
176
 
# File 'lib/opal/react/component.rb', line 174

def state
  ShallowWrapper.new(`#{@this}.state`)
end