Merge pull request #248 from appfolio/removeDateInputAsync

gt - Remove unneeded async parsing from DateInput
appfolio · Jun 29, 2017 · 61717f8 · 61717f8
2 parents 631cb0b + 02146fa
commit 61717f8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "credit-card-type": "^5.0.1",
     "date-fns": "^1.28.5",
     "fecha": "^2.3.0",
-    "lodash.debounce": "^4.0.8",
     "lodash.flow": "^3.5.0",
     "lodash.noop": "^3.0.1",
     "lodash.set": "^4.3.2",

diff --git a/src/components/DateInput.js b/src/components/DateInput.js
@@ -9,7 +9,6 @@ import addYears from 'date-fns/add_years';
 import isValid from 'date-fns/is_valid';
 import Fecha from 'fecha'; // TODO replace with date-fns/parse after v2 is released
 import format from 'date-fns/format';
-import debounce from 'lodash.debounce';
 
 const { parse } = Fecha;
 
@@ -62,7 +61,6 @@ export default class DateInput extends Component {
     keyboard: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     showOnFocus: React.PropTypes.bool,
-    wait: React.PropTypes.number
     // TODO allow custom header/footer, header & day format?
   }
 
@@ -71,8 +69,7 @@ export default class DateInput extends Component {
     dateFormat: 'M/D/YYYY',
     keyboard: true,
     onChange: () => {},
-    showOnFocus: true,
-    wait: 500
+    showOnFocus: true
   }
 
   constructor(props) {
@@ -94,7 +91,7 @@ export default class DateInput extends Component {
     this.setState({
       value
     });
-    this.parseInput();
+    this.parseInput(value);
   }
 
   onSelect = newDate => {
@@ -151,16 +148,15 @@ export default class DateInput extends Component {
 
   getCurrentDate = () => parseValue(this.props.value !== undefined ? this.props.value : this.state.value, this.props.dateFormat);
 
-  parseInput = debounce(() => {
-    const value = this.state.value;
+  parseInput = value => {
     const date = parse(value, this.props.dateFormat);
 
     if (date) {
       this.props.onChange(date, true);
     } else {
       this.props.onChange(value, false);
     }
-  }, this.props.wait);
+  };
 
   close = () => this.setState({ open: false });
   nextMonth = () => this.setDate(addMonths(this.getCurrentDate(), 1));
@@ -191,7 +187,6 @@ export default class DateInput extends Component {
               onChange={this.onChange}
               onClick={showOnFocus && this.show}
               onFocus={showOnFocus && this.show}
-              onInput={this.onChange}
               onKeyDown={this.onKeyDown}
             />
             <InputGroupButton onClick={this.toggle}>

diff --git a/test/components/DateInput.spec.js b/test/components/DateInput.spec.js
@@ -96,53 +96,41 @@ describe('<DateInput />', () => {
   });
 
   context('user input', () => {
-    it('should should set date after entering a valid date string', done => {
-      const component = mount(<DateInput wait={0} />);
+    it('should should set date after entering a valid date string', () => {
+      const component = mount(<DateInput />);
       const input = component.find('input');
-      input.simulate('input', { target: { value: '12/3/2014' } });
-      setTimeout(() => {
-        assert(isSameDay(component.instance().getCurrentDate(), new Date(2014, 11, 3)));
-        done();
-      });
+      input.simulate('change', { target: { value: '12/3/2014' } });
+      assert(isSameDay(component.instance().getCurrentDate(), new Date(2014, 11, 3)));
     });
 
-    it('should should reset date after entering an invalid date string', done => {
-      const component = mount(<DateInput wait={0} />);
+    it('should should reset date after entering an invalid date string', () => {
+      const component = mount(<DateInput />);
       const input = component.find('input');
-      input.simulate('input', { target: { value: 'Sandwiches' } });
-      setTimeout(() => {
-        assert(isToday(component.instance().getCurrentDate()));
-        done();
-      });
+      input.simulate('change', { target: { value: 'Sandwiches' } });
+      assert(isToday(component.instance().getCurrentDate()));
     });
 
-    it('should should reset date after clearing input', done => {
+    it('should should reset date after clearing input', () => {
       const callback = sinon.spy();
-      const component = mount(<DateInput wait={0} onChange={callback} />);
+      const component = mount(<DateInput onChange={callback} />);
       const input = component.find('input');
-      input.simulate('input', { target: { value: '' } });
-      setTimeout(() => {
-        assert(isToday(component.instance().getCurrentDate()));
-        assert(callback.calledWith('', false));
-        done();
-      });
+      input.simulate('change', { target: { value: '' } });
+      assert(isToday(component.instance().getCurrentDate()));
+      assert(callback.calledWith('', false));
     });
 
-    it('should should call onChange after entering an invalid date string', done => {
+    it('should should call onChange after entering an invalid date string', () => {
       const callback = sinon.spy();
-      const component = mount(<DateInput wait={0} onChange={callback} />);
+      const component = mount(<DateInput onChange={callback} />);
       const input = component.find('input');
-      input.simulate('input', { target: { value: 'Grape Jelly' } });
-      setTimeout(() => {
-        assert(callback.calledWith('Grape Jelly', false));
-        done();
-      });
+      input.simulate('change', { target: { value: 'Grape Jelly' } });
+      assert(callback.calledWith('Grape Jelly', false));
     });
   });
 
   context('date picker', () => {
     const callback = sinon.spy();
-    const component = mount(<DateInput wait={0} onChange={callback} showOnFocus />);
+    const component = mount(<DateInput onChange={callback} showOnFocus />);
     const toggle = component.find('InputGroupButton');
     toggle.simulate('click');