Adjusts DayPicker height and initialize width right before the DayPic…

…ker is opened
react-dates · Nov 30, 2016 · 4c66b0d · 4c66b0d
1 parent b904455
commit 4c66b0d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 17 deletions.
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -96,16 +96,22 @@ export default class DayPicker extends React.Component {
   componentDidMount() {
     if (this.isHorizontal()) {
       this.adjustDayPickerHeight();
-      this.initializeDayPickerWidth();
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!this.hasSetInitialVisibleMonth && !nextProps.hidden) {
-      this.hasSetInitialVisibleMonth = true;
-      this.setState({
-        currentMonth: nextProps.initialVisibleMonth(),
-      });
+    if (!nextProps.hidden) {
+      if (!this.hasSetInitialVisibleMonth) {
+        this.hasSetInitialVisibleMonth = true;
+        this.setState({
+          currentMonth: nextProps.initialVisibleMonth(),
+        });
+      }
+
+      if (!this.dayPickerWidth && this.isHorizontal()) {
+        this.initializeDayPickerWidth();
+        this.adjustDayPickerHeight();
+      }
     }
   }
 

diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
@@ -21,7 +21,7 @@ const datesList = [
 ];
 
 const TestInput = props => (
-  <div style={{ marginTop: 16 }} >
+  <div style={{ marginTop: 16 }}>
     <input
       {...props}
       type="text"
@@ -35,33 +35,68 @@ const TestInput = props => (
     />
   </div>
 );
-const TestPrevIcon = props => (
-  <span style={{
+
+const TestPrevIcon = () => (
+  <span
+    style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
-      padding: '3px'
+      padding: '3px',
     }}
   >
     Prev
   </span>
 );
-const TestNextIcon = props => (
-  <span style={{
-    border: '1px solid #dce0e0',
-    backgroundColor: '#fff',
-    color: '#484848',
-    padding: '3px'
+
+const TestNextIcon = () => (
+  <span
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
     }}
   >
     Next
   </span>
 );
 
+class TestWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showDatePicker: false,
+    };
+  }
+
+  render() {
+    const { showDatePicker } = this.state;
+    const display = showDatePicker ? 'block' : 'none';
+    return (
+      <div>
+        <button
+          type="button"
+          onClick={() => this.setState({ showDatePicker: !showDatePicker })}
+        >
+          Show me!
+        </button>
+
+        <div style={{ display }}>
+          <DateRangePickerWrapper />
+        </div>
+      </div>
+    );
+  }
+}
+
 storiesOf('DateRangePicker', module)
   .addWithInfo('default', () => (
     <DateRangePickerWrapper />
   ))
+  .addWithInfo('hidden with display: none', () => (
+    <TestWrapper />
+  ))
   .addWithInfo('as part of a form', () => (
     <div>
       <DateRangePickerWrapper />
@@ -161,7 +196,7 @@ storiesOf('DateRangePicker', module)
   ))
   .addWithInfo('allows all days', () => (
     <DateRangePickerWrapper
-      isOutsideRange={day => false}
+      isOutsideRange={() => false}
     />
   ))
   .addWithInfo('allows next two weeks only', () => (