react-datetime-range-picker - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.js

@@ -1,2 +0,279 @@
-// write es6 style code here
-"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+var _reactDatetime = require('react-datetime');
+
+var _reactDatetime2 = _interopRequireDefault(_reactDatetime);
+
+require('./style.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint 'react/sort-comp': off, 'react/jsx-no-bind': off */
+
+// import style
+
+
+var DatetimeRangePicker = function (_Component) {
+  _inherits(DatetimeRangePicker, _Component);
+
+  function DatetimeRangePicker(props) {
+    _classCallCheck(this, DatetimeRangePicker);
+
+    var _this = _possibleConstructorReturn(this, (DatetimeRangePicker.__proto__ || Object.getPrototypeOf(DatetimeRangePicker)).call(this, props));
+
+    _this.state = {
+      end: (0, _moment2.default)(),
+      start: (0, _moment2.default)()
+    };
+    return _this;
+  }
+
+  _createClass(DatetimeRangePicker, [{
+    key: 'getInputProps',
+    value: function getInputProps() {
+      var inputReadOnlyStyle = {
+        cursor: 'pointer',
+        backgroundColor: 'white',
+        border: '1px solid #e2e2e2'
+      };
+
+      return this.props.input ? this.props.inputProps : {
+        input: true,
+        inputProps: _extends({}, this.props.inputProps, { // merge inputProps with default
+          readOnly: true,
+          style: inputReadOnlyStyle
+        })
+      };
+    }
+  }, {
+    key: 'propsToPass',
+    value: function propsToPass() {
+      return {
+        end: this.state.end.toDate(),
+        start: this.state.start.toDate()
+      };
+    }
+  }, {
+    key: 'calcBaseProps',
+    value: function calcBaseProps() {
+      return {
+        utc: this.props.utc,
+        locale: this.props.locale,
+        input: !this.props.inline,
+        viewMode: this.props.viewMode,
+        dateFormat: this.props.dateFormat,
+        timeFormat: this.props.timeFormat,
+        closeOnTab: this.props.closeOnTab,
+        className: this.props.pickerClassName,
+        closeOnSelect: this.props.closeOnSelect
+      };
+    }
+  }, {
+    key: 'calcStartTimeProps',
+    value: function calcStartTimeProps() {
+      var baseProps = this.calcBaseProps();
+      var inputProps = this.getInputProps();
+
+      return _extends({}, baseProps, inputProps, {
+        defaultValue: this.props.startDate,
+        onBlur: this.props.onStartDateBlur,
+        onFocus: this.props.onStartDateFocus,
+        timeConstraints: this.props.startTimeConstraints
+      });
+    }
+  }, {
+    key: 'calcEndTimeProps',
+    value: function calcEndTimeProps() {
+      var baseProps = this.calcBaseProps();
+      var inputProps = this.getInputProps();
+
+      return _extends({}, baseProps, inputProps, {
+        onBlur: this.props.onEndDateBlur,
+        defaultValue: this.props.endDate,
+        onFocus: this.props.onEndDateFocus,
+        timeConstraints: this.props.endTimeConstraints
+      });
+    }
+  }, {
+    key: 'validateMinDate',
+    value: function validateMinDate(date) {
+      return this.state.start.isSameOrBefore(date, 'day');
+    }
+  }, {
+    key: 'isValidEndDate',
+    value: function isValidEndDate(date) {
+      return this.validateMinDate(date) && this.props.isValidEndDate(date);
+    }
+  }, {
+    key: 'onStartDateChange',
+    value: function onStartDateChange(date) {
+      var _this2 = this;
+
+      this.setState({ start: date }, function () {
+        _this2.props.onChange(_this2.propsToPass());
+        _this2.props.onStartDateChange(_this2.propsToPass().start);
+      });
+    }
+  }, {
+    key: 'onEndDateChange',
+    value: function onEndDateChange(date) {
+      var _this3 = this;
+
+      this.setState({ end: date }, function () {
+        _this3.props.onChange(_this3.propsToPass());
+        _this3.props.onEndDateChange(_this3.propsToPass().end);
+      });
+    }
+  }, {
+    key: 'onFocus',
+    value: function onFocus() {
+      this.props.onFocus();
+    }
+  }, {
+    key: 'onBlur',
+    value: function onBlur() {
+      this.props.onBlur(this.propsToPass());
+    }
+  }, {
+    key: 'renderDay',
+    value: function renderDay(props, currentDate) {
+      var _state = this.state,
+          start = _state.start,
+          end = _state.end;
+
+      var className = props.className,
+          rest = _objectWithoutProperties(props, ['className']);
+
+      var date = (0, _moment2.default)(props.key, 'M_D');
+
+      // style all dates in range
+      var classes = date.isBetween(start, end, 'day') ? props.className + ' in-selecting-range' : props.className;
+
+      // add rdtActive to selected startdate in enddate picker
+      classes = date.isSame(start, 'day') ? classes + ' rdtActive' : classes;
+
+      return _react2.default.createElement(
+        'td',
+        _extends({}, rest, {
+          className: classes }),
+        currentDate.date()
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var startProps = this.calcStartTimeProps();
+      var endProps = this.calcEndTimeProps();
+
+      return _react2.default.createElement(
+        'div',
+        {
+          className: this.props.className,
+          onFocus: this.onFocus.bind(this),
+          onBlur: this.onBlur.bind(this) },
+        _react2.default.createElement(_reactDatetime2.default, _extends({}, startProps, {
+          isValidDate: this.props.isValidStartDate,
+          onChange: this.onStartDateChange.bind(this),
+          renderDay: this.renderDay.bind(this) })),
+        _react2.default.createElement(_reactDatetime2.default, _extends({}, endProps, {
+          isValidDate: this.isValidEndDate.bind(this),
+          onChange: this.onEndDateChange.bind(this),
+          renderDay: this.renderDay.bind(this) }))
+      );
+    }
+  }]);
+
+  return DatetimeRangePicker;
+}(_react.Component);
+
+DatetimeRangePicker.defaultProps = {
+  utc: false,
+  locale: null,
+  input: false, // This defines whether or not to to edit date manually via input
+  inline: false, // This defines whether or not to show input field
+  className: '',
+  viewMode: 'days',
+  dateFormat: true,
+  timeFormat: true,
+  closeOnTab: true,
+  onBlur: function onBlur() {},
+  onFocus: function onFocus() {},
+  onChange: function onChange() {},
+  pickerClassName: '',
+  endDate: new Date(),
+  closeOnSelect: false,
+  inputProps: undefined,
+  startDate: new Date(),
+  onEndDateBlur: function onEndDateBlur() {},
+  endTimeConstraints: null,
+  onEndDateFocus: function onEndDateFocus() {},
+  isValidStartDate: function isValidStartDate() {
+    return true;
+  },
+  isValidEndDate: function isValidEndDate() {
+    return true;
+  },
+  onStartDateBlur: function onStartDateBlur() {},
+  onEndDateChange: function onEndDateChange() {}, // This is called after onChange
+  onStartDateFocus: function onStartDateFocus() {},
+  startTimeConstraints: null,
+  onStartDateChange: function onStartDateChange() {} // This is called after onChange
+};
+
+DatetimeRangePicker.propTypes = {
+  utc: _propTypes2.default.bool,
+  input: _propTypes2.default.bool,
+  inline: _propTypes2.default.bool,
+  onBlur: _propTypes2.default.bool,
+  onFocus: _propTypes2.default.func,
+  locale: _propTypes2.default.string,
+  onChange: _propTypes2.default.func,
+  viewMode: _propTypes2.default.string,
+  closeOnTab: _propTypes2.default.bool,
+  className: _propTypes2.default.string,
+  inputProps: _propTypes2.default.object, // eslint-disable-line
+  closeOnSelect: _propTypes2.default.bool,
+  isValidEndDate: _propTypes2.default.func,
+  onEndDateBlur: _propTypes2.default.func,
+  onEndDateFocus: _propTypes2.default.func,
+  onEndDateChange: _propTypes2.default.func,
+  onStartDateBlur: _propTypes2.default.func,
+  isValidStartDate: _propTypes2.default.func,
+  onStartDateFocus: _propTypes2.default.func,
+  onStartDateChange: _propTypes2.default.func,
+  pickerClassName: _propTypes2.default.string,
+  endDate: _propTypes2.default.instanceOf(Date),
+  endTimeConstraints: _propTypes2.default.object, // eslint-disable-line
+  startDate: _propTypes2.default.instanceOf(Date),
+  startTimeConstraints: _propTypes2.default.object, // eslint-disable-line
+  dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
+  timeFormat: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string])
+};
+
+exports.default = DatetimeRangePicker;

