@innoways/drip-form-theme-antd 9.0.15 → 9.0.16

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 9.0.16
+
+### Patch Changes
+
+- feature: DatepickerField updated to support custom date formats, picker, showtime, time_24hr configs 9.0.15
+- Updated dependencies
+  - @innoways/hooks@9.0.16
+  - @innoways/utils@9.0.16
+
 ## 9.0.15
 
 ### Patch Changes

package/dist/index.js

@@ -45,9 +45,9 @@ import 'antd/es/time-picker/style';
 import _TimePicker from 'antd/es/time-picker';
 import moment from 'moment';
 import locale from 'antd/es/date-picker/locale/en_US';
-import 'antd/es/date-picker/style';
-import _DatePicker from 'antd/es/date-picker';
 import Flatpickr from 'react-flatpickr';
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect';
+import 'flatpickr/dist/plugins/monthSelect/style.css';
 import 'flatpickr/dist/flatpickr.min.css';
 import { SketchPicker } from 'react-color';
 import 'antd/es/checkbox/style';
@@ -21906,6 +21906,8 @@ function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var StyledFlatPicker = function StyledFlatPicker(props) {
+  var _options$plugins;
+
   var value = props.value,
       _onChange = props.onChange,
       options = props.options,
@@ -21915,27 +21917,28 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
       disabled = props.disabled,
       style = props.style,
       _props$allowClear = props.allowClear,
-      allowClear = _props$allowClear === void 0 ? true : _props$allowClear;
+      allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+      render = props.render;
 
-  var _useState = useState(Date.now()),
+  var _useState = useState(!isEmpty(value)),
       _useState2 = _slicedToArray(_useState, 2),
-      key = _useState2[0],
-      setKey = _useState2[1]; // Key to force remount
-
-
-  var _useState3 = useState(!isEmpty(value)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showClear = _useState4[0],
-      setShowClear = _useState4[1];
+      showClear = _useState2[0],
+      setShowClear = _useState2[1];
 
   var fp = useRef(null);
   React.useEffect(function () {
     setShowClear(!isEmpty(value));
-  }, [value]); // Force re-render when options change (especially enableTime)
-
-  React.useEffect(function () {
-    setKey(Date.now());
-  }, [options === null || options === void 0 ? void 0 : options.enableTime, options === null || options === void 0 ? void 0 : options.altFormat, options === null || options === void 0 ? void 0 : options.dateFormat]);
+  }, [value]);
+  var pickerKey = JSON.stringify({
+    disabled: disabled,
+    mode: options === null || options === void 0 ? void 0 : options.mode,
+    enableTime: options === null || options === void 0 ? void 0 : options.enableTime,
+    noCalendar: options === null || options === void 0 ? void 0 : options.noCalendar,
+    weekNumbers: options === null || options === void 0 ? void 0 : options.weekNumbers,
+    altFormat: options === null || options === void 0 ? void 0 : options.altFormat,
+    dateFormat: options === null || options === void 0 ? void 0 : options.dateFormat,
+    plugins: (options === null || options === void 0 ? void 0 : (_options$plugins = options.plugins) === null || _options$plugins === void 0 ? void 0 : _options$plugins.length) || 0
+  });
 
   var dateFieldStyle = _objectSpread$5(_objectSpread$5({}, style), {}, {
     borderColor: themeColor
@@ -22074,7 +22077,7 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
 
     var _loop = function _loop(year) {
       // Prevent duplicates: only insert if a node with same year text doesn't exist
-      if (!Array.from(list.children).some(function (item) {
+      if (![].some.call(list.children, function (item) {
         return item.textContent === String(year);
       })) {
         list.insertBefore(createYearItem(instance, list, year, false), list.firstElementChild);
@@ -22097,7 +22100,7 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
 
     var _loop2 = function _loop2(year) {
       // Prevent duplicates: only append if not already present
-      if (!Array.from(list.children).some(function (item) {
+      if (![].some.call(list.children, function (item) {
         return item.textContent === String(year);
       })) {
         list.appendChild(createYearItem(instance, list, year, false));
@@ -22142,14 +22145,27 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
     }
   };
 
+  var showTimeContainer = function showTimeContainer(instance) {
+    var _instance$calendarCon4;
+
+    if (!(options !== null && options !== void 0 && options.enableTime) || !(instance !== null && instance !== void 0 && instance.timeContainer)) return;
+    (_instance$calendarCon4 = instance.calendarContainer) === null || _instance$calendarCon4 === void 0 ? void 0 : _instance$calendarCon4.classList.add('hasTime');
+    instance.timeContainer.style.display = 'flex';
+    instance.timeContainer.style.height = '40px';
+    instance.timeContainer.style.maxHeight = '40px';
+    instance.timeContainer.style.overflow = 'visible';
+  };
+
   var flatpickrOptions = _objectSpread$5(_objectSpread$5({}, options), {}, {
     onReady: function onReady(selectedDates, dateStr, instance) {
-      if (!(instance !== null && instance !== void 0 && instance.calendarContainer)) return; // Forward id to the visible altInput so form labelling works correctly
+      if (!(instance !== null && instance !== void 0 && instance.calendarContainer)) return;
+      showTimeContainer(instance); // Forward id to the visible altInput so form labelling works correctly
 
       if (id && instance.altInput) {
         instance.altInput.name = id;
       }
 
+      if (options !== null && options !== void 0 && options.noCalendar) return;
       var yearInput = instance.calendarContainer.querySelector('.cur-year');
       var numInputWrapper = instance.calendarContainer.querySelector('.numInputWrapper');
       var monthsDropdown = instance.calendarContainer.querySelector('.flatpickr-monthDropdown-months'); // Add id to month dropdown
@@ -22181,6 +22197,9 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
         numInputWrapper.appendChild(dropdownArrow);
       }
     },
+    onOpen: function onOpen(selectedDates, dateStr, instance) {
+      showTimeContainer(instance);
+    },
     onYearChange: function onYearChange() {
       var currentYearPicker = document.querySelector('.year-1');
 
@@ -22196,7 +22215,7 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
       position: 'relative'
     })
   }, /*#__PURE__*/React.createElement(Flatpickr, {
-    key: key,
+    key: pickerKey,
     ref: fp,
     value: value,
     onChange: function onChange(selectedDates) {
@@ -22205,6 +22224,7 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
     options: flatpickrOptions,
     disabled: disabled,
     id: id ? "".concat(id, "-hidden") : undefined,
+    render: render,
     className: "".concat(className ? className : '', " form-control flat-date-picker")
   }), allowClear && showClear && /*#__PURE__*/React.createElement(X, {
     type: "button",
@@ -22226,6 +22246,7 @@ var StyledFlatPicker = function StyledFlatPicker(props) {
 StyledFlatPicker.propTypes = {
   value: _pt.any,
   onChange: _pt.func.isRequired,
+  render: _pt.func,
   className: _pt.string,
   id: _pt.string,
   themeColor: _pt.string,
@@ -22234,7 +22255,8 @@ StyledFlatPicker.propTypes = {
 };
 
 var formatList = {
-  date: 'DD-MMM-YYYY HH:mm:ss',
+  time: 'DD-MMM-YYYY HH:mm:ss',
+  date: 'DD-MMM-YYYY',
   week: 'YYYY-wo',
   month: 'YYYY-MM',
   quarter: 'YYYY-quarter',
@@ -22317,7 +22339,6 @@ var config$8 = {
       allowClear: true,
       picker: 'date',
       format: 'DD-MMM-YYYY',
-      flatpickrFormat: 'd-M-Y',
       theme: 'antd',
       style: {
         width: '100%'
@@ -22386,6 +22407,14 @@ var config$8 = {
         // eslint-disable-next-line quotes
         vcontrol: "return props.formData.ui.picker==='date'"
       }
+    }, {
+      fieldKey: 'time_24hr',
+      type: 'boolean',
+      title: 'Is time 24 hr display',
+      "default": false,
+      ui: {
+        type: 'switch'
+      }
     }, {
       fieldKey: 'picker',
       type: 'string',
@@ -22398,6 +22427,9 @@ var config$8 = {
         },
         onChange: changePicker,
         options: [{
+          label: 'Time',
+          value: 'time'
+        }, {
           label: 'Date',
           value: 'date'
         }, {
@@ -22496,23 +22528,45 @@ var config$8 = {
       "default": 'DD-MMM-YYYY',
       ui: {
         type: 'text',
-        placeholder: 'DD-MMM-YYYY'
+        placeholder: 'Example: DD-MMM-YYYY'
       }
     }]
   }
 };
 
-var _excluded$9 = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "range", "can_not_select_previous_date_of", "format", "flatpickrFormat", "picker", "asyncValidate", "showTime", "allowClear", "getKey", "formMode", "showCurrentDate", "themeColor", "options"];
+var _excluded$9 = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "range", "can_not_select_previous_date_of", "format", "picker", "time_24hr", "asyncValidate", "showTime", "allowClear", "getKey", "formMode", "showCurrentDate", "themeColor", "options"];
 
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-_DatePicker.RangePicker;
+
+var convertMomentToFlatpickrFormat = function convertMomentToFlatpickrFormat() {
+  var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'DD-MMM-YYYY';
+  var replacements = {
+    YYYY: 'Y',
+    YY: 'y',
+    MMMM: 'F',
+    MMM: 'M',
+    MM: 'm',
+    M: 'n',
+    DD: 'd',
+    D: 'j',
+    HH: 'H',
+    H: 'G',
+    mm: 'i',
+    ss: 'S',
+    A: 'K'
+  };
+  return format.replace(/YYYY|YY|MMMM|MMM|MM|M|DD|D|HH|H|mm|ss|A/g, function (match) {
+    return replacements[match] || match;
+  });
+};
 
 var DatePickerField = function DatePickerField(_ref) {
   var _restProps$formData;
 
-  var disabled = _ref.disabled,
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onChange = _ref.onChange,
       fieldData = _ref.fieldData,
       fieldKey = _ref.fieldKey,
@@ -22523,10 +22577,11 @@ var DatePickerField = function DatePickerField(_ref) {
       can_not_select_previous_date_of = _ref$can_not_select_p === void 0 ? '' : _ref$can_not_select_p,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD-MMM-YYYY' : _ref$format,
-      _ref$flatpickrFormat = _ref.flatpickrFormat,
-      flatpickrFormat = _ref$flatpickrFormat === void 0 ? 'd-M-Y' : _ref$flatpickrFormat;
-      _ref.picker;
-      var asyncValidate = _ref.asyncValidate,
+      _ref$picker = _ref.picker,
+      picker = _ref$picker === void 0 ? 'date' : _ref$picker,
+      _ref$time_24hr = _ref.time_24hr,
+      time_24hr = _ref$time_24hr === void 0 ? false : _ref$time_24hr,
+      asyncValidate = _ref.asyncValidate,
       _ref$showTime = _ref.showTime,
       showTime = _ref$showTime === void 0 ? false : _ref$showTime,
       _ref$allowClear = _ref.allowClear,
@@ -22548,6 +22603,9 @@ var DatePickerField = function DatePickerField(_ref) {
       _useState2[0];
       var setValid = _useState2[1];
 
+  var flatpickrFormat = convertMomentToFlatpickrFormat(format);
+  var enableTime = Boolean(showTime);
+
   var _onChange = useField({
     fieldKey: fieldKey,
     onChange: onChange,
@@ -22566,7 +22624,7 @@ var DatePickerField = function DatePickerField(_ref) {
       if (fieldData === null || fieldData === '') {
         setValid(true);
       } else {
-        if (range) {
+        if (range && Array.isArray(fieldData)) {
           setValid(moment(fieldData[0], format).isValid() && moment(fieldData[1], format).isValid());
         } else {
           setValid(moment(fieldData).isValid());
@@ -22582,17 +22640,20 @@ var DatePickerField = function DatePickerField(_ref) {
   }).join(' ~ ') : moment(fieldData).format(format) : null;
 
   var getFlatpickrValue = function getFlatpickrValue() {
-    if (!fieldData) return [];
+    if (!fieldData) return null;
 
     if (range) {
       if (Array.isArray(fieldData) && fieldData.length === 2) {
-        return [moment(fieldData[0], format).toDate(), moment(fieldData[1], format).toDate()];
+        var startDate = moment(fieldData[0], format, true);
+        var endDate = moment(fieldData[1], format, true);
+        return startDate.isValid() && endDate.isValid() ? [startDate.toDate(), endDate.toDate()] : null;
       }
 
-      return [];
+      return null;
     }
 
-    return [typeof fieldData === 'string' ? moment(fieldData, format, true).isValid() ? moment(fieldData, format).toDate() : moment(fieldData).toDate() : moment(fieldData).toDate()];
+    var parsedDate = typeof fieldData === 'string' ? moment(fieldData, format, true) : moment(fieldData);
+    return parsedDate.isValid() ? [parsedDate.toDate()] : null;
   };
 
   var handleFlatpickrChange = function handleFlatpickrChange(date, isCleared) {
@@ -22602,13 +22663,95 @@ var DatePickerField = function DatePickerField(_ref) {
       return;
     }
 
+    if (!date || !date.length) {
+      _onChange(null);
+
+      return;
+    }
+
     if (date.length === 2) {
-      _onChange([moment(date[0]), moment(date[1])]);
-    } else if (date.length) {
-      _onChange(moment(date[0]));
+      var startDate = moment(date[0]);
+      var endDate = moment(date[1]);
+
+      _onChange(startDate.isValid() && endDate.isValid() ? [startDate, endDate] : null);
+
+      return;
+    }
+
+    var parsedDate = moment(date[0]);
+
+    _onChange(parsedDate.isValid() ? parsedDate : null);
+  };
+
+  var enableSeconds = format.includes('ss');
+
+  var getPickerOptions = function getPickerOptions() {
+    switch (picker) {
+      case 'time':
+        return {
+          enableTime: true,
+          enableSeconds: enableSeconds,
+          time_24hr: time_24hr,
+          noCalendar: false,
+          dateFormat: flatpickrFormat,
+          altFormat: flatpickrFormat
+        };
+
+      case 'week':
+        return {
+          weekNumbers: true,
+          dateFormat: 'Y-W',
+          altFormat: 'Y-W',
+          onValueUpdate: function onValueUpdate(selectedDates, _dateStr, instance) {
+            if (selectedDates.length) {
+              instance.input.value = moment(selectedDates[0]).format(format);
+            }
+          }
+        };
+
+      case 'month':
+        return {
+          dateFormat: 'Y-m',
+          altFormat: flatpickrFormat || 'Y-m',
+          plugins: [monthSelectPlugin({
+            shorthand: true,
+            dateFormat: 'Y-m',
+            altFormat: flatpickrFormat || 'Y-m'
+          })]
+        };
+
+      case 'quarter':
+        return {
+          dateFormat: 'Y-m-d',
+          altFormat: flatpickrFormat,
+          onChange: function onChange(selectedDates, _dateStr, instance) {
+            if (selectedDates.length) {
+              var quarter = moment(selectedDates[0]).quarter();
+              instance.input.value = "".concat(moment(selectedDates[0]).year(), "-Q").concat(quarter);
+            }
+          }
+        };
+
+      case 'year':
+        return {
+          dateFormat: 'Y',
+          altFormat: 'Y'
+        };
+
+      case 'date':
+      default:
+        return {
+          enableTime: enableTime,
+          enableSeconds: enableSeconds,
+          time_24hr: time_24hr,
+          noCalendar: false,
+          dateFormat: flatpickrFormat,
+          altFormat: flatpickrFormat
+        };
     }
   };
 
+  var pickerOptions = getPickerOptions();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFlatPicker, {
     disabled: disabled,
     value: getFlatpickrValue(),
@@ -22617,29 +22760,26 @@ var DatePickerField = function DatePickerField(_ref) {
     themeColor: themeColor,
     style: style,
     allowClear: allowClear,
-    options: _objectSpread$4(_objectSpread$4({
+    options: _objectSpread$4(_objectSpread$4(_objectSpread$4({
+      altInputClass: "drip_date_picker_input".concat(disabled ? ' drip_date_picker_input_disabled' : ''),
       mode: range ? 'range' : 'single',
-      enableTime: showTime,
       altInput: true,
-      allowInput: false,
-      altFormat: showTime ? flatpickrFormat + ' H:i' : flatpickrFormat,
-      dateFormat: showTime ? 'Y-m-d H:i' : 'Y-m-d',
-      altInputClass: disabled ? 'drip_date_picker_input_disabled' : 'drip_date_picker_input'
-    }, can_not_select_previous_date_of && fieldData && (_restProps$formData = restProps.formData) !== null && _restProps$formData !== void 0 && _restProps$formData[can_not_select_previous_date_of] && moment(restProps.formData[can_not_select_previous_date_of], format).isValid() ? {
+      allowInput: false
+    }, options), pickerOptions), can_not_select_previous_date_of && (_restProps$formData = restProps.formData) !== null && _restProps$formData !== void 0 && _restProps$formData[can_not_select_previous_date_of] && moment(restProps.formData[can_not_select_previous_date_of], format, true).isValid() ? {
       minDate: moment(restProps.formData[can_not_select_previous_date_of], format).toDate()
-    } : {}), options)
+    } : {})
   }));
 };
 
 DatePickerField.propTypes = {
+  range: _pt.bool,
   format: _pt.string,
   showTime: _pt.oneOfType([_pt.bool, _pt.shape({
     format: _pt.string,
     defaultValue: _pt.string.isRequired
   })]),
   options: _pt.any,
-  allowClear: _pt.bool,
-  flatpickrFormat: _pt.string
+  allowClear: _pt.bool
 };
 var datePicker = /*#__PURE__*/memo(DatePickerField);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@innoways/drip-form-theme-antd",
-	"version": "9.0.15",
+	"version": "9.0.16",
 	"author": "JDFED",
 	"description": "drip-form antd主题包",
 	"main": "dist/index.js",
@@ -31,10 +31,10 @@
 	"dependencies": {
 		"@ant-design/icons": "^4.7.0",
 		"@babel/runtime": "^7.10.2",
-		"@innoways/hooks": "^9.0.15",
-		"@innoways/utils": "^9.0.15",
+		"@innoways/hooks": "^9.0.16",
+		"@innoways/utils": "^9.0.16",
 		"antd": "^4.16.13",
-		"flatpickr": "4.6.3",
+		"flatpickr": "^4.6.3",
 		"moment": "^2.26.0",
 		"react-color": "^2.18.1",
 		"react-flatpickr": "^3.10.13",