From 78750602976f3bf1a9b399d6b0eecbfa4a4d5db5 Mon Sep 17 00:00:00 2001
From: Rehan Umar <rehanumardogar@gmail.com>
Date: Thu, 16 Jul 2020 17:44:17 +0500
Subject: [PATCH] Re rendering DOM node with updated state data (#216)

Context:  `this.$picker.daterangepicker` in ComponentDidMount was creating calendar on Body element and `bootstrap-daterangepicker` dependency does not update DOM implicity based on  state data changes like ranges and other. (good OLD JQuery days :D). This was causing the behaviour where other than start and end date, all other props where not updating the calendar.

Fix: This PR is making sure that we will re-render DOM node associated with calendar again, once we witness state data changes (except start and end date) through `setOptionsFromProps`.
---
 .gitignore       |  1 +
 src/index.js     |  1 +
 stories/index.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/.gitignore b/.gitignore
index 4c65070..a880174 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ node_modules/
 .DS_Store
 .npm-debug.log
 .project
+yarn*
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7b45c7f..78aeaa5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -72,6 +72,7 @@ export class DateRangePicker extends Component {
         this.$picker.data('daterangepicker').setEndDate(currentOptions[key]);
       } else {
         this.$picker.data('daterangepicker')[key] = currentOptions[key];
+        this.$picker.daterangepicker(this.$picker.data('daterangepicker'));
       }
     });
   }
diff --git a/stories/index.js b/stories/index.js
index 9fc81ee..85c5e31 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -77,4 +77,48 @@ storiesOf('DateRangePicker', module)
         <button>{buttonLabel}</button>
       </DateRangePicker>
     );
+  })
+  .add('PropsUpdate', () => {
+    class StoryComp extends React.Component {
+      constructor( props ){
+        super(props);
+        this.state = {
+          ranges: {
+            'ics': [moment('2020-01-02T10:14:33Z'), moment('2020-30-02T10:14:33Z')]
+          },
+        }
+
+        this.onValueChange = this.onValueChange.bind(this);
+      }
+      onValueChange () {
+        setTimeout( () => {
+          this.setState({
+            ranges: {
+              'Electronics': [moment('2020-01-02T10:14:33Z'), moment('2020-30-02T10:14:33Z')]
+            }
+          })
+        }, 1000);
+      }
+      render () {
+        const buttonLabel = text('label', 'click to open');
+        return ( 
+          <div>
+            <DateRangePicker
+              onApply={action('onApply')}
+              onCancel={action('onCancel')}
+              onEvent={action('onEvent')}
+              onHide={action('onHide')}
+              onHideCalendar={action('onHideCalendar')}
+              onShow={action('onShow')}
+              onShowCalendar={action('onShowCalendar')}
+              ranges={this.state.ranges}
+            >
+              <button>{buttonLabel}</button>
+            </DateRangePicker>
+            <button onClick={this.onValueChange}>Change State</button>
+          </div>
+        );
+      }
+    }
+    return <StoryComp />
   });