@lingxiteam/ebe-utils 0.2.21 → 0.2.23

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

@@ -1,13 +1,15 @@
-import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
-import { Icon as LegacyIcon } from '@lingxiteam/icons';
-import { Button, Divider, Popconfirm, Popover, Tooltip } from 'antd';
-import React, { Fragment, useMemo, useRef, useState } from 'react';
-import CommIcon from '../../Icon';
+import React, { Fragment, useState, useMemo, useRef } from 'react';
+import { CloseOutlined, SaveOutlined, Icon as LegacyIcon } from '@lingxiteam/icons';
+import { Divider, Popconfirm, Popover, Tooltip, Button } from 'antd';
 import type { OperationCellProps } from '../types/OperationCell';
+import CommIcon from '../../Icon';
 import SingleBtn from './SingleBtn';
+import PopoverWrapper from './PopoverWrapper';
 
 // 操作列
-const OperationCell = (props: OperationCellProps) => {
+const OperationCell = (
+  props: OperationCellProps,
+) => {
   const {
     row,
     currentRowKey,
@@ -27,17 +29,23 @@ const OperationCell = (props: OperationCellProps) => {
     fixedAction,
     isSmallPopover,
     tableRef,
+    $$componentItem,
   } = props;
   const [morePopVisible, setMorePopVisible] = useState<boolean>(false); // 更多操作按钮气泡卡片显隐
   const timerRef = useRef<any>();
+  const { id: compId } = $$componentItem || {};
 
+  
   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[] = [];
@@ -119,14 +127,25 @@ const OperationCell = (props: OperationCellProps) => {
     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 popoverOptions = c?.popoverSetting?.page || c?.popoverSetting?.options;
     const onBtnClick = (e: any) => {
-      e.stopPropagation();
-      if ((typeof c === 'string' ? c === 'detail' : c.type === 'detail') && typeof onRowDetailClick === 'function') {
+      if (popoverOptions?.trigger !== 'click') {
+        // trigger为点击的气泡卡片，阻止冒泡在内部实现
+        e.stopPropagation();
+      }
+      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);
       }
     };
@@ -139,88 +158,113 @@ const OperationCell = (props: OperationCellProps) => {
     };
 
     return (
-      <SingleBtn
-        getLocale={getLocale}
-        actionsMap={actionsMap}
-        hideMorePopover={() => onMorePopVisible(false, rowIndex)}
-        BtnIcon={BtnIcon}
-        c={c}
-        idx={idx}
-        defaultBtnList={defaultBtnList}
-        isPopover={isPopover}
-        popconfirmPlacement={popconfirmPlacement}
-        onBtnClick={onBtnClick}
-        onDeleteClick={onDeleteClick}
-      />
+      <PopoverWrapper
+        row={row}
+        index={rowIndex}
+        engineApis={engineApis}
+        rowId={row[currentRowKey]}
+        compId={compId}
+        popoverSetting={c?.popoverSetting}
+      >
+        <SingleBtn
+          getLocale={getLocale}
+          actionsMap={actionsMap}
+          hideMorePopover={() => onMorePopVisible(false, rowIndex)}
+          BtnIcon={BtnIcon}
+          c={c}
+          idx={idx}
+          defaultBtnList={defaultBtnList}
+          isPopover={isPopover}
+          popconfirmPlacement={popconfirmPlacement}
+          onBtnClick={onBtnClick}
+          onDeleteClick={onDeleteClick}
+        />
+      </PopoverWrapper>
     );
   };
-
+    
   // 操作栏扩展按钮
   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));
       }
-      const { iconPos, id, isIcon, onClick, visible: buttonVisible = true } = c;
+      const { iconPos, id, isIcon, onClick, visible: buttonVisible = true, popoverSetting } = c;
 
       const BtnIcon = renderBtnIcon(c);
 
       if (!buttonVisible) {
         return null;
       }
+      const popoverOptions = popoverSetting?.page || popoverSetting?.options;
 
