@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/Divider/index.tsx

@@ -1,196 +1,11 @@
-import React from 'react';
-import CenterLineDivider from './components/CenterLineDivider';
-import CenterTabDivider from './components/CenterTabDivider';
-import LeftCardDivider from './components/LeftCardDivider';
-import LeftLineDivider from './components/LeftLineDivider';
-import LeftTabDivider from './components/LeftTabDivider';
-import LeftTopDivider from './components/LeftTopDivider';
-import LxDashed from './components/LxDashed';
-import LxSolid from './components/LxSolid';
+import React, { useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import DividerLoader from './loader';
 
-export interface MyDividerProps {
-  visible: any;
-  dividerText?: string;
-  onSelectedRowsRelease?: (e: any[]) => void;
-  onSelectedRowKeysRelease?: (e: any[]) => void;
-  onSelectedKeysRelease?: (e: any[]) => void;
-  onEditingKeyRelease?: (e: any[]) => void;
-  onInlineEditRelease?: (e: any) => void;
-  onInlineSaveRelease?: (e: any) => void;
-  onSelectedDataRelease?: (e: any[]) => void;
-  pageState?: any;
-  pagePublicState?: any;
-  type?: string;
-  width?: number;
-  height?: number;
-  style?: React.CSSProperties;
-  customStyle?: React.CSSProperties;
-  basicStatus?: string;
-  dashed?: boolean;
-  showTitle?: boolean;
-  titleColor?: string;
-  titleFontSize?: string;
-  titleLineHeight?: string;
-  titleFontWeight?: string;
-  dashedWidth?: number;
-  dashedMargin?: number;
-}
+const Divider = LingxiForwardRef<unknown, any>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+  }));
+  return <DividerLoader {...props} />;
+});
 
-const MyDivider: React.FC<MyDividerProps> = props => {
-  const {
-    visible = true,
-    dividerText,
-    onSelectedRowsRelease,
-    onSelectedRowKeysRelease,
-    onSelectedKeysRelease,
-    onEditingKeyRelease,
-    onInlineEditRelease,
-    onInlineSaveRelease,
-    onSelectedDataRelease,
-    pageState,
-    pagePublicState,
-    type,
-    style,
-    customStyle,
-    basicStatus,
-    dashed,
-    showTitle,
-    titleColor,
-    titleFontSize,
-    titleLineHeight,
-    titleFontWeight,
-    dashedWidth = 4,
-    dashedMargin = 4,
-    ...restProps
-  } = props;
-
-  if (!visible) {
-    return null;
-  }
-
-  const dividerStyle = () => {
-    let s = { ...style, ...customStyle };
-    if (type === 'vertical') {
-      // 设置默认值
-      s = { width: '1px', height: '12px', ...s }; // 垂直
-    } else {
-      s = { width: '100%', height: '1px', ...s }; // 水平
-    }
-    return s;
-  };
-  const titleStyle = () => {
-    // 兼容旧数据，新的字体去掉该属性
-    if (titleLineHeight) {
-      return {
-        color: titleColor,
-        fontSize: titleFontSize,
-        lineHeight: titleLineHeight,
-        fontWeight: titleFontWeight,
-      };
-    }
-    return {
-      color: titleColor,
-      fontSize: titleFontSize,
-      fontWeight: titleFontWeight,
-    };
-  };
-  const dividerView = () => {
-    if (`${basicStatus}` === '2') {
-      return null;
-    }
-    switch (`${dashed}`) {
-      case 'true':
-        if (type === 'horizontal') {
-          return (
-            <LxDashed
-              showTitle={showTitle}
-              dividerText={dividerText}
-              titleStyle={titleStyle()}
-              dashedWidth={dashedWidth}
-              dashedMargin={dashedMargin}
-              customStyle={customStyle}
-              style={dividerStyle()}
-              {...restProps}
-            />
-          );
-        }
-        return (
-          <LxSolid showTitle={showTitle} dividerText={dividerText} style={dividerStyle()} type={type} titleStyle={titleStyle()} {...restProps} />
-        );
-
-      case 'leftTop':
-        return (
-          <LeftTopDivider
-            titleStyle={titleStyle()}
-            showTitle={showTitle}
-            dividerText={dividerText}
-            style={style}
-            customStyle={customStyle}
-            {...restProps}
-          />
-        );
-      case 'leftTab':
-        return (
-          <LeftTabDivider
-            titleStyle={titleStyle()}
-            showTitle={showTitle}
-            dividerText={dividerText}
-            style={style}
-            customStyle={customStyle}
-            {...restProps}
-          />
-        );
-      case 'leftCard':
-        return (
-          <LeftCardDivider
-            titleStyle={titleStyle()}
-            showTitle={showTitle}
-            dividerText={dividerText}
-            style={style}
-            customStyle={customStyle}
-            {...restProps}
-          />
-        );
-      case 'leftLine':
-        return (
-          <LeftLineDivider
-            titleStyle={titleStyle()}
-            showTitle={showTitle}
-            dividerText={dividerText}
-            style={style}
-            customStyle={customStyle}
-            {...restProps}
-          />
-        );
-      case 'centerTab':
-        return (
-          <CenterTabDivider
-            titleStyle={titleStyle()}
-            showTitle={showTitle}
-            dividerText={dividerText}
-            style={style}
-            customStyle={customStyle}
-            {...restProps}
-          />
-        );
-      case 'centerLine':
-        return (
-          <CenterLineDivider
-            titleStyle={titleStyle()}
-            showTitle={showTitle}
-            dividerText={dividerText}
-            style={style}
-            customStyle={customStyle}
-            {...restProps}
-          />
-        );
-      default:
-        return (
-          <LxSolid showTitle={showTitle} dividerText={dividerText} style={dividerStyle()} type={type} titleStyle={titleStyle()} {...restProps} />
-        );
-    }
-  };
-  return <>{dividerView()}</>;
-};
-
-export default MyDivider;
+export default Divider;

