@lingxiteam/ebe-utils 0.2.22 → 0.2.24

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

@@ -1,25 +1,33 @@
 import React, { CSSProperties } from 'react';
 
-import type { FuncExpExeCuteType } from '../../utils/hooks/useFuncExpExecute';
-import { FADE_COLOUR_TAG, GHOST_TAG, HYPER_LINK, POINT_TAG, PURE_COLOUR_FILL, PURE_COLOUR_TAG, THUMBNAIL } from '../constant';
-import { useFormatCell } from '../hooks';
-import type { ContentStyle } from '../types/contentStyle';
 import GhostTag from './GhostTag';
-import Hyperlink from './Hyperlink';
 import PointTag from './PointTag';
 import PureColourFill from './PureColourFill';
 import PureFadeColourTag from './PureFadeColourTag';
+import Hyperlink from './Hyperlink';
 import Thumbnail from './Thumbnail';
+import { useFormatCell } from '../hooks';
+import {
+  PURE_COLOUR_FILL,
+  POINT_TAG,
+  GHOST_TAG,
+  FADE_COLOUR_TAG,
+  PURE_COLOUR_TAG,
+  HYPER_LINK,
+  THUMBNAIL,
+} from '../constant';
+import type { ContentStyle } from '../types/contentStyle';
+import type { FuncExpExeCuteType } from '../../utils/hooks/useFuncExpExecute';
 
 export interface MyFormatCell {
-  contentStyle: ContentStyle | undefined | {};
+  contentStyle: ContentStyle | undefined | {},
   bgColorStyle: {
     formatStyle: number;
     contentType: string;
     fontColor: string;
     borderColor: string;
     backgroundColor: string;
-  };
+  },
   tdProps: any;
   funcExpExecute?: FuncExpExeCuteType;
   engineApis: any;
