Support onValuePreUpdate in DatePicker

alexkuz · Sep 18, 2016 · fc74a2d · fc74a2d
1 parent c601a3f
commit fc74a2d
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+0.5.2 / 2016-09-18
+------------------
+* `DatePicker` value can be patched now with `onValuePreUpdate` callback.
+
+0.5.1 / 2016-09-18
+------------------
+* Fix server rendering, tests added
+
 0.5.0 / 2016-09-18
 ------------------
 * IE11 fixes

diff --git a/README.md b/README.md
@@ -200,6 +200,7 @@ If `<input>` element wasn't provided, component tries to find node automatically
 * **`emptyChar`** *string* - Character used as an empty symbol (`' '` by default)
 * **`placeholder`** *string* - If set, it is shown when `unmaskedValue` is empty
 * **`onUnmaskedValueChange`** *function(text)* - Fires when value is changed, providing unmasked value
+* **`onValuePreUpdate`** *function* - Optional callback to update value before it is parsed by `Mask`
 
 ## DatePicker
 
@@ -231,6 +232,12 @@ If `<input>` element wasn't provided, component tries to find node automatically
 * **`onChange`** *function(date)* - Fires when date is selected, providing [moment.js](http://momentjs.com/) object
 * **`getInputElement`** *function* - Optional callback that provides `<input>` DOM element
 * **`registerInput`** *function* - Registers `<input>` DOM element
+* **`onValuePreUpdate`** *function* - Optional callback to update value before it is parsed by `DatePicker`. In this example, it parses inserted timestamp:
+```js
+onValuePreUpdate={v => parseInt(v, 10) > 1e8 ?
+  moment(parseInt(v, 10)).format('ddd DD/MM/YYYY') : v
+}
+```
 
 ## Combobox
 

diff --git a/__tests__/DatePicker.test.js b/__tests__/DatePicker.test.js
@@ -10,6 +10,7 @@ describe('DatePicker', () => {
     const tree = renderer.create(
       <DatePicker
         value={now.format('ddd DD/MM/YYYY')}
+        placeholder={now.format('ddd DD/MM/YYYY')}
       >
         {props => <input {...props} />}
       </DatePicker>
@@ -21,6 +22,7 @@ describe('DatePicker', () => {
     const tree = renderer.create(
       <DatePicker
         value={now.format('ddd DD/MM/YYYY')}
+        placeholder={now.format('ddd DD/MM/YYYY')}
       >
         <input />
       </DatePicker>

diff --git a/__tests__/__snapshots__/DatePicker.test.js.snap b/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -16,7 +16,7 @@ exports[`DatePicker renders correctly with element child 1`] = `
     onKeyDown={[Function anonymous]}
     onMouseEnter={[Function anonymous]}
     onMouseLeave={[Function anonymous]}
-    placeholder="Sun 18/09/2016"
+    placeholder="Thu 01/01/1970"
     style={
       Object {
         "paddingRight": "15px"
@@ -72,7 +72,7 @@ exports[`DatePicker renders correctly with function child 1`] = `
     onKeyDown={[Function anonymous]}
     onMouseEnter={[Function anonymous]}
     onMouseLeave={[Function anonymous]}
-    placeholder="Sun 18/09/2016"
+    placeholder="Thu 01/01/1970"
     style={
       Object {
         "paddingRight": "15px"

diff --git a/demo/src/js/DemoApp.jsx b/demo/src/js/DemoApp.jsx
@@ -503,6 +503,9 @@ const ValueInput9 = pure(({ value, onChange }) =>
       <DatePicker
         value={moment(value || undefined).format('ddd DD/MM/YYYY')}
         onChange={onChange}
+        onValuePreUpdate={v => parseInt(v, 10) > 1e6 ?
+          moment(parseInt(v, 10)).format('ddd DD/MM/YYYY') : v
+        }
       >
         {(inputProps, otherProps, registerInput) =>
           <FormControl
@@ -526,6 +529,10 @@ const code9 = `
       <DatePicker
         value={moment(value || undefined).format('ddd DD/MM/YYYY')}
         onChange={onChange}
+        // this callback will parse inserted timestamp
+        onValuePreUpdate={v => parseInt(v, 10) > 1e8 ?
+          moment(parseInt(v, 10)).format('ddd DD/MM/YYYY') : v
+        }
       >
         {(inputProps, { registerInput }) =>
           <FormControl

diff --git a/src/DatePicker.jsx b/src/DatePicker.jsx
@@ -66,7 +66,7 @@ export default class DatePicker extends PureComponent {
   }
 
   render() {
-    const { children, placeholder, registerInput, getInputElement } = this.props;
+    const { children, placeholder, registerInput, getInputElement, onValuePreUpdate } = this.props;
 
     const child = (maskProps, otherProps, registerInput) =>
       (typeof children === 'function') ?
@@ -127,6 +127,9 @@ export default class DatePicker extends PureComponent {
   }
 
   handleValuePreUpdate = value => {
+    if (this.props.onValuePreUpdate) {
+      value = this.props.onValuePreUpdate(value);
+    }
     const localeData = moment.localeData(this.props.locale);
     const days = localeData._weekdaysShort;