Class: React::Element

Inherits:
Object show all
Includes:
Native
Defined in:
lib/react/element.rb

Overview

Wraps the React Native element class

adds the #on method to add event handlers to the element

adds the #render method to place elements in the DOM and #delete (alias/deprecated #as_node) method to remove elements from the DOM

handles the haml style class notation so that

div.bar.blat becomes div(class: "bar blat")

by using method missing

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(native_element, type = nil, properties = {}, block = nil) ⇒ Element

Returns a new instance of Element.



28
29
30
31
32
33
 
# File 'lib/react/element.rb', line 28

def initialize(native_element, type = nil, properties = {}, block = nil)
  @type = type
  @properties = (`typeof #{properties} === 'undefined'` ? nil : properties) || {}
  @block = block
  @native = native_element
end

Dynamic Method Handling

This class handles dynamic methods through the method_missing method

#method_missing(class_name, args = {}, &new_block) ⇒ Object

Any other method applied to an element will be treated as class name (haml style) thus div.foo.bar(id: :fred) is the same as saying div(class: “foo bar”, id: :fred)

single underscores become dashes, and double underscores become a single underscore

params may be provide to each class (but typically only to the last for easy reading.)



75
76
77
78
79
80
81
82
83
 
# File 'lib/react/element.rb', line 75

def method_missing(class_name, args = {}, &new_block)
  return dup.render.method_missing(class_name, args, &new_block) unless rendered?
  React::RenderingContext.replace(
    self,
    RenderingContext.build do
      RenderingContext.render(type, build_new_properties(class_name, args), &new_block)
    end
  )
end

Instance Attribute Details

#block ⇒ Object (readonly)

Returns the value of attribute block.



24
25
26
 
# File 'lib/react/element.rb', line 24

def block
  @block
end

#properties ⇒ Object (readonly)

Returns the value of attribute properties.



23
24
25
 
# File 'lib/react/element.rb', line 23

def properties
  @properties
end

#type ⇒ Object (readonly)

Returns the value of attribute type.



22
23
24
 
# File 'lib/react/element.rb', line 22

def type
  @type
end

#waiting_on_resources ⇒ Object

Returns the value of attribute waiting_on_resources.



26
27
28
 
# File 'lib/react/element.rb', line 26

def waiting_on_resources
  @waiting_on_resources
end

Class Method Details

.haml_class_name(class_name) ⇒ Object 



89
90
91
 
# File 'lib/react/element.rb', line 89

def self.haml_class_name(class_name)
  class_name.gsub(/__|_/, '__' => '_', '_' => '-')
end

Instance Method Details

#delete ⇒ Object Also known as: as_node

Delete (remove) element from rendering context, the element may later be added back in using the render method.



62
63
64
 
# File 'lib/react/element.rb', line 62

def delete
  React::RenderingContext.delete(self)
end

#on(*event_names, &block) ⇒ Object

Attach event handlers.



37
38
39
40
41
 
# File 'lib/react/element.rb', line 37

def on(*event_names, &block)
  event_names.each { |event_name| merge_event_prop!(event_name, &block) }
  @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})`
  self
end

#render(props = {}, &new_block) ⇒ Object

Render element into DOM in the current rendering context. Used for elements that are not yet in DOM, i.e. they are provided as children or they have been explicitly removed from the rendering context using the delete method.



47
48
49
50
51
52
53
54
55
56
57
 
# File 'lib/react/element.rb', line 47

def render(props = {}, &new_block)
  if props.empty?
    React::RenderingContext.render(self)
  else
    props = API.convert_props(props)
    React::RenderingContext.render(
      Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
                  type, @properties.merge(props), block),
    )
  end
end

#rendered? ⇒ Boolean

Returns:



85
86
87
 
# File 'lib/react/element.rb', line 85

def rendered?
  React::RenderingContext.rendered? self
end