@nutui/nutui-react 1.3.7 → 1.3.8

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:54:53 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.8 Wed Oct 26 2022 17:29:09 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -1496,12 +1496,15 @@
     iconSlot: null,
     linkSlot: null,
     click: (event) => {
+    },
+    onClick: (event) => {
     }
   };
   const Cell = (props) => {
     const {
       children,
       click,
+      onClick,
       title,
       subTitle,
       desc,
@@ -1528,6 +1531,7 @@
     const history = useHistory();
     const handleClick2 = (event) => {
       click(event);
+      onClick(event);
       if (to2 && history) {
         history[replace ? "replace" : "push"](to2);
       } else if (url) {
@@ -3190,6 +3194,8 @@
     className: "",
     style: {},
     tabSwitch: () => {
+    },
+    onSwitch: () => {
     }
   };
   const Tabbar = (props) => {
@@ -3203,7 +3209,8 @@
       safeAreaInsetBottom,
       className,
       style,
-      tabSwitch
+      tabSwitch,
+      onSwitch
     } = {
       ...defaultProps$17,
       ...props
@@ -3235,6 +3242,7 @@
         handleClick: () => {
           handleClick2(idx);
           tabSwitch(child, idx);
+          onSwitch(child, idx);
         }
       };
       return React__default["default"].cloneElement(child, childProps);
@@ -8675,6 +8683,7 @@
   }
   const defaultProps$13 = {
     ...ComponentDefaults,
+    tabStyle: {},
     value: 0,
     color: "",
     background: "",
@@ -8694,6 +8703,7 @@
     const {
       value,
       color,
+      tabStyle,
       background,
       direction,
       type,
@@ -8775,7 +8785,7 @@
       ...rest
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classesTitle,
-      style: { background }
+      style: { ...tabStyle, background }
     }, !!titleNode && typeof titleNode === "function" ? titleNode() : titles.current.map((item, index2) => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         style: titleStyle,
@@ -8808,6 +8818,8 @@
         )
       }, item.title));
     })), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: `${b2("")}__content__wrap`
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${b2("")}__content`,
       style: contentStyle
     }, React__default["default"].Children.map(children, (child, idx) => {
@@ -8826,7 +8838,7 @@
         };
       }
       return React__default["default"].cloneElement(child, childProps);
-    })));
+    }))));
   };
   Tabs.defaultProps = defaultProps$13;
   Tabs.displayName = "NutTabs";
@@ -8837,7 +8849,7 @@
     disabled: false
   };
   const TabPane = (props) => {
-    const { children, paneKey, activeKey, autoHeightClassName } = {
+    const { children, paneKey, activeKey, autoHeightClassName, className } = {
       ...defaultProps$12,
       ...props
     };
@@ -8847,7 +8859,8 @@
         active: paneKey === activeKey
       },
       b2(""),
-      autoHeightClassName
+      autoHeightClassName,
+      className
     );
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classes
@@ -8938,7 +8951,7 @@
       children,
       className,
       showhead,
-      handleClose,
+      onClose,
       ...rest
     } = {
       ...defaultProps$10,
@@ -8949,7 +8962,7 @@
       visible,
       style: { width, height: "100%" },
       position,
-      onClose: handleClose
+      onClose
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: className ? `${className} nut-sidenavbar` : "nut-sidenavbar",
       ...rest
@@ -8975,7 +8988,7 @@
     open: true
   };
   const SubSideNavBar = (props) => {
-    const { title, ikey, children, titleClick, open, ...rest } = {
+    const { title, ikey, children, onClick, open, ...rest } = {
       ...defaultProps$$,
       ...props
     };
@@ -9012,7 +9025,7 @@
       handleClick(e2);
       const currentClass = e2.currentTarget.className;
       const isShow = currentClass.includes("nutShow");
-      titleClick && titleClick({ title, ikey, isShow });
+      onClick && onClick({ title, ikey, isShow });
     };
     React.useEffect(() => {
       var _a, _b;
@@ -9036,10 +9049,10 @@
     }, children));
   };
   const SideNavBarItem = (props) => {
-    const { title, ikey, children, click, ...rest } = props;
+    const { title, ikey, children, onClick, ...rest } = props;
     const clickFn = (e2) => {
       e2.stopPropagation();
-      click && click({ title, ikey });
+      onClick && onClick({ title, ikey });
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-subsidenavbar__item border-bt",
@@ -9655,7 +9668,10 @@
       marks,
       change,
       dragStart,
-      dragEnd
+      dragEnd,
+      onChange,
+      onDragStart,
+      onDragEnd
     } = { ...defaultProps$Y, ...props };
     let { min, max, step } = { ...defaultProps$Y, ...props };
     min = Number(min);
@@ -9819,6 +9835,7 @@
       }
       if ((marks || end) && !isSameValue(value, startValue)) {
         change && change(value);
+        onChange && onChange(value);
       }
     };
     const click = (event) => {
@@ -9866,6 +9883,7 @@
       }
       if (dragStatus === "start") {
         dragStart && dragStart();
+        onDragStart && onDragStart();
       }
       touch.move(event);
       SetDragStatus("draging");
@@ -9892,6 +9910,7 @@
       if (dragStatus === "draging") {
         updateValue(currentValue, true);
         dragEnd && dragEnd();
+        onDragEnd && onDragEnd();
       }
       SetDragStatus("");
     };
@@ -11785,6 +11804,12 @@
       overlimit,
       blur,
       focus,
+      onAdd,
+      onReduce,
+      onOverlimit,
+      onBlurFuc,
+      onFocus,
+      onChangeFuc,
       iconClassPrefix,
       iconFontClassName,
       ...restProps
@@ -11825,6 +11850,7 @@
     };
     const emitChange = (value, e2) => {
       const outputValue = fixedDecimalPlaces(value);
+      onChangeFuc && onChangeFuc(outputValue, e2);
       change && change(outputValue, e2);
       if (!isAsync) {
         if (Number(outputValue) < Number(min)) {
@@ -11837,26 +11863,31 @@
       }
     };
     const reduceNumber = (e2) => {
+      onReduce && onReduce(e2);
       reduce && reduce(e2);
       if (reduceAllow()) {
         const outputValue = Number(inputValue) - Number(step);
         emitChange(outputValue, e2);
       } else {
+        onOverlimit && onOverlimit(e2);
         overlimit && overlimit(e2);
       }
     };
     const addNumber = (e2) => {
+      onAdd && onAdd(e2);
       add && add(e2);
       if (addAllow()) {
         const outputValue = Number(inputValue) + Number(step);
         emitChange(outputValue, e2);
       } else {
+        onOverlimit && onOverlimit(e2);
         overlimit && overlimit(e2);
       }
     };
     const changeValue = (e2) => {
       const input = e2.target;
       change && change(input.valueAsNumber, e2);
+      onChangeFuc && onChangeFuc(input.valueAsNumber, e2);
       if (!isAsync) {
         if (Number.isNaN(input.valueAsNumber)) {
           setInputValue(inputValue);
@@ -11870,6 +11901,7 @@
         return;
       if (readonly)
         return;
+      onFocus && onFocus(e2);
       focus && focus(e2);
     };
     const burValue = (e2) => {
@@ -11885,6 +11917,7 @@
         value = Number(max);
       }
       emitChange(value, e2);
+      onBlurFuc && onBlurFuc(e2);
       blur && blur(e2);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -12017,12 +12050,20 @@
       rows,
       slotButton,
       slotInput,
+      onChange,
+      onBlur,
+      onFocus,
+      onClear,
+      formatter,
+      keypress,
+      onClickInput,
+      onClickLeftIcon,
+      onClickRightIcon,
+      onClick,
       change,
       blur,
       focus,
       clear,
-      formatter,
-      keypress,
       clickInput,
       clickLeftIcon,
       clickRightIcon,
@@ -12088,20 +12129,22 @@
       }
       SetInputValue(val);
     };
-    const onFocus = (event) => {
+    const handleFocus = (event) => {
       const val = event.target.value;
       SetActive(true);
+      onFocus && onFocus(val, event);
       focus && focus(val, event);
     };
-    const onInput = (event) => {
+    const handleInput = (event) => {
       let val = event.target.value;
       if (maxlength && val.length > Number(maxlength)) {
         val = val.slice(0, Number(maxlength));
       }
       updateValue(val);
+      onChange && onChange(val, event);
       change && change(val, event);
     };
-    const onBlur = (event) => {
+    const handleBlur = (event) => {
       setTimeout(() => {
         SetActive(false);
       }, 200);
@@ -12110,15 +12153,19 @@
         val = val.slice(0, Number(maxlength));
       }
       updateValue(getModelValue(), "onBlur");
+      onBlur && onBlur(val, event);
       blur && blur(val, event);
     };
-    const onClickInput = (event) => {
+    const handleClickInput = (event) => {
+      onClickInput && onClickInput(event);
       clickInput && clickInput(event);
     };
-    const onClickLeftIcon = (event) => {
+    const handleClickLeftIcon = (event) => {
+      onClickLeftIcon && onClickLeftIcon(event);
       clickLeftIcon && clickLeftIcon(event);
     };
-    const onClickRightIcon = (event) => {
+    const handleClickRightIcon = (event) => {
+      onClickRightIcon && onClickRightIcon(event);
       clickRightIcon && clickRightIcon(event);
     };
     const resetValidation = () => {
@@ -12134,6 +12181,7 @@
     };
     const handleClear = (event) => {
       updateValue("");
+      onClear && onClear("", event);
       clear && clear("", event);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -12141,6 +12189,7 @@
       style,
       ...rest,
       onClick: (e2) => {
+        onClick && onClick(e2);
         click && click(e2);
       }
     }, slotInput ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -12153,12 +12202,12 @@
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-inner",
       onClick: (e2) => {
-        onClickInput(e2);
+        handleClickInput(e2);
       }
     }, slotInput))) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, leftIcon && leftIcon.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-left-icon",
       onClick: (e2) => {
-        onClickLeftIcon(e2);
+        handleClickLeftIcon(e2);
       }
     }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
@@ -12175,7 +12224,7 @@
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-inner",
       onClick: (e2) => {
-        onClickInput(e2);
+        handleClickInput(e2);
       }
     }, type === "textarea" ? /* @__PURE__ */ React__default["default"].createElement("textarea", {
       className: "input-text",
@@ -12191,13 +12240,13 @@
       value: inputValue,
       autoFocus: autofocus,
       onBlur: (e2) => {
-        onBlur(e2);
+        handleBlur(e2);
       },
       onFocus: (e2) => {
-        onFocus(e2);
+        handleFocus(e2);
       },
       onInput: (e2) => {
-        onInput(e2);
+        handleInput(e2);
       }
     }) : /* @__PURE__ */ React__default["default"].createElement("input", {
       className: "input-text",
@@ -12211,13 +12260,13 @@
       value: inputValue,
       autoFocus: autofocus,
       onBlur: (e2) => {
-        onBlur(e2);
+        handleBlur(e2);
       },
       onFocus: (e2) => {
-        onFocus(e2);
+        handleFocus(e2);
       },
       onInput: (e2) => {
-        onInput(e2);
+        handleInput(e2);
       }
     }), clearable && !readonly && active && inputValue.length > 0 ? /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
@@ -12231,7 +12280,7 @@
     }) : null, rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-input-right-icon",
       onClick: (e2) => {
-        onClickRightIcon(e2);
+        handleClickRightIcon(e2);
       }
     }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
       classPrefix: iconClassPrefix,
@@ -12385,9 +12434,9 @@
         return renderButton();
       }
       if (reverseState) {
-        return [renderLabel(), renderIcon()];
+        return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, renderLabel(), renderIcon());
       }
-      return [renderIcon(), renderLabel()];
+      return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, renderIcon(), renderLabel());
     };
     const handleClick2 = (e2) => {
       if (disabledStatement || checkedStatement)
@@ -13460,7 +13509,7 @@
         classPrefix: iconClassPrefix,
         fontClassName: iconFontClassName,
         name: "link"
-      }), "\xA0", item.name), /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
+      }), "\xA0", item.name), isDeletable && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
         classPrefix: iconClassPrefix,
         fontClassName: iconFontClassName,
         color: "#808080",
@@ -15355,7 +15404,7 @@
       inactiveColor,
       activeText,
       inactiveText,
-      change,
+      onChange,
       className,
       style
     } = {
@@ -15383,7 +15432,7 @@
       if (!isAsync) {
         setValue(!value);
       }
-      change && change(!value, event);
+      onChange && onChange(!value, event);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classes(),
@@ -15930,6 +15979,8 @@
       rightIcon,
       close,
       click,
+      onClose,
+      onClick,
       iconClassPrefix,
       iconFontClassName
     } = {
@@ -16015,11 +16066,13 @@
     };
     const handleClick2 = (event) => {
       click && click(event);
+      onClick && onClick(event);
     };
     const onClickIcon = (event) => {
       event.stopPropagation();
       SetShowNoticeBar(!closeMode);
       close && close(event);
+      onClose && onClose(event);
     };
     const onAnimationEnd = () => {
       SetFirstRound(false);
@@ -16069,9 +16122,11 @@
     };
     const go = (item) => {
       click && click(item);
+      onClick && onClick(item);
     };
     const handleClickIcon = () => {
       close && close(scrollList[0]);
+      onClose && onClose(scrollList[0]);
     };
     const iconShow = () => {
       if (leftIcon === "close") {
@@ -16197,6 +16252,7 @@
       className,
       progressDot,
       clickStep,
+      onClickStep,
       ...restProps
     } = propSteps;
     const parentSteps = {
@@ -16260,10 +16316,9 @@
       return index === +parent.propSteps.current ? "process" : "wait";
     };
     const handleClickStep = () => {
-      var _a, _b;
-      if ((_a = parent.propSteps) == null ? void 0 : _a.clickStep) {
-        (_b = parent.propSteps) == null ? void 0 : _b.clickStep(activeIndex);
-      }
+      var _a, _b, _c, _d;
+      ((_a = parent.propSteps) == null ? void 0 : _a.onClickStep) && ((_b = parent.propSteps) == null ? void 0 : _b.onClickStep(activeIndex));
+      ((_c = parent.propSteps) == null ? void 0 : _c.clickStep) && ((_d = parent.propSteps) == null ? void 0 : _d.clickStep(activeIndex));
     };
     const b2 = cn("step");
     const classes = classNames(
@@ -16795,6 +16850,7 @@
       className,
       style,
       activeAvatar,
+      onActiveAvatar,
       onError,
       iconClassPrefix,
       iconFontClassName,
@@ -16839,7 +16895,6 @@
     const avatarLength = (children2) => {
       var _a2, _b2, _c2;
       for (let i = 0; i < children2.length; i++) {
-        console.log("child", children2[i], children2[i].classList);
         if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
           children2[i].setAttribute("data-index", i + 1);
         }
@@ -16858,9 +16913,8 @@
       }
     };
     const clickAvatar = (e2) => {
-      if (props.activeAvatar) {
-        props.activeAvatar(e2);
-      }
+      activeAvatar && activeAvatar(e2);
+      onActiveAvatar && onActiveAvatar(e2);
     };
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, (showMax || !((_h = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _h.maxCount) || avatarIndex <= ((_i = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _i.maxCount)) && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: cls,
@@ -17646,6 +17700,7 @@
   CountDown.defaultProps = defaultProps$j;
   CountDown.displayName = "NutCountDown";
   const defaultProps$i = {
+    style: {},
     activeName: ["0"],
     accordion: false,
     icon: "",
@@ -17659,6 +17714,8 @@
   const Collapse = React.memo(
     (props) => {
       const {
+        className,
+        style,
         children,
         activeName,
         accordion,
@@ -17666,7 +17723,7 @@
         rotate,
         iconSize,
         iconColor,
-        change
+        onChange
       } = {
         ...defaultProps$i,
         ...props
@@ -17708,10 +17765,11 @@
           }
         }
         setDefaultOpenIndex(newOpenIndex);
-        change && change(!isOpen, name);
+        onChange && onChange(!isOpen, name);
       };
       return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: colBem()
+        className: `${colBem()} ${className}`,
+        style
       }, childrenDom.map((item) => {
         return React__default["default"].cloneElement(item, {
           isOpen: defaultOpenIndex.includes(item.props.name),
@@ -18136,6 +18194,7 @@
       overscan = 2,
       key,
       handleScroll,
+      onScroll,
       className,
       containerSize,
       ...rest
@@ -18202,7 +18261,7 @@
       const totalSize = getListTotalSize(positions, horizontal);
       setListTotalSize(totalSize);
     }, [positions, sizeKey, horizontal]);
-    const onScroll = React.useCallback(() => {
+    const scroll = React.useCallback(() => {
       requestAnimationFrame((e2) => {
         const scrollSize = getElement()[scrollKey];
         const startIndex = binarySearch(positions, scrollSize, horizontal);
@@ -18223,7 +18282,11 @@
         const startOffset = positions[startIndex][offsetKey];
         setOptions({ startOffset, startIndex, overStart, endIndex });
         if (endIndex > sourceData.length - 1) {
-          handleScroll && handleScroll();
+          if (onScroll) {
+            onScroll();
+          } else if (handleScroll) {
+            handleScroll();
+          }
         }
       });
     }, [
@@ -18243,11 +18306,11 @@
     ]);
     React.useEffect(() => {
       const element = getElement();
-      element.addEventListener("scroll", onScroll, false);
+      element.addEventListener("scroll", scroll, false);
       return () => {
-        element.removeEventListener("scroll", onScroll, false);
+        element.removeEventListener("scroll", scroll, false);
       };
-    }, [getElement, onScroll]);
+    }, [getElement, scroll]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: className ? `${className} nut-virtualList-box` : "nut-virtualList-box",
       ...rest,
@@ -18437,6 +18500,9 @@
       play,
       pause,
       playend,
+      onPlayFuc,
+      onPauseFuc,
+      onPlayend,
       ...restProps
     } = {
       ...defaultProps$b,
@@ -18463,13 +18529,16 @@
           videoRef.setAttribute("x5-video-player-fullscreen", "false");
         }
         videoRef.addEventListener("play", () => {
+          onPlayFuc && onPlayFuc(videoRef);
           play && play(videoRef);
         });
         videoRef.addEventListener("pause", () => {
+          onPauseFuc && onPauseFuc(videoRef);
           pause && pause(videoRef);
         });
         videoRef.addEventListener("ended", () => {
           videoRef.currentTime = 0;
+          onPlayend && onPlayend(videoRef);
           playend && playend(videoRef);
         });
       }
@@ -19593,7 +19662,18 @@
   };
   const Signature = (props) => {
     const { locale } = useConfig();
-    const { type, lineWidth, strokeStyle, unSupportTpl, className, ...rest } = {
+    const {
+      type,
+      lineWidth,
+      strokeStyle,
+      unSupportTpl,
+      className,
+      confirm: confirm2,
+      clear,
+      onConfirm,
+      onClear,
+      ...rest
+    } = {
       ...defaultProps$4,
       ...props
     };
@@ -19658,15 +19738,16 @@
         canvasRef.current.removeEventListener(events[2], endEventHandler, false);
       }
     };
-    const clear = () => {
+    const handleClearBtn = () => {
       if (canvasRef.current && ctx2.current) {
         canvasRef.current.addEventListener(events[2], endEventHandler, false);
         ctx2.current.clearRect(0, 0, canvasWidth, canvasHeight);
         ctx2.current.closePath();
       }
-      props.clear && props.clear();
+      clear && clear();
+      onClear && onClear();
     };
-    const confirm2 = () => {
+    const handleConfirmBtn = () => {
       onSave(canvasRef.current);
     };
     const onSave = (canvas) => {
@@ -19681,8 +19762,9 @@
         default:
           dataurl = canvas.toDataURL("image/png");
       }
-      clear();
-      props.confirm && props.confirm(canvas, dataurl);
+      handleClearBtn();
+      confirm2 && confirm2(canvas, dataurl);
+      onConfirm && onConfirm(canvas, dataurl);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${b2()} ${className}`,
@@ -19699,11 +19781,11 @@
     }, locale.signature.unSupportTpl || unSupportTpl)), /* @__PURE__ */ React__default["default"].createElement(Button, {
       className: `${b2("btn")}`,
       type: "default",
-      onClick: () => clear()
+      onClick: () => handleClearBtn()
     }, locale.signature.reSign), /* @__PURE__ */ React__default["default"].createElement(Button, {
       className: `${b2("btn")}`,
       type: "primary",
-      onClick: () => confirm2()
+      onClick: () => handleConfirmBtn()
     }, locale.confirm));
   };
   Signature.defaultProps = defaultProps$4;
