@kdcloudjs/kdesign 1.7.37 → 1.7.40

package/es/qr-code/style/token.less

@@ -0,0 +1,24 @@
+@import '../../style/themes/token.less';
+@qrcode-custom-prefix: ~'--@{kd-prefix}-c-qrcode';
+// color
+@qrcode-color-text: var(~'@{qrcode-custom-prefix}-color-text', #111111);
+@qrcode-color-border: var(~'@{qrcode-custom-prefix}-color-border',rgba(5, 5, 5, 0.06));
+@qrcode-color-background: var(~'@{qrcode-custom-prefix}-color-background',rgba(255, 255, 255, 0.96));
+// font
+@qrcode-font-size: var(~'@{qrcode-custom-prefix}-font-size', 12px); // 组件级token
+
+// line-height
+
+// motion
+
+// radius
+@qrcode-border-radius: var(~'@{qrcode-custom-prefix}-border-radius', 2px);
+// shadow
+
+// sizing
+@qrcode-size-boder: var(~'@{qrcode-custom-prefix}-size-border',1px);
+@qrcode-size-spin: var(--kd-c-spin-page-dot-spin-sizing-square,28px);
+// spacing
+@qrcode-spacing-padding-horizontal: var(~'@{qrcode-custom-prefix}-spacing-padding-horizontal', 8px);
+@qrcode-spacing-margin-vertical: var(~'@{qrcode-custom-prefix}-spacing-margin-vertical',4px);
+// z-index

package/es/tree/tree.js

@@ -142,7 +142,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setSearchStatus('NONE');
     }
   }, [filterValue]);
-  var _useExpand = useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus),
+  var _useExpand = useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus, filterValue),
     _useExpand2 = _slicedToArray(_useExpand, 2),
     expandedKeys = _useExpand2[0],
     setExpandedKeys = _useExpand2[1];
@@ -159,7 +159,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setHalfCheckedKeys = _useChecked2[3];
   var filterData = React.useMemo(function () {
     return getFilterData(spreadAttrData, filterTreeNode, isSearching, posData, keysData);
-  }, [spreadAttrData, isSearching, posData, keysData]);
+  }, [spreadAttrData, isSearching, posData, keysData, filterValue]);
   useEffect(function () {
     var _a, _b;
     if (typeof scrollKey === 'undefined') {

package/es/tree/treeHooks.d.ts

@@ -4,6 +4,6 @@ export declare const useViewportHeight: (height: number, listRef: React.RefObjec
 export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
 export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
 export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], _flattenAllData: any[], _maxLevel: number, checkable: boolean, keysData: KeysDataType) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
-export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus, filterValue: string) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
 export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
 export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];

package/es/tree/treeHooks.js

@@ -59,7 +59,7 @@ export var useChecked = function useChecked(checkStrictly, checkedKeysProps, def
   }, [nextHalfCheckedKeys]);
   return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
 };
-export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus) {
+export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus, filterValue) {
   var expandScrollkeys = [];
   if (scrollKey) {
     var pos = getPos(flattenAllData, scrollKey);
@@ -74,7 +74,7 @@ export var useExpand = function useExpand(flattenAllData, expandedKeysProps, def
     setExpandedKeys = _React$useState8[1];
   React.useEffect(function () {
     setExpandedKeys(initialExpandedKeys);
-  }, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus]);
+  }, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus, filterValue]);
   return [expandedKeys, setExpandedKeys];
 };
 export var useScrollToKey = function useScrollToKey(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls) {

package/es/tree-select/tree-select.js

@@ -1,4 +1,3 @@
-import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
@@ -174,7 +173,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
       if (TreeMap.has(initValue)) {
         arr.push(TreeMap.get(initValue));
       } else {
-        _typeof(initValue) !== undefined && arr.push({
+        ;
+        (initValue !== null && initValue !== void 0 ? initValue : '') !== '' && arr.push({
           key: initValue,
           title: initValue
         });

package/lib/alert/style/index.css

@@ -193,11 +193,13 @@
   cursor: default;
 }
 .kd-alert-leave {
-  -webkit-transition: min-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
-  transition: min-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
+  -webkit-transition: padding var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
+  transition: padding var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  padding: 0 var(--kd-c-alert-sizing-padding-horizontal, 20px);
+  border-width: 0;
   min-height: 0;
   margin: 0 !important;
   overflow: hidden;

package/lib/alert/style/index.less

@@ -81,10 +81,12 @@
     cursor: default;
   }
   &-leave {
-    transition: min-height @duration-promptly @alert-transition-fn, opacity @duration-promptly @alert-transition-fn,
+    transition: padding @duration-promptly @alert-transition-fn, opacity @duration-promptly @alert-transition-fn,
       margin @duration-promptly @alert-transition-fn, height @duration-promptly @alert-transition-fn,
       line-height @duration-promptly @alert-transition-fn;
     display: flex;
+    padding: 0 @alert-padding-horizontal;
+    border-width: 0;
     min-height: 0;
     margin: 0 !important;
     overflow: hidden;

package/lib/cascader/cascader.js

@@ -83,6 +83,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
   var mergeRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
+  var suffixRef = (0, _react.useRef)(null);
   var wrapperRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -212,10 +213,12 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   _react.default.useEffect(function () {
     var _a;
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleMouseUp);
+    ;
+    (_a = (isMultiple ? suffixRef : wrapperRef).current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleMouseUp);
     return function () {
       var _a;
-      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleMouseUp);
+      ;
+      (_a = (isMultiple ? suffixRef : wrapperRef).current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleMouseUp);
     };
   }, []);
   var labels = (0, _react.useMemo)(function () {
@@ -317,9 +320,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: "".concat(prefixCls, "-tag-describe-content")
     }, "\u5171", currentOptions.length, "\u9879")) : null), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-placeholder")