package.json

 {
   "name": "react-datetime-range-picker",
   "description": "Resusable date time range picker",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Samuel Amoah <[e-mail]>",
@@ -16,4 +16,8 @@ "keywords": [
     "babel-cli": "^6.24.1",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.20.0",
+    "babel-tape-runner": "^2.0.1",
+    "enzyme": "^2.9.1",
     "eslint": "^3.19.0",
@@ -24,6 +28,12 @@ "eslint-config-airbnb": "^14.1.0",
     "eslint-plugin-react": "^6.10.3",
-    "babel-tape-runner": "^2.0.1",
+    "react-addons-test-utils": "^15.6.0",
+    "react-dom": "^15.6.1",
     "tape": "^4.6.3"
   },
-  "dependencies": {},
+  "dependencies": {
+    "react": "^15.6.1",
+    "moment": "^2.18.1",
+    "prop-types": "^15.5.10",
+    "react-datetime": "^2.8.10"
+  },
   "scripts": {
@@ -30,0 +40,0 @@ "prepublish": "npm run compile",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25983

increased by1435.64%

Number of package files

9

increased by28.57%

Lines of code

831

increased by41450%

Worsened metrics

Dependency count

4

increased byInfinity%

Dev dependency count

15

increased by50%

Dependency changes

• + Addedmoment@^2.18.1

• + Addedprop-types@^15.5.10

• + Addedreact@^15.6.1

• + Addedreact-datetime@^2.8.10

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedmoment@2.30.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@3.0.04.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.018.3.119.0.0(transitive)

• + Addedreact-datetime@2.16.3(transitive)

• + Addedreact-dom@18.3.119.0.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-onclickoutside@6.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedscheduler@0.23.20.25.0(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.40(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)