closes #114 #272

Author: catmando

lib/react/api.rb

@@ -146,7 +146,7 @@ class extends React.Component {
       end
     end
 
-    def self.create_element(type, properties = {}, &block)
+    def self.create_element(type, *args, &block)
       params = []
 
       # Component Spec, Normal DOM, String or Native Component
@@ -164,7 +164,7 @@ def self.create_element(type, properties = {}, &block)
       end
 
       # Convert Passed in properties
-      properties = convert_props(properties)
+      properties = convert_props(args)
       params << properties.shallow_to_n
 
       # Children Nodes
@@ -183,15 +183,41 @@ def self.clear_component_class_cache
       @@component_classes = {}
     end
 
-    def self.convert_props(properties)
-      raise "Component parameters must be a hash. Instead you sent #{properties}" unless properties.is_a? Hash
+    def self.convert_props(args)
+      # merge args together into a single properties hash
+      properties = {}
+      args.each do |arg|
+        if arg.is_a? String
+          properties[arg] = true
+        elsif arg.is_a? Hash
+          arg.each do |key, value|
+            if ['class', 'className', 'class_name'].include? key
+              if value.is_a?(String)
+                value = value.split(' ')
+              elsif !value.is_a?(Array)
+                raise "The class param must be a string or array of strings"
+              end
+              properties['className'] = (properties['className'] || []) + value
+            elsif key == 'style'
+              if !value.is_a?(Hash)
+                raise "The style param must be a Hash"
+              end
+              properties['style'] = (properties['style'] || {}).merge(value)
+            else
+              properties[key] = value
+            end
+          end
+        end
+      end
+      # process properties according to react rules
       props = {}
       properties.each do |key, value|
-        if key == "class" || key == "class_name"
-          props["className"] = value
-        elsif ["style", "dangerously_set_inner_HTML"].include? key
+        if ["style", "dangerously_set_inner_HTML"].include? key
           props[lower_camelize(key)] = value.to_n
 
+        elsif key == "className"
+          props[key] = value.join(' ')
+
         elsif key == "key"
           props["key"] = value.to_key
 

lib/react/component/class_methods.rb

@@ -95,6 +95,9 @@ def collect_other_params_as(name)
         validator.all_other_params(name) { props }
       end
 
+      alias other_params collect_other_params_as
+      alias others collect_other_params_as
+
       def define_state(*states, &block)
         deprecation_warning "'define_state' is deprecated. Use the 'state' macro to declare states."
         default_initial_value = (block && block.arity == 0) ? yield : nil

spec/react/param_declaration_spec.rb

@@ -183,6 +183,38 @@ def render
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle/)
     end
 
+    it 'allows passing and merging complex arguments to params' do
+      mount 'Tester' do
+        class TakesParams < Hyperloop::Component
+          param :flag
+          param :a
+          param :b
+          param :c
+          param :d
+          others :opts
+          render do
+            DIV(params.opts, id: :tp, class: "another-class", style: {marginLeft: 12}) do
+              "flag: #{params.flag}, a: #{params.a}, b: #{params.b}, c: #{params.c}, d: #{params.d}"
+            end
+          end
+        end
+        class Tester < Hyperloop::Component
+          render do
+            TakesParams(
+              :flag,
+              {a: 1, b: 2, class: [:x, :y], className: 'foo', class_name: 'bar baz', style: {marginRight: 12}},
+              c: 3, d: 4
+            )
+          end
+        end
+      end
+      tp = find('#tp')
+      expect(tp[:class].split).to contain_exactly("x", "y", "foo", "bar", "baz", "another-class")
+      expect(tp[:style]).to match('margin-right: 12px')
+      expect(tp[:style]).to match('margin-left: 12px')
+      expect(tp).to have_content('flag: true, a: 1, b: 2, c: 3, d: 4')
+    end
+
     describe "converts params only once" do
       it "not on every access" do
         mount 'Foo', foo: {bazwoggle: 1} do