-    }, !currentOptions.length && placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    }, !currentOptions.length && placeholder)), /*#__PURE__*/_react.default.createElement("span", {
+      ref: suffixRef,
       className: "".concat(prefixCls, "-suffix")
-    }, renderSuffix())));
+    }, renderSuffix()));
   };
   var renderSingle = function renderSingle() {
     var _classNames5;

package/lib/cascader/style/index.css

@@ -276,9 +276,11 @@
 }
 .kd-cascader-bordered.kd-cascader-multiple .kd-cascader-suffix {
   right: 9px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
 .kd-cascader-multiple {
-  padding: 1px 28px 1px 0;
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   width: 100%;
@@ -291,7 +293,6 @@
   cursor: pointer;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  overflow-y: auto;
   overflow-x: hidden;
   position: relative;
   border-bottom: 1px solid #d9d9d9;
@@ -311,6 +312,8 @@
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   width: 100%;
+  padding: 1px 28px 1px 0;
+  overflow-y: auto;
 }
 .kd-cascader-placeholder {
   position: absolute;

package/lib/cascader/style/index.less

@@ -180,11 +180,12 @@
 
     .@{kd-prefix}-cascader-suffix {
       right: 9px;
+      top: 50%;
+      transform: translateY(-50%);
     }
   }
 
   &-multiple {
-    padding: 1px 28px 1px 0;
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     width: 100%;
     min-height: 30px;
@@ -193,7 +194,6 @@
     display: flex;
     cursor: pointer;
     box-sizing: border-box;
-    overflow-y: auto;
     overflow-x: hidden;
     position: relative;
     border-bottom: 1px solid #d9d9d9;
@@ -210,6 +210,8 @@
     align-items: center;
     flex-wrap: wrap;
     width: 100%;
+    padding: 1px 28px 1px 0;
+    overflow-y: auto;
   }
 
   &-placeholder {

package/lib/config-provider/compDefaultProps.d.ts

@@ -191,6 +191,7 @@ declare const compDefaultProps: {
         cancelButtonProps: {};
         okButtonProps: {};
         showline: boolean;
+        overroll: boolean;
     };
     Menu: {
         mode: string;
@@ -467,5 +468,13 @@ declare const compDefaultProps: {
         disabled: boolean;
         size: string;
     };
+    QRCode: {
+        value: string;
+        size: number;
+        status: string;
+        type: string;
+        errorLevel: string;
+        color: string;
+    };
 };
 export default compDefaultProps;

package/lib/config-provider/compDefaultProps.js

@@ -206,7 +206,8 @@ var compDefaultProps = {
     draggable: true,
     cancelButtonProps: {},
     okButtonProps: {},
-    showline: true
+    showline: true,
+    overroll: false
   },
   Menu: {
     mode: 'vertical',
@@ -495,6 +496,14 @@ var compDefaultProps = {
     action: 'copy',
     disabled: false,
     size: 'middle'
+  },
+  QRCode: {
+    value: 'https://www.kingdee.design/',
+    size: 86,
+    status: 'active',
+    type: 'canvas',
+    errorLevel: 'H',
+    color: '#000000'
   }
 };
 var _default = compDefaultProps;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateType, InnerLocale, RangeValue, TimeUnit } from './interface';
-import { IInnerPicker } from './date-picker';
+import { CellRenderProp, IInnerPicker } from './date-picker';
 export declare type ContextOperationRefProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
     onClose?: () => void;
@@ -13,7 +13,7 @@ export interface SingleContextProps {
     dateValue?: DateType | null;
     rangeValue?: RangeValue;
     hoverRangedValue?: RangeValue;
-    panelPosition?: string;
+    panelPosition?: 'right' | 'left';
     open?: boolean;
     originHour?: number;
     minute?: number;
@@ -28,6 +28,8 @@ export interface SingleContextProps {
     onDateMouseLeave: (arg?: boolean) => void;
     innerPicker: IInnerPicker;
     setInnerPicker: (p: IInnerPicker) => void;
+    cellRender?: CellRenderProp;
+    range?: 'start' | 'end';
 }
 declare const Context: React.Context<SingleContextProps>;
 export default Context;

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

@@ -2,6 +2,14 @@ import React from 'react';
 import { DateType } from './interface';
 import { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps } from './date-panel';
 import { BorderType, InputSiteType } from '../input/input';
+export declare type CellRenderSubType = 'hour' | 'minute' | 'second' | '12Hours';
+export declare type CellRenderProp = (current: DateType | number, info: {
+    originNode: React.ReactElement;
+    panelType: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
+    date?: DateType;
+    range?: 'start' | 'end';
+    subType?: CellRenderSubType;
+}) => React.ReactNode;
 export interface PickerSharedProps extends React.AriaAttributes {
     dropdownClassName?: string;
     popupStyle?: React.CSSProperties;
@@ -38,6 +46,7 @@ export interface PickerSharedProps extends React.AriaAttributes {
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
     status?: 'error';
+    cellRender?: CellRenderProp;
 }
 declare type OmitPanelProps<Props> = Omit<Props, 'onChange' | 'hideHeader' | 'pickerValue' | 'onPickerValueChange'>;
 export interface PickerBaseProps extends PickerSharedProps, OmitPanelProps<PickerPanelBaseProps> {

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

@@ -93,7 +93,8 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     onContextMenu = datePickerProps.onContextMenu,
     onClick = datePickerProps.onClick,
     _onOk = datePickerProps.onOk,
-    status = datePickerProps.status;
+    status = datePickerProps.status,
+    cellRender = datePickerProps.cellRender;
   var inputDivRefDefault = _react.default.useRef(null);
   var inputDivRef = ref || inputDivRefDefault;
   var popperRefDefault = _react.default.useRef(null);
@@ -350,7 +351,8 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
         onDateMouseEnter: onEnter,
         onDateMouseLeave: onLeave,
         innerPicker: innerPicker,
-        setInnerPicker: setInnerPicker
+        setInnerPicker: setInnerPicker,
+        cellRender: cellRender
       }
     }, panelNode, (extraFooter || rangesNode || todayNode) && innerPicker === undefined ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(datePickerPrefixCls, "-footer")

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

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -33,7 +33,9 @@ function Month(props) {
     hoverRangedValue = context.hoverRangedValue,
     locale = context.locale,
     innerPicker = context.innerPicker,
-    setInnerPicker = context.setInnerPicker;
+    setInnerPicker = context.setInnerPicker,
+    cellRender = context.cellRender,
+    range = context.range;
   var disabledDate = props.disabledDate;
   var _dateValue;
   if (panelPosition) {
@@ -100,12 +102,6 @@ function Month(props) {
       setInnerPicker(undefined);
     }
   };
-  var renderMonthItem = function renderMonthItem(i) {
-    var _context;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: getMonthClassNames(i)
-    }, (0, _concat.default)(_context = "".concat(i + 1)).call(_context, locale.month));
-  };
   var renderMonth = function renderMonth() {
     var monthLayout = monthsThreeColumns;
     var monthLineCls = (0, _classnames3.default)("".concat(prefixCls, "-month-line"));
@@ -114,6 +110,7 @@ function Month(props) {
         className: monthLineCls,
         key: i
       }, (0, _map.default)(month).call(month, function (m, j) {
+        var _context;
         var month = (0, _dateFns.setMonth)(viewDate, m);
         var _props = {
           onClick: function onClick() {
@@ -131,10 +128,18 @@ function Month(props) {
           }
         };
         var monthItemCls = (0, _classnames3.default)("".concat(prefixCls, "-month-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-month-item-disabled"), disabledDate && disabledDate(month)), getRangeCls(month));
+        var originNode = /*#__PURE__*/_react.default.createElement("span", {
+          className: getMonthClassNames(m)
+        }, (0, _concat.default)(_context = "".concat(m + 1)).call(_context, locale.month));
         return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
           className: monthItemCls,
           key: j
-        }, _props), renderMonthItem(m));
+        }, _props), typeof cellRender === 'function' ? cellRender(m + 1, {
+          originNode: originNode,
+          panelType: 'month',
+          range: range,
+          date: month
+        }) || originNode : originNode);
       }));
     });
   };

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

