@lingxiteam/ebe-utils 0.2.3 → 0.2.5

package/lib/pcpublic/src/components/pcfactory/src/Table/OperationCell/index.tsx

@@ -31,54 +31,38 @@ const OperationCell = (props: OperationCellProps) => {
   const [morePopVisible, setMorePopVisible] = useState<boolean>(false); // 更多操作按钮气泡卡片显隐
   const timerRef = useRef<any>();
 
-  const { showBuiltInBtns, showExtendBtns, moreBuiltInBtns, moreExtendBtns } =
-    useMemo(() => {
-      // 过滤掉隐藏的按钮，得到真正的内置的默认按钮数据(详情、编辑、删除)
-      const builtInBtns = getRealRowActions(
-        row,
-        getRealIndexById(row[currentRowKey]),
-      );
-      // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
-      const extendBtns = getRealExtendRowActions(
-        row,
-        getRealIndexById(row[currentRowKey]),
-      );
+  const { showBuiltInBtns, showExtendBtns, moreBuiltInBtns, moreExtendBtns } = useMemo(() => {
+    // 过滤掉隐藏的按钮，得到真正的内置的默认按钮数据(详情、编辑、删除)
+    const builtInBtns = getRealRowActions(row, getRealIndexById(row[currentRowKey]));
+    // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
+    const extendBtns = getRealExtendRowActions(row, getRealIndexById(row[currentRowKey]));
 
-      const allBtns = [...builtInBtns, ...extendBtns]?.filter(
-        (btn) => btn?.checked !== false,
-      ); // 只展示选中的按钮;
+    const allBtns = [...builtInBtns, ...extendBtns]?.filter(btn => btn?.checked !== false); // 只展示选中的按钮;
 
-      let showBtns: any[] = [];
-      let moreBtns: any[] = [];
+    let showBtns: any[] = [];
+    let moreBtns: any[] = [];
 
-      // 当按钮数量超过 设置最大展示的数量两个时，超过的两个及以上部分放到更多中
-      const allBtnsLen = allBtns?.length;
-      if (allBtnsLen > extendNum) {
-        showBtns = allBtns.slice(0, extendNum - 1);
-        moreBtns = allBtns.slice(extendNum - 1, allBtnsLen);
-      } else {
-        showBtns = allBtns;
-      }
+    // 当按钮数量超过 设置最大展示的数量两个时，超过的两个及以上部分放到更多中
+    const allBtnsLen = allBtns?.length;
+    if (allBtnsLen > extendNum) {
+      showBtns = allBtns.slice(0, extendNum - 1);
+      moreBtns = allBtns.slice(extendNum - 1, allBtnsLen);
+    } else {
+      showBtns = allBtns;
+    }
 
-      const showBuiltInBtns = showBtns.filter((b) => b.btnType === 'builtIn');
-      const showExtendBtns = showBtns.filter((b) => b.btnType === 'extend');
-      const moreBuiltInBtns = moreBtns.filter((b) => b.btnType === 'builtIn');
-      const moreExtendBtns = moreBtns.filter((b) => b.btnType === 'extend');
+    const showBuiltInBtns = showBtns.filter(b => b.btnType === 'builtIn');
+    const showExtendBtns = showBtns.filter(b => b.btnType === 'extend');
+    const moreBuiltInBtns = moreBtns.filter(b => b.btnType === 'builtIn');
+    const moreExtendBtns = moreBtns.filter(b => b.btnType === 'extend');
 
-      return {
-        showBuiltInBtns,
-        showExtendBtns,
-        moreBuiltInBtns,
-        moreExtendBtns,
-      };
-    }, [
-      row,
-      currentRowKey,
-      extendNum,
-      getRealRowActions,
-      getRealExtendRowActions,
-      getRealIndexById,
-    ]);
+    return {
+      showBuiltInBtns,
+      showExtendBtns,
+      moreBuiltInBtns,
+      moreExtendBtns,
+    };
+  }, [row, currentRowKey, extendNum, getRealRowActions, getRealExtendRowActions, getRealIndexById]);
 
   const renderBtnIcon = (c: any) => {
     const { icon, iconPos } = c;
@@ -98,38 +82,51 @@ const OperationCell = (props: OperationCellProps) => {
     return BtnIcon;
   };
 
+  // 更多操作按钮气泡卡片
+  const onMorePopVisible = (vis: boolean, idx: number) => {
+    setMorePopVisible(vis);
+    if (fixedAction && tableRef?.current) {
+      const fixedActionEle = tableRef.current?.querySelectorAll('.ued-table-actions')?.[idx]?.parentNode;
+      // 操作列固定时 此时fixedActionEle默认antd样式为 position: sticky;z-index: 2
+      // 由于气泡卡片挂在fixedActionEle里面导致被后面的列遮盖
+      if (fixedActionEle) {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+        if (!vis) {
+          // 防止卡片部分被遮盖再隐藏
+          timerRef.current = setTimeout(() => {
+            fixedActionEle.style.zIndex = 2;
+            timerRef.current = null;
+          }, 200);
+          return;
+        }
+        fixedActionEle.style.zIndex = 3;
+      }
+    }
+  };
+
   // 操作栏单个内置按钮
   const renderBuiltInSingleBtn = (
     c: any,
     row: any,
-    rowIndex: number | null,
+    rowIndex: number,
     idx: number,
     defaultBtnList: any,
     isPopover = false,
     showExtendBtns?: any[],
     moreBuiltInBtns?: any[],
-    moreExtendBtns?: any[],
+    moreExtendBtns?: any[]
   ) => {
     const BtnIcon = renderBtnIcon(c);
 
-    const popconfirmPlacement =
-      moreBuiltInBtns?.length ||
-      moreExtendBtns?.length ||
-      showExtendBtns?.length
-        ? 'top'
-        : 'topRight';
+    const popconfirmPlacement = moreBuiltInBtns?.length || moreExtendBtns?.length || showExtendBtns?.length ? 'top' : 'topRight';
 
     const onBtnClick = (e: any) => {
       e.stopPropagation();
-      if (
-        (typeof c === 'string' ? c === 'detail' : c.type === 'detail') &&
-        typeof onRowDetailClick === 'function'
-      ) {
+      if ((typeof c === 'string' ? c === 'detail' : c.type === 'detail') && typeof onRowDetailClick === 'function') {
         onRowDetailClick(row, rowIndex);
-      } else if (
-        (typeof c === 'string' ? c === 'edit' : c.type === 'edit') &&
-        typeof onRowEditClick === 'function'
-      ) {
+      } else if ((typeof c === 'string' ? c === 'edit' : c.type === 'edit') && typeof onRowEditClick === 'function') {
         onRowEditClick(row, rowIndex);
       }
     };
@@ -145,7 +142,7 @@ const OperationCell = (props: OperationCellProps) => {
       <SingleBtn
         getLocale={getLocale}
         actionsMap={actionsMap}
-        setMorePopVisible={setMorePopVisible}
+        hideMorePopover={() => onMorePopVisible(false, rowIndex)}
         BtnIcon={BtnIcon}
         c={c}
         idx={idx}
@@ -159,24 +156,10 @@ const OperationCell = (props: OperationCellProps) => {
   };
 
   // 操作栏扩展按钮
-  const renderExtendBtns = (
-    btnList: any,
-    isPopover = false,
-    row: any,
-    index: number,
-    buttonStyle?: React.CSSProperties,
-  ) => {
+  const renderExtendBtns = (btnList: any, isPopover = false, row: any, index: number, buttonStyle?: React.CSSProperties) => {
     return btnList.map((c: any, i: number) => {
       if (c.type) {
-        return renderBuiltInSingleBtn(
-          c,
-          row,
-          index,
-          i,
-          btnList,
-          isPopover,
-          btnList?.slice(i),
-        );
+        return renderBuiltInSingleBtn(c, row, index, i, btnList, isPopover, btnList?.slice(i));
       }
       const { iconPos, id, isIcon, onClick, visible: buttonVisible = true } = c;
 
@@ -194,12 +177,12 @@ const OperationCell = (props: OperationCellProps) => {
               className="ued-table-actions-antBtn"
               disabled={c.disabled}
               key={id}
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 if (typeof onClick === 'function') {
                   onClick(currentRowKey ? row[currentRowKey] : row, row, index);
                 }
-                setMorePopVisible(false);
+                onMorePopVisible(false, index);
               }}
             >
               <div className="ued-table-actions-extendBtn" style={buttonStyle}>
@@ -218,7 +201,7 @@ const OperationCell = (props: OperationCellProps) => {
               className="ued-table-actions-antBtn"
               disabled={c.disabled}
               key={id}
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 if (typeof onClick === 'function') {
                   onClick(currentRowKey ? row[currentRowKey] : row, row, index);
@@ -245,7 +228,7 @@ const OperationCell = (props: OperationCellProps) => {
     moreBuiltInBtns: any[],
     moreExtendBtns: any[],
     row: any,
-    index: number,
+    index: number
   ) => {
     return (
       <>
@@ -263,9 +246,7 @@ const OperationCell = (props: OperationCellProps) => {
           moreBuiltInBtns?.length + moreExtendBtns?.length > 0 && (
             <>
               {/* TODO:  是什么？ showBuiltInBtns[showBuiltInBtns.length - 1]?.visible !== false */}
-              {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && (
-                <Divider type="vertical" />
-              )}
+              {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && <Divider type="vertical" />}
               <Popover
                 overlayClassName="ued-table-more-pop"
                 content={
@@ -275,27 +256,14 @@ const OperationCell = (props: OperationCellProps) => {
                       overflow: 'auto',
                       padding: isSmallPopover ? '5px 5px' : '12px 16px',
                     }}
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={e => e.stopPropagation()}
                   >
                     {moreBuiltInBtns?.length
                       ? moreBuiltInBtns.map((child: any, idx: number) => {
-                          return renderBuiltInSingleBtn(
-                            child,
-                            row,
-                            index,
-                            idx,
-                            showBuiltInBtns,
-                            true,
-                          );
-                        })
+                        return renderBuiltInSingleBtn(child, row, index, idx, showBuiltInBtns, true);
+                      })
                       : null}
-                    {renderExtendBtns(
-                      moreExtendBtns,
-                      true,
-                      row,
-                      index,
-                      isSmallPopover ? { fontSize: '12px' } : {},
-                    )}
+                    {renderExtendBtns(moreExtendBtns, true, row, index, isSmallPopover ? { fontSize: '12px' } : {})}
                   </div>
                 }
                 trigger="click"
@@ -304,43 +272,14 @@ const OperationCell = (props: OperationCellProps) => {
                 // eslint-disable-next-line max-len
                 getPopupContainer={
                   isSmallPopover
-                    ? () =>
-                        document.getElementById('lcdpApp-root') || document.body
-                    : (triggerNode: HTMLElement) =>
-                        triggerNode?.parentNode as HTMLElement
+                    ? () => document.getElementById('lcdpApp-root') || document.body
+                    : (triggerNode: HTMLElement) => triggerNode?.parentNode as HTMLElement
                 }
                 onOpenChange={(vis: boolean) => {
-                  setMorePopVisible(vis);
-                  if (fixedAction && tableRef?.current) {
-                    const fixedActionEle =
-                      tableRef.current?.querySelectorAll(
-                        '.ued-table-actions',
-                      )?.[index]?.parentNode;
-                    // 操作列固定时 此时fixedActionEle默认antd样式为 position: sticky;z-index: 2
-                    // 由于气泡卡片挂在fixedActionEle里面导致被后面的列遮盖
-                    if (fixedActionEle) {
-                      if (timerRef.current) {
-                        clearTimeout(timerRef.current);
-                      }
-                      if (!vis) {
-                        // 防止卡片部分被遮盖再隐藏
-                        timerRef.current = setTimeout(() => {
-                          fixedActionEle.style.zIndex = 2;
-                          timerRef.current = null;
-                        }, 200);
-                        return;
-                      }
-                      fixedActionEle.style.zIndex = 3;
-                    }
-                  }
+                  onMorePopVisible(vis, index);
                 }}
               >
-                <Button
-                  type="link"
-                  className="ued-table-actions-antBtn"
-                  key="more"
-                  onClick={(e) => e.stopPropagation()}
-                >
+                <Button type="link" className="ued-table-actions-antBtn" key="more" onClick={e => e.stopPropagation()}>
                   <div className="ued-table-actions-extendBtn">
                     {getLocale?.('more')}
                     <LegacyIcon className="actIcon-left" type="down" />
@@ -362,14 +301,10 @@ const OperationCell = (props: OperationCellProps) => {
           <>
             <div
               className="ued-table-actions-extendBtn"
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 if (typeof onRowSaveClick === 'function') {
-                  onRowSaveClick(
-                    row,
-                    getRealIndexById(row[currentRowKey]),
-                    false,
-                  );
+                  onRowSaveClick(row, getRealIndexById(row[currentRowKey]), false);
                 }
               }}
             >
@@ -387,14 +322,14 @@ const OperationCell = (props: OperationCellProps) => {
                   onRowCancelClick(row);
                 }
               }}
-              onCancel={(e) => {
+              onCancel={e => {
                 e?.preventDefault();
                 e?.stopPropagation();
               }}
             >
               <div
                 className="ued-table-actions-extendBtn"
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                 }}
               >
@@ -415,17 +350,10 @@ const OperationCell = (props: OperationCellProps) => {
                 false,
                 showExtendBtns,
                 moreBuiltInBtns,
-                moreExtendBtns,
+                moreExtendBtns
               );
             })}
-            {renderExtendMoreBtns(
-              showBuiltInBtns,
-              showExtendBtns,
-              moreBuiltInBtns,
-              moreExtendBtns,
-              row,
-              getRealIndexById(row[currentRowKey]),
-            )}
+            {renderExtendMoreBtns(showBuiltInBtns, showExtendBtns, moreBuiltInBtns, moreExtendBtns, row, getRealIndexById(row[currentRowKey]))}
           </>
         )
       }