Class: React::Element
- Includes:
- Native
- Defined in:
- lib/react/element.rb,
lib/reactrb/new-event-name-convention.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..blat becomes div(class: "bar blat")
by using method missing
Instance Attribute Summary collapse
-
#block ⇒ Object
readonly
Returns the value of attribute block.
-
#properties ⇒ Object
readonly
Returns the value of attribute properties.
-
#type ⇒ Object
readonly
Returns the value of attribute type.
-
#waiting_on_resources ⇒ Object
Returns the value of attribute waiting_on_resources.
Class Method Summary collapse
Instance Method Summary collapse
-
#as_node ⇒ Object
Deprecated version of delete method.
-
#delete ⇒ Object
Delete (remove) element from rendering context, the element may later be added back in using the render method.
-
#initialize(native_element, type = nil, properties = {}, block = nil) ⇒ Element
constructor
A new instance of Element.
- #merge_deprecated_component_event_prop!(event_name) ⇒ Object
-
#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).
-
#on(*event_names, &block) ⇒ Object
Attach event handlers.
-
#render(props = {}, &new_block) ⇒ Object
Render element into DOM in the current rendering context.
- #rendered? ⇒ Boolean
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.)
79 80 81 82 83 84 85 86 87 |
# File 'lib/react/element.rb', line 79 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
93 94 95 |
# File 'lib/react/element.rb', line 93 def self.haml_class_name(class_name) class_name.gsub(/__|_/, '__' => '_', '_' => '-') end |
Instance Method Details
#as_node ⇒ Object
Deprecated version of delete method
68 69 70 |
# File 'lib/react/element.rb', line 68 def as_node React::RenderingContext.as_node(self) end |
#delete ⇒ Object
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 |
#merge_deprecated_component_event_prop!(event_name) ⇒ Object
155 156 157 158 159 160 161 162 163 164 165 166 |
# File 'lib/react/element.rb', line 155 def merge_deprecated_component_event_prop!(event_name) prop_name = "_on#{event_name.event_camelize}" fn = %x{function(){#{ React::Component.deprecation_warning( "In future releases React::Element#on('#{event_name}') will no longer respond "\ "to the '#{prop_name}' emitter.\n"\ "Rename your emitter param to 'on_#{event_name}' or use .on('<#{prop_name}>')" )} return #{yield(*Array(`arguments`))} }} @properties.merge!(prop_name => fn) 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(#{to_n}, #{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(#{to_n}, #{props.shallow_to_n})`, type, properties.merge(props), block), ) end end |
#rendered? ⇒ Boolean
89 90 91 |
# File 'lib/react/element.rb', line 89 def rendered? React::RenderingContext.rendered? self end |