@@ -38,7 +46,7 @@ export interface CellContentProps {
   children: any;
   contentStyle: ContentStyle;
   funcExpExecute?: FuncExpExeCuteType;
-  controllLineStyle?: CSSProperties | null;
+  controllLineStyle?: CSSProperties | null
   mode?: string;
   width?: number;
   rowText?: any;
@@ -107,11 +115,7 @@ const CellContent = (props: CellContentProps) => {
   children = content ? handleCellContent(row, rowIndex, rowText) : children;
 
   if (content && controllLineStyle) {
-    children = (
-      <span className="ued-control-line-number" style={controllLineStyle}>
-        {children}
-      </span>
-    );
+    children = <span className="ued-control-line-number" style={controllLineStyle}>{children}</span>;
   }
 
   const handleOnCellClick = (e: any) => {
@@ -130,20 +134,56 @@ const CellContent = (props: CellContentProps) => {
      * 配置了：“设置xx单元格里内容的颜色” 默认 -> “纯色填充”
      * 注：此情况下，children 有可能为 自定义渲染函数返回的内容
      */
-    return <PureColourFill content={children} fontColor={fontColor} backgroundColor={backgroundColor} onClick={onClick} />;
+    return (
+      <PureColourFill
+        content={children}
+        fontColor={fontColor}
+        backgroundColor={backgroundColor}
+        onClick={onClick}
+      />
+    );
   }
 
   // 新版内容样式（注：此时 children 不可能为自定义函数）
   switch (contentType) {
     case PURE_COLOUR_FILL:
-      return <PureColourFill content={children} fontColor={fontColor} backgroundColor={backgroundColor} onClick={onClick} />;
+      return (
+        <PureColourFill
+          content={children}
+          fontColor={fontColor}
+          backgroundColor={backgroundColor}
+          onClick={onClick}
+        />
+      );
     case POINT_TAG:
-      return <PointTag content={children} fontColor={fontColor} backgroundColor={backgroundColor} onClick={onClick} />;
+      return (
+        <PointTag
+          content={children}
+          fontColor={fontColor}
+          backgroundColor={backgroundColor}
+          onClick={onClick}
+        />
+      );
     case GHOST_TAG:
-      return <GhostTag content={children} fontColor={fontColor} backgroundColor={backgroundColor} borderColor={borderColor} onClick={onClick} />;
+      return (
+        <GhostTag
+          content={children}
+          fontColor={fontColor}
+          backgroundColor={backgroundColor}
+          borderColor={borderColor}
+          onClick={onClick}
+        />
+      );
     case FADE_COLOUR_TAG:
     case PURE_COLOUR_TAG:
-      return <PureFadeColourTag content={children} fontColor={fontColor} backgroundColor={backgroundColor} onClick={onClick} />;
+      return (
+        <PureFadeColourTag
+          content={children}
+          fontColor={fontColor}
+          backgroundColor={backgroundColor}
+          onClick={onClick}
+        />
+      );
     case HYPER_LINK:
       return <Hyperlink content={children} onClick={onClick} />;
     case THUMBNAIL:
@@ -167,7 +207,7 @@ const CellContent = (props: CellContentProps) => {
   return null;
 };
 
-const FormatCell: React.FC<MyFormatCell> = props => {
+const FormatCell: React.FC<MyFormatCell> = (props) => {
   const {
     bgColorStyle,
     contentStyle,
@@ -180,7 +220,15 @@ const FormatCell: React.FC<MyFormatCell> = props => {
     width,
   } = props;
 
-  const { history, appId, pageId, row, rowId, rowIndex, ...restTdProps } = tdProps;
+  const {
+    history,
+    appId,
+    pageId,
+    row,
+    rowId,
+    rowIndex,
+    ...restTdProps
+  } = tdProps;
 
   // 如果条件全部为假，直接返回
   if (!bgColorStyle && !contentStyle) {
@@ -201,27 +249,27 @@ const FormatCell: React.FC<MyFormatCell> = props => {
         }
       }}
     >
-      {contentStyle ? (
-        <CellContent
-          contentStyle={contentStyle as ContentStyle}
-          funcExpExecute={funcExpExecute}
-          engineApis={engineApis}
-          appId={appId}
-          pageId={pageId}
-          row={row}
-          rowId={rowId}
-          rowIndex={rowIndex}
-          controllLineStyle={props.tdProps?.controllLineStyle}
-          mode={mode}
-          width={width}
-          rowText={restTdProps?.title}
-          $$componentItemId={restTdProps?.$$componentItemId}
-        >
-          {children}
-        </CellContent>
-      ) : (
-        children
-      )}
+      {
+        contentStyle ? (
+          <CellContent
+            contentStyle={(contentStyle as ContentStyle)}
+            funcExpExecute={funcExpExecute}
+            engineApis={engineApis}
+            appId={appId}
+            pageId={pageId}
+            row={row}
+            rowId={rowId}
+            rowIndex={rowIndex}
+            controllLineStyle={props.tdProps?.controllLineStyle}
+            mode={mode}
+            width={width}
+            rowText={restTdProps?.title}
+            $$componentItemId={restTdProps?.$$componentItemId}
+          >
+            {children}
+          </CellContent>
+        ) : children
+      }
     </td>
   );
 };

package/lib/pcpublic/src/components/pcfactory/src/Table/HeaderCell/HeaderCellTitle/index.tsx

@@ -1,15 +1,32 @@
 import React from 'react';
 import TooltipViewEG from '../../../TooltipView';
 import TooltipViewED from '../../../TooltipView/TooltipViewED';
-import type { FuncCode } from '../../types/contentStyle';
 import type { HeaderCellTitleProps } from '../../types/headerCell';
+import type { FuncCode } from '../../types/contentStyle';
+
 
-const HeaderCellTitle: React.FC<HeaderCellTitleProps> = props => {
-  const { size, column, mode = 'editor', funcExpExecute, engineApis } = props;
+const HeaderCellTitle: React.FC<HeaderCellTitleProps> = (props) => {
+  const {
+    size,
+    column,
+    mode = 'editor',
+    funcExpExecute,
+    engineApis,
+  } = props;
 
-  const { title, titleLineNum, titleTip } = column || {};
+  const {
+    title,
+    titleLineNum,
+    titleTip,
+  } = column || {};
 
-  const { type, content, icon, placement, iconPlacement } = titleTip || {};
+  const {
+    type,
+    content,
+    icon,
+    placement,
+    iconPlacement,
+  } = titleTip || {};
 
   const lineHeight = size === 'small' ? 16 : 20;
   const isTitleLineNumSet = typeof titleLineNum === 'number' && titleLineNum > 0;
@@ -37,10 +54,8 @@ const HeaderCellTitle: React.FC<HeaderCellTitleProps> = props => {
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: title || '' }}
     />
-  ) : (
-    // eslint-disable-next-line react/no-danger
-    <span dangerouslySetInnerHTML={{ __html: title || '' }} />
-  );
+  // eslint-disable-next-line react/no-danger
+  ) : <span dangerouslySetInnerHTML={{ __html: title || '' }} />;
 
   return titleTip && realContent ? (
     <TooltipView
@@ -54,9 +69,7 @@ const HeaderCellTitle: React.FC<HeaderCellTitleProps> = props => {
       tipPlacement={placement}
       engineApis={engineApis}
     />
-  ) : (
-    <>{realTitle}</>
-  );
+  ) : <>{realTitle}</>;
 };
 
 export default HeaderCellTitle;

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

@@ -1,10 +1,13 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 // @ts-ignore
-import classNames from 'classnames';
 import { Resizable } from 'react-resizable';
 import type { HeaderCellProps } from '../types/headerCell';
+import classNames from 'classnames';
+import { TH_CELL_KEY } from '../constant';
 
-const HeaderCell = (props: HeaderCellProps) => {
+const HeaderCell = (
+  props: HeaderCellProps,
+) => {
   const { onResize, width, isFlexColumn, columnIndex, tableData, hasExpandContent, className, childrenColumnName, ...restProps } = props;
 
   const mergeClassName = useMemo(() => {
@@ -30,7 +33,7 @@ const HeaderCell = (props: HeaderCellProps) => {
       handle={
         <span
           className="react-resizable-handle"
-          onClick={e => {
+          onClick={(e) => {
             e.stopPropagation();
           }}
         />
@@ -38,7 +41,11 @@ const HeaderCell = (props: HeaderCellProps) => {
       onResize={onResize}
       draggableOpts={{ enableUserSelectHack: false }}
     >
-      <th {...restProps} className={mergeClassName} />
+      <th
+        {...restProps}
+        className={mergeClassName}
+        {...{ [TH_CELL_KEY]: restProps[TH_CELL_KEY] }}
+      />
     </Resizable>
   );
 };

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

@@ -0,0 +1,220 @@
+import { isDynamicProperty } from '../../utils/common';
+import { EngineBaseProps } from '@lingxiteam/types';
+import { Popover, PopoverProps } from 'antd';
+import React from 'react';
+
+export type PopoverValueType =
+  | {
+      options?: {
+        title?: string;
+        placement?: PopoverProps['placement'];
+        trigger?: 'click' | 'hover';
+        content: string;
+        contentFn: () => string;
+        rule?: string;
+        maxWidth?: number;
+      };
+    }
+  | {
+      page: {
+        pageId: string;
+        pagePath: string;
+        pageName: string;
+        placement?: PopoverProps['placement'];
+        rule?: string;
+        trigger?: 'click' | 'hover';
+        options?: any[];
+        maxWidth?: number;
+      };
+    };
+const PopoverWrapper: React.FC<{
+  popoverSetting?: PopoverValueType;
+  engineApis: ReturnType<EngineBaseProps['getEngineApis']>;
+  compId: string;
+  row: any;
+  rowId: string;
+  index: number;
+}> = (props) => {
+  const { children, popoverSetting, engineApis, compId, row, rowId, index } =
+    props;
+  const { renderPopover, sandBoxSafeRun } = engineApis || {};
+  if (!popoverSetting || !renderPopover) {
+    return children;
+  }
+
+  const renderChildren = () => {
+    let trigger = 'page' in popoverSetting && popoverSetting.page ? popoverSetting?.page?.trigger : undefined;
+    if ('options' in popoverSetting && popoverSetting?.options) {
+      trigger = popoverSetting?.options.trigger;
+    }
+    if (trigger === 'click') {
+      // 阻止点击冒泡行为
+      return (
+        <span
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          style={{
+            lineHeight: 0,
+          }}
+        >
+          {children}
+        </span>);
+    }
+    return children;
+  };
+  // 页面
+  if ('page' in popoverSetting && popoverSetting.page) {
+    const { page } = popoverSetting;
+    try {
+      const pageRule = page.rule;
+      if (pageRule) {
+        const hiddenRuleFn = (row: any, rowId: string, index: number) =>
+          sandBoxSafeRun(pageRule, {
+            row,
+            rowId,
+            index,
+          });
+
+        if (hiddenRuleFn(row, rowId, index)) {
+          return renderChildren();
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    const params: any = {};
+    let popoverOptions = page.options;
+    if (page.options) {
+      popoverOptions = page.options.map((_c: any) => {
+        const c = {
+          ..._c,
+        };
+        try {
+          const stateParamRule = c?.stateParam;
+          if (stateParamRule && typeof stateParamRule === 'string') {
+            const paramFunc = (row: any, rowId: string, index: number) =>
+              sandBoxSafeRun(stateParamRule, {
+                row,
+                rowId,
+                index,
+              });
+
+            params[_c.code] = paramFunc(row, rowId, index);
+            c.stateParam = params[_c.code];
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        return c;
+      });
+    }
+
+    const comp = (
+      <span
+        onClick={(e) => {
+          if (page.trigger === 'click') {
+            e.stopPropagation();
+          }
+        }}
+        style={{
+          lineHeight: 0,
+        }}
+      >
+        { renderPopover({
+          childElement: <>{children}</>,
+          props,
+          popoverSetting: {
+            page: {
+              ...page,
+              options: popoverOptions,
+            },
+            options: popoverOptions,
+            state: params,
+          },
+          uid: compId,
+        })}
+      </span>);
+    return comp as any;
+  }
+  // 自定义
+  if ('options' in popoverSetting && popoverSetting?.options?.contentFn) {
+    const { options } = popoverSetting;
+    const {
+      maxWidth,
+      contentFn,
+      content,
+      rule: popRule,
+      ...resOptions
+    } = options;
+
+    // 隐藏规则
+    try {
+      if (popRule) {
+        const hiddenRule = (row: any, rowId: string, index: number) =>
+          sandBoxSafeRun(popRule, {
+            row,
+            rowId,
+            index,
+          });
+        if (hiddenRule(row, rowId, index)) {
+          return renderChildren();
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    const popContent = contentFn() || content;
+
+    let newPopContent: string = popContent;
+    try {
+      if (popContent) {
+        const popoverContent = (row: any, rowId: string, index: number) =>
+          sandBoxSafeRun(popContent, {
+            row,
+            rowId,
+            index,
+          });
+
+        newPopContent = popoverContent(row, rowId, index) as string;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    if (
+      newPopContent === undefined &&
+      typeof popContent === 'string' &&
+      !isDynamicProperty(popContent)
+    ) {
+      // 当表达式返回空，且不被$$包裹时，内容当成普通文本处理
+      newPopContent = popContent;
+    }
+
+    return (
+      <span
+        onClick={(e) => {
+          if (options.trigger === 'click') {
+            e.stopPropagation();
+          }
+        }}
+        style={{
+          lineHeight: 0,
+        }}
+      >
+        <Popover
+          overlayStyle={{ maxWidth: maxWidth || 'none', wordBreak: 'break-word' }}
+          content={newPopContent}
+          {...resOptions}
+          arrowPointAtCenter
+        >
+          <>{children}</>
+        </Popover>
+      </span>
+    );
+  }
+  return children;
+};
+
+export default PopoverWrapper;

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

@@ -1,11 +1,13 @@
+import React, { Fragment, useState } from 'react';
+import { Divider, Popconfirm, Tooltip, Button } from 'antd';
 import { Icon as LegacyIcon } from '@lingxiteam/icons';
-import { Button, Divider, Popconfirm, Tooltip } from 'antd';
 import classnames from 'classnames';
-import { Fragment, useState } from 'react';
 import type { SingleBtnProps } from '../types/OperationCell';
 
 // 操作项单个按钮
-const SingleBtn = (props: SingleBtnProps) => {
+const SingleBtn = (
+  props: SingleBtnProps,
+) => {
   const {
     onDeleteClick,
     onBtnClick,
@@ -20,6 +22,7 @@ const SingleBtn = (props: SingleBtnProps) => {
     popconfirmPlacement,
   } = props;
   const [popVisible, setPopVisible] = useState(false);
+  const popoverOptions = c?.popoverSetting?.page || c?.popoverSetting?.options;
 
   const renderBtn = () => {
     const { visible: buttonVisible = true } = c;
@@ -32,14 +35,14 @@ const SingleBtn = (props: SingleBtnProps) => {
         disabled={c.disabled}
         className={classnames('ued-table-actions-antBtn', type ? `ued-table-actions-${type}` : undefined)}
         key={typeof c === 'string' ? c : c.type}
-        onClick={e => {
+        onClick={(e) => {
           onBtnClick(e);
           setPopVisible(false);
           if (isPopover && !(typeof c === 'string' ? c === 'delete' : c.type === 'delete')) {
             hideMorePopover();
           }
         }}
-        onDoubleClick={e => {
+        onDoubleClick={(e) => {
           e.stopPropagation();
         }}
       >
@@ -66,39 +69,43 @@ const SingleBtn = (props: SingleBtnProps) => {
       >
         {buildInBtn}
       </Tooltip>
-    ) : (
-      buildInBtn
-    );
+    ) : buildInBtn;
 
     const btn = buttonVisible ? (
       <Fragment key={idx}>
-        {(typeof c === 'string' ? c === 'delete' : c.type === 'delete') && !c.disabled ? (
-          <span
-            style={{ lineHeight: '0px' }}
-            onClick={e => {
-              e.stopPropagation();
-            }}
-            onDoubleClick={e => {
-              e.stopPropagation();
-            }}
-          >
-            <Popconfirm
-              onVisibleChange={v => v && setPopVisible(false)}
-              placement={popconfirmPlacement}
-              title={getLocale('deleteConfirm')}
-              onConfirm={(e: any) => {
-                onDeleteClick(e);
-                if (isPopover) {
-                  hideMorePopover();
+        {
+          (
+            (typeof c === 'string' ? c === 'delete' : c.type === 'delete') &&
+            !c.disabled
+          ) ? (
+            <span
+              style={{ lineHeight: '0px' }}
+              onClick={(e) => {
+                if (popoverOptions?.trigger !== 'click') {
+                  // trigger为点击的气泡卡片，阻止冒泡在内部实现
+                  e.stopPropagation();
                 }
               }}
+              onDoubleClick={(e) => {
+                e.stopPropagation();
+              }}
             >
-              {buildInBtn}
-            </Popconfirm>
-          </span>
-        ) : (
-          buildInBtn
-        )}
+              <Popconfirm
+                onVisibleChange={v => v && setPopVisible(false)}
+                placement={popconfirmPlacement}
+                title={getLocale('deleteConfirm')}
+                onConfirm={(e: any) => {
+                  onDeleteClick(e);
+                  if (isPopover) {
+                    hideMorePopover();
+                  }
+                }}
+              >
+                {buildInBtn}
+              </Popconfirm>
+            </span>
+            ) : buildInBtn
+        }
         {!isPopover && idx !== defaultBtnList.length - 1 && <Divider type="vertical" />}
       </Fragment>
     ) : null;