Skip to content
This repository was archived by the owner on Oct 19, 2018. It is now read-only.

Commit 91d17f3

Browse files
catmandozetachang
authored andcommitted
closes #157 closes #158
fixed multiple haml classes not working # Conflicts: # spec/react/dsl_spec.rb
1 parent 6d67f63 commit 91d17f3

File tree

3 files changed

+49
-19
lines changed

3 files changed

+49
-19
lines changed

lib/react/api.rb

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,36 +104,42 @@ def self.create_element(type, properties = {}, &block)
104104
params << create_native_react_class(type)
105105
elsif React::Component::Tags::HTML_TAGS.include?(type)
106106
params << type
107+
html_tag = true
107108
elsif type.is_a? String
108109
return React::Element.new(type)
109110
else
110111
raise "#{type} not implemented"
111112
end
112113

113-
# Passed in properties
114-
params << convert_props(properties)
114+
# Convert Passed in properties
115+
properties = convert_props(properties, html_tag)
116+
params << properties.shallow_to_n
115117

116118
# Children Nodes
117119
if block_given?
118-
children = [yield].flatten.each do |ele|
120+
[yield].flatten.each do |ele|
119121
params << ele.to_n
120122
end
121123
end
122-
return React::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
124+
React::Element.new(`React.createElement.apply(null, #{params})`, type, properties, block)
123125
end
124126

125127
def self.clear_component_class_cache
126128
@@component_classes = {}
127129
end
128130

129-
def self.convert_props(properties)
131+
def self.convert_props(properties, html_tag)
130132
raise "Component parameters must be a hash. Instead you sent #{properties}" unless properties.is_a? Hash
131133
props = {}
134+
updated = false
132135
properties.map do |key, value|
133136
if key == "class_name" && value.is_a?(Hash)
134137
props[lower_camelize(key)] = `React.addons.classSet(#{value.to_n})`
135138
elsif key == "class"
136139
props["className"] = value
140+
elsif key == 'value' && value.nil? && html_tag
141+
updated = true
142+
props['value'] = ''
137143
elsif ["style", "dangerously_set_inner_HTML"].include? key
138144
props[lower_camelize(key)] = value.to_n
139145
elsif React::HASH_ATTRIBUTES.include?(key) && value.is_a?(Hash)
@@ -142,16 +148,16 @@ def self.convert_props(properties)
142148
props[React.html_attr?(lower_camelize(key)) ? lower_camelize(key) : key] = value
143149
end
144150
end
145-
props.shallow_to_n
151+
props
146152
end
147153

148154
private
149155

150156
def self.lower_camelize(snake_cased_word)
151-
words = snake_cased_word.split("_")
157+
words = snake_cased_word.split('_')
152158
result = [words.first]
153159
result.concat(words[1..-1].map {|word| word[0].upcase + word[1..-1] })
154-
result.join("")
160+
result.join('')
155161
end
156162
end
157163
end

lib/react/element.rb

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,10 @@ def render(props = {})
4848
if props.empty?
4949
React::RenderingContext.render(self)
5050
else
51+
props = API.convert_props(props)
5152
React::RenderingContext.render(
52-
Element.new(
53-
`React.cloneElement(#{to_n}, #{API.convert_props(props)})`,
54-
type, properties.merge(props), block
55-
)
53+
Element.new(`React.cloneElement(#{to_n}, #{props.shallow_to_n})`,
54+
type, properties.merge(props), block)
5655
)
5756
end
5857
end
@@ -80,8 +79,8 @@ def as_node
8079
def method_missing(class_name, args = {}, &new_block)
8180
class_name = class_name.gsub(/__|_/, '__' => '_', '_' => '-')
8281
new_props = properties.dup
83-
new_props[:class] = "\
84-
#{class_name} #{new_props[:class]} #{args.delete(:class)} #{args.delete(:className)}\
82+
new_props[:className] = "\
83+
#{class_name} #{new_props[:className]} #{args.delete(:class)} #{args.delete(:className)}\
8584
".split(' ').uniq.join(' ')
8685
new_props.merge! args
8786
React::RenderingContext.replace(

spec/react/dsl_spec.rb

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,32 @@ def render
5656
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
5757
end
5858

59-
it "can use the upcase version of builtin tags" do
59+
it "will pass the empty string for the value attribute" do
60+
stub_const 'Foo', Class.new
61+
Foo.class_eval do
62+
include React::Component
63+
def render
64+
INPUT(value: nil).on(:change) {}
65+
end
66+
end
67+
68+
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<input value=""/>')
69+
end
70+
71+
72+
it "will pass converted props through event handlers" do
73+
stub_const 'Foo', Class.new
74+
Foo.class_eval do
75+
include React::Component
76+
def render
77+
INPUT(data: {foo: 12}).on(:change) {}
78+
end
79+
end
80+
81+
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<input data-foo="12"/>')
82+
end
83+
84+
it "will turn the last string in a block into a element" do
6085
stub_const 'Foo', Class.new
6186
Foo.class_eval do
6287
include React::Component
@@ -190,11 +215,11 @@ def render
190215
stub_const 'Foo', Class.new(React::Component::Base)
191216
Foo.class_eval do
192217
def render
193-
Mod::Bar().the_class
218+
Mod::Bar().the_class.other_class
194219
end
195220
end
196221

197-
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span class="the-class">a man walks into a bar</span>')
222+
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span class="other-class the-class">a man walks into a bar</span>')
198223
end
199224

200225
it "can use the 'class' keyword for classes" do
@@ -214,11 +239,11 @@ def render
214239
Foo.class_eval do
215240
include React::Component
216241
def render
217-
span { "hello".span.as_node.class.name }.as_node.render
242+
span(data: {size: 12}) { "hello".span.as_node.class.name }.as_node.render
218243
end
219244
end
220245

221-
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>React::Element</span>')
246+
expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span data-size="12">React::Element</span>')
222247
end
223248

224249
it "can use the dangerously_set_inner_HTML param" do

0 commit comments

Comments
 (0)