@@ -29,7 +29,9 @@ function Quarter(props) {
     onDateMouseLeave = context.onDateMouseLeave,
     rangeValue = context.rangeValue,
     panelPosition = context.panelPosition,
-    hoverRangedValue = context.hoverRangedValue;
+    hoverRangedValue = context.hoverRangedValue,
+    cellRender = context.cellRender,
+    range = context.range;
   var disabledDate = props.disabledDate;
   var _dateValue;
   if (panelPosition) {
@@ -108,12 +110,18 @@ function Quarter(props) {
         }
       };
       var quarterCls = (0, _classnames3.default)("".concat(prefixCls, "-quarter-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-quarter-item-disabled"), disabledDate && disabledDate(quarter)), getRangeCls(quarter));
+      var originNode = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        className: getQuarterClassNames(i + 1)
+      }, _props), n);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: n,
         className: quarterCls
-      }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-        className: getQuarterClassNames(i + 1)
-      }, _props), n));
+      }, typeof cellRender === 'function' ? cellRender(i + 1, {
+        originNode: originNode,
+        panelType: 'quarter',
+        range: range,
+        date: quarter
+      }) || originNode : originNode);
     });
   };
   var quarterCls = (0, _classnames3.default)("".concat(prefixCls, "-quarter"));

package/lib/date-picker/panel/time/time-column.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DateType } from '../../interface';
+import { CellRenderSubType } from '../../date-picker';
 export interface Unit {
     label: React.ReactText;
     value: number;
@@ -12,6 +13,7 @@ export interface TimeUnitColumnProps {
     selectValue?: DateType;
     hideDisabledOptions?: boolean;
     onSelect?: (value: number) => void;
+    subType?: CellRenderSubType;
 }
 declare function TimeUnitColumn(props: TimeUnitColumnProps): JSX.Element;
 export default TimeUnitColumn;

package/lib/date-picker/panel/time/time-column.js

@@ -23,10 +23,13 @@ function TimeUnitColumn(props) {
     onSelect = props.onSelect,
     value = props.value,
     hideDisabledOptions = props.hideDisabledOptions,
-    selectValue = props.selectValue;
+    selectValue = props.selectValue,
+    subType = props.subType;
   var cellPrefixCls = "".concat(prefixCls, "-cell");
   var _React$useContext = React.useContext(_context.default),
-    open = _React$useContext.open;
+    open = _React$useContext.open,
+    cellRender = _React$useContext.cellRender,
+    range = _React$useContext.range;
   var ulRef = (0, React.useRef)(null);
   var liRefs = (0, React.useRef)(new _map.default());
   var scrollRef = (0, React.useRef)();
@@ -63,6 +66,9 @@ function TimeUnitColumn(props) {
     if (hideDisabledOptions && unit.disabled) {
       return null;
     }
+    var originNode = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(cellPrefixCls, "-inner")
+    }, unit.label);
     return /*#__PURE__*/React.createElement("div", {
       key: unit.value,
       ref: function ref(element) {
@@ -75,9 +81,12 @@ function TimeUnitColumn(props) {
         }
         onSelect(unit.value);
       }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cellPrefixCls, "-inner")
-    }, unit.label));
+    }, typeof cellRender === 'function' ? cellRender(unit.value, {
+      originNode: originNode,
+      panelType: 'time',
+      subType: subType,
+      range: range
+    }) || originNode : originNode);
   }));
 }
 var _default = TimeUnitColumn;

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