@@ -19830,6 +19912,7 @@
   TimeDetail.displayName = "NutTimeDetail";
   const defaultProps = {
     className: "",
+    style: {},
     visible: false,
     height: "20%",
     multiple: false,
@@ -19842,7 +19925,6 @@
   const TimeSelect = (props) => {
     useConfig();
     const {
-      children,
       visible,
       className,
       height,
@@ -19854,7 +19936,10 @@
       multiple,
       select,
       pannelChange,
-      timeChange
+      timeChange,
+      onSelect,
+      onPannelChange,
+      onTimeChange
     } = {
       ...defaultProps,
       ...props
@@ -19875,7 +19960,11 @@
     };
     const b2 = cn("timeselect");
     const closeFun = () => {
-      select && select(activeTime);
+      if (onSelect) {
+        onSelect(activeTime);
+      } else if (select) {
+        select(activeTime);
+      }
     };
     const handleSelectTime = (time) => {
       let curTimeData = {};
@@ -19898,7 +19987,11 @@
       const resultTimeData = [...activeTime];
       resultTimeData.splice(curIndex, 1, curTimeData);
       setActiveTime(resultTimeData);
-      timeChange && timeChange(time, resultTimeData);
+      if (onTimeChange) {
+        onTimeChange(time, resultTimeData);
+      } else if (timeChange) {
+        timeChange(time, resultTimeData);
+      }
     };
     const handleChange = (pannelKey) => {
       const resultTimeData = [...activeTime];
@@ -19924,7 +20017,11 @@
           ]);
         }
       }
-      pannelChange && pannelChange(pannelKey, resultTimeData);
+      if (onPannelChange) {
+        onPannelChange(pannelKey, resultTimeData);
+      } else if (pannelChange) {
+        pannelChange(pannelKey, resultTimeData);
+      }
     };
     const getTimePannelClass = (dataItem) => {
       if (String(dataItem["pannel-key"]) === String(activeKey)) {