@lingxiteam/ebe-utils 0.5.11 → 0.6.2

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

@@ -1,30 +1,43 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+/* eslint-disable react/jsx-closing-tag-location */
+import React, { useEffect, useMemo } from 'react';
 import { Progress } from 'antd';
 import classNames from 'classnames';
-import React, { useEffect, useMemo } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { useListenProps } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 import { useUpdateEffect } from '../utils/ahooks';
+import Icon from '../Icon';
+import CustomModule from '../utils/CustomModule';
 
 export interface MyProgressProps {
   visible?: boolean;
   value?: any;
   percent?: any;
   onValueRelease?: any;
-  title?: string;
-  style?: any;
-  type?: any;
-  placement?: any;
-  showInfo?: boolean;
-  showTitle?: boolean;
-  color?: any;
-  fontSize?: any;
-  lineHeight?: any;
-  fontWeight?: any;
-  valueColor?: any;
-  valueFontSize?: any;
-  valueLineHeight?: any;
-  valueFontWeight?: any;
-  onChange?: any;
+  title?: string,
+  style?: any,
+  type?: any,
+  placement?: any,
+  showInfo?: boolean,
+  showTitle?: boolean,
+  color?: any,
+  fontSize?: any,
+  lineHeight?: any,
+  fontWeight?: any,
+  valueColor?: any,
+  valueFontSize?: any,
+  valueLineHeight?: any,
+  valueFontWeight?: any,
+  onChange?: any,
+  backgroundType?: any;
+  valueStyle?: string;
+  prefixText?: string;
+  suffixText?: string;
+  unitText?: string;
+  successIcon?: any;
+  loadingIcon?: any;
+  customContent?: any;
+  strokeColor?: string
 }
 
 const prefixCls = 'ued-progress';