package/lib/pcpublic/src/components/pcfactory/src/Divider/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const Divider = Loadable({
+  loader: async () => (await import/* webpackChunkName: "pcFactory-Divider" */('./Divider')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default Divider;

package/lib/pcpublic/src/components/pcfactory/src/Dropdown/index.tsx

@@ -1,9 +1,9 @@
-import { DownOutlined } from '@ant-design/icons';
-import { LingxiForwardRef } from '@lingxiteam/types';
-import { Dropdown as AntdDropdown, Menu, Space } from 'antd';
-import classnames from 'classnames';
 import React, { useImperativeHandle, useMemo, useState } from 'react';
+import { DownOutlined } from '@lingxiteam/icons';
+import { Menu, Dropdown as AntdDropdown, Space } from 'antd';
+import classnames from 'classnames';
 import Icon from '../Icon';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { useListenProps } from '../utils';
 import { useLocale } from '../utils/hooks/useLocale';
 
@@ -24,7 +24,7 @@ export interface MyDropdownProps {
   menuType: any;
   trigger: any;
   buttonType: any;
-  isUsePrimary: boolean;
+  isUsePrimary?: boolean;
   buttonIcon: any;
   selectable: any;
   treeService: any;
@@ -32,7 +32,7 @@ export interface MyDropdownProps {
   clickClose: any;
   arrow: any;
   icon?: any;
-  color: any;
+  color?: any;
   onVisibleChange?: (vis: boolean) => void;
   onClick?: (key: any, url: any, data: any) => void;
   getEngineApis?: any;
@@ -49,13 +49,13 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
     menuType,
     trigger,
     buttonType,
-    isUsePrimary,
+    isUsePrimary: oldIsUsePrimary,
     buttonIcon,
     selectable,
     extendRules,
     clickClose,
     arrow,
-    color,
+    color: oldColor,
     onVisibleChange,
     onClick,
     icon = {},
@@ -65,7 +65,7 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
   const [dataSource, setDataSource] = useListenProps(props.dataSource);
   const [treeService, setTreeService] = useListenProps(props.treeService);
 
-  const { iconInfo = {} } = icon;
+  const { iconInfo = {}, color, isUsePrimary } = icon;
   const [menuExpandedKeys, setMenuExpandedKeys] = useState<string[]>([]);
   const [menuSelectedKeys, setMenuSelectedKeys] = useState<string[]>([]);
   const [menuVisible, setMenuVisible] = useState<boolean>(false);
@@ -99,7 +99,10 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
     }
     if (typeof rule === 'string') {
       // eslint-disable-next-line no-new-func
-      return new Function('node', `try { return ${rule};} catch(e) { console.warn("${rule}${getLocale?.('nodeRule')}");}`);
+      return new Function(
+        'node',
+        `try { return ${rule};} catch(e) { console.warn("${rule}${getLocale?.('nodeRule')}");}`,
+      );
     }
     return () => {};
   };
@@ -128,14 +131,14 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
       return (
         <Icon
           icon={info}
-          isUsePrimary={isUsePrimary}
+          isUsePrimary={isUsePrimary || oldIsUsePrimary}
           style={
             _style || {
               width: '14px',
               height: '14px',
               fontSize: '14px',
-              fill: isUsePrimary ? undefined : color,
-              color: isUsePrimary ? undefined : color,
+              fill: (isUsePrimary || oldIsUsePrimary) ? undefined : (color || oldColor),
+              color: (isUsePrimary || oldIsUsePrimary) ? undefined : (color || oldColor),
             }
           }
           $$componentItem={props.$$componentItem}
@@ -169,17 +172,19 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
       }
       if (info) {
         return renderIconFont(info);
-      }
-      if (menuExpandedKeys.includes(key)) {
+      } if (menuExpandedKeys.includes(key)) {
         return renderIconFont(iconInfo.expanded);
-      }
-      if (children?.length) {
+      } if (children?.length) {
         return renderIconFont(iconInfo.closed);
       }
       return renderIconFont(iconInfo.leaf);
     }
     // eslint-disable-next-line no-nested-ternary
-    const iconType = menuExpandedKeys.includes(key) ? expandedIcon : item?.children?.length ? closedIcon : closedIcon || expandedIcon;
+    const iconType = menuExpandedKeys.includes(key)
+      ? expandedIcon
+      : item?.children?.length
+        ? closedIcon
+        : closedIcon || expandedIcon;
     return renderIconFont(iconType);
   };
 
@@ -193,8 +198,7 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
             {renderSubMenu(opt.children)}
           </Menu.SubMenu>
         );
-      }
-      if (key) {
+      } if (key) {
         return (
           <Menu.Item
             disabled={disabled}
@@ -279,13 +283,12 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
       // 动态获取回来的服务数据
       const dataAttrs: any = loadData(dataSource, treeService);
       return [...(dataAttrs || [])];
-    }
-    if (Array.isArray(treeData) && treeData?.length) {
+    } if (Array.isArray(treeData) && treeData?.length) {
       // 项目设置配置的静态数据
       return [...treeData];
     }
     return [];
-  }, [dataSource, treeData, extRules, isUsePrimary, menuExpandedKeys]);
+  }, [dataSource, treeData, extRules, isUsePrimary, oldIsUsePrimary, menuExpandedKeys]);
 
   const options = useMemo(() => {
     return {
@@ -299,6 +302,7 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
         setMenuVisible(vis);
         if (onVisibleChange instanceof Function) onVisibleChange(vis);
       },
+      overlayStyle: { minWidth: 'undefined' },
     };
   }, [restProps, loading]);
 
@@ -328,7 +332,7 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
             height: fontSize,
             color: style?.color,
             fill: style?.color,
-          }
+          },
         )}
         buttonsRender={([leftButton, rightButton]) => [
           React.cloneElement(leftButton as React.ReactElement<any, string>, {
@@ -359,7 +363,7 @@ const Dropdown = LingxiForwardRef<any, MyDropdownProps>((props, ref) => {
       >
         <Space>
           {children || name}
-          <DownOutlined rev="" />
+          <DownOutlined />
         </Space>
       </div>
     </AntdDropdown>

package/lib/pcpublic/src/components/pcfactory/src/DynamicDataContainer/YieldMethod.ts

@@ -1,9 +1,5 @@
 class YieldMethod {
-  private cacheMap: {
-    methodName: string;
-    func: (...args: any[]) => any;
-    params?: any[];
-  }[] = [];
+  private cacheMap: { methodName: string, func:(...args: any[]) => any, params?: any[] }[] = [];
 
   appendTo(methodName: string, func: (...args: any[]) => any, params?: any[]) {
     this.cacheMap.push({

package/lib/pcpublic/src/components/pcfactory/src/DynamicDataContainer/index.tsx

@@ -1,15 +1,15 @@
-import { DynamicDataFieldItem, DynamicDataType, LingxiForwardRef } from '@lingxiteam/types';
-import { Form, FormInstance, Spin } from 'antd';
 import React, { CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { DynamicDataFieldItem, DynamicDataType, GetDynamicDataUtils, LingxiForwardRef } from '@lingxiteam/types';
+import { Form, FormInstance, Spin } from 'antd';
 import { DynamicDataContext, DynamicDataProvider } from '../utils';
 import { useDynamicDataContainer } from './useDynamicDataContainer';
 
 type RuleParamsItem = {
   paramId: string;
-  valueCode?: string;
+  valueCode?: string | string[];
   originValueCode?: string;
   paramCode?: string;
-};
+}
 export interface DynamicDataContainerProps {
   className: string;
   style: CSSProperties;
@@ -17,7 +17,7 @@ export interface DynamicDataContainerProps {
   engineRule?: Array<{
     conditionId: string;
     rules?: RuleParamsItem[];
-  }>;
+}>;
   name: string;
   visible?: boolean;
   readOnly?: boolean;
@@ -34,8 +34,9 @@ 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 { service, getDynamicDataUtils, renderDynamicPage } = engineApis;
+  const dynamicDataUtilsRef = useRef<ReturnType<GetDynamicDataUtils>>();
+
   const formsRef = useRef<
     Record<
       string,
@@ -51,7 +52,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
           >
           >({});
   const [pageData, setPageData] = useState<any>();
-  const dynamicHelperRef = useRef<ReturnType<typeof dynamicData2DSL>>();
+  const dynamicHelperRef = useRef<ReturnType<ReturnType<GetDynamicDataUtils>['dynamicData2DSL']>>();
 
   const { dynamicPageRef, staticAttrKeys, yieldMethod, readyComplete, engineliftCycle } = useDynamicDataContainer({
     dynamicHelper: dynamicHelperRef.current,
@@ -61,11 +62,8 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     try {
       setLoading(true);
       if (rules && rules?.length) {
-        const res = await service.batchMatchDynamicData({
-          terminalType: 'pc',
-          findDataDetail: true,
-          paramGroupList: rules,
-        });
+        const { dynamicData2DSL } = dynamicDataUtilsRef.current!;
+        const res = await service.batchMatchDynamicData({ terminalType: 'pc', findDataDetail: true, paramGroupList: rules });
         if (res && typeof dynamicData2DSL === 'function') {
           const dataHelper = dynamicData2DSL(
             res as DynamicDataType[],
@@ -90,10 +88,16 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     }
   };
 
-  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));
     }
+  };
+
+  useEffect(() => {
+    queryDynamicData();
   }, [engineRule]);
 
   const getDynamicFormValue = () => {
@@ -109,6 +113,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
 
   const resetFields = () => {
     if (formsRef.current) {
+      const { diffChange } = dynamicDataUtilsRef.current!;
       const beforeData = getDynamicFormValue();
       Object.keys(formsRef.current).forEach(formCode => {
         const form = formsRef.current[formCode] || {};
@@ -140,7 +145,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     }
     const updateData = getDynamicFormValue();
     const { event } = dynamicHelperRef.current || {};
-
+    const { diffChange } = dynamicDataUtilsRef.current!;
     diffChange(beforeData, updateData, diff => {
       // 执行事件处理变更联动
       event?.eval(diff.formCode, diff.changeFieldName);
@@ -150,7 +155,7 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
   useImperativeHandle(ref, () => ({
     formCode: dynamicCode,
     // 加载动态数据
-    setRules: (newRules: Array<Array<RuleParamsItem>>) => {
+    setRules: (newRules:Array<Array<RuleParamsItem>>) => {
       return getDynamicData(newRules);
     },
     // 获取动态数据表单转换协议后的值
@@ -245,16 +250,11 @@ const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>((p
     <div className={className} data-compid={props?.['data-compid']} style={dynamicStyle}>
       <Spin spinning={loading}>
         <DynamicDataProvider value={providerValue}>
-          {pageData &&
-            renderDynamicPage(
-              pageData,
-              { uid: $$componentItem.uid },
-              {
-                ref: dynamicPageRef,
-                staticAttrKeys,
-                engineliftCycle,
-              }
-            )}
+          {pageData && renderDynamicPage(pageData, { uid: $$componentItem.uid }, {
+            ref: dynamicPageRef,
+            staticAttrKeys,
+            engineliftCycle,
+          })}
         </DynamicDataProvider>
       </Spin>
     </div>

package/lib/pcpublic/src/components/pcfactory/src/DynamicDataContainer/useDynamicDataContainer.ts

@@ -7,9 +7,10 @@ export const useDynamicDataContainer = ({ dynamicHelper }: { dynamicHelper?: any
   const yieldMethod = useMemo(() => new YieldMethod(), []);
 
   useEffect(() => {
-    dynamicHelper?.updateSandboxContext(() => dynamicPageRef.current?.sandboxContext);
+    dynamicHelper?.updateSandboxContext(() => (dynamicPageRef.current?.sandboxContext));
   }, [dynamicHelper, dynamicPageRef.current]);
 
+
   const staticAttrKeys = useMemo(() => {
     if (dynamicHelper?.event) {
       return dynamicHelper?.event?.staticAttrKeys || [];

package/lib/pcpublic/src/components/pcfactory/src/DynamicTabs/EllipsisLabel.tsx

@@ -0,0 +1,53 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { Tooltip } from 'antd';
+import { bind, clear } from 'size-sensor';
+
+const EllipsisLabel:React.FC<{className?: string; fontSize?: number | string; }> = (props) => {
+  const { children,
+    className = 'ued-dynamic-tabs-ellipsis',
+    fontSize = '12px' } = props;
+  const [open, setOpen] = useState<boolean>(false);
+  const typographyRef = useRef<HTMLDivElement>(null);
+  const [isEllipsis, setIsEllipsis] = useState<boolean>(false);
+  const computeEllipsis = () => {
+    const textEle = typographyRef.current;
+    if (textEle) {
+      const currentEllipsis = textEle.offsetWidth < textEle.scrollWidth;
+      setIsEllipsis(currentEllipsis);
+    }
+  };
+  React.useEffect(() => {
+    computeEllipsis();
+  }, [children]);
+  useLayoutEffect(() => {
+    if (typographyRef && typographyRef.current) {
+      bind(typographyRef.current, () => {
+        computeEllipsis();
+      });
+    }
+    return () => {
+      if (typographyRef.current) {
+        clear(typographyRef.current);
+      }
+    };
+  }, []);
+  return (
+    <Tooltip
+      open={open}
+      onOpenChange={(v) => {
+        setOpen(isEllipsis ? v : false);
+      }}
+      autoAdjustOverflow
+      title={() => <span style={{ fontSize }}>{children}</span>}
+    >
+      <div
+        className={className}
+        ref={typographyRef}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+export default EllipsisLabel;

package/lib/pcpublic/src/components/pcfactory/src/DynamicTabs/TabPage.tsx

@@ -1,5 +1,5 @@
-import { EngineBaseProps } from '@lingxiteam/types';
 import React, { useEffect, useState } from 'react';
+import { EngineBaseProps } from '@lingxiteam/types';
 import { TabsItemProps } from './PropsType';
 
 interface TabPageProps {
@@ -12,11 +12,12 @@ interface TabPageProps {
   reloadPageKey?: string;
 }
 
-const TabPage: React.FC<TabPageProps> = props => {
+const TabPage: React.FC<TabPageProps> = (props) => {
   const { getEngineApis, $$componentItem, activeKey, lcdpParentRenderId, item, index, reloadPageKey } = props;
   const { PageView } = getEngineApis();
   const [load, setLoad] = useState(false);
 
+  
   useEffect(() => {
     if (activeKey === item.key) {
       setLoad(true);
@@ -34,26 +35,21 @@ const TabPage: React.FC<TabPageProps> = props => {
     }
   }, [reloadPageKey]);
 
-  return load ? (
-    <PageView
-      lcdpParentRenderId={lcdpParentRenderId}
-      platform="pc"
-      key={item.key}
-      pageSrc={item?.pagePath || ''}
-      appId={$$componentItem?.appId || ''}
-      $$componentItem={{
-        ...$$componentItem,
-        id: item.key,
-        uid: item.key,
-      }}
-      getEngineApis={getEngineApis}
-      visible
-      style={{ width: '100%', height: '100%', overflow: 'hidden auto' }}
-      compId=""
-      className=""
-      pageViewCompState={{ tabBarItem: item, tabBarIndex: index }}
-    />
-  ) : null;
+
+  return load ? <PageView
+    lcdpParentRenderId={lcdpParentRenderId}
+    platform="pc"
+    key={item.key}
+    pageSrc={item?.pagePath || ''}
+    appId={$$componentItem?.appId || ''}
+    $$componentItem={$$componentItem}
+    getEngineApis={getEngineApis}
+    visible
+    style={{ width: '100%', height: '100%', overflow: 'hidden auto' }}
+    compId=""
+    className=""
+    pageViewCompState={{ tabBarItem: item, tabBarIndex: index }}
+  /> : null;
 };
 
 export default TabPage;