@lingxiteam/ebe-utils 0.2.3 → 0.2.5

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

@@ -18,7 +18,7 @@ export interface PureFadeColorTagProps {
 
 const thumbnailClassName = 'ued-table-cell-thumbnail';
 
-const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
+const Thumbnail: React.FC<PureFadeColorTagProps> = props => {
   const {
     row,
     field,
@@ -48,26 +48,24 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
     if (!Array.isArray(imgsData) && imgsData) {
       imgsData = [imgsData];
     }
-    if (imgsData) {
-      imgsData = await Promise.all(
-        imgsData?.map?.(async (img: any) => {
-          let src = img.url || img.data;
-          if (img.fileId) {
-            src = engineApis?.getAppFileUrlById(img.fileId);
-          } else {
-            // 对回填url地址重新进行加密加签处理
-            src = engineApis?.securityWithUrl(src);
-          }
-          return {
-            ...img,
-            downloadUrl: src,
-            src: src || IconPlaceholder,
-          };
-        }),
-      );
+    imgsData = await Promise.all(
+      imgsData?.map?.(async (img: any) => {
+        let src = img.url || img.data;
+        if (img.fileId) {
+          src = engineApis?.getAppFileUrlById(img.fileId);
+        } else if (img.url) {
+          // 对回填url地址重新进行加密加签处理
+          src = engineApis?.securityWithUrl(src);
+        }
+        return {
+          ...img,
+          downloadUrl: src,
+          src: src || IconPlaceholder,
+        };
+      })
+    );
 
-      setImgs(imgsData);
-    }
+    setImgs(imgsData);
   };
 
   useEffect(() => {
@@ -137,11 +135,7 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
     }
   };
 
-  const renderIcon = (
-    file: any,
-    fileIndex: number,
-    isShowDownload: boolean,
-  ) => {
+  const renderIcon = (file: any, fileIndex: number, isShowDownload: boolean) => {
     return (
       <div className={`${thumbnailClassName}-icons`}>
         {isShowDownload && (
@@ -185,7 +179,7 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
 
   // 加载错误时展示默认图片
   const handleImgError = (index: number) => {
-    setImgs((pre) =>
+    setImgs(pre =>
       pre.map((v, i) => {
         if (i === index) {
           return {
@@ -194,7 +188,7 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
           };
         }
         return v;
-      }),
+      })
     );
   };
 
@@ -203,22 +197,12 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
       <div className={`${thumbnailClassName}-popover-content`}>
         {imgs?.map?.((c: any, index: number) => {
           return (
-            <div
-              key={index}
-              className={`${thumbnailClassName}-popover-item`}
-              title={c.fileName || c.name}
-            >
+            <div key={index} className={`${thumbnailClassName}-popover-item`} title={c.fileName || c.name}>
               <div className={`${thumbnailClassName}-popover-imgItem`}>
-                <img
-                  alt={IconPlaceholder}
-                  src={c.src}
-                  onError={() => handleImgError(index)}
-                />
+                <img alt={IconPlaceholder} src={c.src} onError={() => handleImgError(index)} />
                 {renderIcon(c, index, true)}
               </div>
-              <span className={`${thumbnailClassName}-popover-imgName`}>
-                {c.fileName || c.name}
-              </span>
+              <span className={`${thumbnailClassName}-popover-imgName`}>{c.fileName || c.name}</span>
             </div>
           );
         })}
@@ -236,12 +220,7 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
         <>
           {showImgs.map((c: any, index: number) => {
             return (
-              <div
-                key={index}
-                className={`${thumbnailClassName}-item`}
-                style={{ width: imgSize, height: imgSize }}
-                title={c.fileName || c.name}
-              >
+              <div key={index} className={`${thumbnailClassName}-item`} style={{ width: imgSize, height: imgSize }} title={c.fileName || c.name}>
                 <img alt="" src={c.src} onError={() => handleImgError(index)} />
                 {renderIcon(c, index, isShowDownload)}
               </div>
@@ -254,16 +233,13 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
               content={renderPopoverContent()}
               visible={visible}
               mouseEnterDelay={0.5}
-              onVisibleChange={(v) => {
+              onVisibleChange={v => {
                 if (mode !== BODY_CELL_MODE_ED) {
                   setVisible(v);
                 }
               }}
             >
-              <div
-                className={`${thumbnailClassName}-moreItem`}
-                style={{ width: resSize, height: resSize }}
-              >
+              <div className={`${thumbnailClassName}-moreItem`} style={{ width: resSize, height: resSize }}>
                 +{resNum}
               </div>
             </Popover>

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

@@ -1,15 +1,7 @@
 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 { 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';
@@ -138,56 +130,20 @@ 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:
@@ -211,7 +167,7 @@ const CellContent = (props: CellContentProps) => {
   return null;
 };
 
-const FormatCell: React.FC<MyFormatCell> = (props) => {
+const FormatCell: React.FC<MyFormatCell> = props => {
   const {
     bgColorStyle,
     contentStyle,
@@ -224,8 +180,7 @@ 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) {

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

@@ -4,7 +4,7 @@ import TooltipViewED from '../../../TooltipView/TooltipViewED';
 import type { FuncCode } from '../../types/contentStyle';
 import type { HeaderCellTitleProps } from '../../types/headerCell';
 
-const HeaderCellTitle: React.FC<HeaderCellTitleProps> = (props) => {
+const HeaderCellTitle: React.FC<HeaderCellTitleProps> = props => {
   const { size, column, mode = 'editor', funcExpExecute, engineApis } = props;
 
   const { title, titleLineNum, titleTip } = column || {};
@@ -12,8 +12,7 @@ const HeaderCellTitle: React.FC<HeaderCellTitleProps> = (props) => {
   const { type, content, icon, placement, iconPlacement } = titleTip || {};
 
   const lineHeight = size === 'small' ? 16 : 20;
-  const isTitleLineNumSet =
-    typeof titleLineNum === 'number' && titleLineNum > 0;
+  const isTitleLineNumSet = typeof titleLineNum === 'number' && titleLineNum > 0;
   const TooltipView = mode === 'editor' ? TooltipViewED : TooltipViewEG;
 
   const handleContent = () => {

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

@@ -1,12 +1,26 @@
+import { useMemo } from 'react';
 // @ts-ignore
+import classNames from 'classnames';
 import { Resizable } from 'react-resizable';
 import type { HeaderCellProps } from '../types/headerCell';
 
 const HeaderCell = (props: HeaderCellProps) => {
-  const { onResize, width, isFlexColumn, ...restProps } = props;
+  const { onResize, width, isFlexColumn, columnIndex, tableData, hasExpandContent, className, childrenColumnName, ...restProps } = props;
+
+  const mergeClassName = useMemo(() => {
+    if (!hasExpandContent) {
+      // 没有配置行扩展内容的树状结构表格，需要进行缩进
+      const needExpanded = tableData?.find(c => c[childrenColumnName]);
+      if (needExpanded && columnIndex === 0) {
+        // 数据存在不为空的children时，第一列表头和单元格需要进行缩进
+        return classNames(className, 'ued-table-head-expand-space');
+      }
+    }
+    return className;
+  }, [tableData, className, hasExpandContent, columnIndex]);
 
   if (!isFlexColumn) {
-    return <th {...restProps} />;
+    return <th {...restProps} className={mergeClassName} />;
   }
 
   return (
@@ -16,7 +30,7 @@ const HeaderCell = (props: HeaderCellProps) => {
       handle={
         <span
           className="react-resizable-handle"
-          onClick={(e) => {
+          onClick={e => {
             e.stopPropagation();
           }}
         />
@@ -24,7 +38,7 @@ const HeaderCell = (props: HeaderCellProps) => {
       onResize={onResize}
       draggableOpts={{ enableUserSelectHack: false }}
     >
-      <th {...restProps} />
+      <th {...restProps} className={mergeClassName} />
     </Resizable>
   );
 };

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

@@ -11,7 +11,7 @@ const SingleBtn = (props: SingleBtnProps) => {
     onBtnClick,
     getLocale,
     actionsMap,
-    setMorePopVisible,
+    hideMorePopover,
     BtnIcon,
     c,
     idx,
@@ -30,22 +30,16 @@ const SingleBtn = (props: SingleBtnProps) => {
       <Button
         type="link"
         disabled={c.disabled}
-        className={classnames(
-          'ued-table-actions-antBtn',
-          type ? `ued-table-actions-${type}` : undefined,
-        )}
+        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')
-          ) {
-            setMorePopVisible(false);
+          if (isPopover && !(typeof c === 'string' ? c === 'delete' : c.type === 'delete')) {
+            hideMorePopover();
           }
         }}
-        onDoubleClick={(e) => {
+        onDoubleClick={e => {
           e.stopPropagation();
         }}
       >
@@ -68,7 +62,7 @@ const SingleBtn = (props: SingleBtnProps) => {
         title={c.title}
         // @ts-ignore
         visible={popVisible}
-        onVisibleChange={(v) => setPopVisible(v)}
+        onVisibleChange={v => setPopVisible(v)}
       >
         {buildInBtn}
       </Tooltip>
@@ -78,25 +72,24 @@ const SingleBtn = (props: SingleBtnProps) => {
 
     const btn = buttonVisible ? (
       <Fragment key={idx}>
-        {(typeof c === 'string' ? c === 'delete' : c.type === 'delete') &&
-        !c.disabled ? (
+        {(typeof c === 'string' ? c === 'delete' : c.type === 'delete') && !c.disabled ? (
           <span
             style={{ lineHeight: '0px' }}
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
             }}
-            onDoubleClick={(e) => {
+            onDoubleClick={e => {
               e.stopPropagation();
             }}
           >
             <Popconfirm
-              onVisibleChange={(v) => v && setPopVisible(false)}
+              onVisibleChange={v => v && setPopVisible(false)}
               placement={popconfirmPlacement}
               title={getLocale('deleteConfirm')}
               onConfirm={(e: any) => {
                 onDeleteClick(e);
                 if (isPopover) {
-                  setMorePopVisible(false);
+                  hideMorePopover();
                 }
               }}
             >
@@ -106,9 +99,7 @@ const SingleBtn = (props: SingleBtnProps) => {
         ) : (
           buildInBtn
         )}
-        {!isPopover && idx !== defaultBtnList.length - 1 && (
-          <Divider type="vertical" />
-        )}
+        {!isPopover && idx !== defaultBtnList.length - 1 && <Divider type="vertical" />}
       </Fragment>
     ) : null;
     return isPopover ? <div>{btn}</div> : btn;