@lingxiteam/ebe-utils 0.5.11 → 0.6.2

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

@@ -1,29 +1,39 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+/* eslint-disable react/jsx-closing-tag-location */
+import React, { useMemo } from 'react';
 import { ProgressBar } from 'antd-mobile-5';
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import Icon from '../Icon';
 import './index.less';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import CustomModule from '../utils/CustomModule';
 
 export interface MyProgressBarProps {
-  visible: boolean;
-  title?: string;
-  style?: any;
-  placement?: any;
-  text?: boolean;
-  percent?: any;
-  showTitle?: boolean;
-  color?: any;
-  fontSize?: any;
-  lineHeight?: any;
-  fontWeight?: any;
-  valueColor?: any;
-  valueFontSize?: any;
-  valueLineHeight?: any;
-  valueFontWeight?: any;
-  fillColor?: any;
-  trackColor?: any;
-  trackWidth?: any;
+  visible: boolean,
+  title?: string,
+  style?: any,
+  placement?: any,
+  text?: boolean,
+  percent?: any,
+  showTitle?: boolean,
+  color?: any,
+  fontSize?: any,
+  lineHeight?: any,
+  fontWeight?: any,
+  valueColor?: any,
+  valueFontSize?: any,
+  valueLineHeight?: any,
+  valueFontWeight?: any,
+  fillColor?: any,
+  trackColor?: any,
+  trackWidth?: any,
   extendProps: any;
+  valueStyle?: string;
+  prefixText?: string;
+  suffixText?: string;
+  unitText?: string;
+  successIcon?: any;
+  loadingIcon?: any;
+  customContent?: any
 }
 
 const prefixCls = 'lcdp-adm-progressbar';
