@lingxiteam/ebe-utils 0.2.3 → 0.2.5

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

@@ -1,10 +1,5 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, {
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import IconPlaceholder from './assets/placeholder.png';
 
 export interface PictureVerifyCodeProps {
@@ -14,10 +9,7 @@ export interface PictureVerifyCodeProps {
   visible?: boolean;
 }
 // @ts-ignore
-const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = LingxiForwardRef<
-  any,
-  PictureVerifyCodeProps
->((props, ref) => {
+const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = LingxiForwardRef<any, PictureVerifyCodeProps>((props, ref) => {
   const { digit, onClick, style, visible, getEngineApis, ...restProps } = props;
   const { getValidateCodePicture } = getEngineApis();
   const [imgSrc, setImgSrc] = useState(IconPlaceholder);
@@ -55,7 +47,7 @@ const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = LingxiForwardRef<
       {...restProps}
       style={targetStyle}
       src={imgSrc}
-      onClick={(e) => {
+      onClick={e => {
         if (onClick) {
           onClick(e);
         } else {

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

@@ -7,37 +7,25 @@ export interface MyProcessTrackProps extends ProTrackProps {
   visible: boolean;
   style: React.CSSProperties;
 }
-const MyProcessTrack = LingxiForwardRef<any, MyProcessTrackProps>(
-  (props, ref) => {
-    const {
-      visible = true,
-      style,
-      className,
-      empty,
-      getEngineApis,
-      ...restProps
-    } = props;
+const MyProcessTrack = LingxiForwardRef<any, MyProcessTrackProps>((props, ref) => {
+  const { visible = true, style, className, empty, getEngineApis, ...restProps } = props;
 
-    const { getLocale } = getEngineApis();
+  const { getLocale } = getEngineApis();
 
-    const displayStyle = useHiddenStyle(visible);
+  const displayStyle = useHiddenStyle(visible);
 
-    return (
-      <div
-        style={{
-          ...style,
-          ...displayStyle,
-        }}
-        className={className}
-      >
-        <ProcessTrack
-          {...restProps}
-          empty={empty ?? getLocale('ProcessTrack.empty')}
-        />
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      style={{
+        ...style,
+        ...displayStyle,
+      }}
+      className={className}
+    >
+      <ProcessTrack {...restProps} empty={empty ?? getLocale('ProcessTrack.empty')} />
+    </div>
+  );
+});
 
 MyProcessTrack.displayName = 'ProcessTrack';
 

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

@@ -28,130 +28,120 @@ export interface MyProgressBarProps {
 
 const prefixCls = 'lcdp-adm-progressbar';
 
-const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>(
-  (props, ref) => {
-    const {
-      visible,
-      fillColor,
-      trackColor,
-      title,
-      style,
-      placement,
-      showTitle,
-      color,
-      fontSize,
-      lineHeight,
-      fontWeight,
-      text,
-      valueColor,
-      valueFontSize,
-      valueLineHeight,
-      valueFontWeight,
-      percent,
-      trackWidth,
-      extendProps,
-      $$componentItem,
-      getEngineApis,
-      ...restProps
-    } = props;
-    const { width, height, ...restStyle } = style || {};
-    // const [curPercent, setCurPercent] = useState(percent);
-    // useImperativeHandle(ref, () => ({
-    //   get value() {
-    //     return curPercent;
-    //   },
-    //   setVal: (v: any) => {
-    //     setCurPercent(v);
-    //   },
-    // }));
-    // 标题
-    const renderTitle = useMemo(
-      () =>
-        showTitle ? (
-          <div
-            className={`${prefixCls}-title`}
-            style={{
-              color,
-              fontSize,
-              lineHeight,
-              fontWeight,
-            }}
-          >
-            {title}
-          </div>
-        ) : null,
-      [showTitle, title, color, fontSize, lineHeight, fontWeight],
-    );
-    // 数值
-    const renderValue = useMemo(
-      () =>
-        text ? (
-          <div
-            className={`${prefixCls}-value`}
-            style={{
-              color: valueColor,
-              fontSize: restStyle?.fontSize || valueFontSize,
-              lineHeight: valueLineHeight,
-              fontWeight: valueFontWeight,
-            }}
-          >
-            {`${percent || ''}%`}
-          </div>
-        ) : null,
-      [
-        text,
-        percent,
-        valueColor,
-        valueLineHeight,
-        valueFontWeight,
-        valueFontSize,
-        restStyle?.fontSize,
-      ],
-    );
-    // 进度条
-    const renderProgress = () => (
-      <ProgressBar
-        {...restProps}
-        percent={+percent}
-        style={{
-          '--fill-color': fillColor,
-          '--track-color': trackColor,
-          '--track-width': `${trackWidth || ''}px`,
-          ...restStyle,
-        }}
-        {...extendProps}
-      />
-    );
-    if (!visible) {
-      return <></>;
-    }
-    return (
-      <div
-        className={classNames({
-          [`${prefixCls}-wrapper`]: true,
-          [`${prefixCls}-wrapper-vertical`]: placement === 'vertical',
-        })}
-        style={{ ...restStyle, width, height }}
-      >
-        {placement === 'vertical' ? (
-          <>
-            <div className={`${prefixCls}-context`}>
-              {renderTitle}
-              {renderValue}
-            </div>
-            {renderProgress()}
-          </>
-        ) : (
-          <>
+const MyProgressBar = LingxiForwardRef<any, MyProgressBarProps>((props, ref) => {
+  const {
+    visible,
+    fillColor,
+    trackColor,
+    title,
+    style,
+    placement,
+    showTitle,
+    color,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    text,
+    valueColor,
+    valueFontSize,
+    valueLineHeight,
+    valueFontWeight,
+    percent,
+    trackWidth,
+    extendProps,
+    $$componentItem,
+    getEngineApis,
+    ...restProps
+  } = props;
+  const { width, height, ...restStyle } = style || {};
+  // const [curPercent, setCurPercent] = useState(percent);
+  // useImperativeHandle(ref, () => ({
+  //   get value() {
+  //     return curPercent;
+  //   },
+  //   setVal: (v: any) => {
+  //     setCurPercent(v);
+  //   },
+  // }));
+  // 标题
+  const renderTitle = useMemo(
+    () =>
+      showTitle ? (
+        <div
+          className={`${prefixCls}-title`}
+          style={{
+            color,
+            fontSize,
+            lineHeight,
+            fontWeight,
+          }}
+        >
+          {title}
+        </div>
+      ) : null,
+    [showTitle, title, color, fontSize, lineHeight, fontWeight]
+  );
+  // 数值
+  const renderValue = useMemo(
+    () =>
+      text ? (
+        <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize: restStyle?.fontSize || valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          {`${percent || ''}%`}
+        </div>
+      ) : null,
+    [text, percent, valueColor, valueLineHeight, valueFontWeight, valueFontSize, restStyle?.fontSize]
+  );
+  // 进度条
+  const renderProgress = () => (
+    <ProgressBar
+      {...restProps}
+      percent={+percent}
+      style={{
+        '--fill-color': fillColor,
+        '--track-color': trackColor,
+        '--track-width': `${trackWidth || ''}px`,
+        ...restStyle,
+      }}
+      {...extendProps}
+    />
+  );
+  if (!visible) {
+    return <></>;
+  }
+  return (
+    <div
+      className={classNames({
+        [`${prefixCls}-wrapper`]: true,
+        [`${prefixCls}-wrapper-vertical`]: placement === 'vertical',
+      })}
+      style={{ ...restStyle, width, height }}
+    >
+      {placement === 'vertical' ? (
+        <>
+          <div className={`${prefixCls}-context`}>
             {renderTitle}
-            {renderProgress()}
             {renderValue}
-          </>
-        )}
-      </div>
-    );
-  },
-);
+          </div>
+          {renderProgress()}
+        </>
+      ) : (
+        <>
+          {renderTitle}
+          {renderProgress()}
+          {renderValue}
+        </>
+      )}
+    </div>
+  );
+});
 
 MyProgressBar.defaultProps = {
   extendProps: {},

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

@@ -60,10 +60,7 @@ const MyQRCode = LingxiForwardRef<any, QRCodeProps>((props, ref) => {
     return setRgbTo16(rbgaColor);
   }, [rbgaColor]);
   // @ts-ignore
-  const logoSize = useMemo(
-    () => logoSizeData && logoSizeTrans[logoSizeData],
-    [logoSizeData],
-  );
+  const logoSize = useMemo(() => logoSizeData && logoSizeTrans[logoSizeData], [logoSizeData]);
 
   // 二维码信息只传string类型
   const qrCodeContent = useMemo(() => {
@@ -95,10 +92,7 @@ const MyQRCode = LingxiForwardRef<any, QRCodeProps>((props, ref) => {
         }}
       />
       {show && (
-        <div
-          className={`${prefixCls}-img-close`}
-          onClick={() => setShow(false)}
-        >
+        <div className={`${prefixCls}-img-close`} onClick={() => setShow(false)}>
           <img src={closeIcon} />
         </div>
       )}

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

@@ -1,14 +1,7 @@
 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

@@ -9,7 +9,7 @@ export interface FishRenderProps {
   engineType: 'editor' | 'engine';
 }
 
-const FishRender: LingXiFC<FishRenderProps> = (props) => {
+const FishRender: LingXiFC<FishRenderProps> = props => {
   const { customProps, getEngineApis, engineType, ...restProps } = props;
   const engineApis = getEngineApis?.();
   return (
@@ -18,22 +18,15 @@ const FishRender: LingXiFC<FishRenderProps> = (props) => {
       lxApi={{ getEngineApis, engineType }}
       moduleProps={customProps}
       onError={console.log}
-      fallback={(item) => (
+      fallback={item => (
         <ErrorBlock
-          title={
-            engineApis?.getLocale?.('RemoteComponent.fail') ??
-            '自定义组件加载失败'
-          }
+          title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'}
           description={item.error.message}
           status="empty"
           image={<IconFailComp />}
         />
       )}
-      loading={() => (
-        <div>
-          {engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}
-        </div>
-      )}
+      loading={() => <div>{engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}</div>}
     />
   );
 };

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

@@ -25,16 +25,8 @@ export interface MyRemoteComponentProps {
 }
 
 // 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?.() || {};
 
@@ -46,33 +38,19 @@ const RemoteComponent: LingXiFC<MyRemoteComponentProps> = (props) => {
   const [loading, err, Component] = useRemoteComponentInst(url);
 
   if (loading) {
-    return (
-      <div>
-        {engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}
-      </div>
-    );
+    return <div>{engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}</div>;
   }
   if (err != null) {
     return (
       <ErrorBlock
-        title={
-          engineApis?.getLocale?.('RemoteComponent.fail') ??
-          '自定义组件加载失败'
-        }
+        title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'}
         description=""
         status="empty"
         image={<IconFailComp />}
       />
     );
   }
-  return (
-    <Component
-      {...restProps}
-      {...customProps}
-      $lxApi={{ form: dynamicDataContext.form, formCode, fieldName, name }}
-      ref={forwardRef}
-    />
-  );
+  return <Component {...restProps} {...customProps} $lxApi={{ form: dynamicDataContext.form, formCode, fieldName, name }} ref={forwardRef} />;
 };
 
 export default RemoteComponent;

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

@@ -9,7 +9,7 @@ export interface VueRenderProps {
   engineType: 'editor' | 'engine';
 }
 
-const VueRender: LingXiFC<VueRenderProps> = (props) => {
+const VueRender: LingXiFC<VueRenderProps> = props => {
   const { url, customProps, engineType, getEngineApis, ...restProps } = props;
   const engineApis = getEngineApis?.();
 
@@ -20,17 +20,10 @@ const VueRender: LingXiFC<VueRenderProps> = (props) => {
       lxApi={{ getEngineApis, engineType }}
       moduleProps={customProps}
       onError={console.log}
-      loading={() => (
-        <div>
-          {engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}
-        </div>
-      )}
-      fallback={(item) => (
+      loading={() => <div>{engineApis?.getLocale?.('loadingText', '加载中…') ?? '加载中...'}</div>}
+      fallback={item => (
         <ErrorBlock
-          title={
-            engineApis?.getLocale?.('RemoteComponent.fail') ??
-            '自定义组件加载失败'
-          }
+          title={engineApis?.getLocale?.('RemoteComponent.fail') ?? '自定义组件加载失败'}
           description={item.error.message}
           status="empty"
           image={<IconFailComp />}

package/lib/h5public/src/components/factory/src/RemoteComponent/constant.ts

@@ -7,16 +7,16 @@ import VueRender from './components/VueRender';
  * @param object
  * @param otherArgs
  */
-export function mergeGetter<
-  T extends Record<string, any>,
-  S1 extends Record<string, any>,
-  S2 extends Record<string, any>,
->(object: T, source1: S1, ...args: S2[]) {
+export function mergeGetter<T extends Record<string, any>, S1 extends Record<string, any>, S2 extends Record<string, any>>(
+  object: T,
+  source1: S1,
+  ...args: S2[]
+) {
   const target: Record<string, any> = object || {};
 
   // 合并ref 保持getter对象不被转义
   const merge = (o: Record<string, any> = {}) => {
-    Object.keys(o).forEach((key) => {
+    Object.keys(o).forEach(key => {
       const descriptor = Object.getOwnPropertyDescriptor(o, key);
       if (descriptor) {
         Object.defineProperty(target, key, descriptor!);
@@ -31,7 +31,7 @@ export function mergeGetter<
 
   const sources: (S1 | S2)[] = [source1, ...args];
 
-  sources.forEach((source) => {
+  sources.forEach(source => {
     merge(source);
   });
 

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

@@ -13,75 +13,64 @@ export interface MyRemoteComponentProps {
   type?: 'React' | 'Vue' | 'Fish';
 }
 
-const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>(
-  (props, ref) => {
-    const {
-      url,
-      customProps: myProps,
-      visible = true,
-      fileCode,
-      associatedType = 'file',
-      getEngineApis,
-      type = 'React',
-      ...restProps
-    } = props;
-    const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
-    const engineApis = getEngineApis();
-    const [customProps, setProps] = useState<any>(myProps);
-    const [myRefs, setMyRefs] = useState<any>();
-    const isDid = useRef(false);
-    useDeepCompareEffect(() => {
-      setProps(myProps);
-    }, [myProps]);
-    useEffect(() => {
-      // 如果是远程服务组件
-      if (fileCode && associatedType === 'file') {
-        setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
-      } else if (url) {
-        setRemoteUrl(url);
-      }
-    }, [url, fileCode]);
-
-    useImperativeHandle(
-      ref,
-      () =>
-        mergeGetter(myRefs || {}, {
-          setCompProps: (params: any) => {
-            setProps({ ...customProps, ...params });
-          },
-          setSrc: (src: string) => {
-            if (src.startsWith('http')) {
-              setRemoteUrl(src);
-            } else {
-              // 怀疑是文件id
-              setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
-            }
-          },
-        }),
-      [myRefs],
-    );
-
-    if (!visible) {
-      return <></>;
+const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>((props, ref) => {
+  const { url, customProps: myProps, visible = true, fileCode, associatedType = 'file', getEngineApis, type = 'React', ...restProps } = props;
+  const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
+  const engineApis = getEngineApis();
+  const [customProps, setProps] = useState<any>(myProps);
+  const [myRefs, setMyRefs] = useState<any>();
+  const isDid = useRef(false);
+  useDeepCompareEffect(() => {
+    setProps(myProps);
+  }, [myProps]);
+  useEffect(() => {
+    // 如果是远程服务组件
+    if (fileCode && associatedType === 'file') {
+      setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
+    } else if (url) {
+      setRemoteUrl(url);
     }
+  }, [url, fileCode]);
 
-    const Component = RemoteComponentMap[type];
-    return (
-      <Component
-        engineType="engine"
-        {...restProps}
-        customProps={customProps}
-        url={remoteUrl}
-        getEngineApis={getEngineApis}
-        forwardRef={(refs: any) => {
-          if (refs && isDid.current === false) {
-            isDid.current = true;
-            setMyRefs(refs);
+  useImperativeHandle(
+    ref,
+    () =>
+      mergeGetter(myRefs || {}, {
+        setCompProps: (params: any) => {
+          setProps({ ...customProps, ...params });
+        },
+        setSrc: (src: string) => {
+          if (src.startsWith('http')) {
+            setRemoteUrl(src);
+          } else {
+            // 怀疑是文件id
+            setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
           }
-        }}
-      />
-    );
-  },
-);
+        },
+      }),
+    [myRefs]
+  );
+
+  if (!visible) {
+    return <></>;
+  }
+
+  const Component = RemoteComponentMap[type];
+  return (
+    <Component
+      engineType="engine"
+      {...restProps}
+      customProps={customProps}
+      url={remoteUrl}
+      getEngineApis={getEngineApis}
+      forwardRef={(refs: any) => {
+        if (refs && isDid.current === false) {
+          isDid.current = true;
+          setMyRefs(refs);
+        }
+      }}
+    />
+  );
+});
 
 export default RemoteComponent;