@@ -177,7 +177,8 @@ function TimePanel(props) {
     }
   }
   addColumnNode(showHour, /*#__PURE__*/React.createElement(_timeColumn.default, {
-    key: "hour"
+    key: "hour",
+    subType: 'hour'
   }), hour, hours, function (num) {
     var time = setTime(isPM, num, minute, second);
     if (time) {
@@ -185,7 +186,8 @@ function TimePanel(props) {
     }
   });
   addColumnNode(showMinute, /*#__PURE__*/React.createElement(_timeColumn.default, {
-    key: "minute"
+    key: "minute",
+    subType: 'minute'
   }), minute, minutes, function (num) {
     var time = setTime(isPM, hour, num, second);
     if (time) {
@@ -193,7 +195,8 @@ function TimePanel(props) {
     }
   });
   addColumnNode(showSecond, /*#__PURE__*/React.createElement(_timeColumn.default, {
-    key: "second"
+    key: "second",
+    subType: 'second'
   }), second, seconds, function (num) {
     var time = setTime(isPM, hour, minute, num);
     if (time) {
@@ -205,7 +208,8 @@ function TimePanel(props) {
     PMIndex = isPM ? 1 : 0;
   }
   addColumnNode(use12Hours === true, /*#__PURE__*/React.createElement(_timeColumn.default, {
-    key: "12hours"
+    key: "12hours",
+    subType: '12Hours'
   }), PMIndex, [{
     label: 'AM',
     value: 0,

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

@@ -47,7 +47,9 @@ function Week(props) {
     disabledTimePanel = context.disabledTimePanel,
     onSelect = context.onSelect,
     onDateMouseEnter = context.onDateMouseEnter,
-    onDateMouseLeave = context.onDateMouseLeave;
+    onDateMouseLeave = context.onDateMouseLeave,
+    cellRender = context.cellRender,
+    range = context.range;
   var showWeekNumber = props.showWeekNumber,
     day = props.day,
     picker = props.picker,
@@ -188,8 +190,6 @@ function Week(props) {
       } else {
         now = dateValue || viewDate;
       }
-      // if(hours) {
-      // }
       var dayTime = (0, _dateFns.setTime)(day, {
         hour: (0, _dateFns2.getHours)(now),
         minute: (0, _dateFns2.getMinutes)(now),
@@ -212,18 +212,28 @@ function Week(props) {
           }
         }
       };
-      // console.log('disabledDate', disabledDate)
+      var originNode = /*#__PURE__*/_react.default.createElement("div", {
+        className: getDayClassNames(day)
+      }, date);
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         key: day.valueOf(),
         className: (0, _classnames5.default)("".concat(prefixCls, "-calendar-item"), (_classnames3 = {}, (0, _defineProperty2.default)(_classnames3, "".concat(prefixCls, "-calendar-item-disabled"), disabledDate && disabledDate(day)), (0, _defineProperty2.default)(_classnames3, "".concat(prefixCls, "-calendar-current"), currentMonth === (0, _dateFns.getMonth)(day)), _classnames3), getRangeCls(day))
-      }, _props), /*#__PURE__*/_react.default.createElement("div", {
-        className: getDayClassNames(day)
-      }, date));
+      }, _props), typeof cellRender === 'function' ? cellRender(day, {
+        originNode: originNode,
+        panelType: 'date',
+        range: range,
+        date: day
+      }) || originNode : originNode);
     }));
