Merge pull request #5 from claudetech/improve-form-customization

Allow to customize forms input more easily

lib/mixins/rf-input-helpers.js

@@ -6,35 +6,38 @@ riot.mixin('rf-input-helpers', {
     this.currentValue = this.opts.model.value
   },
   getID: function () {
-    return this.opts.inputId ||
+    return this.getProperty('inputId') ||
       config.makeID(this.opts.model.name, this.getFormName())
   },
   getName: function () {
-    return this.opts.inputName ||
+    return this.getProperty('inputName') ||
       config.makeName(this.opts.model.name, this.getFormName())
   },
   getLabel: function () {
-    return this.opts.inputLabel ||
+    return this.getProperty('inputLabel') ||
       config.formatLabel(this.opts.model.name, this.getFormName())
   },
   getPlaceholder: function () {
-    return this.opts.inputPlaceholder ||
+    return this.getProperty('inputPlaceholder') ||
       config.formatPlaceholder(this.opts.model.name, this.getFormName())
   },
   formatErrors: function (errors) {
     return config.formatErrors(errors, this.opts.model.name, this.getFormName())
   },
   getLabelClassName: function () {
-    return this.opts.labelClassName || config.labelClassName
+    return this.getProperty('labelClassName') || config.labelClassName
   },
   getGroupClassName: function () {
-    return this.opts.groupClassName || config.groupClassName
+    return this.getProperty('groupClassName') || config.groupClassName
   },
   getErrorClassName: function () {
-    return this.opts.errorClassName || config.errorClassName
+    return this.getProperty('errorClassName') || config.errorClassName
   },
   getInputContainerClassName: function () {
-    return this.opts.inputContainerClassName || config.inputContainerClassName
+    return this.getProperty('inputContainerClassName') || config.inputContainerClassName
+  },
+  getProperty: function (propertyName) {
+    return this.opts[propertyName] || this.opts.model.config[propertyName]
   },
   assignValue: function (value) {
     this.opts.model.setValue(value)

tests/unit/components/rf-form_test.js

@@ -7,6 +7,12 @@ describe('rf-form', () => {
   const form = new Form.Builder('hello')
           .addInput({name: 'username', type: 'text'})
           .addInput({name: 'other', type: 'text'})
+          .addInput({
+            name: 'customized',
+            type: 'text',
+            inputLabel: 'Customized label',
+            inputPlaceholder: 'Customized placeholder'
+          })
           .addInput({name: 'hideme', type: 'hidden'})
           .setModel({username: 'world', hideme: 'i-am-hidden'})
           .build()
@@ -30,13 +36,25 @@ describe('rf-form', () => {
     expect(label.innerText || label.textContent).to.eq('Username')
   })
 
+  it('should allow to customize labels', () => {
+    const label = document.querySelector('label[for="hello_customized"]')
+    expect(label).not.to.be.null
+    expect(label.innerText || label.textContent).to.eq('Customized label')
+  })
+
   it('should render the input', () => {
     const input = document.querySelector('input[name="hello_username"]')
     expect(input).not.to.be.null
     expect(input.placeholder).to.eq('Username')
     expect(input.value).to.eq('world')
   })
 
+  it('should allow to customize placeholders', () => {
+    const input = document.querySelector('input[name="hello_customized"]')
+    expect(input).not.to.be.null
+    expect(input.placeholder).to.eq('Customized placeholder')
+  })
+
   it('should render hidden inputs without label', () => {
     const input = document.querySelector('input[name="hello_hideme"]')
     expect(input).not.to.be.null