@kdcloudjs/kdesign 1.6.24 → 1.6.25

package/lib/date-picker/date-picker.js

@@ -71,6 +71,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       className = datePickerProps.className,
       dropdownClassName = datePickerProps.dropdownClassName,
       popupStyle = datePickerProps.popupStyle,
+      popupRef = datePickerProps.popupRef,
       locale = datePickerProps.locale,
       inputReadOnly = datePickerProps.inputReadOnly,
       allowClear = datePickerProps.allowClear,
@@ -125,7 +126,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
 
   var inputDivRef = ref || /*#__PURE__*/_react.default.createRef();
 
-  var popperRef = _react.default.useRef(null);
+  var popperRef = popupRef || /*#__PURE__*/_react.default.createRef();
 
   var inputRef = _react.default.useRef(null);
 
@@ -138,8 +139,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
   var datePickerLang = (0, _extends2.default)({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }), locale || {}); // console.log(_format)
-  // 原始数据
+  }), locale || {}); // 原始数据
 
   var _useMergedState = (0, _hooks.useMergedState)(null, {
     value: value,
@@ -268,6 +268,11 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       mergedMode = _useMergedState8[0],
       setInnerMode = _useMergedState8[1];
 
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      innerPicker = _useState2[0],
+      setInnerPicker = _useState2[1];
+
   (0, _react.useEffect)(function () {
     setInnerMode(picker);
   }, [picker]);
@@ -319,13 +324,19 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   };
 
   var onContextSelect = function onContextSelect(date, type) {
-    if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+    if (type === 'inner') {
       setViewDate(date);
-      triggerChange(date);
-      triggerOpen(false);
+      setSelectedValue(date);
+      setDateValue(date);
     } else {
-      setViewDate(date);
-      triggerChange(date);
+      if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+        setViewDate(date);
+        triggerChange(date);
+        triggerOpen(false);
+      } else {
+        setViewDate(date);
+        triggerChange(date);
+      }
     }
   };
 
@@ -412,9 +423,11 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
         onSelect: onContextSelect,
         setViewDate: setViewDate,
         onDateMouseEnter: onEnter,
-        onDateMouseLeave: onLeave
+        onDateMouseLeave: onLeave,
+        innerPicker: innerPicker,
+        setInnerPicker: setInnerPicker
       }
-    }, panelNode, extraFooter || rangesNode || todayNode ? /*#__PURE__*/_react.default.createElement("div", {
+    }, panelNode, (extraFooter || rangesNode || todayNode) && innerPicker === undefined ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(datePickerPrefixCls, "-footer")
     }, extraFooter, rangesNode, todayNode) : null);
   }

package/lib/date-picker/panel/month/month.js

@@ -48,7 +48,9 @@ function Month(props) {
       rangeValue = context.rangeValue,
       panelPosition = context.panelPosition,
       hoverRangedValue = context.hoverRangedValue,
-      locale = context.locale;
+      locale = context.locale,
+      innerPicker = context.innerPicker,
+      setInnerPicker = context.setInnerPicker;
   var disabledDate = props.disabledDate;
 
   var _dateValue;
@@ -117,8 +119,15 @@ function Month(props) {
   });
 
   var handleClick = function handleClick(date) {
-    if (!(disabledDate && disabledDate(date))) {
-      onSelect(date, 'mouse');
+    if (innerPicker === undefined) {
+      if (!(disabledDate && disabledDate(date))) {
+        onSelect(date, 'mouse');
+      }
+    } else {
+      //
+      var _viewDate = viewDate;
+      onSelect((0, _dateFns.setYearOrMonthOfDate)(_viewDate, date, 'month'), 'inner');
+      setInnerPicker(undefined);
     }
   };
 

package/lib/date-picker/panel/year/year.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { DateType } from '../../interface';
+import { DateType, PickerMode } from '../../interface';
 export interface YearProps {
     yearItemNumber: number;
     minDate?: DateType;
     maxDate?: DateType;
     disabledDate?: (date: DateType) => boolean;
+    picker?: PickerMode;
 }
 declare function Year(props: YearProps): JSX.Element;
 export default Year;

package/lib/date-picker/panel/year/year.js

@@ -27,6 +27,8 @@ var _dateFns = require("../../utils/date-fns");
 
 var _useRangeCls = _interopRequireDefault(require("../../hooks/use-range-cls"));
 
+var _utils = require("../../utils");
+
 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, 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; }
