react-bootstrap-daterangepicker - npm Package Compare versions

Comparing version 5.0.1 to 6.0.0

dist/bundle.js

@@ -114,8 +114,2 @@ 'use strict';
 
-/* 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) {
@@ -132,4 +126,4 @@ _inherits(DateRangePicker, _Component);
     _this = _super.call(this, props);
+    _this.ref = null;
     _this.$picker = null;
-    _this.options = getOptions();
     return _this;
@@ -143,4 +137,5 @@ }
 
-      // 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
 
@@ -154,18 +149,5 @@ ['Show', 'Hide', 'ShowCalendar', 'HideCalendar', 'Apply', 'Cancel'].forEach(function (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();
@@ -175,2 +157,11 @@ }
   }, {
+    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",
@@ -192,29 +183,10 @@ value: function makeEventHandler(eventType) {
   }, {
-    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);
     }
@@ -224,15 +196,10 @@ }, {
     value: function render() {
-      var _this5 = this;
+      var _this4 = 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 childElement = React__default.Children.only(this.props.children);
+      return /*#__PURE__*/React__default.cloneElement(childElement, {
+        ref: function ref(el) {
+          return _this4.ref = el;
+        }
+      });
     }
@@ -243,31 +210,46 @@ }]);
 }(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,
@@ -277,16 +259,5 @@ onHideCalendar: 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
 };
@@ -293,0 +264,0 @@

package.json

 {
   "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",
@@ -5,0 +5,0 @@ "main": "./dist/bundle.js",

README.md

@@ -60,3 +60,3 @@ # react-bootstrap-daterangepicker
 
-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:
 
@@ -71,14 +71,54 @@ - **<input>, alwaysShowCalendars, applyButtonClasses, applyClass,
 
-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:
@@ -91,4 +131,10 @@
   }
+  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>;
   }
@@ -98,20 +144,2 @@ }
 
-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
@@ -118,0 +146,0 @@

No alert changes

Improved metrics

Number of lines in readme file

165

increased by20.44%

Worsened metrics

Total package byte prevSize

42014

decreased by-1.59%

Lines of code

220

decreased by-11.65%

No dependency changes