From 91f1ae4f5543696aeb951fd88e33784e3b2039d2 Mon Sep 17 00:00:00 2001
From: Joe Lencioni <joe.lencioni@airbnb.com>
Date: Wed, 1 Feb 2017 15:30:39 -0800
Subject: [PATCH] Avoid rendering DayPicker when not visible

I was looking at some markup that we generate during server rendering
and noticed a whole bunch of markup (~32 KiB of HTML) belonging to
react-dates for elements that were not visible. With a couple of minor
modifications, we can avoid rendering most of these nodes until the
input is actually focused and we want to open the DayPicker.

This should give us a nice performance boost for both server-rendered
pages with this component and again on the client when rendering
happens.
---
 css/DateRangePicker.scss                  |  8 ---
 css/SingleDatePicker.scss                 |  8 ---
 src/components/DateRangePicker.jsx        | 39 ++++++++++-----
 src/components/SingleDatePicker.jsx       | 32 +++++++++---
 test/components/DateRangePicker_spec.jsx  | 58 +++++++++++++---------
 test/components/SingleDatePicker_spec.jsx | 59 +++++++++++------------
 6 files changed, 116 insertions(+), 88 deletions(-)

diff --git a/css/DateRangePicker.scss b/css/DateRangePicker.scss
index 3cfdaee93d..03059f8f20 100644
--- a/css/DateRangePicker.scss
+++ b/css/DateRangePicker.scss
@@ -23,14 +23,6 @@
   top: $react-dates-spacing-vertical-picker;
 }
 
-.DateRangePicker__picker--show {
-  visibility: visible;
-}
-
-.DateRangePicker__picker--invisible {
-  visibility: hidden;
-}
-
 .DateRangePicker__picker--direction-left {
     left: 0;
 }
diff --git a/css/SingleDatePicker.scss b/css/SingleDatePicker.scss
index ffcbf7aaa3..a1d4b79a0e 100644
--- a/css/SingleDatePicker.scss
+++ b/css/SingleDatePicker.scss
@@ -12,14 +12,6 @@
   top: $react-dates-spacing-vertical-picker;
 }
 