@@ -33,8 +43,7 @@ const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>((props, ref) =>
     visible,
     fillColor,
     trackColor,
-    title,
-    style,
+    title, style,
     placement,
     showTitle,
     color,
@@ -48,12 +57,24 @@ const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>((props, ref) =>
     valueFontWeight,
     percent,
     trackWidth,
+    valueStyle,
+    prefixText,
+    suffixText,
+    unitText,
+    successIcon,
+    loadingIcon,
     extendProps,
     $$componentItem,
     getEngineApis,
+    customContent,
     ...restProps
   } = props;
   const { width, height, ...restStyle } = style || {};
+
+  const {
+    sandBoxLoadModule,
+  } = getEngineApis() || {};
+
   // const [curPercent, setCurPercent] = useState(percent);
   // useImperativeHandle(ref, () => ({
   //   get value() {
@@ -64,28 +85,117 @@ const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>((props, ref) =>
   //   },
   // }));
   // 标题
-  const renderTitle = useMemo(
-    () =>
-      showTitle ? (
+  const renderTitle = useMemo(() => (
+    showTitle ? (
+      <div
+        className={`${prefixCls}-title`}
+        style={{
+          color, fontSize, lineHeight, fontWeight,
+        }}
+      >{title}
+      </div>
+    ) : null
+  ), [showTitle, title, color, fontSize, lineHeight, fontWeight]);
+  const renderIcon = (iconInfo: any, iconClass = `${prefixCls}-icon`, color = '') => {
+    if (!iconInfo) {
+      return null;
+    }
+    let iconView = null;
+    if (iconInfo?.iconFileInfo && JSON.stringify(iconInfo?.iconFileInfo) !== '{}') {
+      iconView = (
         <div
-          className={`${prefixCls}-title`}
+          className={iconClass || `${prefixCls}-icon`}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: iconInfo?.iconFileInfo?.svgContent }}
+        />
+      );
+    } else {
+      iconView = (
+        <div className={iconClass || `${prefixCls}-icon`}>
+          {/** @ts-ignore */}
+          <Icon
+            icon={iconInfo}
+            color={color}
+            getEngineApis={getEngineApis}
+          />
+        </div>
+      );
+    }
+    return iconView;
+  };
+  const getRightText = () => {
+    let rightText = <div />;
+    switch (valueStyle) {
+      case 'prefix':
+        rightText = <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: restStyle?.fontSize || valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          {`${prefixText || ''}${percent || ''}%`}
+        </div>;
+        break;
+      case 'suffix':
+        rightText = <div
+          className={`${prefixCls}-value`}
           style={{
-            color,
-            fontSize,
-            lineHeight,
-            fontWeight,
+            color: valueColor,
+            fontSize: restStyle?.fontSize || valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
           }}
         >
-          {title}
-        </div>
-      ) : null,
-    [showTitle, title, color, fontSize, lineHeight, fontWeight]
-  );
-  // 数值
-  const renderValue = useMemo(
-    () =>
-      text ? (
-        <div
+          {`${percent || ''}% ${suffixText || ''}`}
+        </div>;
+        break;
+      case 'numUnit':
+        rightText = <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: restStyle?.fontSize || valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          {`${percent || ''} ${unitText || ''}`}
+        </div>;
+        break;
+      case 'statusIcon':
+        if (Number(percent) === 100) {
+          rightText = <div style={{ marginLeft: '2px' }}>{renderIcon(successIcon, '', fillColor)}</div>;
+        } else {
+          rightText = <div style={{ marginLeft: '2px' }}>{renderIcon(loadingIcon, '', fillColor)}</div>;
+        }
+        break;
+      case 'custom': // 配置态不展示自定义的函数内容
+        rightText = <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: restStyle?.fontSize || valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          <CustomModule
+            code={customContent?.targetVal}
+            compProps={{
+              percent,
+            }}
+            sandBoxLoadModule={sandBoxLoadModule}
+            errorInfo={{
+              id: $$componentItem?.id,
+            }}
+          />
+        </div>;
+        break;
+      default:
+        rightText = <div
           className={`${prefixCls}-value`}
           style={{
             color: valueColor,
@@ -95,10 +205,29 @@ const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>((props, ref) =>
           }}
         >
           {`${percent || ''}%`}
-        </div>
-      ) : null,
-    [text, percent, valueColor, valueLineHeight, valueFontWeight, valueFontSize, restStyle?.fontSize]
-  );
+        </div>;
+    }
+    return rightText;
+  };
+  // 数值
+  const renderValue = useMemo(() => (
+    text ? getRightText()
+      : null
+  ), [
+    text,
+    percent,
+    valueColor,
+    valueLineHeight,
+    valueFontWeight,
+    valueFontSize,
+    restStyle?.fontSize,
+    valueStyle,
+    successIcon,
+    loadingIcon,
+    unitText,
+    prefixText,
+    suffixText,
+  ]);
   // 进度条
   const renderProgress = () => (
     <ProgressBar
@@ -118,31 +247,36 @@ const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>((props, ref) =>
   }
   return (
     <div
-      className={classNames({
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-wrapper-vertical`]: placement === 'vertical',
-      })}
+      className={
+        classNames({
+          [`${prefixCls}-wrapper`]: true,
+          [`${prefixCls}-wrapper-vertical`]: placement === 'vertical',
+        })
+      }
       style={{ ...restStyle, width, height }}
     >
-      {placement === 'vertical' ? (
-        <>
-          <div className={`${prefixCls}-context`}>
+      {
+        placement === 'vertical' ? (
+          <>
+            <div className={`${prefixCls}-context`}>
+              {renderTitle}
+              {renderValue}
+            </div>
+            {renderProgress()}
+          </>
+        ) : (
+          <>
             {renderTitle}
+            {renderProgress()}
             {renderValue}
-          </div>
-          {renderProgress()}
-        </>
-      ) : (
-        <>
-          {renderTitle}
-          {renderProgress()}
-          {renderValue}
-        </>
-      )}
+          </>
+        )
+      }
     </div>
   );
 });
 
+
 MyProgressBar.defaultProps = {
   extendProps: {},
 };

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

@@ -0,0 +1,102 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React, { useState, useRef, useMemo, useEffect } from 'react';
+import QRCode from '@lingxiteam/antd-mobile-plus/es/QRCode';
+import { QRCodeType } from '@lingxiteam/antd-mobile-plus/es/QRCode/PropsType';
+import closeIcon from '../DformFile/assets/closeIcon.png';
+import { ImageViewer } from 'antd-mobile-5';
+import { setRgbTo16 } from '../utils';
+import { logoSizeTrans } from './const';
+import './index.less';
+import { LingxiForwardRef } from '@lingxiteam/types';
+
+export interface QRCodeProps extends QRCodeType {
+  visible: boolean;
+  customClass: string;
+  content: string;
+  isLogo?: boolean;
+  fileCode?: string;
+  src?: string;
+  srcType?: string;
+}
+const prefixCls = 'lcdp-qrcode';
+const MyQRCode = LingxiForwardRef<any, QRCodeProps>((props, ref) => {
+  // eslint-disable-next-line max-len
+  const { visible = true, content, onClick, onLongTouch, className, isLogo, fileCode, src, srcType, color: rbgaColor, logoSize: logoSizeData, getEngineApis } = props;
+  const codeRef = useRef<any>();
+  const { getAppFileUrlByFileCode } = getEngineApis();
+  const [show, setShow] = useState(false);
+  const [logoSrc, setLogoSrc] = useState<any>();
+
+  // 自定义二维码logo
+  useEffect(() => {
+    if (!isLogo) {
+      setLogoSrc(null);
+      return;
+    }
+    if (srcType === 'fileCode' && fileCode) {
+      (async () => {
+        setLogoSrc(getAppFileUrlByFileCode(fileCode));
+      })();
+    } else if (srcType === 'src' && src && src.length > 0) {
+      setLogoSrc(src);
+    }
+  }, [src, isLogo, fileCode, srcType]);
+
+  const color = useMemo(() => {
+    if (!rbgaColor) return;
+    // eslint-disable-next-line consistent-return
+    return setRgbTo16(rbgaColor);
+  }, [rbgaColor]);
+  // @ts-ignore
+  const logoSize = useMemo(() => logoSizeData && logoSizeTrans[logoSizeData], [logoSizeData]);
+
+  // 二维码信息只传string类型
+  const qrCodeContent = useMemo(() => {
+    if (content) {
+      return typeof content === 'string' ? content : JSON.stringify(content);
+    }
+    return content;
+  }, [content]);
+
+  return visible ? (
+    <>
+      <QRCode
+        // @ts-ignore
+        ref={codeRef}
+        {...props}
+        className={`${prefixCls} ${className}`}
+        style={{ ...props.style, display: 'block' }}
+        content={qrCodeContent}
+        color={color}
+        logoSize={logoSize}
+        logoSrc={logoSrc}
+        onLongTouch={onLongTouch}
+        onClick={(url?: string, content?: string) => {
+          if (onClick) {
+            onClick(url, content);
+          } else {
+            setShow(true);
+          }
+        }}
+      />
+      {show && (
+        <div className={`${prefixCls}-img-close`} onClick={() => setShow(false)}>
+          <img src={closeIcon} />
+        </div>
+      )}
+      {show && codeRef?.current?.url ? (
+        <ImageViewer
+          image={codeRef.current.url}
+          visible={show}
+          onClose={() => {
+            setShow(false);
+          }}
+        />
+      ) : null}
+    </>
+  ) : (
+    <></>
+  );
+});
+
+export default MyQRCode;

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

@@ -1,114 +1,13 @@
-/* eslint-disable jsx-a11y/alt-text */
-import { QRCode, QRCodeType } from '@lingxiteam/antd-mobile-plus';
+import React, { useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { ImageViewer } from 'antd-mobile-5';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import closeIcon from '../DformFile/assets/closeIcon.png';
-import { setRgbTo16 } from '../utils';
-import { logoSizeTrans } from './const';
-import './index.less';
-
-export interface QRCodeProps extends QRCodeType {
-  visible: boolean;
-  customClass: string;
-  content: string;
-  isLogo?: boolean;
-  fileCode?: string;
-  src?: string;
-  srcType?: string;
-}
-const prefixCls = 'lcdp-qrcode';
-const MyQRCode = LingxiForwardRef<any, QRCodeProps>((props, ref) => {
-  // eslint-disable-next-line max-len
-  const {
-    visible = true,
-    content,
-    onClick,
-    onLongTouch,
-    className,
-    isLogo,
-    fileCode,
-    src,
-    srcType,
-    color: rbgaColor,
-    logoSize: logoSizeData,
-    getEngineApis,
-  } = props;
-  const codeRef = useRef<any>();
-  const { getAppFileUrlByFileCode } = getEngineApis();
-  const [show, setShow] = useState(false);
-  const [logoSrc, setLogoSrc] = useState<any>();
-
-  // 自定义二维码logo
-  useEffect(() => {
-    if (!isLogo) {
-      setLogoSrc(null);
-      return;
-    }
-    if (srcType === 'fileCode' && fileCode) {
-      (async () => {
-        setLogoSrc(getAppFileUrlByFileCode(fileCode));
-      })();
-    } else if (srcType === 'src' && src && src.length > 0) {
-      setLogoSrc(src);
-    }
-  }, [src, isLogo, fileCode, srcType]);
-
-  const color = useMemo(() => {
-    if (!rbgaColor) return;
-    // eslint-disable-next-line consistent-return
-    return setRgbTo16(rbgaColor);
-  }, [rbgaColor]);
-  // @ts-ignore
-  const logoSize = useMemo(() => logoSizeData && logoSizeTrans[logoSizeData], [logoSizeData]);
-
-  // 二维码信息只传string类型
-  const qrCodeContent = useMemo(() => {
-    if (content) {
-      return typeof content === 'string' ? content : JSON.stringify(content);
-    }
-    return content;
-  }, [content]);
-
-  return visible ? (
-    <>
-      <QRCode
-        // @ts-ignore
-        ref={codeRef}
-        {...props}
-        className={`${prefixCls} ${className}`}
-        style={{ ...props.style, display: 'block' }}
-        content={qrCodeContent}
-        color={color}
-        logoSize={logoSize}
-        logoSrc={logoSrc}
-        onLongTouch={onLongTouch}
-        onClick={(url?: string, content?: string) => {
-          if (onClick) {
-            onClick(url, content);
-          } else {
-            setShow(true);
-          }
-        }}
-      />
-      {show && (
-        <div className={`${prefixCls}-img-close`} onClick={() => setShow(false)}>
-          <img src={closeIcon} />
-        </div>
-      )}
-      {show && codeRef?.current?.url ? (
-        <ImageViewer
-          image={codeRef.current.url}
-          visible={show}
-          onClose={() => {
-            setShow(false);
-          }}
-        />
-      ) : null}
-    </>
-  ) : (
-    <></>
-  );
+import QRCodeLoader from './loader';
+
+const QRCode = LingxiForwardRef<unknown, any>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法，后续有需要可以补充
+  }));
+  
+  return <QRCodeLoader {...props} />;
 });
 
-export default MyQRCode;
+export default QRCode;

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

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

package/lib/h5public/src/components/factory/src/RemoteComponent/assets/iconFailComp.tsx

@@ -3,7 +3,14 @@ import React from 'react';
 const IconFailComp = (props: any) => {
   const { style, width = '181px', height = '170px' } = props;
   return (
-    <svg width={width} height={height} style={style} viewBox="0 0 181 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width={width}
+      height={height}
+      style={style}
+      viewBox="0 0 181 170"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g id="Frame">
         <g id="&#233;&#161;&#181;&#233;&#157;&#162;-1">
           <g id="1920X1000">

package/lib/h5public/src/components/factory/src/RemoteComponent/components/FishRender.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { ReactLoadFish } from '@lingxiteam/load-framework';
 import { LingXiFC } from '@lingxiteam/types';
-import { ErrorBlock } from 'antd-mobile-5';
 import { IconFailComp } from '../assets';
+import { ErrorBlock, DotLoading } from 'antd-mobile-5';
+
 
 export interface FishRenderProps {
   url: string;
   customProps: any;
-  engineType: 'editor' | 'engine';
+  engineType: 'editor' | 'engine'
 }
 
 const FishRender: LingXiFC<FishRenderProps> = props => {
@@ -19,15 +20,8 @@ const FishRender: LingXiFC<FishRenderProps> = props => {
       lxApi={{ getEngineApis, engineType }}
       moduleProps={customProps}
       onError={console.log}
-      fallback={item => (
-        <ErrorBlock
-          title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'}
-          description={item.error.message}
-          status="empty"
-          image={<IconFailComp />}
-        />
-      )}
-      loading={() => <div>{engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}</div>}
+      fallback={(item) => <ErrorBlock title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'} description={item.error.message} status="empty" image={<IconFailComp />} />}
+      loading={() => <DotLoading color="primary" />}
     />
   );
 };

package/lib/h5public/src/components/factory/src/RemoteComponent/components/ReactRender.tsx

@@ -1,12 +1,12 @@
-import { LingXiFC } from '@lingxiteam/types';
-import { createRequires } from '@paciolan/remote-component/dist/createRequires';
-import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
-import { ErrorBlock } from 'antd-mobile-5';
 import React, { useContext } from 'react';
+import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
+import { createRequires } from '@paciolan/remote-component/dist/createRequires';
+import RemoteCompConfig from '../remote-component.config';
+import { IconFailComp } from '../assets';
+import { LingXiFC } from '@lingxiteam/types';
+import { ErrorBlock, DotLoading } from 'antd-mobile-5';
 import { useDynamicData } from '../../utils/dynamicUtils/DynamicContext';
 import { DFormContext } from '../../utils/form';
-import { IconFailComp } from '../assets';
-import RemoteCompConfig from '../remote-component.config';
 
 export const getUseRemoteComponent = (config: any) => {
   const requires = createRequires(() => config.resolve);
@@ -19,14 +19,22 @@ export interface MyRemoteComponentProps {
   useRemoteComponent?: any; // 自定义组件调用依赖的模块，可由调用方传入
   forwardRef?: any;
   // 如果在动态容器里面，传入表单的name
-  name?: string;
+  name?: string,
   // 如果在动态容器里面，传入表单fieldName
-  fieldName?: string;
+  fieldName?: string,
 }
 
 // const prefixCls = 'remoteComponent';
-const RemoteComponent: LingXiFC<MyRemoteComponentProps> = props => {
-  const { url, customProps, getEngineApis, forwardRef, name, fieldName, ...restProps } = props;
+const RemoteComponent: LingXiFC<MyRemoteComponentProps> = (props) => {
+  const {
+    url,
+    customProps,
+    getEngineApis,
+    forwardRef,
+    name,
+    fieldName,
+    ...restProps
+  } = props;
 
   const engineApis = getEngineApis?.() || {};
 
@@ -38,16 +46,11 @@ const RemoteComponent: LingXiFC<MyRemoteComponentProps> = props => {
   const [loading, err, Component] = useRemoteComponentInst(url);
 
   if (loading) {
-    return <div>{engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}</div>;
+    return <DotLoading color="primary" />;
   }
   if (err != null) {
     return (
-      <ErrorBlock
-        title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'}
-        description=""
-        status="empty"
-        image={<IconFailComp />}
-      />
+      <ErrorBlock title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'} description="" status="empty" image={<IconFailComp />} />
     );
   }
   return <Component {...restProps} {...customProps} $lxApi={{ form: dynamicDataContext.form, formCode, fieldName, name }} ref={forwardRef} />;

package/lib/h5public/src/components/factory/src/RemoteComponent/components/VueRender.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ReactLoadVue } from '@lingxiteam/load-framework';
 import { LingXiFC } from '@lingxiteam/types';
-import { ErrorBlock } from 'antd-mobile-5';
+import { ErrorBlock, DotLoading } from 'antd-mobile-5';
 import { IconFailComp } from '../assets';
 
 export interface VueRenderProps {
@@ -21,7 +21,7 @@ const VueRender: LingXiFC<VueRenderProps> = props => {
       lxApi={{ getEngineApis, engineType }}
       moduleProps={customProps}
       onError={console.log}
-      loading={() => <div>{engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}</div>}
+      loading={() => <DotLoading color="primary" />}
       fallback={item => (
         <ErrorBlock
           title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'}