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

@@ -5,3 +5,4 @@ node_modules/
 .DS_Store
 .npm-debug.log
 .project
+yarn*

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'));
       }
     });
   }

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 />
   });