@@ -41,9 +43,13 @@ function Year(props) {
       onSelect = context.onSelect,
       rangeValue = context.rangeValue,
       panelPosition = context.panelPosition,
-      hoverRangedValue = context.hoverRangedValue;
+      hoverRangedValue = context.hoverRangedValue,
+      innerPicker = context.innerPicker,
+      setInnerPicker = context.setInnerPicker;
   var yearItemNumber = props.yearItemNumber,
-      disabledDate = props.disabledDate;
+      disabledDate = props.disabledDate,
+      _props$picker = props.picker,
+      picker = _props$picker === void 0 ? 'date' : _props$picker;
 
   var _dateValue;
 
@@ -111,8 +117,21 @@ function Year(props) {
   });
 
   var handleClick = function handleClick(date) {
-    if (!(disabledDate && disabledDate(date))) {
-      onSelect(date, 'mouse');
+    if (innerPicker === undefined) {
+      if (!(disabledDate && disabledDate(date))) {
+        onSelect(date, 'mouse');
+      }
+    } else {
+      //
+      var _viewDate = viewDate;
+
+      if (panelPosition) {
+        _viewDate = (0, _utils.getClosingViewDate)(viewDate, picker, -1);
+      } // date = addYears(_viewDate, 1)
+
+
+      onSelect((0, _dateFns.setYearOrMonthOfDate)(_viewDate, date), 'inner');
+      setInnerPicker(undefined);
     }
   };
 

package/lib/date-picker/range-picker.d.ts

@@ -29,6 +29,8 @@ export interface RangePickerSharedProps {
     dateRender?: RangeDateRender;
     panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    popupRef?: React.Ref<any>;
+    popupStyle?: React.CSSProperties;
 }
 declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTimePanel' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange' | 'onOk' | 'dateRender'>;
 export declare type RangeShowTimeObject = Omit<SharedTimeProps, 'defaultValue'> & {

package/lib/date-picker/range-picker.js

@@ -129,6 +129,8 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       allowEmpty = datePickerProps.allowEmpty,
       className = datePickerProps.className,
       style = datePickerProps.style,
+      popupStyle = datePickerProps.popupStyle,
+      popupRef = datePickerProps.popupRef,
       borderType = datePickerProps.borderType,
       separator = datePickerProps.separator,
       ranges = datePickerProps.ranges,
@@ -179,7 +181,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
 
   var endInputRef = _react.default.useRef(null);
 
-  var popperRef = _react.default.useRef(null);
+  var popperRef = popupRef || /*#__PURE__*/_react.default.createRef();
 
   var openRecordsRef = _react.default.useRef({});
 
@@ -397,6 +399,11 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       mergedModes = _useMergedState10[0],
       setInnerModes = _useMergedState10[1];
 
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      innerPicker = _useState2[0],
+      setInnerPicker = _useState2[1];
+
   (0, _react.useEffect)(function () {
     setInnerModes([picker, picker]);
   }, [picker]); // const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => {
@@ -525,8 +532,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     var values = (0, _utils2.updateValues)(selectedValue, date, mergedActivePickerIndex);
 
     if (type === 'submit' || type !== 'key' && !needConfirmButton) {
-      // triggerChange will also update selected values
-      triggerChange(values, mergedActivePickerIndex); // clear hover value style
+      triggerChange(values, mergedActivePickerIndex);
 
       if (mergedActivePickerIndex === 0) {
         onStartLeave();
@@ -633,7 +639,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           onSelect: onSelect,
           setViewDate: setViewDate,
           onDateMouseEnter: onDateMouseEnter,
-          onDateMouseLeave: onDateMouseLeave
+          onDateMouseLeave: onDateMouseLeave,
+          innerPicker: innerPicker,
+          setInnerPicker: setInnerPicker
         }
       }, renderPanel());
 
@@ -649,7 +657,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           onSelect: onSelect,
           setViewDate: setViewDate,
           onDateMouseEnter: onDateMouseEnter,
-          onDateMouseLeave: onDateMouseLeave
+          onDateMouseLeave: onDateMouseLeave,
+          innerPicker: innerPicker,
+          setInnerPicker: setInnerPicker
         }
       }, renderPanel());
 
