@lingxiteam/ebe-utils 0.2.4 → 0.2.5

package/lib/h5public/src/components/factory/src/DynamicTable/hooks/useFormatCell.tsx

@@ -0,0 +1,277 @@
+import Qs from 'qs';
+import { createId } from '../../utils';
+import CustomModule from '../../utils/CustomModule';
+import type { FuncExpExeCuteType } from '../../utils/hooks/useFuncExpExecute';
+import type { ContentClick, FuncCode } from '../types/contentStyle';
+import { CUSTOM, DOWNLOAD_FILE, OPEN_MODAL, PAGE_JUMP, PREVIEW_FILE, ROUTE_PUSH, ROUTE_REPLACE } from '../utils/constant';
+
+interface useFormatCellProps extends ContentClick {
+  appId: string;
+  pageId: string;
+  modalHeight?: number;
+  modalWidth?: number;
+  funcExpExecute?: FuncExpExeCuteType;
+  engineApis: any;
+  $$componentItemId: string;
+}
+
+const useFormatCell = (props: useFormatCellProps) => {
+  const {
+    funcExpExecute,
+    engineApis,
+    appId,
+    pageId,
+    content,
+    clickType,
+    page,
+    modal,
+    openType,
+    fileIds,
+    filename,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    previewType,
+    downloadUrl,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    modalHeight,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    modalWidth,
+    $$componentItemId,
+  } = props;
+
+  const realAppId = appId;
+  const realPageId = pageId;
+
+  const handleCellContent = (row: any, rowIndex: number, rowText?: any) => {
+    if ((content as FuncCode)?.jsx) {
+      return (
+        <div>
+          <CustomModule
+            code={(content as FuncCode)?.code}
+            sandBoxLoadModule={engineApis.sandBoxLoadModule}
+            compProps={{ text: rowText, item: row, index: rowIndex }}
+            errorInfo={{
+              id: $$componentItemId,
+            }}
+          />
+        </div>
+      );
+    }
+    if ((content as FuncCode)?.code && funcExpExecute) {
+      return funcExpExecute((content as FuncCode).code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: rowIndex,
+        },
+      ]);
+    }
+
+    return content;
+  };
+
+  // 获取页面-url参数/路由数据 弹窗-组件状态
+  const getParams = (params: any = {}, row: any, rowId: string | number, rowIndex: number) => {
+    const newParams: any = {};
+    Object.keys(params).forEach(key => {
+      if (typeof params[key] === 'string') {
+        const exp = params[key];
+        params[key] = (row: any, rowId: string | number, index: number) =>
+          engineApis?.sandBoxSafeRun(exp, {
+            row,
+            rowId,
+            index,
+          });
+        newParams[key] = exp;
+      }
+
+      if (typeof params[key] === 'function') {
+        try {
+          newParams[key] = params[key](row, rowId, rowIndex);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    });
+    return newParams;
+  };
+
+  const handlePageJump = async (row: any, rowId: string | number, rowIndex: number) => {
+    if (page) {
+      const { pagePath, searchParams = {}, routerData = {} } = page;
+      const newSearchParams: any = getParams(searchParams, row, rowId, rowIndex);
+      const newRouteData: any = getParams(routerData, row, rowId, rowIndex);
+
+      const _k = createId();
+      newSearchParams._k = _k;
+      if (Object.keys(newRouteData).length > 0) {
+        window.sessionStorage.setItem(`${_k}`, JSON.stringify(newRouteData));
+      }
+
+      if (!newSearchParams.appId) {
+        newSearchParams.appId = realAppId;
+      }
+
+      const newPath = pagePath || '';
+
+      switch (openType) {
+        case ROUTE_PUSH:
+          if (typeof engineApis?.historyPush === 'function') {
+            engineApis.historyPush(newPath, {
+              search: Qs.stringify(newSearchParams),
+              state: newRouteData,
+            });
+          }
+          break;
+        case ROUTE_REPLACE:
+          if (typeof engineApis?.historyReplace === 'function') {
+            engineApis.historyReplace(newPath, {
+              search: Qs.stringify(newSearchParams),
+              state: newRouteData,
+            });
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  const handleOpenModal = async (row: any, rowId: string | number, rowIndex: number) => {
+    if (modal) {
+      const { pageId, compStates = {} } = modal;
+
+      const newCompStates: any = getParams(compStates, row, rowId, rowIndex);
+
+      if (engineApis?.openModal) {
+        engineApis.openModal({
+          pageId,
+          params: newCompStates,
+        });
+      }
+    }
+  };
+
+  const handleDownloadFile = async (row: any, rowIndex: number) => {
+    if (typeof engineApis?.batchDownloadFileByIds === 'function') {
+      try {
+        let realFilename = filename;
+        let realFileIds = fileIds;
+
+        if ((filename as FuncCode)?.code && funcExpExecute) {
+          realFilename = funcExpExecute((filename as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        if ((fileIds as FuncCode)?.code && funcExpExecute) {
+          realFileIds = funcExpExecute((fileIds as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        realFileIds = Array.isArray(realFileIds) ? realFileIds[0] : realFileIds;
+
+        engineApis.batchDownloadFileByIds({
+          fileIds: realFileIds,
+          newFileName: realFilename,
+          onError: (errorMessage: string) => {
+            // message.error(errorMessage);
+          },
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  const handlePreviewFile = async (row: any, rowIndex: number) => {
+    let realFileIds: any = fileIds;
+    if ((fileIds as FuncCode)?.code && funcExpExecute) {
+      realFileIds = funcExpExecute((fileIds as FuncCode).code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: rowIndex,
+        },
+      ]);
+    }
+
+    if (typeof engineApis?.BannerModal?.open === 'function') {
+      // 弹窗预览
+      realFileIds = typeof realFileIds === 'string' ? [realFileIds] : realFileIds;
+      engineApis.BannerModal.open({
+        fileId: realFileIds,
+        // viewMode: previewType,
+        // modalHeight,
+        pageId: realPageId,
+        appId: realAppId,
+        // modalWidth,
+      });
+    }
+  };
+
+  const onCellClick = async (row: any, rowId: string | number, rowIndex: number) => {
+    switch (clickType) {
+      case PAGE_JUMP:
+        handlePageJump(row, rowId, rowIndex);
+        break;
+      case OPEN_MODAL:
+        handleOpenModal(row, rowId, rowIndex);
+        break;
+      case DOWNLOAD_FILE:
+        handleDownloadFile(row, rowIndex);
+        break;
+      case PREVIEW_FILE:
+        handlePreviewFile(row, rowIndex);
+        break;
+      case CUSTOM:
+        // eslint-disable-next-line no-case-declarations
+        let realDownloadUrl: any = downloadUrl;
+
+        if ((downloadUrl as FuncCode)?.code && funcExpExecute) {
+          realDownloadUrl = funcExpExecute((downloadUrl as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        window.open(realDownloadUrl, openType);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return {
+    onCellClick,
+    handleCellContent,
+  };
+};
+
+export default useFormatCell;

package/lib/h5public/src/components/factory/src/DynamicTable/index.less

@@ -9,6 +9,19 @@
   background-color: #FFFFFF;
   overflow: hidden;
 
+  .table-row-merge {
+    &-left {
+      justify-content: flex-start !important;
+    }
+
+    &-center {
+      justify-content: center !important;
+    }
+    &-right {
+      justify-content: flex-end !important;
+    }
+  }
+
   .table-header {
     padding: 8 * @hd 0;
     font-size: @font-size-base;
@@ -117,9 +130,10 @@
       .customer-cell-common;
       height: 20 * @hd;
       line-height: 18 * @hd;
-      padding: 0 5 * @hd;
+      padding: 0 8 * @hd;
       border: 1 * @hd solid transparent;
       border-radius: 1000 * @hd;
+      font-size: 11.5 * @hd;
     }
   }
 
@@ -134,7 +148,8 @@
       height: 20 * @hd;
       line-height: 20 * @hd;
       border-radius: 2 * @hd;
-      padding: 0 5 * @hd;
+      padding: 0 8 * @hd;
+      font-size: 11.5 * @hd;
     }
   }
 
@@ -197,6 +212,13 @@
     }
   }
 
+  .ag-header-cell .ag-header-cell-comp-wrapper {
+    flex: 1;
+    .ag-custom-header-cell {
+      width: 100%;
+    }
+  }
+
   .ag-body-horizontal-scroll {
     height: 0 !important;
     min-height: 0 !important;
@@ -308,5 +330,6 @@
     .common-span-cell;
     border-bottom: 1 * @hd solid #EFEFEF;
   }
+  
 
 }

package/lib/h5public/src/components/factory/src/DynamicTable/index.tsx

@@ -3,9 +3,7 @@ import React, { useEffect, useImperativeHandle, useState } from 'react';
 import DynamicTableLoader from './loader';
 import { MyDynamicTableProps } from './Table';
 
-function useSync<S>(
-  initialValue: S,
-): [S, React.Dispatch<React.SetStateAction<S>>] {
+function useSync<S>(initialValue: S): [S, React.Dispatch<React.SetStateAction<S>>] {
   const [state, setState] = useState(initialValue);
   useEffect(() => {
     setState(initialValue);

package/lib/h5public/src/components/factory/src/DynamicTable/loader.ts

@@ -3,15 +3,9 @@ import Loadable from 'react-loadable';
 import { LoadingComponennt } from '../utils/LoaderHelper';
 import { MyDynamicTableProps } from './Table';
 
-const DynamicTableLoader = Loadable<
-  MyDynamicTableProps,
-  React.ComponentType<MyDynamicTableProps>
->({
+const DynamicTableLoader = Loadable<MyDynamicTableProps, React.ComponentType<MyDynamicTableProps>>({
   // eslint-disable-next-line func-call-spacing
-  loader: async () =>
-    (await import(
-      /* webpackChunkName: 'factory-DynamicTable' */ './Table'
-    )) as unknown as React.ComponentType<any>,
+  loader: async () => (await import(/* webpackChunkName: 'factory-DynamicTable' */ './Table')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

package/lib/h5public/src/components/factory/src/DynamicTable/types/contentStyle.d.ts

@@ -3,6 +3,7 @@ interface Page {
   pagePath: string;
   currentPageVersionId: string;
   searchParams?: any;
+  routerData?: any;
 }
 interface Modal {
   pageId: string;
@@ -14,6 +15,7 @@ interface Modal {
 export interface FuncCode {
   code: string;
   originCode: string;
+  jsx?: any;
 }
 
 type DataBindType = FuncCode | string | undefined;

package/lib/h5public/src/components/factory/src/DynamicTable/utils/constant.ts

@@ -70,5 +70,4 @@ export const PREVIEW_NEW_TAB = 'newTab';
 export const ROUTE_PUSH = 'push';
 export const ROUTE_REPLACE = 'replace';
 
-export const EDIT_COMPONENT_STOP_PROPAGATION_CLS =
-  'table-edit-component-stop-propagation';
+export const EDIT_COMPONENT_STOP_PROPAGATION_CLS = 'table-edit-component-stop-propagation';

package/lib/h5public/src/components/factory/src/Grid/index.tsx

@@ -45,21 +45,15 @@ const MyGrid = LingxiForwardRef<any, MyGridProps>((props, ref) => {
     }));
   }, [data, aliasIcon, aliasText, gridData]);
 
-  const configCarouselDataIcon = (
-    data: DataItem[],
-    labelKey = aliasText,
-    labelValue = aliasIcon,
-  ) => {
+  const configCarouselDataIcon = (data: DataItem[], labelKey = aliasText, labelValue = aliasIcon) => {
     if (Array.isArray(data)) {
       const { getAppFileUrlByFileCode } = getEngineApis();
       setDataSource(
-        data.map((it) => ({
+        data.map(it => ({
           ...it,
-          icon: (it[labelValue] || '').startsWith('http')
-            ? it[labelValue]
-            : getAppFileUrlByFileCode(it.icon),
+          icon: (it[labelValue] || '').startsWith('http') ? it[labelValue] : getAppFileUrlByFileCode(it.icon),
           text: it[labelKey],
-        })),
+        }))
       );
     }
   };
@@ -68,16 +62,8 @@ const MyGrid = LingxiForwardRef<any, MyGridProps>((props, ref) => {
     setData: (data: any[]) => {
       configCarouselDataIcon(data);
     },
-    setDataWithLabelAndValue: (params: {
-      dataSource: any[];
-      labelKey: string;
-      valueKey: string;
-    }) => {
-      configCarouselDataIcon(
-        params.dataSource,
-        params.labelKey,
-        params.valueKey,
-      );
+    setDataWithLabelAndValue: (params: { dataSource: any[]; labelKey: string; valueKey: string }) => {
+      configCarouselDataIcon(params.dataSource, params.labelKey, params.valueKey);
     },
   }));
   useDeepCompareEffect(() => {

package/lib/h5public/src/components/factory/src/GroupColumn/GroupColumn.tsx

@@ -7,28 +7,10 @@ import { useJsonToParse } from '../utils/hooks/useJsonToParse';
 import { MyGroupColumnProps } from './PropsType';
 
 const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
-  const {
-    colors: iColors = '',
-    visible = true,
-    $$componentItem,
-    getEngineApis,
-    style,
-    refData,
-    ...restProps
-  } = props;
-  const {
-    xFontSize,
-    xColor,
-    guideTextFontSize,
-    guideTextColor,
-    yFontSize,
-    yColor,
-  } = props?.style;
+  const { colors: iColors = '', visible = true, $$componentItem, getEngineApis, style, refData, ...restProps } = props;
+  const { xFontSize, xColor, guideTextFontSize, guideTextColor, yFontSize, yColor } = props?.style;
   const finalStyle = useHiddenStyle(visible, style);
-  const [
-    { data: myData = [], legendParams: myLegendParams = [], x },
-    setState,
-  ] = useAsyncState({
+  const [{ data: myData = [], legendParams: myLegendParams = [], x }, setState] = useAsyncState({
     data: props.data,
     legendParams: props.legendParams,
     x: props.x,
@@ -42,7 +24,7 @@ const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
       data.map((i: any) => {
         if (i.constructor === Object) {
           const newObj = {} as any;
-          Object.keys(i).forEach((key) => {
+          Object.keys(i).forEach(key => {
             newObj[key] = i[key];
             if (!isNaN(parseInt(i[key], 10))) {
               newObj[key] = parseInt(i[key], 10);
@@ -52,7 +34,7 @@ const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
         }
         return i;
       }),
-    [JSON.stringify(data)],
+    [JSON.stringify(data)]
   );
   // 通过字符串截取 获得真正的Color
   const colors = useMemo(() => {

package/lib/h5public/src/components/factory/src/GroupColumn/loader.tsx

@@ -3,10 +3,7 @@ import { LoadingComponennt } from '../utils/LoaderHelper';
 
 const GroupColumnLoader = Loadable({
   // eslint-disable-next-line func-call-spacing
-  loader: async () =>
-    (await import(
-      /* webpackChunkName: 'factory-GroupColumn' */ './GroupColumn'
-    )) as unknown as React.ComponentType<any>,
+  loader: async () => (await import(/* webpackChunkName: 'factory-GroupColumn' */ './GroupColumn')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

package/lib/h5public/src/components/factory/src/Icon/index.tsx

@@ -81,20 +81,8 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
   const [icon, setIcon] = useListenProps(propsIcon);
   const [scriptUrl, setScripUrl] = useState<any>();
   const displayStyle = useHiddenStyle(visible);
-  const {
-    curType,
-    iconFile,
-    iconFileInfo,
-    fontAddress,
-    isIconFont,
-    theme,
-    svgContent,
-    isUsePrimary,
-    color,
-  } = useMemo(() => {
-    const iconInfo =
-      Array.isArray(iconItems) &&
-      (iconItems.find((c) => c.rule) || iconItems[0]);
+  const { curType, iconFile, iconFileInfo, fontAddress, isIconFont, theme, svgContent, isUsePrimary, color } = useMemo(() => {
+    const iconInfo = Array.isArray(iconItems) && (iconItems.find(c => c.rule) || iconItems[0]);
     if (mode === 'custom' && iconInfo) {
       return {
         curType: iconInfo?.icon?.type,
@@ -117,18 +105,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
       theme: icon?.theme || curTheme,
       svgContent: icon?.svgContent || curSvgContent,
     };
-  }, [
-    JSON.stringify(icon),
-    type,
-    curIconFile,
-    curIconFileInfo,
-    curFontAddress,
-    curIsIconFont,
-    curTheme,
-    curSvgContent,
-    mode,
-    iconItems,
-  ]);
+  }, [JSON.stringify(icon), type, curIconFile, curIconFileInfo, curFontAddress, curIsIconFont, curTheme, curSvgContent, mode, iconItems]);
 
   useEffect(() => {
     if (iconFile && Object.keys(iconFile).length > 0) {
@@ -138,9 +115,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
       setScripUrl(fontAddress);
     } else if (iconFileInfo && !iconFileInfo.svgContent) {
       if (iconFileInfo.materialId && iconFileInfo.fileName) {
-        setScripUrl(
-          getMaterialFile(iconFileInfo.materialId, iconFileInfo.fileName),
-        );
+        setScripUrl(getMaterialFile(iconFileInfo.materialId, iconFileInfo.fileName));
       }
     } else {
       setScripUrl('');
@@ -154,6 +129,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
   }));
 
   const curClassName = classnames({
+
     /**
      * 用于主题，如果是单独使用的是，在className 增加一个变量，防止在主题设置图标的时候，影响影响引用图标的其他控件
      */
@@ -170,14 +146,10 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
       height: style?.fontSize || style?.height,
       fontSize: style?.fontSize || style?.width, // 兼容存量数据
       ...(style || {}), // 修复下从浩鲸D升上来图表丢失部分样式的问题
-      color: isUsePrimary
-        ? undefined
-        : color || style?.color || restProps?.color,
-      fill: isUsePrimary
-        ? undefined
-        : color || style?.color || restProps?.color,
+      color: isUsePrimary ? undefined : color || style?.color || restProps?.color,
+      fill: isUsePrimary ? undefined : color || style?.color || restProps?.color,
     }),
-    [color],
+    [color]
   );
 
   // svg字符串
@@ -240,11 +212,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
   // }
 
   // 兼容antd的图标
-  if (
-    theme &&
-    !['cross-circle', 'cross-circle-o'].includes(curType) &&
-    Object.keys(iconFileInfo || {})?.length < 1
-  ) {
+  if (theme && !['cross-circle', 'cross-circle-o'].includes(curType) && Object.keys(iconFileInfo || {})?.length < 1) {
     // 兼容原来的antd的图标
     return (
       <LegacyIcon
@@ -262,8 +230,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
     );
   }
 
-  const shouldSysTag =
-    curType && iconFileInfo && Object.keys(iconFileInfo)?.length > 0;
+  const shouldSysTag = curType && iconFileInfo && Object.keys(iconFileInfo)?.length > 0;
 
   if (shouldSysTag && iconFileInfo.svgContent) {
     return (
@@ -297,17 +264,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
 
   if (curType) {
     // 删除antd-v2-的icon
-    return (
-      <LegacyIcon
-        type={curType}
-        rotate={rotate}
-        theme={theme}
-        onClick={onClick}
-        {...extendProps}
-        style={curStyle}
-        className={curClassName}
-      />
-    );
+    return <LegacyIcon type={curType} rotate={rotate} theme={theme} onClick={onClick} {...extendProps} style={curStyle} className={curClassName} />;
   }
 
   if (iconFile?.fileSubType === 'ICON_IMAGE' && scriptUrl) {

package/lib/h5public/src/components/factory/src/Image/BasicImage/index.tsx

@@ -2,11 +2,7 @@ import React, { useEffect, useImperativeHandle, useState } from 'react';
 import { AppForwardRef } from '../../BasicComponents';
 import useHiddenStyle from '../../utils/hooks/useHiddenStyle';
 
-export interface ImageProps
-  extends React.DetailedHTMLProps<
-    React.ImgHTMLAttributes<HTMLImageElement>,
-    HTMLImageElement
-  > {
+export interface ImageProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
   [x: string]: any;
   defaultSrc?: any;
   src?: any;
@@ -15,44 +11,16 @@ export interface ImageProps
 }
 
 const MyImage = AppForwardRef<ImageProps>((props, ref) => {
-  const {
-    defaultSrc,
-    errorSrc,
-    alt,
-    visible = true,
-    style,
-    getEngineApis,
-    ...restProps
-  } = props;
+  const { defaultSrc, errorSrc, alt, visible = true, style, getEngineApis, ...restProps } = props;
   const engineApis = getEngineApis?.();
   const [src, setSrc] = useState(props.src);
   const [complete, setComplete] = useState(false);
   const finStyle = useHiddenStyle(visible, style);
 
   const setImgsrcWithSign = (src: string) => {
-    if (
-      src &&
-      (src.match('downloadFileByFileCode') || src.match('file/download')) &&
-      engineApis?.service?.buildXSignUrl
-    ) {
-      // 如果是平台服务，统一添加或更新签名
-      if (src.match('X-SIGN=')) {
-        // 如果资源地址使用签名模式，需更新地址签名
-        setSrc(
-          engineApis.service.buildXSignUrl({
-            url: src.slice(0, src.indexOf('&X-SIGN')),
-            version: (window as any).lxSecurityModeInFile || '1.0',
-          }),
-        );
-      } else {
-        // 添加签名
-        setSrc(
-          engineApis.service.buildXSignUrl({
-            url: src,
-            version: (window as any).lxSecurityModeInFile || '1.0',
-          }),
-        );
-      }
+    if (src && (src.match('/downloadFileByFileCode') || src.match('/file/download') || src.match('/file/id/')) && engineApis?.securityWithUrl) {
+      // 如果是平台服务，统一加密加签
+      setSrc(engineApis.securityWithUrl(src));
     } else {
       setSrc(src);
     }
@@ -97,9 +65,7 @@ const MyImage = AppForwardRef<ImageProps>((props, ref) => {
           setComplete(true);
         }}
       />
-      {!complete && (
-        <img {...restProps} alt={alt} src={props.defaultSrc} style={finStyle} />
-      )}
+      {!complete && <img {...restProps} alt={alt} src={props.defaultSrc} style={finStyle} />}
     </>
   );
 });