@@ -47,12 +60,27 @@ const MyProgress = LingxiForwardRef<any, MyProgressProps>((props, ref) => {
     valueFontSize,
     valueLineHeight,
     valueFontWeight,
+    backgroundType,
+    getEngineApis,
+    $$componentItem,
+    prefixText,
+    suffixText,
+    unitText,
+    successIcon,
+    loadingIcon,
+    customContent,
+    valueStyle,
     ...restProps
   } = props;
   const { width, height, ...restStyle } = style || {};
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
 
   const [compValue, setCompValue] = useListenProps(props.value);
 
+  const {
+    sandBoxLoadModule,
+  } = getEngineApis() || {};
+
   useEffect(() => {
     // 更新值到value中
     props?.onChange(props.value ?? props.percent);
@@ -64,41 +92,126 @@ const MyProgress = LingxiForwardRef<any, MyProgressProps>((props, ref) => {
   }, [props.percent]);
 
   // 标题
-  const renderTitle = useMemo(
-    () =>
-      showTitle && type === 'line' ? (
-        <div
-          className={`${prefixCls}-title`}
+  const renderTitle = useMemo(() => (
+    (showTitle && type === 'line') ? (
+      <div
+        className={`${prefixCls}-title`}
+        style={{
+          color, fontSize, lineHeight, fontWeight,
+        }}
+      >{title}
+      </div>
+    ) : null
+  ), [showTitle, title, type, color, fontSize, lineHeight, fontWeight]);
+
+  const renderIcon = (iconInfo: any) => {
+    if (!iconInfo) {
+      return <div />;
+    }
+    const { svgContent, ...rest } = iconInfo;
+    return (
+      <Icon
+        svgContent={svgContent}
+        icon={{ ...rest, color: props.strokeColor }}
+        getEngineApis={getEngineApis}
+        $$componentItem={$$componentItem}
+        className={`${prefixCls}-icon`}
+      />
+    );
+  };
+
+  const getRightText = () => {
+    let rightText = <div />;
+    switch (valueStyle) {
+      case 'prefix':
+        rightText = <div
+          className={`${prefixCls}-value`}
           style={{
-            color,
-            fontSize,
-            lineHeight,
-            fontWeight,
+            color: valueColor,
+            fontSize: type === 'line' ? (restStyle?.fontSize || valueFontSize) : valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
           }}
         >
-          {title}
-        </div>
-      ) : null,
-    [showTitle, title, type, color, fontSize, lineHeight, fontWeight]
-  );
-  // 数值
-  const renderValue = useMemo(
-    () =>
-      showInfo ? (
-        <div
+          {`${prefixText || ''}${compValue || ''}%`}
+        </div>;
+        break;
+      case 'suffix':
+        rightText = <div
           className={`${prefixCls}-value`}
           style={{
             color: valueColor,
-            fontSize: type === 'line' ? restStyle?.fontSize || valueFontSize : valueFontSize,
+            fontSize: type === 'line' ? (restStyle?.fontSize || valueFontSize) : valueFontSize,
             lineHeight: valueLineHeight,
             fontWeight: valueFontWeight,
           }}
         >
-          {`${compValue ?? ''}%`}
-        </div>
-      ) : null,
-    [showInfo, compValue, type, valueColor, valueLineHeight, valueFontWeight, valueFontSize, restStyle?.fontSize]
-  );
+          {`${compValue || ''}% ${suffixText || ''}`}
+        </div>;
+        break;
+      case 'numUnit':
+        rightText = <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: type === 'line' ? (restStyle?.fontSize || valueFontSize) : valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          {`${compValue || ''} ${unitText || ''}`}
+        </div>;
+        break;
+      case 'statusIcon':
+        if (Number(compValue) === 100) {
+          rightText = <div style={{ marginLeft: '2px' }}>{renderIcon(successIcon)}</div>;
+        } else {
+          rightText = <div style={{ marginLeft: '2px' }}>{renderIcon(loadingIcon)}</div>;
+        }
+        break;
+      case 'custom': // 配置态不展示自定义的函数内容
+        rightText = <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: type === 'line' ? (restStyle?.fontSize || valueFontSize) : valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          <CustomModule
+            code={customContent.targetVal}
+            compProps={{
+              percent: compValue,
+            }}
+            sandBoxLoadModule={sandBoxLoadModule}
+            errorInfo={{
+              id: props?.$$componentItem?.id,
+            }}
+          />
+        </div>;
+        break;
+      default:
+        rightText = <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: type === 'line' ? (restStyle?.fontSize || valueFontSize) : valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          {`${compValue || ''}%`}
+        </div>;
+        break;
+    }
+    return rightText;
+  };
+
+  // 数值
+  const renderValue = useMemo(() => (
+    (showInfo) ? getRightText() : null
+  ), [showInfo, compValue, type, valueColor, valueLineHeight, valueFontWeight, valueFontSize, restStyle?.fontSize]);
 
   // 进度条
   const renderProgress = () => (
@@ -114,27 +227,31 @@ const MyProgress = LingxiForwardRef<any, MyProgressProps>((props, ref) => {
 
   return visible ? (
     <div
-      className={classNames({
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-wrapper-vertical`]: placement === 'vertical' && type === 'line',
-      })}
-      style={{ ...restStyle, width, height }}
+      className={
+        classNames({
+          [`${prefixCls}-wrapper`]: true,
+          [`${prefixCls}-wrapper-vertical`]: placement === 'vertical' && type === 'line',
+        })
+      }
+      style={{ ...backgroundStyle, ...restStyle, width, height }}
     >
-      {placement === 'vertical' && type === 'line' ? (
-        <>
-          <div className={`${prefixCls}-context`}>
+      {
+        placement === 'vertical' && type === 'line' ? (
+          <>
+            <div className={`${prefixCls}-context`}>
+              {renderTitle}
+              {renderValue}
+            </div>
+            {renderProgress()}
+          </>
+        ) : (
+          <>
             {renderTitle}
-            {renderValue}
-          </div>
-          {renderProgress()}
-        </>
-      ) : (
-        <>
-          {renderTitle}
-          {renderProgress()}
-          {type === 'line' && renderValue}
-        </>
-      )}
+            {renderProgress()}
+            {type === 'line' && renderValue}
+          </>
+        )
+      }
     </div>
   ) : null;
 });

package/lib/pcpublic/src/components/pcfactory/src/QRCode/QRCode.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState, useMemo, CSSProperties } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import QrCodeWithLogo from 'qr-code-with-logo';
+import { setRgbTo16, isImgUrl } from '../utils/common';
+import { logoSizeTrans } from './const';
+// @ts-ignore
+import IconDefaultLogo from '../Img/assets/placeholder.png';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import classNames from 'classnames';
+
+export interface MyQRCodeProps {
+  visible?: boolean;
+  value?: any;
+  content?: string;
+  isLogo?: boolean;
+  srcType?: string;
+  fileCode?: string;
+  src?: string;
+  color?: string;
+  logoSize?: string;
+  onClick?: (url?: string, content?: string) => void;
+  getEngineApis?: any;
+  backgroundType?: any;
+  style?: CSSProperties,
+}
+
+const prefixCls = 'qRCode';
+
+const QRCode = LingxiForwardRef<any, MyQRCodeProps>((props, ref) => {
+  const { content, isLogo, fileCode, src, srcType, color: rbgaColor,
+    logoSize: logoSizeData, onClick, getEngineApis, visible = true, backgroundType, $$componentItem, style, ...restProps } = props;
+  const [url, setUrl] = useState<any>();
+  const [logoSrc, setLogoSrc] = useState<any>();
+  const [flag, setFlag] = useState(false);
+  const engineApis = getEngineApis?.() || {};
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+
+
+  // 自定义二维码logo
+  useEffect(() => {
+    if (!isLogo) {
+      setLogoSrc(null);
+      return;
+    }
+    if (srcType === 'fileCode' && fileCode) {
+      (async () => {
+        try {
+          setLogoSrc(await engineApis?.service?.getAppFileUrlByFileCode(fileCode));
+        } catch (e) {
+          setLogoSrc(null);
+          console.log(e);
+        }
+      })();
+    } else if (srcType === 'src' && src && src.length > 0) {
+      setLogoSrc(src);
+    } else {
+      setLogoSrc(null);
+    }
+  }, [src, isLogo, fileCode, srcType]);
+
+  const color = useMemo(() => {
+    if (!rbgaColor) return undefined;
+    return setRgbTo16(rbgaColor);
+  }, [rbgaColor]);
+
+  const logoSize = useMemo(() => logoSizeData && logoSizeTrans[logoSizeData], [logoSizeData]);
+
+  const getQrCodeUrl: any = (config: any) => {
+    const image = new Image();
+
+    QrCodeWithLogo.toImage({ ...config, image }).then(() => {
+      setUrl(image.src);
+      setFlag(true);
+    });
+  };
+
+  const setQrCodeUrl: any = async () => {
+    const config: any = {
+      content: typeof content === 'string' ? content : JSON.stringify(content),
+      nodeQrCodeOptions: {
+        margin: 2,
+        color: {
+          dark: color,
+        },
+      },
+    };
+
+    if (logoSrc) {
+      try {
+        await isImgUrl(logoSrc);
+
+        getQrCodeUrl({
+          ...config,
+          logo: {
+            logoSize,
+            src: logoSrc,
+            borderRadius: 4,
+          },
+        });
+      } catch (e) {
+        // 如果自定义logo图片无法加载，使用默认logo
+        getQrCodeUrl({
+          ...config,
+          logo: {
+            borderRadius: 4,
+            logoSize: logoSize + 0.05,
+            borderSize: 0,
+            src: IconDefaultLogo,
+          },
+        });
+      }
+    } else {
+      getQrCodeUrl(config);
+    }
+  };
+
+  useEffect(() => {
+    if (content) {
+      setQrCodeUrl();
+    } else {
+      setFlag(false);
+    }
+  }, [content, color, logoSrc, logoSize]);
+
+  return visible ? (
+    <div
+      className={classNames(prefixCls, 'ued-qrCode')}
+      style={{ ...backgroundStyle, ...style }}
+      onClick={() => onClick && onClick(url, content)}
+    >
+      {flag && <img {...restProps} style={{ width: '100%', height: '100%' }} src={url} alt="" />}
+    </div>
+  ) : null;
+});
+
+
+export default QRCode;

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

@@ -1,137 +1,12 @@
+import React, { useImperativeHandle } from 'react';
+import QRCodeLoad from './loader';
+import type { ReactPlayerProps } from 'react-player';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import QrCodeWithLogo from 'qr-code-with-logo';
-import React, { useEffect, useMemo, useState } from 'react';
-import { isImgUrl, setRgbTo16 } from '../utils/common';
-import { logoSizeTrans } from './const';
-// @ts-ignore
-import IconDefaultLogo from '../Img/assets/placeholder.png';
 
-export interface MyQRCodeProps {
-  visible?: boolean;
-  value?: any;
-  content?: string;
-  isLogo?: boolean;
-  srcType?: string;
-  fileCode?: string;
-  src?: string;
-  color?: string;
-  logoSize?: string;
-  onClick?: (url?: string, content?: string) => void;
-  getEngineApis?: any;
-}
 
-const prefixCls = 'qRCode';
-
-const QRCode = LingxiForwardRef<any, MyQRCodeProps>((props, ref) => {
-  const {
-    content,
-    isLogo,
-    fileCode,
-    src,
-    srcType,
-    color: rbgaColor,
-    logoSize: logoSizeData,
-    onClick,
-    getEngineApis,
-    visible = true,
-    ...restProps
-  } = props;
-  const [url, setUrl] = useState<any>();
-  const [logoSrc, setLogoSrc] = useState<any>();
-  const [flag, setFlag] = useState(false);
-  const engineApis = getEngineApis?.() || {};
-
-  // 自定义二维码logo
-  useEffect(() => {
-    if (!isLogo) {
-      setLogoSrc(null);
-      return;
-    }
-    if (srcType === 'fileCode' && fileCode) {
-      (async () => {
-        try {
-          setLogoSrc(await engineApis?.service?.getAppFileUrlByFileCode(fileCode));
-        } catch (e) {
-          setLogoSrc(null);
-          console.log(e);
-        }
-      })();
-    } else if (srcType === 'src' && src && src.length > 0) {
-      setLogoSrc(src);
-    } else {
-      setLogoSrc(null);
-    }
-  }, [src, isLogo, fileCode, srcType]);
-
-  const color = useMemo(() => {
-    if (!rbgaColor) return undefined;
-    return setRgbTo16(rbgaColor);
-  }, [rbgaColor]);
-
-  const logoSize = useMemo(() => logoSizeData && logoSizeTrans[logoSizeData], [logoSizeData]);
-
-  const getQrCodeUrl: any = (config: any) => {
-    const image = new Image();
-
-    QrCodeWithLogo.toImage({ ...config, image }).then(() => {
-      setUrl(image.src);
-      setFlag(true);
-    });
-  };
-
-  const setQrCodeUrl: any = async () => {
-    const config: any = {
-      content: typeof content === 'string' ? content : JSON.stringify(content),
-      nodeQrCodeOptions: {
-        margin: 2,
-        color: {
-          dark: color,
-        },
-      },
-    };
-
-    if (logoSrc) {
-      try {
-        await isImgUrl(logoSrc);
-
-        getQrCodeUrl({
-          ...config,
-          logo: {
-            logoSize,
-            src: logoSrc,
-            borderRadius: 4,
-          },
-        });
-      } catch (e) {
-        // 如果自定义logo图片无法加载，使用默认logo
-        getQrCodeUrl({
-          ...config,
-          logo: {
-            borderRadius: 4,
-            logoSize: logoSize + 0.05,
-            borderSize: 0,
-            src: IconDefaultLogo,
-          },
-        });
-      }
-    } else {
-      getQrCodeUrl(config);
-    }
-  };
-
-  useEffect(() => {
-    if (content) {
-      setQrCodeUrl();
-    } else {
-      setFlag(false);
-    }
-  }, [content, color, logoSrc, logoSize]);
-
-  return visible ? (
-    <div className={prefixCls} style={{ display: 'contents' }} onClick={() => onClick && onClick(url, content)}>
-      {flag && <img {...restProps} src={url} alt="" />}
-    </div>
-  ) : null;
+const QRCode = LingxiForwardRef<unknown, ReactPlayerProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({}));
+  return <QRCodeLoad {...props} />;
 });
 
 export default QRCode;

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

@@ -0,0 +1,11 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+
+const ViewPlayerLoader = Loadable<any, React.ComponentType<any>>({
+  // eslint-disable-next-line func-call-spacing
+  loader: async () => (await import /* webpackChunkName: 'pcFactory-QRCode' */ ('./QRCode')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ViewPlayerLoader;