Extract input logic to mixin (#2)

* Modify reset value

* Add date input

* Move rf-input logic to mixin

lib/components/rf-input.js

@@ -3,26 +3,5 @@ import riot from 'riot'
 import html from './rf-input.html'
 
 riot.tag('rf-input', html, function (opts) {
-  this.mixin('rf-input-helpers')
-  let tag = null
-  let currentValue = null
-
-  const makeData = () => {
-    return { model: opts.model, formName: opts.formName }
-  }
-
-  this.on('mount', () => {
-    const input = this.root.querySelector('[rf-input-elem]')
-    if (!input) {
-      throw new Error('element with attribute rf-input-elem not found in rf-input html')
-    }
-    tag = riot.mount(input, opts.model.tag, makeData())[0]
-  })
-
-  this.on('update', () => {
-    if (tag && opts.model.value !== currentValue) {
-      currentValue = opts.model.value
-      tag.update(makeData())
-    }
-  })
+  this.mixin('rf-input-helpers', 'rf-base-input')
 })

lib/inputs/index.js

@@ -30,6 +30,12 @@ class TelInput extends BaseInput {
 TelInput.defaultTag = 'rf-text-input'
 TelInput.type       = 'tel'
 
+
+class DateInput extends BaseInput {
+}
+DateInput.defaultTag = 'rf-text-input'
+DateInput.type       = 'date'
+
 class TextareaInput extends BaseInput {
 }
 TextareaInput.defaultTag = 'rf-textarea-input'
@@ -43,5 +49,6 @@ export default {
   NumberInput   : NumberInput,
   URLInput      : URLInput,
   TelInput      : TelInput,
+  DateInput     : DateInput,
   TextareaInput : TextareaInput
 }

lib/mixins/index.js

@@ -1 +1,2 @@
 import './rf-input-helpers'
+import './rf-base-input'

lib/mixins/rf-base-input.js

@@ -0,0 +1,28 @@
+import riot from 'riot'
+import config from '../config'
+
+riot.mixin('rf-base-input', {
+  init: function () {
+    let tag = null
+    let currentValue = null
+
+    const makeData = () => {
+      return { model: this.opts.model, formName: this.opts.formName }
+    }
+
+    this.on('mount', () => {
+      const input = this.root.querySelector('[rf-input-elem]')
+      if (!input) {
+        throw new Error('element with attribute rf-input-elem not found in rf-input html')
+      }
+      tag = riot.mount(input, this.opts.model.tag, makeData())[0]
+    })
+
+    this.on('update', () => {
+      if (tag && this.opts.model.value !== currentValue) {
+        currentValue = this.opts.model.value
+        tag.update(makeData())
+      }
+    })
+  }
+})

lib/mixins/rf-input-helpers.js

@@ -49,10 +49,10 @@ riot.mixin('rf-input-helpers', {
     this.assignValue(e.target.value)
   },
   initializeValue: function () {
-    this.on('mount', () => {
+    this.on('mount update', () => {
       const input = this[this.getName()]
-      if (input && this.opts.model.value !== undefined) {
-        input.value = this.opts.model.value
+      if (input) {
+        input.value = this.opts.model.value || ''
       }
     })
   }

tests/unit/inputs_test.js

@@ -9,6 +9,7 @@ describe('inputs', () => {
     'tel',
     'number',
     'url',
+    'date',
     'textarea'
   ]