@@ -675,7 +685,9 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           onSelect: onSelect,
           setViewDate: setViewDate,
           onDateMouseEnter: onDateMouseEnter,
-          onDateMouseLeave: onDateMouseLeave
+          onDateMouseLeave: onDateMouseLeave,
+          innerPicker: innerPicker,
+          setInnerPicker: setInnerPicker
         }
       }, /*#__PURE__*/_react.default.createElement(_datePanel.default, (0, _extends2.default)({}, datePickerProps, {
         disabledDate: mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate
@@ -816,7 +828,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     trigger: 'click',
     prefixCls: "".concat(datePickerPrefixCls, "-panel"),
     arrow: false,
-    popperStyle: style,
+    popperStyle: popupStyle,
     visible: mergedOpen,
     placement: 'bottomLeft',
     getPopupContainer: getPopupContainer

package/lib/date-picker/style/index.css

@@ -745,6 +745,15 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kd-date-picker-panel .kd-date-picker-header-text-inner {
+  cursor: pointer;
+}
+.kd-date-picker-panel .kd-date-picker-header-text-inner:hover {
+  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-date-picker-panel .kd-date-picker-header-text-inner:nth-child(2) {
+  margin-left: 13px;
+}
 .kd-date-picker-panel .kd-date-picker-time-header,
 .kd-date-picker-panel .kd-date-picker-header {
   height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);

package/lib/date-picker/style/index.less

@@ -627,6 +627,17 @@
 
     &-text {
       flex: 1;
+
+      &-inner {
+        cursor: pointer;
+
+        &:hover {
+          color: @date-color-background-checked;
+        }
+        &:nth-child(2) {
+          margin-left: 13px;
+        }
+      }
     }
   }
 

package/lib/date-picker/utils/date-fns.d.ts

@@ -84,3 +84,4 @@ export declare function getYearsPeriod(date: DateType, yearItemNumber: number):
     endPeriod: number;
 };
 export declare function getLowerBoundTime(hour: number, minute: number, second: number, hourStep: number, minuteStep: number, secondStep: number): [number, number, number];
+export declare const setYearOrMonthOfDate: (date1: DateType, date2: DateType, type?: string) => Date;

package/lib/date-picker/utils/date-fns.js

@@ -171,6 +171,7 @@ Object.defineProperty(exports, "setYear", {
     return _setYear.default;
   }
 });
+exports.setYearOrMonthOfDate = void 0;
 Object.defineProperty(exports, "subDays", {
   enumerable: true,
   get: function get() {
@@ -212,6 +213,8 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _isDate = _interopRequireDefault(require("date-fns/isDate"));
 
 var _isValid = _interopRequireDefault(require("date-fns/isValid"));
@@ -574,4 +577,29 @@ function getLowerBoundTime(hour, minute, second, hourStep, minuteStep, secondSte
 
   var lowerBoundSecond = Math.floor(second / secondStep) * secondStep;
   return [lowerBoundHour, lowerBoundMinute, lowerBoundSecond];
-}
+}
+
+var setYearOrMonthOfDate = function setYearOrMonthOfDate(date1, date2) {
+  var _context, _context2, _context3, _context4, _context5;
+
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'year';
+  var y = new Date(date1).getFullYear();
+
+  if (type === 'year') {
+    y = new Date(date2).getFullYear();
+  }
+
+  var m = new Date(date1 || date2).getMonth() + 1;
+
+  if (type === 'month') {
+    m = new Date(date2).getMonth() + 1;
+  }
+
+  var d = new Date(date1 || date2).getDate();
+  var h = new Date(date1 || date2).getHours();
+  var mi = new Date(date1 || date2).getMinutes();
+  var s = new Date(date1 || date2).getSeconds();
+  return new Date((0, _concat.default)(_context = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = "".concat(y, "-")).call(_context5, m, "-")).call(_context4, d, " ")).call(_context3, h, ":")).call(_context2, mi, ":")).call(_context, s));
+};
+
+exports.setYearOrMonthOfDate = setYearOrMonthOfDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.6.24",
+  "version": "1.6.25",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [