@lingxiteam/ebe-utils 0.5.11 → 0.6.1

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

@@ -1,26 +1,27 @@
 import Form, { type FormInstance } from '@lingxiteam/dform';
-import { DynamicDataFieldItem, DynamicDataType, LingxiForwardRef } from '@lingxiteam/types';
-import { SpinLoading } from 'antd-mobile-5';
 import React, { CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { DynamicDataFieldItem, DynamicDataType, GetDynamicDataUtils, LingxiForwardRef } from '@lingxiteam/types';
+import { SpinLoading } from 'antd-mobile-5';
 import { DynamicDataContext, DynamicDataProvider } from '../utils/dynamicUtils/DynamicContext';
-import './index.less';
 import { useDynamicDataContainer } from './useDynamicDataContainer';
+import './index.less';
 
 type RuleParamsItem = {
   paramId: string;
   valueCode?: string | string[];
   originValueCode?: string;
   paramCode?: string;
-};
+}
 export interface DynamicDataContainerProps {
   className: string;
   style: CSSProperties;
   engineRule?: Array<{
     conditionId: string;
     rules?: RuleParamsItem[];
-  }>;
+}>;
   name: string;
-  onValuesChange?: (formCode: string, changedFieldName: string, changedFieldValue: any, allValues: Record<string, Record<string, any>>) => void;
+  onValuesChange?: (formCode: string, changedFieldName: string,
+    changedFieldValue: any, allValues: Record<string, Record<string, any>>) => void;
   dynamicCode: string;
   visible?: boolean;
   readOnly?: boolean;
@@ -31,44 +32,35 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
   const { className, getEngineApis, style = {}, engineRule, $$componentItem, name, onValuesChange, dynamicCode, boxSpace, readOnly } = props || {};
   const engineApis = getEngineApis?.() || {};
   const [loading, setLoading] = useState<boolean>(false);
-  const { service, dynamicDataUtils, renderDynamicPage } = engineApis;
-  const { dynamicData2DSL, diffChange, combineRules } = dynamicDataUtils || {};
-  const dynamicHelperRef = useRef<ReturnType<typeof dynamicData2DSL>>();
+  const { service, getDynamicDataUtils, renderDynamicPage } = engineApis;
+  const dynamicDataUtilsRef = useRef<ReturnType<GetDynamicDataUtils>>();
+
+  const dynamicHelperRef = useRef<ReturnType<ReturnType<GetDynamicDataUtils>['dynamicData2DSL']>>();
   const [pageData, setPageData] = useState<any>();
-  const formsRef = useRef<
-    Record<
-      string,
-      {
-        form: FormInstance<any>;
-        validateFormAndScroll?:() => Promise<any>;
-        getFieldsValue?: FormInstance['getFieldsValue'];
-        setFieldsValue?: (values: any, refs: Record<string, any>) => void;
-        resetFields?: FormInstance['resetFields'];
-        setDisabled?: (v: boolean) => void;
-        setReadOnly?: (v: boolean) => void;
-          }
-          >
-          >({});
+  const formsRef = useRef<Record<string, {
+    form: FormInstance<any>;
+    validateFormAndScroll?:() => Promise<any>;
+    getFieldsValue?: FormInstance['getFieldsValue'];
+    setFieldsValue?: (values: any, refs: Record<string, any>) => void;
+    resetFields?: FormInstance['resetFields'];
+    setDisabled?: (v: boolean) => void;
+    setReadOnly?: (v: boolean) => void;
+      } >>({});
 
   const { dynamicPageRef, staticAttrKeys, yieldMethod, readyComplete, engineliftCycle } = useDynamicDataContainer({
     dynamicHelper: dynamicHelperRef.current,
   });
 
-  const getDynamicData = async (rules: Array<Array<RuleParamsItem>>) => {
+  const getDynamicData = async(rules: Array<Array<RuleParamsItem>>) => {
     try {
       setLoading(true);
       if (rules && rules?.length) {
-        const res = await service.batchMatchDynamicData({
-          terminalType: 'h5',
-          findDataDetail: true,
-          paramGroupList: rules,
-        });
+        const { dynamicData2DSL } = dynamicDataUtilsRef.current!;
+        const res = await service.batchMatchDynamicData({ terminalType: 'h5', findDataDetail: true, paramGroupList: rules });
         if (res) {
           if (res && typeof dynamicData2DSL === 'function') {
-            const dataHelper = dynamicData2DSL(
-              res as DynamicDataType[],
-              { uid: $$componentItem.uid, name },
-              (DSLCore, dynamicData: DynamicDataType | DynamicDataFieldItem) => {
+            const dataHelper = dynamicData2DSL(res as DynamicDataType[],
+              { uid: $$componentItem.uid, name }, (DSLCore, dynamicData: DynamicDataType | DynamicDataFieldItem) => {
                 if ('dataId' in dynamicData) {
                   const node = DSLCore?.query?.(`Card_${dynamicData.dataId}`);
                   if (node && boxSpace) {
@@ -77,8 +69,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
                     });
                   }
                 }
-              }
-            );
+              });
             setPageData(dataHelper.pageDSL);
             dynamicHelperRef.current = dataHelper;
           }
@@ -89,10 +80,10 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     }
   };
 
-  const getDynamicFormValue = async () => {
+  const getDynamicFormValue = async() => {
     const allValues: Record<string, any> = {};
     if (formsRef.current) {
-      const promise = Object.keys(formsRef.current).map(formCode => {
+      const promise = Object.keys(formsRef.current).map((formCode) => {
         const form = formsRef.current[formCode] || {};
         return form?.getFieldsValue?.().then((res: any) => {
           allValues[formCode] = res;
@@ -105,7 +96,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
 
   useEffect(() => {
     if (formsRef.current) {
-      Object.keys(formsRef.current).forEach(key => {
+      Object.keys(formsRef.current).forEach((key) => {
         const form = formsRef.current[key];
         if (form?.setReadOnly) {
           form.setReadOnly(!!readOnly);
@@ -122,7 +113,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
         const form = formsRef.current[formCode] || {};
         const values = await form?.getFieldsValue?.();
         const obj: any = {};
-        Object.keys(values).forEach(key => {
+        Object.keys(values).forEach((key) => {
           obj[key] = undefined;
         });
         form?.setFieldsValue?.(obj, dynamicPageRef?.current?.sandboxContext?.refs);
@@ -130,7 +121,9 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     }
     const updateData = await getDynamicFormValue();
     const { event } = dynamicHelperRef.current || {};
-    diffChange(beforeData, updateData, diff => {
+    const { diffChange } = dynamicDataUtilsRef.current!;
+
+    diffChange(beforeData, updateData, (diff) => {
       // 执行事件处理变更联动
       event?.eval(diff.formCode, diff.changeFieldName);
     });
@@ -145,13 +138,15 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     }
     const beforeData = await getDynamicFormValue();
     if (formsRef.current) {
-      Object.keys(formsRef.current).forEach(formCode => {
+      Object.keys(formsRef.current).forEach((formCode) => {
         const form = formsRef.current[formCode] || {};
         form?.setFieldsValue?.(formalFormData[formCode] || {}, dynamicPageRef?.current?.sandboxContext?.refs);
       });
     }
     const updateData = await getDynamicFormValue();
-    diffChange(beforeData, updateData, diff => {
+    const { diffChange } = dynamicDataUtilsRef.current!;
+
+    diffChange(beforeData, updateData, (diff) => {
       // 执行事件处理变更联动
       event?.eval(diff.formCode, diff.changeFieldName);
     });
@@ -192,11 +187,17 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     };
   }, [readOnly]);
 
-  useEffect(() => {
-    if (engineRule && engineRule?.length) {
+  const queryDynamicData = async () => {
+    dynamicDataUtilsRef.current = await getDynamicDataUtils();
+    if (engineRule && engineRule?.length && dynamicDataUtilsRef.current) {
+      const { combineRules } = dynamicDataUtilsRef.current;
       getDynamicData(combineRules(engineRule));
     }
-  }, [engineRule]);
+  };
+
+  useEffect(() => {
+    queryDynamicData();
+  }, []);
 
   useImperativeHandle(ref, () => ({
     dynamicCode,
@@ -205,7 +206,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
       return getDynamicData(newRules);
     },
     // 获取动态数据表单转换协议后的值
-    getFieldsValue: async () => {
+    getFieldsValue: async() => {
       const allValues = await getDynamicFormValue();
       const { formData2Retrieve } = dynamicHelperRef.current || {};
       return formData2Retrieve?.(allValues) || allValues;
@@ -215,12 +216,12 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
       return getDynamicFormValue();
     },
     // 校验表单并取值
-    validateFormAndScroll: async () => {
+    validateFormAndScroll: async() => {
       const allValues: Record<string, any> = {};
       if (formsRef.current) {
-        const validatePromiseList = Object.keys(formsRef.current).map(formCode => {
+        const validatePromiseList = Object.keys(formsRef.current).map((formCode) => {
           const form = formsRef.current[formCode] || {};
-          return form?.validateFormAndScroll?.().then(res => {
+          return form?.validateFormAndScroll?.().then((res) => {
             allValues[formCode] = res;
           });
         });
@@ -244,20 +245,23 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     display: props?.visible ? undefined : 'none',
   };
   return (
-    <div className={className} style={dynamicStyle}>
+    <div
+      className={className}
+      style={dynamicStyle}
+    >
       <DynamicDataProvider value={providerValue}>
-        {pageData &&
-          renderDynamicPage(
-            pageData,
-            { uid: $$componentItem.uid },
-            {
-              ref: dynamicPageRef,
-              staticAttrKeys,
-              engineliftCycle,
-            }
-          )}
+        {pageData && renderDynamicPage(pageData, { uid: $$componentItem.uid }, {
+          ref: dynamicPageRef,
+          staticAttrKeys,
+          engineliftCycle,
+        })}
       </DynamicDataProvider>
-      {loading && <SpinLoading />}
+      {loading && (
+        <div className="ued-dynamic-data-loading">
+          <SpinLoading />
+        </div>
+      )
+      }
     </div>
   );
 });

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

@@ -1,13 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import YieldMethod from './YieldMethod';
 
+
 export const useDynamicDataContainer = ({ dynamicHelper }: { dynamicHelper?: any }) => {
   const dynamicPageRef = useRef<any>(null);
   const [readyComplete, setReadyComplete] = useState(false);
   const yieldMethod = useMemo(() => new YieldMethod(), []);
 
   useEffect(() => {
-    dynamicHelper?.updateSandboxContext(() => dynamicPageRef.current?.sandboxContext);
+    dynamicHelper?.updateSandboxContext(() => (dynamicPageRef.current?.sandboxContext));
   }, [dynamicHelper, dynamicPageRef.current]);
 
   const staticAttrKeys = useMemo(() => {

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

@@ -1,6 +1,6 @@
-import { EngineBaseProps } from '@lingxiteam/types';
-import { SwipeAction } from 'antd-mobile-5';
 import React, { ReactNode } from 'react';
+import { SwipeAction } from 'antd-mobile-5';
+import { EngineBaseProps } from '@lingxiteam/types';
 
 export interface SwipeActionProps {
   btnBackgroundColor: string;
@@ -27,7 +27,8 @@ interface MySwipeProps {
   renderIcon: (props: any) => JSX.Element;
 }
 
-const CustomButton: React.FC<MySwipeProps> = props => {
+
+const CustomButton: React.FC<MySwipeProps> = (props) => {
   const {
     isEdit,
     children,
@@ -41,11 +42,12 @@ const CustomButton: React.FC<MySwipeProps> = props => {
     renderIcon,
   } = props;
 
+
   const getActionText = (swipeAction: [SwipeActionProps]) => {
     const actionArray: any[] = [];
     swipeAction?.forEach((item: SwipeActionProps, index: number) => {
       const { btnBackgroundColor, checked, iconPos, rule, icon, disabled, isIcon, value, title } = item;
-
+    
       let view = <></>;
       let iconView = <></>;
       let viewHidden: boolean | unknown = false;
@@ -77,19 +79,9 @@ const CustomButton: React.FC<MySwipeProps> = props => {
         }
       }
       if (iconPos === 'left') {
-        view = (
-          <div>
-            {iconView}
-            {title}
-          </div>
-        );
+        view = <div>{iconView}{title}</div>;
       } else {
-        view = (
-          <div>
-            {title}
-            {iconView}
-          </div>
-        );
+        view = <div>{title}{iconView}</div>;
       }
       if (isIcon) {
         view = <>{iconView}</>;
@@ -114,7 +106,11 @@ const CustomButton: React.FC<MySwipeProps> = props => {
   };
 
   return (
-    <SwipeAction closeOnAction={closeOnAction} closeOnTouchOutside={closeOnTouchOutside} rightActions={getActionText(swipeAction)}>
+    <SwipeAction
+      closeOnAction={closeOnAction}
+      closeOnTouchOutside={closeOnTouchOutside}
+      rightActions={getActionText(swipeAction)}
+    >
       {children}
     </SwipeAction>
   );

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

@@ -1,11 +1,11 @@
 /* eslint-disable no-nested-ternary */
+import React, { useMemo, useState, useEffect, useImperativeHandle, useRef } from 'react';
+import { InfiniteScroll, DotLoading, PullToRefresh, List, Toast } from 'antd-mobile-5';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { DotLoading, InfiniteScroll, List, PullToRefresh, Toast } from 'antd-mobile-5';
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Empty, SpinComp } from '../BasicComponents';
-import Icon from '../Icon';
 import './index.less';
+import { SpinComp, Empty } from '../BasicComponents';
 import MySwipe, { SwipeActionProps } from './MySwipe';
+import Icon from '../Icon';
 
 function isWindow(element: any | Window): element is Window {
   return element === window;
@@ -126,7 +126,10 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
   }, []);
 
   // 开启下拉刷新并且设置了刷新方法才启用pullToRefresh
-  const headerDisable = useMemo(() => !pulling || !onDynamicListRefresh, [pulling, onDynamicListRefresh]);
+  const headerDisable = useMemo(
+    () => !pulling || !onDynamicListRefresh,
+    [pulling, onDynamicListRefresh],
+  );
 
   // 刷新及加载更多逻辑
   const dynamicListDataChange = (data: any) => {
@@ -143,7 +146,9 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
             setShowFooter(true);
           }
         } else {
-          dynamicDataRef.current.currentPage = dynamicDataRef.current.currentPage ? dynamicDataRef.current.currentPage + 1 : myPageNum + 1;
+          dynamicDataRef.current.currentPage = dynamicDataRef.current.currentPage
+            ? dynamicDataRef.current.currentPage + 1
+            : myPageNum + 1;
           allData = [...listData, ...data];
         }
         // console.log('设置数据：', allData.length, dynamicDataRef.current.total > allData.length);
@@ -179,12 +184,20 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
       if (parent) {
         let rect;
         if (props.styleType === 'inhert') {
-          rect = listRef.current?.getElementsByClassName(prefixCls)?.[0].getBoundingClientRect();
+          rect = listRef.current
+            ?.getElementsByClassName(prefixCls)?.[0]
+            .getBoundingClientRect();
         } else {
           rect = listRef.current?.getBoundingClientRect();
         }
         const elementBottom = rect.height;
-        const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().height;
+        let current = isWindow(parent)
+          ? window.innerHeight
+          : parent.getBoundingClientRect().height;
+        // 父页面如果没有设置高度，被撑开的话，取屏幕高度
+        if (current > window.innerHeight) {
+          current = window.innerHeight;
+        }
         // 数据是否充满屏幕
         const isFull = elementBottom >= current;
         setIsFullOfView(isFull);
@@ -259,7 +272,7 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
       const page = dynamicDataRef.current?.currentPage ?? myPageNum;
       // console.log('加载更多:', page);
       setLoading(true);
-      await new Promise(resolve => {
+      await new Promise((resolve) => {
         resolve(onDynamicListLoadMore(page, Number(pageSize ?? '10')));
       });
       if (isRetry !== 'click') {
@@ -348,13 +361,15 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
           rowData={columnData}
           index={i}
           swipActionClick={swipActionClick}
-          renderIcon={p => <Icon {...p} $$componentItem={$$componentItem} getEngineApis={getEngineApis} className="" />}
+          renderIcon={(p) => <Icon {...p} $$componentItem={$$componentItem} getEngineApis={getEngineApis} className="" />}
         >
           <MemoLoopItem {...renderProps} />
         </MySwipe>
       );
     }
-    return <MemoLoopItem {...renderProps} />;
+    return (
+      <MemoLoopItem {...renderProps} />
+    );
   };
 
   const renderListItem = () => {
@@ -362,25 +377,43 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
 
     if (typeof columnNum !== 'number' || columnNum === 1) {
       return listData.map((item: any, index: number) => (
-        <List.Item onClick={() => onItemClick(item, index)} arrow={false} key={`${dataId}--${index}`} disabled={status === '3'}>
+        <List.Item
+          onClick={() => onItemClick(item, index)}
+          arrow={false}
+          key={`${dataId}--${index}`}
+          disabled={status === '3'}
+        >
           {renderColumn(item, index)}
         </List.Item>
       ));
-    }
-    if (columnNum >= 2) {
+    } if (columnNum >= 2) {
       const columns: any = [];
       for (let i = 0; i < listData.length; i += 2) {
         const item = (
           <List.Item arrow={false}>
             <div className={`${prefixCls}-grid-view`}>
-              <List.Item onClick={() => onItemClick(listData[i], i)} arrow={false} disabled={status === '3'}>
-                <div className={`${prefixCls}-grid-item`} key={`${dataId}--${i}`}>
+              <List.Item
+                onClick={() => onItemClick(listData[i], i)}
+                arrow={false}
+                disabled={status === '3'}
+              >
+                <div
+                  className={`${prefixCls}-grid-item`}
+                  key={`${dataId}--${i}`}
+                >
                   {renderColumn(listData[i], i)}
                 </div>
               </List.Item>
               {i + 1 < listData.length && (
-                <List.Item onClick={() => onItemClick(listData[i + 1], i + 1)} arrow={false} disabled={status === '3'}>
-                  <div className={`${prefixCls}-grid-item`} key={`${dataId}--${i + 1}`}>
+                <List.Item
+                  onClick={() => onItemClick(listData[i + 1], i + 1)}
+                  arrow={false}
+                  disabled={status === '3'}
+                >
+                  <div
+                    className={`${prefixCls}-grid-item`}
+                    key={`${dataId}--${i + 1}`}
+                  >
                     {renderColumn(listData[i + 1], i + 1)}
                   </div>
                 </List.Item>
@@ -421,7 +454,7 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
                   {getLocale('DynamicList.clickToMore', '点击加载更多')}
                 </span>
               )}
-              {!isHasMore && listData.length !== 0 && <span>{getLocale('DynamicList.noMore', '没有更多了')}</span>}
+              {!isHasMore && listData.length !== 0 && (<span>{getLocale('DynamicList.noMore', '没有更多了')}</span>)}
             </>
           )}
         </>
@@ -430,7 +463,11 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
 
     return (
       <>
-        {hasMore ? <SpinComp dataState={dataState} /> : listData.length !== 0 ? <span>{getLocale('DynamicList.noMore', '没有更多了')}</span> : <></>}
+        {hasMore ? (
+          <SpinComp dataState={dataState} />
+        ) : listData.length !== 0 ? (
+          <span>{getLocale('DynamicList.noMore', '没有更多了')}</span>
+        ) : <></>}
       </>
     );
   }, [hasMore, isFullOfView, listData, loading]);
@@ -448,10 +485,11 @@ const DynamicList = LingxiForwardRef<any, MyDynamicListProps>((props, ref) => {
         <List header={title} style={uStyle} className={prefixCls}>
           {renderListItem()}
           {listData.length === 0 && pageReady && (
-            <List.Item>
-              <Empty dataState={dataState} getLocale={getLocale} />
-            </List.Item>
-          )}
+          <List.Item>
+            <Empty dataState={dataState} getLocale={getLocale} />
+          </List.Item>
+          )
+          }
         </List>
 
         {showFooter && (