-    var calenderLineCls = (0, _classnames5.default)((_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-calendar-line"), picker !== 'week'), (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-calendar-week-line"), picker === 'week'), (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-calendar-week-selected"), picker === 'week' && getWeekSelected(startOfWeek)), _classnames4));
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: calenderLineCls
+    var originNode = /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames5.default)((_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-calendar-line"), picker !== 'week'), (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-calendar-week-line"), picker === 'week'), (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-calendar-week-selected"), picker === 'week' && getWeekSelected(startOfWeek)), _classnames4))
     }, week);
+    return typeof cellRender === 'function' ? cellRender(weekNumber, {
+      originNode: originNode,
+      panelType: 'week',
+      range: range,
+      date: startOfWeek
+    }) || originNode : originNode;
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderDays());
 }

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

@@ -30,7 +30,9 @@ function Year(props) {
     panelPosition = context.panelPosition,
     hoverRangedValue = context.hoverRangedValue,
     innerPicker = context.innerPicker,
-    setInnerPicker = context.setInnerPicker;
+    setInnerPicker = context.setInnerPicker,
+    cellRender = context.cellRender,
+    range = context.range;
   var yearItemNumber = props.yearItemNumber,
     disabledDate = props.disabledDate,
     _props$picker = props.picker,
@@ -126,12 +128,18 @@ function Year(props) {
           }
         }
       };
+      var originNode = /*#__PURE__*/_react.default.createElement("span", {
+        className: getYearClassNames(y)
+      }, y);
       yearsList.push( /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         className: (0, _classnames3.default)("".concat(prefixCls, "-year-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-year-item-disabled"), disabledDate && disabledDate(year)), getRangeCls(year)),
         key: y
-      }, _props), /*#__PURE__*/_react.default.createElement("span", {
-        className: getYearClassNames(y)
-      }, y)));
+      }, _props), typeof cellRender === 'function' ? cellRender(y, {
+        originNode: originNode,
+        panelType: 'year',
+        range: range,
+        date: year
+      }) || originNode : originNode));
     };
     for (var y = startPeriod; y <= endPeriod; y++) {
       _loop();