Merge pull request #447 from appfolio/addDateInputOnClose

Add date input on close

.storybook/config.js

@@ -32,7 +32,7 @@ const ThemeLink = props => {
 }
 
 const THEMES = [
-  { name: 'APM/Saffron', url: 'https://d36t0nm30n26wn.cloudfront.net/saffron/bootstrap-saffron.min.css' },
+  { name: 'APM/Saffron', url: 'https://d36t0nm30n26wn.cloudfront.net/saffron/2.6.2/bootstrap-saffron.min.css' },
   { name: 'MyCase', url: 'https://s3.amazonaws.com/com.mycaseinc.dev-share/paulus/bootstrap-mycase.min.20170628.css' },
   { name: 'APM/OPortal', url: 'https://d36t0nm30n26wn.cloudfront.net/oportal/bootstrap-oportal.min.css' },
   { name: 'Bootstrap default', url: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' },

.storybook/preview-head.html

@@ -1,4 +1,4 @@
-<link id="theme" rel="stylesheet" href="https://pa.cdn.appfolio.com/appfolio/assets/styles/saffron/bootstrap-saffron.min.css">
+<link id="theme" rel="stylesheet" href="https://pa.cdn.appfolio.com/appfolio/assets/styles/saffron/2.6.2/bootstrap-saffron.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

src/components/DateInput.js

@@ -69,6 +69,7 @@ export default class DateInput extends React.Component {
     keyboard: PropTypes.bool,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
+    onClose: PropTypes.func,
     parse: PropTypes.func,
     showOnFocus: PropTypes.bool,
     value: PropTypes.oneOfType([
@@ -112,10 +113,7 @@ export default class DateInput extends React.Component {
     this.parseInput(value);
   }
 
-  onSelect = newDate => {
-    this.setDate(newDate);
-    this.close();
-  };
+  onSelect = newDate => this.setDate(newDate, true);
 
   onKeyDown = event => {
     // Ignore arrows if closed, disabled, or modifiers are down:
@@ -159,11 +157,14 @@ export default class DateInput extends React.Component {
     return true;
   };
 
-  setDate = date => {
-    this.setState({
+  setDate = (date, close = false) => {
+    const newState = close ? {
+      value: format(date, this.props.dateFormat),
+      open: false
+    } : {
       value: format(date, this.props.dateFormat)
-    });
-    this.props.onChange(date, true);
+    };
+    this.setState(newState, () => this.props.onChange(date, true));
   };
 
   getCurrentValue = () => {
@@ -194,10 +195,7 @@ export default class DateInput extends React.Component {
   prevMonth = () => this.setDate(addMonths(this.getCurrentDate(), -1));
   prevYear = () => this.setDate(addYears(this.getCurrentDate(), -1));
   show = () => this.setState({ open: true });
-  today = () => {
-    this.setDate(new Date());
-    this.close();
-  }
+  today = () => this.setDate(new Date(), true);
   toggle = () => (this.state.open ? this.close() : this.show());
 
   setInputValue = () => {
@@ -220,8 +218,18 @@ export default class DateInput extends React.Component {
     this.setInputValue();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState) {
     this.setInputValue();
+    if (this.props.onClose && this.state.open !== prevState.open && !this.state.open) {
+      const value = this.props.value !== undefined ? this.props.value : this.state.value;
+      const date = this.props.parse(value, this.props.dateFormat);
+
+      if (date) {
+        this.props.onClose(date, true);
+      } else {
+        this.props.onClose(value, false);
+      }
+    }
   }
 
   onBlur = (e) => {
@@ -239,7 +247,7 @@ export default class DateInput extends React.Component {
 
   render() {
     const { className, dateVisible, disabled, footer, header, id, showOnFocus,
-      dateFormat, defaultValue, keyboard, onBlur, onChange, parse, value, state, ...props } = this.props;
+      dateFormat, defaultValue, keyboard, onBlur, onChange, onClose, parse, value, state, ...props } = this.props;
     const { open } = this.state;
     const date = this.getCurrentDate();
 

stories/DateInput.js

@@ -13,6 +13,7 @@ storiesOf('DateInput', module)
         readOnly={boolean('readOnly', false)}
         onBlur={action('onBlur')}
         onChange={action('onChange')}
+        onClose={action('onClose')}
       />
     </div>
   ))