- markedDates && enableTimeSelection in <CalendarPicker/>

edwardfxiao · Oct 21, 2021 · bf17794 · bf17794
1 parent 7bbcde8
commit bf17794
Show file tree

Hide file tree

Showing 21 changed files with 707 additions and 444 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,11 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   onResetDate={res => console.log(res)}
   onResetDefaultDate={res => console.log(res)}
   style={{ width: '300px', margin: '10px auto 0' }}
+  // markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`, `${todayY}-${todayM}-${todayD + 1}`]} // OPTIONAL. ['YYYY-MM-DD']
+  // defaultTimes={['10:12']} // OPTIONAL
+  // enableTimeSelection={true} // OPTIONAL
+  // handleChooseHourPick={res => console.log(res)} // OPTIONAL
+  // handleChooseMinutePick={res => console.log(res)} // OPTIONAL
 />
 
 <RangePicker
@@ -64,6 +69,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   onClear={() => console.log('onClear')}
   style={{ width: '300px', margin: '0 auto' }}
   placeholder={['Start Time', 'End Time']}
+  // markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`, `${todayY}-${todayM}-${todayD + 1}`]} // OPTIONAL. ['YYYY-MM-DD']
   showOnlyTime={false} // default is false, only select time
   ////////////////////
   // IMPORTANT DESC //

diff --git a/example/index.js b/example/index.js
@@ -30,6 +30,9 @@ CodeBlock.propTypes = {
 };
 
 const now = new Date();
