From 0106a6b53c9c3eda0d233b0bb4d48b6d9b4dbbe7 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Fri, 17 Aug 2018 12:39:58 -0700
Subject: [PATCH 1/2] gt - Add onClose to DateInput (v3 branch)

---
 src/components/DateInput.js | 36 ++++++++++++++++++++++--------------
 stories/DateInput.js        |  1 +
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/DateInput.js b/src/components/DateInput.js
index 8bbcb343c..db8ff9583 100644
--- a/src/components/DateInput.js
+++ b/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();
 
diff --git a/stories/DateInput.js b/stories/DateInput.js
index 468031f8b..f1b5dd440 100644
--- a/stories/DateInput.js
+++ b/stories/DateInput.js
@@ -13,6 +13,7 @@ storiesOf('DateInput', module)
         readOnly={boolean('readOnly', false)}
         onBlur={action('onBlur')}
         onChange={action('onChange')}
+        onClose={action('onClose')}
       />
     </div>
   ))

From 884ec708381b8527a9f79878d48c9ecc70417428 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Fri, 17 Aug 2018 12:40:21 -0700
Subject: [PATCH 2/2] gt - Use Older Bootstrap for v3

---
 .storybook/config.js         | 2 +-
 .storybook/preview-head.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index 05c667356..e79e33133 100644
--- a/.storybook/config.js
+++ b/.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' },
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index f569b042a..3e711a903 100644
--- a/.storybook/preview-head.html
+++ b/.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">