-      return isPopover ? (
-        <div>
-          <Tooltip title={c.title} visible={!!isIcon && undefined}>
-            <Button
-              type="link"
-              className="ued-table-actions-antBtn"
-              disabled={c.disabled}
-              key={id}
-              onClick={e => {
-                e.stopPropagation();
-                if (typeof onClick === 'function') {
-                  onClick(currentRowKey ? row[currentRowKey] : row, row, index);
-                }
-                onMorePopVisible(false, index);
-              }}
-            >
-              <div className="ued-table-actions-extendBtn" style={buttonStyle}>
-                {iconPos && iconPos === 'left' && BtnIcon}
-                {!isIcon && c.title}
-                {iconPos && iconPos === 'right' && BtnIcon}
-              </div>
-            </Button>
-          </Tooltip>
-        </div>
-      ) : (
-        <Fragment key={id}>
-          <Tooltip title={c.title} visible={!!isIcon && undefined}>
-            <Button
-              type="link"
-              className="ued-table-actions-antBtn"
-              disabled={c.disabled}
-              key={id}
-              onClick={e => {
-                e.stopPropagation();
-                if (typeof onClick === 'function') {
-                  onClick(currentRowKey ? row[currentRowKey] : row, row, index);
-                }
-              }}
-            >
-              <div className="ued-table-actions-extendBtn">
-                {iconPos && iconPos === 'left' && BtnIcon}
-                {!isIcon && c.title}
-                {iconPos && iconPos === 'right' && BtnIcon}
-              </div>
-            </Button>
-          </Tooltip>
-          {i !== btnList.length - 1 && <Divider type="vertical" />}
-        </Fragment>
-      );
+      return (
+        <PopoverWrapper
+          row={row}
+          index={index}
+          engineApis={engineApis}
+          rowId={row[currentRowKey]}
+          compId={compId}
+          popoverSetting={c?.popoverSetting}
+        >
+          {isPopover ? (
+            <div>
+              <Tooltip title={c.title} visible={!!isIcon && undefined}>
+                <Button
+                  type="link"
+                  className="ued-table-actions-antBtn"
+                  disabled={c.disabled}
+                  key={id}
+                  onClick={(e) => {
+                    if (popoverOptions?.trigger !== 'click') {
+                      // trigger为点击的气泡卡片，阻止冒泡在内部实现
+                      e.stopPropagation();
+                    }
+                    if (typeof onClick === 'function') {
+                      onClick(currentRowKey ? row[currentRowKey] : row, row, index);
+                    }
+                    onMorePopVisible(false, index);
+                  }}
+                >
+                  <div className="ued-table-actions-extendBtn" style={buttonStyle}>
+                    {iconPos && iconPos === 'left' && BtnIcon}
+                    {!isIcon && c.title}
+                    {iconPos && iconPos === 'right' && BtnIcon}
+                  </div>
+                </Button>
+              </Tooltip>
+            </div>) : (
+              <Fragment key={id}>
+                <Tooltip title={c.title} visible={!!isIcon && undefined}>
+                  <Button
+                    type="link"
+                    className="ued-table-actions-antBtn"
+                    disabled={c.disabled}
+                    key={id}
+                    onClick={(e) => {
+                      if (popoverOptions?.trigger !== 'click') {
+                        // trigger为点击的气泡卡片，阻止冒泡在内部实现
+                        e.stopPropagation();
+                      }
+                      if (typeof onClick === 'function') {
+                        onClick(currentRowKey ? row[currentRowKey] : row, row, index);
+                      }
+                    }}
+                  >
+                    <div className="ued-table-actions-extendBtn">
+                      {iconPos && iconPos === 'left' && BtnIcon}
+                      {!isIcon && c.title}
+                      {iconPos && iconPos === 'right' && BtnIcon}
+                    </div>
+                  </Button>
+                </Tooltip>
+                {i !== btnList.length - 1 && <Divider type="vertical" />}
+              </Fragment>
+          )}
+        </PopoverWrapper>);
     });
   };
