@nutui/nutui-react-taro 1.3.7 → 1.3.8

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.3.7 Wed Oct 19 2022 16:59:16 GMT+0800 (中国标准时间)
+* @nutui/nutui-react-taro v1.3.8 Wed Oct 26 2022 17:33:31 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -1484,12 +1484,15 @@ const defaultProps$1m = {
   iconSlot: null,
   linkSlot: null,
   click: (event) => {
+  },
+  onClick: (event) => {
   }
 };
 const Cell = (props) => {
   const {
     children,
     click,
+    onClick,
     title,
     subTitle,
     desc,
@@ -1516,6 +1519,7 @@ const Cell = (props) => {
   const history = useHistory();
   const handleClick2 = (event) => {
     click(event);
+    onClick(event);
     if (to2 && history) {
       history[replace ? "replace" : "push"](to2);
     } else if (url) {
@@ -2993,6 +2997,8 @@ const defaultProps$19 = {
   className: "",
   style: {},
   tabSwitch: () => {
+  },
+  onSwitch: () => {
   }
 };
 const Tabbar = (props) => {
@@ -3006,7 +3012,8 @@ const Tabbar = (props) => {
     safeAreaInsetBottom,
     className,
     style,
-    tabSwitch
+    tabSwitch,
+    onSwitch
   } = {
     ...defaultProps$19,
     ...props
@@ -3038,6 +3045,7 @@ const Tabbar = (props) => {
       handleClick: () => {
         handleClick2(idx);
         tabSwitch(child, idx);
+        onSwitch(child, idx);
       }
     };
     return React__default.cloneElement(child, childProps);
@@ -3492,6 +3500,7 @@ class Title {
 }
 const defaultProps$15 = {
   ...ComponentDefaults,
+  tabStyle: {},
   value: 0,
   color: "",
   background: "",
@@ -3511,6 +3520,7 @@ const Tabs = (props) => {
   const {
     value,
     color,
+    tabStyle,
     background,
     direction,
     type,
@@ -3592,7 +3602,7 @@ const Tabs = (props) => {
     ...rest
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: classesTitle,
-    style: { background }
+    style: { ...tabStyle, background }
   }, !!titleNode && typeof titleNode === "function" ? titleNode() : titles.current.map((item, index2) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       style: titleStyle,
@@ -3625,6 +3635,8 @@ const Tabs = (props) => {
       )
     }, item.title));
   })), /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2("")}__content__wrap`
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2("")}__content`,
     style: contentStyle
   }, React__default.Children.map(children, (child, idx) => {
@@ -3643,7 +3655,7 @@ const Tabs = (props) => {
       };
     }
     return React__default.cloneElement(child, childProps);
-  })));
+  }))));
 };
 Tabs.defaultProps = defaultProps$15;
 Tabs.displayName = "NutTabs";
