feat(MdDatepicker): Debounce the conversion into a date object (#1666)

emman27 · marcosmoura · commit a47ebe199be2 · 2018-05-13T13:44:50.000-03:00
* feat(MdDatepicker): Debounce the conversion into a date object

* feat(MdDatepicker): Use core utils debounce instead

* feat(MdDatepicker): Fix wrongly scoped debounce and allow the mdDebounce prop

* Capitalize MdDebounce to avoid conflict with props

Signed-off-by: Emman &lt;eygohlolz@gmail.com&gt;
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -84,6 +84,12 @@
             type: 'Boolean',
             description: 'Override native browser pickers by changing type of input to text.',
             defaults: 'true'
+          },
+          {
+            name: 'md-debounce',
+            type: 'Number',
+            description: 'Debounces the conversion of plaintext into a date object. Set to a longer time if your users type slowly, or shorter if your users type really fast.',
+            defaults: 1000
           }
         ]
       },
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
@@ -1,7 +1,7 @@
 <template>
   <md-field :class="['md-datepicker', { 'md-native': !this.mdOverrideNative }]" md-clearable>
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
-    <md-input :type="type" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
+    <md-input :type="type" ref="input" :value="modelDate" @input="onInput" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
 
     <slot />
 
@@ -28,6 +28,7 @@
   import MdOverlay from 'components/MdOverlay/MdOverlay'
   import MdDatepickerDialog from './MdDatepickerDialog'
   import MdDateIcon from 'core/icons/MdDateIcon'
+  import MdDebounce from 'core/utils/MdDebounce'
   import MdField from 'components/MdField/MdField'
   import MdInput from 'components/MdField/MdInput/MdInput'
 
@@ -54,6 +55,10 @@
       mdImmediately: {
         type: Boolean,
         default: false
+      },
+      MdDebounce: {
+        type: Number,
+        default: 1000
       }
     },
     data: () => ({
@@ -93,6 +98,12 @@
       }
     },
     methods: {
+      onInput(value) {
+        const parsedDate = parse(value)
+        if (isValid(parsedDate)) {
+          this.selectedDate = parsedDate
+        }
+      },
       toggleDialog () {
         if (!isFirefox || this.mdOverrideNative) {
           this.showDialog = !this.showDialog
@@ -126,6 +137,7 @@
       }
     },
     created () {
+      this.onInput = MdDebounce(this.onInput, this.MdDebounce)
       this.modelDate = this.dateToHTMLString(this.value)
       this.selectedDate = this.value
     }

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,12 @@`
`84`	`84`	`type: 'Boolean',`
`85`	`85`	`description: 'Override native browser pickers by changing type of input to text.',`
`86`	`86`	`defaults: 'true'`
	`87`	`+ },`
	`88`	`+ {`
	`89`	`+ name: 'md-debounce',`
	`90`	`+ type: 'Number',`
	`91`	`+ description: 'Debounces the conversion of plaintext into a date object. Set to a longer time if your users type slowly, or shorter if your users type really fast.',`
	`92`	`+ defaults: 1000`
`87`	`93`	`}`
`88`	`94`	`]`
`89`	`95`	`},`