-
+  
   // 操作栏更多按钮
   const renderExtendMoreBtns = (
     showBuiltInBtns: any[],
@@ -228,67 +272,61 @@ const OperationCell = (props: OperationCellProps) => {
     moreBuiltInBtns: any[],
     moreExtendBtns: any[],
     row: any,
-    index: number
+    index: number,
   ) => {
     return (
       <>
         {
-          // 扩展
-          showExtendBtns?.length > 0 ? (
-            <>
-              {!!showBuiltInBtns?.length && <Divider type="vertical" />}
-              {renderExtendBtns(showExtendBtns, false, row, index)}
-            </>
-          ) : null
-        }
+            // 扩展
+            showExtendBtns?.length > 0 ? (
+              <>
+                {!!showBuiltInBtns?.length && <Divider type="vertical" />}
+                {renderExtendBtns(showExtendBtns, false, row, index)}
+              </>
+            ) : null
+          }
         {
-          // 更多
-          moreBuiltInBtns?.length + moreExtendBtns?.length > 0 && (
-            <>
-              {/* TODO:  是什么？ showBuiltInBtns[showBuiltInBtns.length - 1]?.visible !== false */}
-              {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && <Divider type="vertical" />}
-              <Popover
-                overlayClassName="ued-table-more-pop"
-                content={
-                  <div
-                    style={{
-                      maxHeight: '300px',
-                      overflow: 'auto',
-                      padding: isSmallPopover ? '5px 5px' : '12px 16px',
-                    }}
-                    onClick={e => e.stopPropagation()}
+            // 更多
+            moreBuiltInBtns?.length + moreExtendBtns?.length > 0 && (
+              <>
+                {/* TODO:  是什么？ showBuiltInBtns[showBuiltInBtns.length - 1]?.visible !== false */}
+                {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && <Divider type="vertical" />}
+                <Popover
+                  overlayClassName="ued-table-more-pop"
+                  content={(
+                    <div style={{ maxHeight: '300px', overflow: 'auto', padding: isSmallPopover ? '5px 5px' : '12px 16px' }} onClick={e => e.stopPropagation()}>
+                      {
+                        moreBuiltInBtns?.length ? moreBuiltInBtns.map((child: any, idx: number) => {
+                          return renderBuiltInSingleBtn(child, row, index, idx, showBuiltInBtns, true);
+                        }) : null
+                      }
+                      {renderExtendBtns(moreExtendBtns, true, row, index, isSmallPopover ? { fontSize: '12px' } : {})}
+                    </div>
+                  )}
+                  trigger="click"
+                  placement="topRight"
+                  open={morePopVisible}
+                  // eslint-disable-next-line max-len
+                  getPopupContainer={isSmallPopover ? () => document.getElementById('lcdpApp-root') || document.body : (triggerNode:HTMLElement) => triggerNode?.parentNode as HTMLElement}
+                  onOpenChange={(vis: boolean) => {
+                    onMorePopVisible(vis, index);
+                  }}
+                >
+                  <Button
+                    type="link"
+                    className="ued-table-actions-antBtn"
+                    key="more"
+                    onClick={(e) => e.stopPropagation()}
                   >
-                    {moreBuiltInBtns?.length
-                      ? moreBuiltInBtns.map((child: any, idx: number) => {
-                        return renderBuiltInSingleBtn(child, row, index, idx, showBuiltInBtns, true);
-                      })
-                      : null}
-                    {renderExtendBtns(moreExtendBtns, true, row, index, isSmallPopover ? { fontSize: '12px' } : {})}
-                  </div>
-                }
-                trigger="click"
-                placement="topRight"
-                open={morePopVisible}
-                // eslint-disable-next-line max-len
-                getPopupContainer={
-                  isSmallPopover
-                    ? () => document.getElementById('lcdpApp-root') || document.body
-                    : (triggerNode: HTMLElement) => triggerNode?.parentNode as HTMLElement
-                }
-                onOpenChange={(vis: boolean) => {
-                  onMorePopVisible(vis, index);
-                }}
-              >
-                <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" />
-                  </div>
-                </Button>
-              </Popover>
-            </>
-          )
-        }
+                    <div className="ued-table-actions-extendBtn">
+                      {getLocale?.('more')}
+                      <LegacyIcon className="actIcon-left" type="down" />
+                    </div>
+                  </Button>
+                </Popover>
+              </>
+            )
+          }
       </>
     );
   };
@@ -308,7 +346,7 @@ const OperationCell = (props: OperationCellProps) => {
                 }
               }}
             >
-              <SaveOutlined rev="" className="actIcon-left" />
+              <SaveOutlined className="actIcon-left" />
               {getLocale('save')}
             </div>
             <Divider type="vertical" />
@@ -322,7 +360,7 @@ const OperationCell = (props: OperationCellProps) => {
                   onRowCancelClick(row);
                 }
               }}
-              onCancel={e => {
+              onCancel={(e) => {
                 e?.preventDefault();
                 e?.stopPropagation();
               }}
@@ -333,7 +371,7 @@ const OperationCell = (props: OperationCellProps) => {
                   e.stopPropagation();
                 }}
               >
-                <CloseOutlined rev="" className="actIcon-left" />
+                <CloseOutlined className="actIcon-left" />
                 {getLocale('cancel')}
               </div>
             </Popconfirm>
@@ -341,19 +379,11 @@ const OperationCell = (props: OperationCellProps) => {
         ) : (
           <>
             {showBuiltInBtns.map((c: any, idx: number) => {
-              return renderBuiltInSingleBtn(
-                c,
-                row,
-                getRealIndexById(row[currentRowKey]),
-                idx,
-                showBuiltInBtns,
-                false,
-                showExtendBtns,
-                moreBuiltInBtns,
-                moreExtendBtns
-              );
+              return renderBuiltInSingleBtn(c, row,
+                getRealIndexById(row[currentRowKey]), idx, showBuiltInBtns, false, showExtendBtns, moreBuiltInBtns, moreExtendBtns);
             })}
-            {renderExtendMoreBtns(showBuiltInBtns, showExtendBtns, moreBuiltInBtns, moreExtendBtns, row, getRealIndexById(row[currentRowKey]))}
+            {renderExtendMoreBtns(showBuiltInBtns, showExtendBtns, moreBuiltInBtns, moreExtendBtns, row,
+              getRealIndexById(row[currentRowKey]))}
           </>
         )
       }