changing the api and updating examples

all the date range picker options now go in the `initialSettings` prop

Author: skratchdot

README.md

@@ -57,7 +57,7 @@ class MyComponent {
 For in depth documentation, see the original
 [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) project page.
 
-You can pass all the same props as the original plugin:
+You can pass all the settings from the original plugin to the `initialSettings` prop:
 
 - **<input>, alwaysShowCalendars, applyButtonClasses, applyClass,
   autoApply, autoUpdateInput, buttonClasses, cancelButtonClasses, cancelClass,
@@ -67,17 +67,57 @@ You can pass all the same props as the original plugin:
   showWeekNumbers, singleDatePicker, startDate, template, timePicker,
   timePicker24Hour, timePickerIncrement, timePickerSeconds**
 
-You can listen to the following 7 events:
+You can listen to the following 8 events:
 
-- **onShow**: thrown when the widget is shown
-- **onHide**: thrown when the widget is hidden
-- **onShowCalendar**: thrown when the calendar is shown
-- **onHideCalendar**: thrown when the calendar is hidden
-- **onApply**: thrown when the apply button is clicked
-- **onCancel**: thrown when the cancel button is clicked
-- **onEvent**: thrown when any of the 4 events above are triggered
+- **onShow**: `callback(event, picker)` thrown when the widget is shown
+- **onHide**: `callback(event, picker)` thrown when the widget is hidden
+- **onShowCalendar**: `callback(event, picker)` thrown when the calendar is shown
+- **onHideCalendar**: `callback(event, picker)` thrown when the calendar is hidden
+- **onApply**: `callback(event, picker)` thrown when the apply button is clicked
+- **onCancel**: `callback(event, picker)` thrown when the cancel button is clicked
+- **onEvent**: `callback(event, picker)` thrown when any of the 6 events above are triggered
+- **onCallback**: `callback(start, end, label)` thrown when the start/end dates change
 
-All 7 of the events above should take a handler that is passed 2 arguments: **event** and **picker**
+You MUST pass a single child element to the `<DateRangePicker />` component.
+
+NOTE: This component should be used as an [Uncontrolled Component](https://reactjs.org/docs/uncontrolled-components.html). If you try
+to control the value of your child `<input />`, the you will probably encounter issues.
+
+There are 2 methods from the upstream lib that can be called: `setStartDate` and `setEndDate`, but you need to use refs when doing so.
+Please view the storybook for an example of this.
+
+### Examples
+
+For more usage examples, please view the storybook:
+https://projects.skratchdot.com/react-bootstrap-daterangepicker/
+
+#### Simple button example
+
+```javascript
+<DateRangePicker>
+  <button type="button" class="btn btn-primary">
+    click to open
+  </button>
+</DateRangePicker>
+```
+
+#### Simple input example
+
+```javascript
+<DateRangePicker>
+  <input type="text" class="form-control" />
+</DateRangePicker>
+```
+
+#### Initialize with a startDate and endDate
+
+```javascript
+<DateRangePicker
+  initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}
+>
+  <input type="text" class="form-control" />
+</DateRangePicker>
+```
 
 #### Example event handler:
 
@@ -86,30 +126,18 @@ class SomeReactComponent extends React.Component {
   handleEvent(event, picker) {
     console.log(picker.startDate);
   }
+  handleCallback(start, end, label) {
+    console.log(start, end, label);
+  }
   render() {
-    return <DateRangePicker onEvent={this.handleEvent} />;
+    return (
+      <DateRangePicker onEvent={this.handleEvent} onCallback={this.handleCallback}>
+        <input />
+      </DateRangePicker>;
   }
 }
 ```
 
-There are 2 additional props you can pass, that are not part of the wrapped
-[bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) project.
-Every `<DateRangePicker />` element emits a div element for the wrapper project to initialize itself against.
-
-The emitted div looks like this by default:
-
-```html
-<div
-  class="react-bootstrap-daterangepicker-container"
-  style="display:inline-block"
-></div>
-```
-
-The 2 props you can pass to modify this behavior are:
-
-- **containerStyles [object]**: the styles of the container `<div />` (default: `{ display: 'inline-block' }`)
-- **containerClass [string]**: the class of the container `<div />` (default: `'react-bootstrap-daterangepicker-container'`)
-
 ## Release Notes
 
 Release notes can be found in the

dist/bundle.js

@@ -111,12 +111,6 @@ function _createSuper(Derived) {
   };
 }
 
-/* generated by scripts/build-options.js */
-
-var getOptions = (function () {
-  return ['<input>', 'alwaysShowCalendars', 'applyButtonClasses', 'applyClass', 'autoApply', 'autoUpdateInput', 'buttonClasses', 'cancelButtonClasses', 'cancelClass', 'dateLimit', 'drops', 'endDate', 'isCustomDate', 'isInvalidDate', 'linkedCalendars', 'locale', 'maxDate', 'maxSpan', 'maxYear', 'minDate', 'minYear', 'moment', 'opens', 'parentEl', 'ranges', 'showCustomRangeLabel', 'showDropdowns', 'showISOWeekNumbers', 'showWeekNumbers', 'singleDatePicker', 'startDate', 'template', 'timePicker', 'timePicker24Hour', 'timePickerIncrement', 'timePickerSeconds'];
-});
-
 var DateRangePicker = /*#__PURE__*/function (_Component) {
   _inherits(DateRangePicker, _Component);
 
@@ -128,8 +122,8 @@ var DateRangePicker = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, DateRangePicker);
 
     _this = _super.call(this, props);
+    _this.ref = null;
     _this.$picker = null;
-    _this.options = getOptions();
     return _this;
   }
 
@@ -138,35 +132,32 @@ var DateRangePicker = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _this2 = this;
 
-      // initialize
-      this.$picker.daterangepicker(this.getOptionsFromProps()); // attach event listeners
+      // initialize daterangepicker
+      this.$picker = $(this.ref);
+      this.$picker.daterangepicker(this.props.initialSettings, this.handleCallback.bind(this)); // attach event listeners
 
       ['Show', 'Hide', 'ShowCalendar', 'HideCalendar', 'Apply', 'Cancel'].forEach(function (event) {
         var lcase = event.toLowerCase();
 
         _this2.$picker.on(lcase + '.daterangepicker', _this2.makeEventHandler('on' + event));
       });
     }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var currentOptions = this.getOptionsFromProps();
-      var nextOptions = this.getOptionsFromProps(nextProps);
-      var changedOptions = {};
-      this.options.forEach(function (option) {
-        if (currentOptions[option] !== nextOptions[option]) {
-          changedOptions[option] = nextOptions[option];
-        }
-      });
-      this.setOptionsFromProps(changedOptions);
-    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.$picker && this.$picker.data('daterangepicker')) {
+      if (this.$picker && this.$picker.data && this.$picker.data('daterangepicker')) {
         this.$picker.data('daterangepicker').remove();
       }
     }
+  }, {
+    key: "handleCallback",
+    value: function handleCallback() {
+      if (typeof this.props.onCallback === 'function') {
+        var _this$props;
+
+        (_this$props = this.props).onCallback.apply(_this$props, arguments);
+      }
+    }
   }, {
     key: "makeEventHandler",
     value: function makeEventHandler(eventType) {
@@ -184,102 +175,82 @@ var DateRangePicker = /*#__PURE__*/function (_Component) {
       };
     }
   }, {
-    key: "getOptionsFromProps",
-    value: function getOptionsFromProps(props) {
-      var options;
-      props = props || this.props;
-      this.options.forEach(function (option) {
-        if (Object.prototype.hasOwnProperty.call(props, option)) {
-          options = options || {};
-          options[option] = props[option];
-        }
-      });
-      return options || {};
+    key: "setStartDate",
+    value: function setStartDate(dateOrString) {
+      this.$picker.data('daterangepicker').setStartDate(dateOrString);
     }
   }, {
-    key: "setOptionsFromProps",
-    value: function setOptionsFromProps(currentOptions) {
-      var _this4 = this;
-
-      var keys = Object.keys(currentOptions);
-      keys.forEach(function (key) {
-        if (key === 'startDate') {
-          _this4.$picker.data('daterangepicker').setStartDate(currentOptions[key]);
-        } else if (key === 'endDate') {
-          _this4.$picker.data('daterangepicker').setEndDate(currentOptions[key]);
-        } else {
-          _this4.$picker.data('daterangepicker')[key] = currentOptions[key];
-        }
-      });
+    key: "setEndDate",
+    value: function setEndDate(dateOrString) {
+      this.$picker.data('daterangepicker').setEndDate(dateOrString);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          containerStyles = _this$props.containerStyles,
-          containerClass = _this$props.containerClass;
-      return /*#__PURE__*/React__default.createElement("div", {
-        ref: function ref(picker) {
-          _this5.$picker = $(picker);
-        },
-        className: containerClass,
-        style: containerStyles
-      }, children);
+      var _this4 = this;
+
+      var childElement = React__default.Children.only(this.props.children);
+      return /*#__PURE__*/React__default.cloneElement(childElement, {
+        ref: function ref(el) {
+          return _this4.ref = el;
+        }
+      });
     }
   }]);
 
   return DateRangePicker;
 }(React.Component);
-DateRangePicker.defaultProps = {
-  containerClass: 'react-bootstrap-daterangepicker-container',
-  containerStyles: {
-    display: 'inline-block'
-  }
-};
 DateRangePicker.propTypes = {
-  '<input>': PropTypes.any,
-  alwaysShowCalendars: PropTypes.bool,
-  applyClass: PropTypes.string,
-  autoApply: PropTypes.bool,
-  autoUpdateInput: PropTypes.bool,
-  buttonClasses: PropTypes.array,
-  cancelClass: PropTypes.string,
+  initialSettings: PropTypes.shape({
+    '<input>': PropTypes.any,
+    alwaysShowCalendars: PropTypes.bool,
+    applyButtonClasses: PropTypes.array,
+    applyClass: PropTypes.string,
+    autoApply: PropTypes.bool,
+    autoUpdateInput: PropTypes.bool,
+    buttonClasses: PropTypes.array,
+    cancelButtonClasses: PropTypes.array,
+    cancelClass: PropTypes.string,
+    dateLimit: PropTypes.object,
+    drops: PropTypes.oneOf(['down', 'up']),
+    endDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    isCustomDate: PropTypes.func,
+    isInvalidDate: PropTypes.func,
+    linkedCalendars: PropTypes.bool,
+    locale: PropTypes.object,
+    maxDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    maxSpan: PropTypes.any,
+    maxYear: PropTypes.any,
+    minDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    minYear: PropTypes.any,
+    moment: PropTypes.any,
+    opens: PropTypes.oneOf(['left', 'right', 'center']),
+    parentEl: PropTypes.any,
+    ranges: PropTypes.object,
+    showCustomRangeLabel: PropTypes.bool,
+    showDropdowns: PropTypes.bool,
+    showISOWeekNumbers: PropTypes.bool,
+    showWeekNumbers: PropTypes.bool,
+    singleDatePicker: PropTypes.bool,
+    startDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    template: PropTypes.any,
+    timePicker: PropTypes.bool,
+    timePicker24Hour: PropTypes.bool,
+    timePickerIncrement: PropTypes.number,
+    timePickerSeconds: PropTypes.bool
+  }),
+  // you must pass a single element here
   children: PropTypes.node.isRequired,
-  containerClass: PropTypes.string,
-  containerStyles: PropTypes.object,
-  dateLimit: PropTypes.object,
-  drops: PropTypes.oneOf(['down', 'up']),
-  endDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  isCustomDate: PropTypes.func,
-  isInvalidDate: PropTypes.func,
-  linkedCalendars: PropTypes.bool,
-  locale: PropTypes.object,
-  maxDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  minDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  // events supported by the upstream lib
   onApply: PropTypes.func,
   onCancel: PropTypes.func,
-  onEvent: PropTypes.func,
   onHide: PropTypes.func,
   onHideCalendar: PropTypes.func,
   onShow: PropTypes.func,
   onShowCalendar: PropTypes.func,
-  opens: PropTypes.oneOf(['left', 'right', 'center']),
-  parentEl: PropTypes.any,
-  ranges: PropTypes.object,
-  showCustomRangeLabel: PropTypes.bool,
-  showDropdowns: PropTypes.bool,
-  showISOWeekNumbers: PropTypes.bool,
-  showWeekNumbers: PropTypes.bool,
-  singleDatePicker: PropTypes.bool,
-  startDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  template: PropTypes.any,
-  timePicker: PropTypes.bool,
-  timePickerIncrement: PropTypes.number,
-  timePicker24Hour: PropTypes.bool,
-  timePickerSeconds: PropTypes.bool
+  // custom events in this lib
+  onEvent: PropTypes.func,
+  onCallback: PropTypes.func
 };
 
 exports.DateRangePicker = DateRangePicker;

docs/iframe.html

@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.8269748cbacfd65a79c3.bundle.js"></script><script src="vendors~main.8269748cbacfd65a79c3.bundle.js"></script><script src="main.8269748cbacfd65a79c3.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.df7d7ea10ee787c1a6fb.bundle.js"></script><script src="vendors~main.df7d7ea10ee787c1a6fb.bundle.js"></script><script src="main.df7d7ea10ee787c1a6fb.bundle.js"></script></body></html>

docs/main.8269748cbacfd65a79c3.bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-daterangepicker",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "description": "A date/time picker for react (using bootstrap). This is a react port of: https://github.com/dangrossman/bootstrap-daterangepicker",
   "main": "./dist/bundle.js",
   "files": [