+const todayY = now.getFullYear();
+const todayM = now.getMonth() + 1;
+const todayD = now.getDate();
 if (!String.prototype.padStart) {
   String.prototype.padStart = function padStart(targetLength, padString) {
     targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
@@ -83,10 +86,11 @@ const Component = () => {
               onResetDate={res => console.log(res)}
               onResetDefaultDate={res => console.log(res)}
               style={{ width: '300px', margin: '10px auto 0' }}
-              defaultTimes={['10:12']}
-              enableTimeSelection={true}
-              handleChooseHourPick={res => console.log(res)}
-              handleChooseMinutePick={res => console.log(res)}
+              markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`, `${todayY}-${todayM}-${todayD + 1}`]} // OPTIONAL. ['YYYY-MM-DD']
+              // defaultTimes={['10:12']} // OPTIONAL
+              // enableTimeSelection={true} // OPTIONAL
+              // handleChooseHourPick={res => console.log(res)} // OPTIONAL
+              // handleChooseMinutePick={res => console.log(res)} // OPTIONAL
             />
           </div>
         </div>
@@ -108,6 +112,11 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   onResetDate={res => console.log(res)}
   onResetDefaultDate={res => console.log(res)}
   style={{ width: '300px', margin: '10px auto 0' }}
+  markedDates={["".concat(todayY, "-").concat(todayM, "-").concat(todayD - 1), "".concat(todayY, "-").concat(todayM, "-").concat(todayD), "".concat(todayY, "-").concat(todayM, "-").concat(todayD + 1)]} // OPTIONAL. ['YYYY-MM-DD']
+  // defaultTimes={['10:12']} // OPTIONAL
+  // enableTimeSelection={true} // OPTIONAL
+  // handleChooseHourPick={res => console.log(res)} // OPTIONAL
+  // handleChooseMinutePick={res => console.log(res)} // OPTIONAL
 />
  \`\`\``}
               renderers={{ CodeBlock }}
@@ -134,6 +143,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
               onConfirm={res => console.log(res, 1)}
               onClose={() => console.log('closed')}
               style={{ width: '300px', margin: '0 auto' }}
+              markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`, `${todayY}-${todayM}-${todayD + 1}`]} // OPTIONAL. ['YYYY-MM-DD']
               // showOnlyTime={true} // default is false
             />
           </div>
@@ -155,6 +165,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   onClear={() => console.log('onClear')}
   style={{ width: '300px', margin: '0 auto' }}
   placeholder={['Start Time', 'End Time']}
+  markedDates={["".concat(todayY, "-").concat(todayM, "-").concat(todayD - 1), "".concat(todayY, "-").concat(todayM, "-").concat(todayD), "".concat(todayY, "-").concat(todayM, "-").concat(todayD + 1)]} // OPTIONAL. ['YYYY-MM-DD']
   ////////////////////
   // IMPORTANT DESC //
   ////////////////////

diff --git a/lib/components/Calendar.js b/lib/components/Calendar.js
@@ -19,11 +19,11 @@ var _utils = require("./utils.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -33,11 +33,11 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -46,7 +46,7 @@ var YEAR = TODAY.getFullYear();
 var MONTH = TODAY.getMonth() + 1;
 var DATE = TODAY.getDate();
 var ITEM_HEIGHT = 40;
-var Index = (0, _react.memo)(function (_ref) {
+var Index = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$locale = _ref.locale,
       locale = _ref$locale === void 0 ? 'en-us' : _ref$locale,
       _ref$defaultDate = _ref.defaultDate,
@@ -60,7 +60,31 @@ var Index = (0, _react.memo)(function (_ref) {
       _ref$onResetDate = _ref.onResetDate,
       onResetDate = _ref$onResetDate === void 0 ? function () {} : _ref$onResetDate,
       _ref$onResetDefaultDa = _ref.onResetDefaultDate,
-      onResetDefaultDate = _ref$onResetDefaultDa === void 0 ? function () {} : _ref$onResetDefaultDa;
+      onResetDefaultDate = _ref$onResetDefaultDa === void 0 ? function () {} : _ref$onResetDefaultDa,
+      _ref$markedDates = _ref.markedDates,
+      markedDates = _ref$markedDates === void 0 ? {} : _ref$markedDates;
+  var markedDatesHash = (0, _react.useMemo)(function () {
+    var res = {};
+
+    if (markedDates && markedDates.length) {
+      var isValid = true;
+
+      for (var i = 0; i < markedDates.length; i += 1) {
+        if (!(0, _utils.isValidDate)(markedDates[i])) {
+          isValid = false;
+          break;
+        }
+      }
+
+      if (isValid) {
+        markedDates.forEach(function (d) {
+          res[d] = true;
+        });
+      }
+    }
+
+    return res;
+  }, [markedDates]);
   var LOCALE_DATA = (0, _react.useMemo)(function () {
     return _locale["default"][locale] ? _locale["default"][locale] : _locale["default"]['en-us'];
   }, [locale]);
@@ -156,7 +180,7 @@ var Index = (0, _react.memo)(function (_ref) {
       year = year + 1;
     }
 
-    setPickedYearMonth(_objectSpread({}, pickedYearMonth, {
+    setPickedYearMonth(_objectSpread(_objectSpread({}, pickedYearMonth), {}, {
       year: year,
       string: "".concat(year, "-").concat(pickedYearMonth.month)
     }));
@@ -187,7 +211,7 @@ var Index = (0, _react.memo)(function (_ref) {
 
     var yearStr = String(year);
     var monthStr = (0, _const.formatDateString)(month);
-    setPickedYearMonth(_objectSpread({}, pickedYearMonth, {
+    setPickedYearMonth(_objectSpread(_objectSpread({}, pickedYearMonth), {}, {
       year: yearStr,
       month: monthStr,
       string: "".concat(yearStr, "-").concat(monthStr)
@@ -199,7 +223,7 @@ var Index = (0, _react.memo)(function (_ref) {
     });
   }, [pickedYearMonth]);
   var pickDate = (0, _react.useCallback)(function (pickedDate) {
-    var newPickedDateInfo = _objectSpread({}, pickedDateInfo, {
+    var newPickedDateInfo = _objectSpread(_objectSpread({}, pickedDateInfo), {}, {
       year: pickedYearMonth.year,
       month: pickedYearMonth.month,
       date: (0, _const.formatDateString)(pickedDate)
@@ -235,12 +259,12 @@ var Index = (0, _react.memo)(function (_ref) {
     var yearStr = (0, _const.formatDateString)(year);
     var monthStr = (0, _const.formatDateString)(month);
     var dateStr = (0, _const.formatDateString)(date);
-    setPickedDateInfo(_objectSpread({}, pickedDateInfo, {
+    setPickedDateInfo(_objectSpread(_objectSpread({}, pickedDateInfo), {}, {
       year: yearStr,
       month: monthStr,
       date: dateStr
     }));
-    setPickedYearMonth(_objectSpread({}, pickedYearMonth, {
+    setPickedYearMonth(_objectSpread(_objectSpread({}, pickedYearMonth), {}, {
       year: yearStr,
       month: monthStr,
       string: "".concat(yearStr, "-").concat(monthStr)
@@ -291,7 +315,8 @@ var Index = (0, _react.memo)(function (_ref) {
       pickedYearMonth: pickedYearMonth,
       pickedDateInfo: pickedDateInfo,
       onClick: pickDate,
-      key: pickedYearMonth.string
+      key: pickedYearMonth.string,
+      markedDatesHash: markedDatesHash
     });
     transitionContainerStyle = {
       height: "".concat(row * ITEM_HEIGHT, "px")
@@ -532,23 +557,24 @@ var Index = (0, _react.memo)(function (_ref) {
     className: "react-minimal-datetime-range-calendar__inline-span react-minimal-datetime-range-calendar__icon react-minimal-datetime-range-refresh"
   })) : "");
 });
-var CalendarBody = (0, _react.memo)(function (_ref2) {
+var CalendarBody = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var _ref2$data = _ref2.data,
       data = _ref2$data === void 0 ? {} : _ref2$data,
       _ref2$pickedDateInfo = _ref2.pickedDateInfo,
       pickedDateInfo = _ref2$pickedDateInfo === void 0 ? {} : _ref2$pickedDateInfo,
       _ref2$pickedYearMonth = _ref2.pickedYearMonth,
       pickedYearMonth = _ref2$pickedYearMonth === void 0 ? {} : _ref2$pickedYearMonth,
       _ref2$onClick = _ref2.onClick,
-      onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick;
+      onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+      markedDatesHash = _ref2.markedDatesHash;
   var content = Object.keys(data).map(function (key) {
     var colHtml;
 
     if (data[key].length) {
       colHtml = data[key].map(function (item, key) {
         var isPicked = pickedDateInfo.date === item.name && pickedDateInfo.month === item.month && pickedDateInfo.year === item.year;
         var isDisabled = pickedYearMonth.month !== item.month;
-        var datePickerItemClass = (0, _utils.cx)('react-minimal-datetime-range-calendar__table-cel', 'react-minimal-datetime-range-calendar__date-item', isDisabled && 'disabled', DATE == item.name && MONTH == item.month && YEAR == item.year && 'today', isPicked && 'active');
+        var datePickerItemClass = (0, _utils.cx)('react-minimal-datetime-range-calendar__table-cel', 'react-minimal-datetime-range-calendar__date-item', isDisabled && 'disabled', DATE == item.name && MONTH == item.month && YEAR == item.year && 'today', markedDatesHash["".concat(item.year, "-").concat(item.month, "-").concat(item.name)] && 'marked', isPicked && 'active');
         return /*#__PURE__*/_react["default"].createElement(CalendarItem, {
           key: key,
           item: item,
@@ -569,7 +595,7 @@ var CalendarBody = (0, _react.memo)(function (_ref2) {
     className: "react-minimal-datetime-range-calendar__table slide"
   }, content);
 });
-var CalendarItem = (0, _react.memo)(function (_ref3) {
+var CalendarItem = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
   var _ref3$item = _ref3.item,
       item = _ref3$item === void 0 ? {} : _ref3$item,
       _ref3$isPicked = _ref3.isPicked,