-.SingleDatePicker__picker--show {
-  visibility: visible;
-}
-
-.SingleDatePicker__picker--invisible {
-  visibility: hidden;
-}
-
 .SingleDatePicker__picker--direction-left {
   left: 0;
 }
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 5344465ed9..06cbaf5569 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -92,30 +92,32 @@ export default class DateRangePicker extends React.Component {
     return shallowCompare(this, nextProps, nextState);
   }
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.focusedInput && this.props.focusedInput && this.isOpened()) {
+      // The date picker just changed from being closed to being open.
+      this.responsivizePickerPosition();
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.responsivizePickerPosition);
   }
 
   onOutsideClick() {
-    const { focusedInput, onFocusChange } = this.props;
-    if (!focusedInput) return;
+    const { onFocusChange } = this.props;
+    if (!this.isOpened()) return;
 
     onFocusChange(null);
   }
 
   getDayPickerContainerClasses() {
     const {
-      focusedInput,
       orientation,
       withPortal,
       withFullScreenPortal,
       anchorDirection,
     } = this.props;
-    const showDatepicker = focusedInput === START_DATE || focusedInput === END_DATE;
-
     const dayPickerClassName = cx('DateRangePicker__picker', {
-      'DateRangePicker__picker--show': showDatepicker,
-      'DateRangePicker__picker--invisible': !showDatepicker,
       'DateRangePicker__picker--direction-left': anchorDirection === ANCHOR_LEFT,
       'DateRangePicker__picker--direction-right': anchorDirection === ANCHOR_RIGHT,
       'DateRangePicker__picker--horizontal': orientation === HORIZONTAL_ORIENTATION,
@@ -131,7 +133,16 @@ export default class DateRangePicker extends React.Component {
     return ReactDOM.findDOMNode(this.dayPicker);
   }
 
+  isOpened() {
+    const { focusedInput } = this.props;
+    return focusedInput === START_DATE || focusedInput === END_DATE;
+  }
+
   responsivizePickerPosition() {
+    if (!this.isOpened()) {
+      return;
+    }
+
     const { anchorDirection, horizontalMargin, withPortal, withFullScreenPortal } = this.props;
     const { dayPickerContainerStyles } = this.state;
 
@@ -154,11 +165,15 @@ export default class DateRangePicker extends React.Component {
   }
 
   maybeRenderDayPickerWithPortal() {
-    const { focusedInput, withPortal, withFullScreenPortal } = this.props;
+    const { withPortal, withFullScreenPortal } = this.props;
+
+    if (!this.isOpened()) {
+      return null;
+    }
 
     if (withPortal || withFullScreenPortal) {
       return (
-        <Portal isOpened={focusedInput !== null}>
+        <Portal isOpened>
           {this.renderDayPicker()}
         </Portal>
       );
@@ -193,7 +208,9 @@ export default class DateRangePicker extends React.Component {
     } = this.props;
     const { dayPickerContainerStyles } = this.state;
 
-    const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onOutsideClick : undefined;
+    const onOutsideClick = (!withFullScreenPortal && withPortal)
+      ? this.onOutsideClick
+      : undefined;
 
     return (
       <div
@@ -215,7 +232,7 @@ export default class DateRangePicker extends React.Component {
           endDate={endDate}
           monthFormat={monthFormat}
           withPortal={withPortal || withFullScreenPortal}
-          hidden={!focusedInput}
+          hidden={!this.isOpened()}
           initialVisibleMonth={initialVisibleMonth}
           onOutsideClick={onOutsideClick}
           navPrev={navPrev}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 4ba544ab16..3482a62682 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -101,6 +101,12 @@ export default class SingleDatePicker extends React.Component {
     this.today = moment();
   }
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.focused && this.props.focused) {
+      this.responsivizePickerPosition();
+    }
+  }
+
   /* istanbul ignore next */
   componentWillUnmount() {
     window.removeEventListener('resize', this.responsivizePickerPosition);
@@ -161,12 +167,10 @@ export default class SingleDatePicker extends React.Component {
   }
 
   getDayPickerContainerClasses() {
-    const { orientation, withPortal, withFullScreenPortal, anchorDirection, focused } = this.props;
+    const { orientation, withPortal, withFullScreenPortal, anchorDirection } = this.props;
     const { hoverDate } = this.state;
 
     const dayPickerClassName = cx('SingleDatePicker__picker', {
-      'SingleDatePicker__picker--show': focused,
-      'SingleDatePicker__picker--invisible': !focused,
       'SingleDatePicker__picker--direction-left': anchorDirection === ANCHOR_LEFT,
       'SingleDatePicker__picker--direction-right': anchorDirection === ANCHOR_RIGHT,
       'SingleDatePicker__picker--horizontal': orientation === HORIZONTAL_ORIENTATION,
@@ -194,9 +198,19 @@ export default class SingleDatePicker extends React.Component {
 
   /* istanbul ignore next */
   responsivizePickerPosition() {
-    const { anchorDirection, horizontalMargin, withPortal, withFullScreenPortal } = this.props;
+    const {
+      anchorDirection,
+      horizontalMargin,
+      withPortal,
+      withFullScreenPortal,
+      focused,
+    } = this.props;
     const { dayPickerContainerStyles } = this.state;
 
+    if (!focused) {
+      return;
+    }
+
     const isAnchoredLeft = anchorDirection === ANCHOR_LEFT;
 
     if (!withPortal && !withFullScreenPortal) {
@@ -236,9 +250,13 @@ export default class SingleDatePicker extends React.Component {
   maybeRenderDayPickerWithPortal() {
     const { focused, withPortal, withFullScreenPortal } = this.props;
 
+    if (!focused) {
+      return null;
+    }
+
     if (withPortal || withFullScreenPortal) {
       return (
-        <Portal isOpened={focused}>
+        <Portal isOpened>
           {this.renderDayPicker()}
         </Portal>
       );
@@ -278,7 +296,9 @@ export default class SingleDatePicker extends React.Component {
       selected: day => this.isSelected(day),
     };
 
-    const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;
+    const onOutsideClick = (!withFullScreenPortal && withPortal)
+      ? this.onClearFocus
+      : undefined;
 
     return (
       <div
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 8c9fcf613e..3920aa174f 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -25,69 +25,79 @@ describe('DateRangePicker', () => {
     });
 
     it('renders .DateRangePicker__picker class', () => {
-      const wrapper = shallow(<DateRangePicker />);
+      const wrapper = shallow(<DateRangePicker focusedInput={START_DATE} />);
       expect(wrapper.find('.DateRangePicker__picker')).to.have.length(1);
     });
 
     it('renders <DateRangePickerInputWithHandlers />', () => {
-      const wrapper = shallow(<DateRangePicker />);
+      const wrapper = shallow(<DateRangePicker focusedInput={START_DATE} />);
       expect(wrapper.find(DateRangePickerInputController)).to.have.length(1);
     });
 
     it('renders <DayPickerRangeController />', () => {
-      const wrapper = shallow(<DateRangePicker />);
+      const wrapper = shallow(<DateRangePicker focusedInput={START_DATE} />);
       expect(wrapper.find(DayPickerRangeController)).to.have.length(1);
     });
 
     describe('props.orientation === VERTICAL_ORIENTATION', () => {
       it('renders .DateRangePicker__picker--vertical class', () => {
-        const wrapper = shallow(<DateRangePicker orientation={VERTICAL_ORIENTATION} />);
+        const wrapper = shallow(
+          <DateRangePicker orientation={VERTICAL_ORIENTATION} focusedInput={START_DATE} />,
+        );
         expect(wrapper.find('.DateRangePicker__picker--vertical')).to.have.length(1);
       });
     });
 
     describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
       it('renders .DateRangePicker__picker--horizontal class', () => {
-        const wrapper = shallow(<DateRangePicker orientation={HORIZONTAL_ORIENTATION} />);
+        const wrapper = shallow(
+          <DateRangePicker orientation={HORIZONTAL_ORIENTATION} focusedInput={START_DATE} />,
+        );
         expect(wrapper.find('.DateRangePicker__picker--horizontal')).to.have.length(1);
       });
 
       it('renders <DayPickerRangeController /> with props.numberOfMonths === 2', () => {
-        const wrapper = shallow(<DateRangePicker orientation={HORIZONTAL_ORIENTATION} />);
+        const wrapper = shallow(
+          <DateRangePicker orientation={HORIZONTAL_ORIENTATION} focusedInput={START_DATE} />,
+        );
         expect(wrapper.find(DayPickerRangeController).props().numberOfMonths).to.equal(2);
       });
     });
 
     describe('props.anchorDirection === ANCHOR_LEFT', () => {
       it('renders .DateRangePicker__picker--direction-left class', () => {
-        const wrapper = shallow(<DateRangePicker anchorDirection={ANCHOR_LEFT} />);
+        const wrapper = shallow(
+          <DateRangePicker anchorDirection={ANCHOR_LEFT} focusedInput={START_DATE} />,
+        );
         expect(wrapper.find('.DateRangePicker__picker--direction-left')).to.have.length(1);
       });
     });
 
     describe('props.orientation === ANCHOR_RIGHT', () => {
       it('renders .DateRangePicker__picker--direction-right class', () => {
-        const wrapper = shallow(<DateRangePicker anchorDirection={ANCHOR_RIGHT} />);
+        const wrapper = shallow(
+          <DateRangePicker anchorDirection={ANCHOR_RIGHT} focusedInput={START_DATE} />,
+        );
         expect(wrapper.find('.DateRangePicker__picker--direction-right')).to.have.length(1);
       });
     });
 
     describe('props.withPortal is truthy', () => {
       it('renders .DateRangePicker__picker--portal class', () => {
-        const wrapper = shallow(<DateRangePicker withPortal />);
+        const wrapper = shallow(<DateRangePicker withPortal focusedInput={START_DATE} />);
         expect(wrapper.find('.DateRangePicker__picker--portal')).to.have.length(1);
       });
 
       describe('<Portal />', () => {
         it('is rendered', () => {
-          const wrapper = shallow(<DateRangePicker withPortal />);
+          const wrapper = shallow(<DateRangePicker withPortal focusedInput={START_DATE} />);
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
-        it('isOpened prop is false if props.focusedInput === null', () => {
+        it('is not rendered if props.focusedInput === null', () => {
           const wrapper =
             shallow(<DateRangePicker focusedInput={null} withPortal />);
-          expect(wrapper.find(Portal).props().isOpened).to.equal(false);
+          expect(wrapper.find(Portal)).to.have.length(0);
         });
 
         it('isOpened prop is true if props.focusedInput !== null', () => {
@@ -99,30 +109,32 @@ describe('DateRangePicker', () => {
 
     describe('props.withFullScreenPortal is truthy', () => {
       it('renders .DateRangePicker__picker--portal class', () => {
-        const wrapper = shallow(<DateRangePicker withFullScreenPortal />);
+        const wrapper = shallow(<DateRangePicker withFullScreenPortal focusedInput={START_DATE} />);
         expect(wrapper.find('.DateRangePicker__picker--portal')).to.have.length(1);
       });
 
       it('renders .DateRangePicker__picker--full-screen-portal class', () => {
-        const wrapper = shallow(<DateRangePicker withFullScreenPortal />);
+        const wrapper = shallow(<DateRangePicker withFullScreenPortal focusedInput={START_DATE} />);
         expect(wrapper.find('.DateRangePicker__picker--full-screen-portal')).to.have.length(1);
       });
 
-      it('renders .DateRangePicker__close class', () => {
+      it('does not render <DayPickerRangeController>', () => {
         const wrapper = shallow(<DateRangePicker withFullScreenPortal />);
-        expect(wrapper.find('.DateRangePicker__close')).to.have.length(1);
+        expect(wrapper.find(DayPickerRangeController)).to.have.length(0);
       });
 
       describe('<Portal />', () => {
         it('is rendered', () => {
-          const wrapper = shallow(<DateRangePicker withFullScreenPortal />);
+          const wrapper = shallow(
+            <DateRangePicker withFullScreenPortal focusedInput={START_DATE} />,
+          );
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
-        it('isOpened prop is false if props.focusedInput === null', () => {
+        it('is not rendered if props.focusedInput === null', () => {
           const wrapper =
             shallow(<DateRangePicker focusedInput={null} withFullScreenPortal />);
-          expect(wrapper.find(Portal).props().isOpened).to.equal(false);
+          expect(wrapper.find(Portal)).to.have.length(0);
         });
 
         it('isOpened prop is true if props.focusedInput !== null', () => {
@@ -134,14 +146,14 @@ describe('DateRangePicker', () => {
     });
 
     describe('props.focusedInput', () => {
-      it('shows datepicker if props.focusedInput != null', () => {
+      it('renders <DayPickerRangeController> if props.focusedInput != null', () => {
         const wrapper = shallow(<DateRangePicker focusedInput={START_DATE} />);
-        expect(wrapper.find('.DateRangePicker__picker--show')).to.have.length(1);
+        expect(wrapper.find(DayPickerRangeController)).to.have.length(1);
       });
 
-      it('hides datepicker if props.focusedInput = null', () => {
+      it('does not render <DayPickerRangeController> if props.focusedInput = null', () => {
         const wrapper = shallow(<DateRangePicker focusedInput={null} />);
-        expect(wrapper.find('.DateRangePicker__picker--invisible')).to.have.length(1);
+        expect(wrapper.find(DayPickerRangeController)).to.have.length(0);
       });
     });
   });
diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
index 76206ebd32..2e7c56059d 100644
--- a/test/components/SingleDatePicker_spec.jsx
+++ b/test/components/SingleDatePicker_spec.jsx
@@ -33,34 +33,29 @@ describe('SingleDatePicker', () => {
     });
 
     describe('DayPicker', () => {
-      it('renders a DayPicker', () => {
-        const wrapper = shallow(<SingleDatePicker id="date" />);
-        expect(wrapper.find(DayPicker)).to.have.lengthOf(1);
+      describe('props.focused === true', () => {
+        it('renders a <DayPicker>', () => {
+          const wrapper = shallow(<SingleDatePicker id="date" focused />);
+          expect(wrapper.find(DayPicker)).to.have.lengthOf(1);
+        });
       });
 
       it('has .SingleDatePicker__picker class', () => {
-        const wrapper = shallow(<SingleDatePicker id="date" />);
+        const wrapper = shallow(<SingleDatePicker focused id="date" />);
         expect(wrapper.find('.SingleDatePicker__picker')).to.have.lengthOf(1);
       });
 
-      describe('props.focused === true', () => {
-        it('has .SingleDatePicker__picker--show class', () => {
-          const wrapper = shallow(<SingleDatePicker id="date" focused />);
-          expect(wrapper.find('.SingleDatePicker__picker--show')).to.have.lengthOf(1);
-        });
-      });
-
       describe('props.focused === false', () => {
-        it('has .SingleDatePicker__picker--invisible class', () => {
+        it('does not render a <DayPicker>', () => {
           const wrapper = shallow(<SingleDatePicker id="date" focused={false} />);
-          expect(wrapper.find('.SingleDatePicker__picker--invisible')).to.have.lengthOf(1);
+          expect(wrapper.find(DayPicker)).to.have.lengthOf(0);
         });
       });
 
       describe('props.orientation === HORIZONTAL_ORIENTATION', () => {
         it('has .SingleDatePicker__picker--horizontal class', () => {
           const wrapper =
-            shallow(<SingleDatePicker id="date" orientation={HORIZONTAL_ORIENTATION} />);
+            shallow(<SingleDatePicker id="date" focused orientation={HORIZONTAL_ORIENTATION} />);
           expect(wrapper.find('.SingleDatePicker__picker--horizontal')).to.have.lengthOf(1);
         });
       });
@@ -68,21 +63,21 @@ describe('SingleDatePicker', () => {
       describe('props.orientation === VERTICAL_ORIENTATION', () => {
         it('has .SingleDatePicker__picker--vertical class', () => {
           const wrapper =
-            shallow(<SingleDatePicker id="date" orientation={VERTICAL_ORIENTATION} />);
+            shallow(<SingleDatePicker id="date" focused orientation={VERTICAL_ORIENTATION} />);
           expect(wrapper.find('.SingleDatePicker__picker--vertical')).to.have.lengthOf(1);
         });
       });
 
       describe('props.anchorDirection === ANCHOR_LEFT', () => {
         it('renders .SingleDatePicker__picker--direction-left class', () => {
-          const wrapper = shallow(<SingleDatePicker anchorDirection={ANCHOR_LEFT} />);
+          const wrapper = shallow(<SingleDatePicker focused anchorDirection={ANCHOR_LEFT} />);
           expect(wrapper.find('.SingleDatePicker__picker--direction-left')).to.have.length(1);
         });
       });
 
       describe('props.orientation === ANCHOR_RIGHT', () => {
         it('renders .SingleDatePicker__picker--direction-right class', () => {
-          const wrapper = shallow(<SingleDatePicker anchorDirection={ANCHOR_RIGHT} />);
+          const wrapper = shallow(<SingleDatePicker focused anchorDirection={ANCHOR_RIGHT} />);
           expect(wrapper.find('.SingleDatePicker__picker--direction-right')).to.have.length(1);
         });
       });
@@ -90,7 +85,7 @@ describe('SingleDatePicker', () => {
       describe('a valid date is hovered', () => {
         it('has .SingleDatePicker__picker--valid-date-hovered class', () => {
           const wrapper =
-            shallow(<SingleDatePicker id="date" orientation={VERTICAL_ORIENTATION} />);
+            shallow(<SingleDatePicker focused id="date" orientation={VERTICAL_ORIENTATION} />);
           wrapper.setState({
             hoverDate: moment(),
           });
@@ -101,24 +96,24 @@ describe('SingleDatePicker', () => {
 
     describe('props.withPortal is truthy', () => {
       it('renders .SingleDatePicker__picker--portal class', () => {
-        const wrapper = shallow(<SingleDatePicker withPortal />);
+        const wrapper = shallow(<SingleDatePicker focused withPortal />);
         expect(wrapper.find('.SingleDatePicker__picker--portal')).to.have.length(1);
       });
 
       describe('<Portal />', () => {
         it('is rendered', () => {
-          const wrapper = shallow(<SingleDatePicker withPortal />);
+          const wrapper = shallow(<SingleDatePicker focused withPortal />);
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
-        it('isOpened prop is false if props.focused is falsey', () => {
+        it('is not rendered if props.focused is falsey', () => {
           const wrapper =
-            shallow(<SingleDatePicker focusedInput={null} withPortal />);
-          expect(wrapper.find(Portal).props().isOpened).to.equal(false);
+            shallow(<SingleDatePicker withPortal />);
+          expect(wrapper.find(Portal)).to.have.length(0);
         });
 
         it('isOpened prop is true if props.focused is true', () => {
-          const wrapper = shallow(<SingleDatePicker withPortal focused />);
+          const wrapper = shallow(<SingleDatePicker focused withPortal />);
           expect(wrapper.find(Portal).props().isOpened).to.equal(true);
         });
       });
@@ -126,35 +121,35 @@ describe('SingleDatePicker', () => {
 
     describe('props.withFullScreenPortal is truthy', () => {
       it('renders .SingleDatePicker__picker--portal class', () => {
-        const wrapper = shallow(<SingleDatePicker withFullScreenPortal />);
+        const wrapper = shallow(<SingleDatePicker focused withFullScreenPortal />);
         expect(wrapper.find('.SingleDatePicker__picker--portal')).to.have.length(1);
       });
 
       it('renders .SingleDatePicker__picker--full-screen-portal class', () => {
-        const wrapper = shallow(<SingleDatePicker withFullScreenPortal />);
+        const wrapper = shallow(<SingleDatePicker focused withFullScreenPortal />);
         expect(wrapper.find('.SingleDatePicker__picker--full-screen-portal')).to.have.length(1);
       });
 
       it('renders .SingleDatePicker__close class', () => {
-        const wrapper = shallow(<SingleDatePicker withFullScreenPortal />);
+        const wrapper = shallow(<SingleDatePicker focused withFullScreenPortal />);
         expect(wrapper.find('.SingleDatePicker__close')).to.have.length(1);
       });
 
       describe('<Portal />', () => {
         it('is rendered', () => {
-          const wrapper = shallow(<SingleDatePicker withFullScreenPortal />);
+          const wrapper = shallow(<SingleDatePicker focused withFullScreenPortal />);
           expect(wrapper.find(Portal)).to.have.length(1);
         });
 
-        it('isOpened prop is false if props.focused is falsey', () => {
+        it('is not rendered when props.focused is falsey', () => {
           const wrapper =
-            shallow(<SingleDatePicker focusedInput={null} withFullScreenPortal />);
-          expect(wrapper.find(Portal).props().isOpened).to.equal(false);
+            shallow(<SingleDatePicker withFullScreenPortal />);
+          expect(wrapper.find(Portal)).to.have.length(0);
         });
 
         it('isOpened prop is true if props.focused is truthy', () => {
           const wrapper =
-            shallow(<SingleDatePicker withFullScreenPortal focused />);
+            shallow(<SingleDatePicker focused withFullScreenPortal />);
           expect(wrapper.find(Portal).props().isOpened).to.equal(true);
         });
       });