@@ -3654,7 +3666,7 @@ const defaultProps$14 = {
   disabled: false
 };
 const TabPane = (props) => {
-  const { children, paneKey, activeKey, autoHeightClassName } = {
+  const { children, paneKey, activeKey, autoHeightClassName, className } = {
     ...defaultProps$14,
     ...props
   };
@@ -3664,7 +3676,8 @@ const TabPane = (props) => {
       active: paneKey === activeKey
     },
     b2(""),
-    autoHeightClassName
+    autoHeightClassName,
+    className
   );
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes
@@ -3755,7 +3768,7 @@ const SideNavBar = (props) => {
     children,
     className,
     showhead,
-    handleClose,
+    onClose,
     ...rest
   } = {
     ...defaultProps$12,
@@ -3766,7 +3779,7 @@ const SideNavBar = (props) => {
     visible,
     style: { width, height: "100%" },
     position,
-    onClose: handleClose
+    onClose
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: className ? `${className} nut-sidenavbar` : "nut-sidenavbar",
     ...rest
@@ -3792,7 +3805,7 @@ const defaultProps$11 = {
   open: true
 };
 const SubSideNavBar = (props) => {
-  const { title, ikey, children, titleClick, open, ...rest } = {
+  const { title, ikey, children, onClick, open, ...rest } = {
     ...defaultProps$11,
     ...props
   };
@@ -3829,7 +3842,7 @@ const SubSideNavBar = (props) => {
     handleClick(e2);
     const currentClass = e2.currentTarget.className;
     const isShow = currentClass.includes("nutShow");
-    titleClick && titleClick({ title, ikey, isShow });
+    onClick && onClick({ title, ikey, isShow });
   };
   useEffect(() => {
     var _a, _b;
@@ -3853,10 +3866,10 @@ const SubSideNavBar = (props) => {
   }, 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.createElement("div", {
     className: "nut-subsidenavbar__item border-bt",
@@ -4437,7 +4450,10 @@ const Range = (props) => {
     marks,
     change,
     dragStart,
-    dragEnd
+    dragEnd,
+    onChange,
+    onDragStart,
+    onDragEnd
   } = { ...defaultProps$Y, ...props };
   let { min, max, step } = { ...defaultProps$Y, ...props };
   min = Number(min);
@@ -4607,6 +4623,7 @@ const Range = (props) => {
     }
     if ((marks || end) && !isSameValue(value, startValue)) {
       change && change(value);
+      onChange && onChange(value);
     }
   };
   const click = async (event) => {
@@ -4654,6 +4671,7 @@ const Range = (props) => {
     }
     if (dragStatus === "start") {
       dragStart && dragStart();
+      onDragStart && onDragStart();
     }
     touch.move(event);
     SetDragStatus("draging");
@@ -4680,6 +4698,7 @@ const Range = (props) => {
     if (dragStatus === "draging") {
       updateValue(currentValue, true);
       dragEnd && dragEnd();
+      onDragEnd && onDragEnd();
     }
     SetDragStatus("");
   };
@@ -6378,6 +6397,12 @@ const InputNumber = (props) => {
     overlimit,
     blur,
     focus,
+    onAdd,
+    onReduce,
+    onOverlimit,
+    onBlurFuc,
+    onFocus,
+    onChangeFuc,
     iconClassPrefix,
     iconFontClassName,
     ...restProps
@@ -6418,6 +6443,7 @@ const InputNumber = (props) => {
   };
   const emitChange = (value, e2) => {
     const outputValue = fixedDecimalPlaces(value);
+    onChangeFuc && onChangeFuc(outputValue, e2);
     change && change(outputValue, e2);
     if (!isAsync) {
       if (Number(outputValue) < Number(min)) {
@@ -6430,26 +6456,31 @@ const InputNumber = (props) => {
     }
   };
   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 value = Number(e2.detail.value);
     change && change(value, e2);
+    onChangeFuc && onChangeFuc(value, e2);
     if (!isAsync) {
       if (Number.isNaN(value)) {
         setInputValue(inputValue);
@@ -6463,6 +6494,7 @@ const InputNumber = (props) => {
       return;
     if (readonly)
       return;
+    onFocus && onFocus(e2);
     focus && focus(e2);
   };
   const burValue = (e2) => {
@@ -6477,6 +6509,7 @@ const InputNumber = (props) => {
       value = Number(max);
     }
     emitChange(value, e2);
+    onBlurFuc && onBlurFuc(e2);
     blur && blur(e2);
   };
   return /* @__PURE__ */ React__default.createElement("div", {
@@ -6609,12 +6642,20 @@ const Input = (props) => {
     rows,
     slotButton,
     slotInput,
+    onChange,
+    onBlur,
+    onFocus,
+    onClear,
+    formatter,
+    keypress,
+    onClickInput,
+    onClickLeftIcon,
+    onClickRightIcon,
+    onClick,
     change,
     blur,
     focus,
     clear,
-    formatter,
-    keypress,
     clickInput,
     clickLeftIcon,
     clickRightIcon,
@@ -6680,20 +6721,22 @@ const Input = (props) => {
     }
     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);
@@ -6702,15 +6745,19 @@ const Input = (props) => {
       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 = () => {
@@ -6726,6 +6773,7 @@ const Input = (props) => {
   };
   const handleClear = (event) => {
     updateValue("");
+    onClear && onClear("", event);
     clear && clear("", event);
   };
   return /* @__PURE__ */ React__default.createElement("div", {
@@ -6733,6 +6781,7 @@ const Input = (props) => {
     style,
     ...rest,
     onClick: (e2) => {
+      onClick && onClick(e2);
       click && click(e2);
     }
   }, slotInput ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
@@ -6745,12 +6794,12 @@ const Input = (props) => {
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-input-inner",
     onClick: (e2) => {
-      onClickInput(e2);
+      handleClickInput(e2);
     }
   }, slotInput))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, leftIcon && leftIcon.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-input-left-icon",
     onClick: (e2) => {
-      onClickLeftIcon(e2);
+      handleClickLeftIcon(e2);
     }
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
     classPrefix: iconClassPrefix,
@@ -6767,7 +6816,7 @@ const Input = (props) => {
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-input-inner",
     onClick: (e2) => {
-      onClickInput(e2);
+      handleClickInput(e2);
     }
   }, type === "textarea" ? /* @__PURE__ */ React__default.createElement("textarea", {
     className: "input-text",
@@ -6783,13 +6832,13 @@ const Input = (props) => {
     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.createElement("input", {
     className: "input-text",
@@ -6803,13 +6852,13 @@ const Input = (props) => {
     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.createElement(Icon$1, {
     classPrefix: iconClassPrefix,
@@ -6823,7 +6872,7 @@ const Input = (props) => {
   }) : null, rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-input-right-icon",
     onClick: (e2) => {
-      onClickRightIcon(e2);
+      handleClickRightIcon(e2);
     }
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
     classPrefix: iconClassPrefix,
@@ -7921,7 +7970,7 @@ const InternalUploader = (props, ref) => {
       classPrefix: props.iconClassPrefix,
       fontClassName: props.iconFontClassName,
       name: "link"
-    }), "\xA0", item.name), /* @__PURE__ */ React__default.createElement(Icon$1, {
+    }), "\xA0", item.name), isDeletable && /* @__PURE__ */ React__default.createElement(Icon$1, {
       classPrefix: props.iconClassPrefix,
       fontClassName: props.iconFontClassName,
       color: "#808080",
@@ -9623,7 +9672,7 @@ const Switch = (props) => {
     inactiveColor,
     activeText,
     inactiveText,
-    change,
+    onChange,
     className,
     style
   } = {
@@ -9651,7 +9700,7 @@ const Switch = (props) => {
     if (!isAsync) {
       setValue(!value);
     }
-    change && change(!value, event);
+    onChange && onChange(!value, event);
   };
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes(),
@@ -14687,6 +14736,8 @@ const NoticeBar = (props) => {
     rightIcon,
     close,
     click,
+    onClose,
+    onClick,
     iconClassPrefix,
     iconFontClassName
   } = {
@@ -14774,11 +14825,13 @@ const NoticeBar = (props) => {
   };
   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);
@@ -14828,9 +14881,11 @@ const NoticeBar = (props) => {
   };
   const go = (item) => {
     click && click(item);
+    onClick && onClick(item);
   };
   const handleClickIcon = () => {
     close && close(scrollList[0]);
+    onClose && onClose(scrollList[0]);
   };
   const iconShow = () => {
     if (leftIcon === "close") {
@@ -14956,6 +15011,7 @@ const Steps = (props) => {
     className,
     progressDot,
     clickStep,
+    onClickStep,
     ...restProps
   } = propSteps;
   const parentSteps = {
@@ -15019,10 +15075,9 @@ const Step = (props) => {
     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(
@@ -15565,6 +15620,7 @@ const Avatar = (props) => {
     className,
     style,
     activeAvatar,
+    onActiveAvatar,
     onError,
     iconClassPrefix,
     iconFontClassName,
@@ -15627,9 +15683,8 @@ const Avatar = (props) => {
     }
   };
   const clickAvatar = (e2) => {
-    if (props.activeAvatar) {
-      props.activeAvatar(e2);
-    }
+    activeAvatar && activeAvatar(e2);
+    onActiveAvatar && onActiveAvatar(e2);
   };
   console.log(
     "!parent?.propAvatarGroup?.maxCount",
@@ -16434,6 +16489,8 @@ function areEqual(prevProps, nextProps) {
 const Collapse = memo(
   (props) => {
     const {
+      className,
+      style,
       children,
       activeName,
       accordion,
@@ -16441,7 +16498,7 @@ const Collapse = memo(
       rotate,
       iconSize,
       iconColor,
-      change
+      onChange
     } = {
       ...defaultProps$i,
       ...props
@@ -16483,10 +16540,11 @@ const Collapse = memo(
         }
       }
       setDefaultOpenIndex(newOpenIndex);
-      change && change(!isOpen, name);
+      onChange && onChange(!isOpen, name);
     };
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: colBem()
+      className: `${colBem()} ${className}`,
+      style
     }, childrenDom.map((item) => {
       return React__default.cloneElement(item, {
         isOpen: defaultOpenIndex.includes(item.props.name),
@@ -16916,6 +16974,7 @@ const VirtualList = (props) => {
     overscan = 2,
     key,
     handleScroll,
+    onScroll,
     className,
     containerSize,
     ...rest
@@ -16982,7 +17041,7 @@ const VirtualList = (props) => {
     const totalSize = getListTotalSize(positions, horizontal);
     setListTotalSize(totalSize);
   }, [positions, sizeKey, horizontal]);
-  const onScroll = useCallback(() => {
+  const scroll = useCallback(() => {
     requestAnimationFrame((e2) => {
       const scrollSize = getElement()[scrollKey];
       const startIndex = binarySearch(positions, scrollSize, horizontal);
@@ -17003,7 +17062,11 @@ const VirtualList = (props) => {
       const startOffset = positions[startIndex][offsetKey];
       setOptions({ startOffset, startIndex, overStart, endIndex });
       if (endIndex > sourceData.length - 1) {
-        handleScroll && handleScroll();
+        if (onScroll) {
+          onScroll();
+        } else if (handleScroll) {
+          handleScroll();
+        }
       }
     });
   }, [
@@ -17023,11 +17086,11 @@ const VirtualList = (props) => {
   ]);
   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.createElement("div", {
     className: className ? `${className} nut-virtualList-box` : "nut-virtualList-box",
     ...rest,
@@ -17217,6 +17280,9 @@ const Video = (props) => {
     play,
     pause,
     playend,
+    onPlayFuc,
+    onPauseFuc,
+    onPlayend,
     ...restProps
   } = {
     ...defaultProps$b,
@@ -17243,13 +17309,16 @@ const Video = (props) => {
         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);
       });
     }
@@ -18318,6 +18387,10 @@ const Signature = (props) => {
     strokeStyle,
     unSupportTpl,
     className,
+    confirm,
+    clear,
+    onConfirm,
+    onClear,
     ...rest
   } = {
     ...defaultProps$4,
@@ -18347,14 +18420,15 @@ const Signature = (props) => {
   const endEventHandler = (event) => {
     event.preventDefault();
   };
-  const clear = () => {
+  const handleClearBtn = () => {
     if (ctx2.current) {
       ctx2.current.clearRect(0, 0, canvasWidth, canvasHeight);
       ctx2.current.closePath();
     }
-    props.clear && props.clear();
+    clear && clear();
+    onClear && onClear();
   };
-  const confirm = () => {
+  const handleConfirmBtn = () => {
     onSave();
   };
   const onSave = () => {
@@ -18366,8 +18440,9 @@ const Signature = (props) => {
         canvas: res[0].node,
         fileType: props.type,
         success: (res2) => {
-          clear();
-          props.confirm && props.confirm(res2.tempFilePath);
+          handleClearBtn();
+          confirm && confirm(res2.tempFilePath);
+          onConfirm && onConfirm(res2.tempFilePath);
         },
         fail: (res2) => {
           console.log("\u4FDD\u5B58\u5931\u8D25");
@@ -18416,11 +18491,11 @@ const Signature = (props) => {
   })), /* @__PURE__ */ React__default.createElement(Button, {
     className: `${b2("btn")}`,
     type: "default",
-    onClick: () => clear()
+    onClick: () => handleClearBtn()
   }, locale.signature.reSign), /* @__PURE__ */ React__default.createElement(Button, {
     className: `${b2("btn")}`,
     type: "primary",
-    onClick: () => confirm()
+    onClick: () => handleConfirmBtn()
   }, locale.confirm));
 };
 Signature.defaultProps = defaultProps$4;
@@ -18547,6 +18622,7 @@ TimeDetail.defaultProps = defaultProps$1;
 TimeDetail.displayName = "NutTimeDetail";
 const defaultProps = {
   className: "",
+  style: {},
   visible: false,
   height: "20%",
   multiple: false,
@@ -18559,7 +18635,6 @@ const defaultProps = {
 const TimeSelect = (props) => {
   useConfig$1();
   const {
-    children,
     visible,
     className,
     height,
@@ -18571,7 +18646,10 @@ const TimeSelect = (props) => {
     multiple,
     select,
     pannelChange,
-    timeChange
+    timeChange,
+    onSelect,
+    onPannelChange,
+    onTimeChange
   } = {
     ...defaultProps,
     ...props
@@ -18592,7 +18670,11 @@ const TimeSelect = (props) => {
   };
   const b2 = cn("timeselect");
   const closeFun = () => {
-    select && select(activeTime);
+    if (onSelect) {
+      onSelect(activeTime);
+    } else if (select) {
+      select(activeTime);
+    }
   };
   const handleSelectTime = (time) => {
     let curTimeData = {};
@@ -18615,7 +18697,11 @@ const TimeSelect = (props) => {
     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];
@@ -18641,7 +18727,11 @@ const TimeSelect = (props) => {
         ]);
       }
     }
-    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)) {