@lingxiteam/ebe-utils 0.0.25 → 0.0.29

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

@@ -1,7 +1,7 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
 import { Card as AntCard } from 'antd-mobile-5';
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Icon from '../Icon';
 import useStyle from '../View/useStyle';
 import './index.less';
@@ -10,7 +10,7 @@ const prefixCls = 'lcdp-h5-card';
 export interface MyCardProps {
   // full?: CardProps['full'];
   style?: any;
-  cardType?: string;
+  cardType?: '1' | '2';
   title?: React.ReactNode;
   showHeader?: boolean;
   headerBackground?: string;
@@ -71,17 +71,62 @@ const Card = LingxiForwardRef<any, MyCardProps>((props, ref) => {
     return null;
   }
   const { getAppFileUrlByFileCode } = getEngineApis();
-  const finialStyle = {
-    ...style,
-    padding: style?.padding || '12px',
-  };
+  // const finialStyle = {
+  //   ...style,
+  //   padding: style?.padding || '12px',
+  // };
 
   const [imgSrc, setImgSrc] = useState<string>();
+  const viewRef = useRef<HTMLDivElement>();
+  const restStyle = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+  const { bodyStyle, boxStyle, footerStyle } = useMemo(() => {
+    const box = {
+      ...restStyle,
+    };
+    delete box.margin;
+    const footer = {
+      ...box,
+    };
+    const body = {
+      ...box,
+    };
+    if (props?.cardType === '2') {
+      // 简洁模式，保留box的padding和footer的上padding，其他去掉
+      delete body.padding;
+      const [top] = box.padding.split(' ');
+      footer.padding = `${top} 0 0 0`;
+    } else {
+      // 默认模式，去掉box的padding，其他保留
+      delete box.padding;
+    }
+    return {
+      boxStyle: box,
+      bodyStyle: body,
+      footerStyle: footer,
+    };
+  }, [restStyle, props?.cardType]);
   const renderChildren = () => {
     return React.Children.toArray(children).map((child: any) => {
       if ($$ISNEW) {
-        const fStyle = { ...finialStyle };
-        delete fStyle.margin;
+        let fStyle = { ...(child?.props?.style || {}) };
+        if (child?.props?.schema?.compName === 'CardBody') {
+          fStyle = {
+            ...fStyle,
+            ...bodyStyle,
+          };
+        }
+        if (child?.props?.schema?.compName === 'CardFooter') {
+          fStyle = {
+            ...fStyle,
+            ...footerStyle,
+          };
+        }
         return React.cloneElement(child, {
           extendProps: {
             onBodyClick,
@@ -158,14 +203,16 @@ const Card = LingxiForwardRef<any, MyCardProps>((props, ref) => {
     }
   };
   const headerStyle = () => {
-    const { titleLineHeight, padding } = style;
+    const { titleLineHeight } = style;
     const defaultStyle = {
       ...style,
       background: headerBackground,
-      titleLineHeight,
-      padding: padding || '12px', // 兼容旧数据
+      // 卡片头部不受padding控制，风格固定
+      // padding: '12px', // 兼容旧数据
+      lineHeight: titleLineHeight,
     };
     delete defaultStyle.margin;
+    delete defaultStyle.padding;
     if (props?.cardType === '2') {
       return { ...defaultStyle, border: 'none' };
     }
@@ -180,7 +227,7 @@ const Card = LingxiForwardRef<any, MyCardProps>((props, ref) => {
           className={`${prefixCls}-title`}
           style={{
             color: titleColor,
-            fontSize: titleFontSize,
+            fontSize: +titleFontSize,
             fontWeight: titleFontWeight,
           }}
         >
@@ -219,15 +266,7 @@ const Card = LingxiForwardRef<any, MyCardProps>((props, ref) => {
       })();
     }
   }, [backgroundType, src, fileCode]);
-  const viewRef = useRef<HTMLDivElement>();
-  const restStyle = useStyle(
-    {
-      ...props,
-      src: imgSrc,
-    },
-    viewRef,
-  );
-  delete restStyle.margin;
+
   return (
     <AntCard
       className={classNames(
@@ -242,7 +281,7 @@ const Card = LingxiForwardRef<any, MyCardProps>((props, ref) => {
       headerStyle={$$ISNEW && showHeader ? headerStyle() : { display: 'none' }}
       style={{ ...style, overflow: 'hidden', padding: 0 }}
       extra={showHeader ? extra() : null}
-      bodyStyle={$$ISNEW ? { padding: '0', ...restStyle } : {}}
+      bodyStyle={$$ISNEW ? { padding: '0', ...boxStyle } : {}}
       onClick={(e) => {
         if (onClick) {
           onClick(e);

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

@@ -23,9 +23,13 @@
       }
     }
 
-    .lingxiteam-dform-card {
-      position: relative;
-    }
+      .lingxiteam-dform-card {
+        position: relative;
+        padding-top: 12 * @hd;
+      }
+      .lingxiteam-dform-card-border {
+        border: none;
+      }
   }
 
   &-groupLeftView {

package/lib/h5public/src/components/factory/src/DformFile/FormFile.tsx

@@ -63,7 +63,6 @@ export interface FormFileProps extends UseFormItemProps {
   downloadBtn?: any;
   deleteBtn?: any;
   listStyle?: string; // 列表样式
-  status?: string; // 状态 4为只读
   fileProps?: any; // 零代码里面可能有自定义上传信息
   uploadAccepType?: any;
   columns?: any;
@@ -141,17 +140,31 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
   } = columns || {};
   const {
     disabled,
-    val,
+    val: defaultVal,
     onInputChange,
     getRules,
     required,
     readOnly,
     visible,
+    isForm,
+    form,
   } = useFormItem(ref, props);
   const galleryRef = useRef<any>();
   const uploadResultRef = React.useRef<any>();
   const [imgSrc, setImgSrc] = useState('');
   const [imageVisible, setImageVisibleVisible] = useState(false);
+  const { fieldProps } = restProps;
+  const { val } = useMemo(
+    () => ({
+      get val() {
+        if (isForm && fieldProps) {
+          return form?.getFieldValue(fieldProps);
+        }
+        return defaultVal;
+      },
+    }),
+    [defaultVal, isForm, fieldProps, form],
+  );
 
   useEffect(() => {
     if (!uploadResultRef.current) {
@@ -531,7 +544,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
     }
   };
   const previewFile = (data: any, index: number) => {
-    if (`${props?.status}` !== '4') {
+    if (!disabled) {
       if (onFilespreviewClick) {
         // 有配置预览事件，则执行默认，否则默认
         onFilespreviewClick(data, index);
@@ -565,7 +578,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
       });
     }
     if (props?.deleteBtn && !disabled) {
-      if (`${props?.status}` !== '4') {
+      if (!readOnly) {
         // 删除
         btnList.push({
           ...props.deleteBtn,

package/lib/h5public/src/components/factory/src/DynamicDataContainer/YieldMethod.ts

@@ -0,0 +1,33 @@
+class YieldMethod {
+  private cacheMap: {
+    methodName: string;
+    func: (...args: any[]) => any;
+    params?: any[];
+  }[] = [];
+
+  appendTo(methodName: string, func: (...args: any[]) => any, params?: any[]) {
+    this.cacheMap.push({
+      methodName,
+      func,
+      params,
+    });
+  }
+
+  run(method?: string) {
+    let result = null;
+
+    this.cacheMap = this.cacheMap.filter(
+      ({ func, params = [], methodName }) => {
+        if (!method || methodName === method) {
+          result = func?.(...params);
+          return false;
+        }
+        return true;
+      },
+    );
+
+    return result;
+  }
+}
+
+export default YieldMethod;

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

@@ -1,10 +1,46 @@
 @import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
 
 .ued-dynamic-data-card {
-  border: 1px solid fade(@brand-primary, 20%);
-  border-radius: 8px;
-  overflow: hidden;
-  & > .lingxiteam-dform-card-extends {
-    padding: 16px 16px 0;
+  .lingxiteam-dform-group {
+    .lingxiteam-dform-card-extends-icon {
+      svg {
+        font-size: 12 * @hd;
+      }
+    }
+    .lingxiteam-dform-card-title-box {
+      padding-bottom: 0;
+    }
+    .lingxiteam-dform-card-extends-body-exit-done {
+      padding-top: 12 * @hd;
+    }
+  }
+
+  .lcdp-dgroup-icon {
+    color: @brand-primary;
+  }
+  .lingxiteam-dform-content {
+    padding-left: 12 * @hd;
+    .lingxiteam-dform-item {
+      padding-top: 3 * @hd;
+      padding-bottom: 3 * @hd;
+      min-height: 0;
+    }
+    .lcdp-dformwrapper-right-content {
+      display: flex;
+      align-items: center;
+      .cust-icon {
+        font-size: 12 * @hd;
+        width: 12 * @hd;
+        height: 12 * @hd;
+      }
+    }
+  }
+  .lingxiteam-dform-item {
+    padding-right: 12 * @hd;
+  }
+  .lingxiteam-dform-bottom-line {
+    left: 12 * @hd;
+    right: 12 * @hd;
   }
 }
+

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

@@ -77,7 +77,13 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>(
       >
     >({});
 
-    const { dynamicPageRef, staticAttrKeys } = useDynamicDataContainer({
+    const {
+      dynamicPageRef,
+      staticAttrKeys,
+      yieldMethod,
+      readyComplete,
+      engineliftCycle,
+    } = useDynamicDataContainer({
       dynamicHelper: dynamicHelperRef.current,
     });
 
@@ -282,7 +288,12 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>(
       },
       resetFields,
       setFieldsValue: (assignData: Record<string, unknown>) => {
-        return setFieldsValue(assignData, true);
+        if (readyComplete) {
+          return setFieldsValue(assignData, true);
+        }
+        return yieldMethod.appendTo('setFieldsValue', setFieldsValue, [
+          assignData,
+        ]);
       },
     }));
 
@@ -297,7 +308,11 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>(
             renderDynamicPage(
               pageData,
               { uid: $$componentItem.uid },
-              { ref: dynamicPageRef, staticAttrKeys },
+              {
+                ref: dynamicPageRef,
+                staticAttrKeys,
+                engineliftCycle,
+              },
             )}
         </DynamicDataProvider>
         {loading && <SpinLoading />}

package/lib/h5public/src/components/factory/src/DynamicDataContainer/useDynamicDataContainer.ts

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import YieldMethod from './YieldMethod';
 
 export const useDynamicDataContainer = ({
   dynamicHelper,
@@ -6,6 +7,8 @@ export const useDynamicDataContainer = ({
   dynamicHelper?: any;
 }) => {
   const dynamicPageRef = useRef<any>(null);
+  const [readyComplete, setReadyComplete] = useState(false);
+  const yieldMethod = useMemo(() => new YieldMethod(), []);
 
   useEffect(() => {
     dynamicHelper?.updateSandboxContext(
@@ -20,8 +23,18 @@ export const useDynamicDataContainer = ({
     return [];
   }, [dynamicHelper]);
 
+  const engineliftCycle = {
+    engineDidRender: () => {
+      setReadyComplete(true);
+      yieldMethod.run();
+    },
+  };
+
   return {
     dynamicPageRef,
     staticAttrKeys,
+    yieldMethod,
+    readyComplete,
+    engineliftCycle,
   };
 };

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

@@ -55,6 +55,7 @@ interface DataRefProps {
   refreshing: boolean;
   total: number;
   currentPage: number;
+  // pageLoad: boolean;
   resolve?: any;
 }
 
@@ -94,13 +95,14 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
   const { MemoLoopItem, renderer, getLoopItemExtraProps } = MemoRenderer;
   const [pageReady, setPageReady] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-  const [listData, setListData] = useState<any[]>([]);
   const [pageLoad, setPageLoad] = useState(false);
+  const [listData, setListData] = useState<any[]>([]);
   const listRef = useRef<any>({});
   const dynamicDataRef = useRef<DataRefProps>({
     total: total || 0,
     refreshing: false,
     currentPage: pageNum,
+    // pageLoad: false,
   });
   const [isFullOfView, setIsFullOfView] = useState(false);
   const [showFooter, setShowFooter] = useState(false);
@@ -334,8 +336,8 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
 
   useEffect(() => {
     // FIXME: 可能在旧数据存在异常情况，可重点排查这里
+    // if (dataSource && !dynamicDataRef.current.pageLoad) {
     if (dataSource && !pageLoad) {
-      // if (dataSource) {
       setPageReady(true);
       dynamicDataRef.current.total = Number(total);
       // dynamicDataRef.current.pageLoad = true;

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

@@ -420,7 +420,9 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>(
 
     useEffect(() => {
       tableDataRef.current.allData = dataSource;
-      resetCurrentPageData();
+      setTimeout(() => {
+        resetCurrentPageData();
+      }, 0);
     }, [dataSource]);
 
     useEffect(() => {

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

@@ -29,15 +29,50 @@ const MyImage = AppForwardRef<ImageProps>((props, ref) => {
   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',
+          }),
+        );
+      }
+    } else {
+      setSrc(src);
+    }
+  };
+
   useEffect(() => {
     if (props.src) {
       setSrc(props.src);
+      if (/^\d+$/.test(props.src)) {
+        // 如果src为纯数字，则认为是文件id, 转换成平台文件地址
+        setSrc(engineApis.getAppFileUrlById(src));
+      } else {
+        setImgsrcWithSign(props.src);
+      }
     }
   }, [props.src]);
 
   useImperativeHandle(ref, () => ({
     setSrc(v: string) {
-      setSrc(v);
+      setImgsrcWithSign(v);
     },
     setCompFileId: (fileId: string) => {
       setSrc(engineApis.getAppFileUrlById(fileId));

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

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

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

@@ -196,7 +196,7 @@ const StaticTabs = LingxiForwardRef<any, StaticTabsProps>((props, ref) => {
         if (newChildren?.[index]) {
           temTabchildren.push(newChildren[index]);
         } else if (newChildren.length > 0) {
-          temTabchildren.push(newChildren[0]);
+          temTabchildren.push(newChildren[0] || <></>);
         }
       }
     });

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

@@ -1,6 +1,7 @@
 import DynamicForm from '@lingxiteam/dform';
 import Field from '@lingxiteam/dform/es/components/Field';
 import { LingxiForwardRef } from '@lingxiteam/types';
+import classNames from 'classnames';
 import {
   useContext,
   useEffect,
@@ -57,6 +58,7 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>(
       formItemInstance,
       onBlur,
       required,
+      className,
     } = props;
     const { onInputChange, val } = formItemInstance;
     const { getValidateCodePicture, getLocale } = getEngineApis?.() || {};
@@ -298,7 +300,10 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>(
     };
 
     return (
-      <div className={prefixCls} style={visible ? {} : { display: 'none' }}>
+      <div
+        className={classNames(prefixCls, className)}
+        style={visible ? {} : { display: 'none' }}
+      >
         {renderView()}
       </div>
     );
@@ -307,9 +312,15 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>(
 
 export default LingxiForwardRef<unknown, MyVerificationCodeProps>(
   (props, ref) => {
-    const extraRef = useRef({});
+    const extraRef = useRef<any>({});
     const { visible } = props;
-    const formItemInstance = useFormItem(ref, props, extraRef.current);
+    const formItemInstance = useFormItem(ref, props, {
+      refreshPictureVeriryCode: () =>
+        extraRef.current.refreshPictureVeriryCode?.(),
+      startCountdown: () => extraRef.current.startCountdown?.(),
+      resetCountdown: () => extraRef.current.resetCountdown?.(),
+      setImageURL: (src: string) => extraRef.current.setImageURL?.(src),
+    });
 
     if (!formItemInstance.isForm) {
       return (

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

@@ -9,7 +9,7 @@ const ViewPlayerLoader = Loadable<
   // eslint-disable-next-line func-call-spacing
   loader: async () =>
     (await import(
-      /* webpackChunkName: factory-ViewPlayer */ './ViewPlayer'
+      /* webpackChunkName: 'factory-ViewPlayer' */ './ViewPlayer'
     )) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });

package/lib/h5public/src/components/factory/src/utils/CustomModule.tsx

@@ -99,6 +99,9 @@ const CustomModule: FC<CustomModuleProps> = ({
   errorInfo,
   allowMap,
 }) => {
+  if (typeof code === 'function') {
+    return code(compProps);
+  }
   // 加载到组件模块
   const Component = useMemo(() => {
     if (!code) {

package/lib/h5public/src/components/factory/src/utils/hooks/useFormItem.ts

@@ -114,6 +114,9 @@ export const useFormItem = (
     } else if (isForm && fieldProps) {
       const fieldVlaue = form?.getFieldValue(fieldProps);
       if (!isEqual(fieldVlaue, defaultValue)) {
+        if (onlySyncValue) {
+          onlySyncValue(defaultValue);
+        }
         form?.setFieldsValue({ [fieldProps]: defaultValue });
       }
     }

package/lib/h5public/src/hooks/usePageForm.ts

@@ -11,7 +11,7 @@ import {
 import { useContext } from 'react';
 
 const usePageForm = (refs: Record<string, any>) => {
-  const { refs: renderRefs } = useContext(Context);
+  const { refs: renderRefs, forceUpdate } = useContext(Context);
 
   /**
    * 重置表单值
@@ -94,11 +94,12 @@ const usePageForm = (refs: Record<string, any>) => {
       });
 
       forms.forEach((form) => {
-        form?.setFieldsValue(formValues);
+        form?.setFieldsValue(formValues, refs);
       });
     } else {
-      refs[compId]?.setFieldsValue?.(formValues);
+      refs[compId]?.setFieldsValue?.(formValues, refs);
     }
+    forceUpdate({});
   };
 
   /**
@@ -117,6 +118,30 @@ const usePageForm = (refs: Record<string, any>) => {
   const getAllFormValues = () =>
     validateFields({ refs, renderRefs }, getFieldsValueByCode);
 
+  /**
+   * 设置表单是否可编辑
+   * @param compId 组件id
+   * @param editor 是否可编辑
+   */
+  const setFormDisabled = async (compId: string, editor: boolean) => {
+    if (!refs[compId]) return;
+    const compName = refs[compId].compName;
+
+    if (compName === 'BOFramer') {
+      const forms = getFormsByBoframerId({
+        refs,
+        renderRefs,
+        compId,
+      });
+
+      forms.forEach((form) => {
+        form?.setDisabled(editor);
+      });
+    } else {
+      refs[compId]?.setDisabled?.(editor);
+    }
+    forceUpdate({});
+  };
   return {
     getFormValue,
     validateForm,
@@ -124,6 +149,7 @@ const usePageForm = (refs: Record<string, any>) => {
     getAllFormValues,
     resetForm,
     setFormValues,
+    setFormDisabled,
   };
 };