@lingxiteam/ebe-utils 0.2.4 → 0.2.6

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

@@ -1,11 +1,6 @@
 import { Input } from 'antd';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import {
-  FormFields,
-  getFieldsProps,
-  useCommonImperativeHandle,
-  useForm,
-} from '../utils';
+import { FormFields, getFieldsProps, useCommonImperativeHandle, useForm } from '../utils';
 import { useLocale } from '../utils/hooks/useLocale';
 import IconPlaceholder from './assets/placeholder.png';
 
@@ -66,232 +61,188 @@ const InnerView = (p: any) => {
   return <div className={prefixCls}>{p.renderView(restProps)}</div>;
 };
 
-const VerificationCode: React.FC<MyVerificationCodeProps> = forwardRef(
-  (props, ref) => {
-    const {
-      placeholderText,
-      displayStyle,
-      countdownTime,
-      style,
-      regexp,
-      digit,
-      getEngineApis,
-      onChange,
-      onClick,
-      imageURL: myImageURL,
-    } = props;
-
-    const engineApis = getEngineApis?.() || {};
-
-    const { getLocale } = useLocale(engineApis);
-
-    const countDownTextMap: any = countDownTextFn(getLocale);
-    const {
-      color,
-      margin: customMargin,
-      display: customDisplay,
-      visibility: customVisibility,
-      ...otherStyle
-    } = style;
-
-    const { inForm } = useForm();
-
-    const [startCountdown, setStartCountdown] = useState<Date>();
-    const [resetCountdown, setResetCountdown] = useState<Date>();
-    const [imageURL, setImageURL] = useState('');
-    const [imgSrc, setImgSrc] = useState(IconPlaceholder);
-    const [countdownText, setCountdownText] = useState('send');
-    const [readingTime, updateTime] = useState();
-    const [errorInfo, setErrorInfo] = useState(null);
-    const [reading, setReading] = useState(false);
-    const time = useRef<any>();
-    const timer = useRef<any>();
-
-    useEffect(() => {
-      setImageURL(myImageURL || '');
-    }, [myImageURL]);
-
-    const getPicVerifyCode = () => {
-      const newTimestamp = new Date().getTime();
-      if (digit && newTimestamp) {
-        (async () => {
-          try {
-            const params = {
-              validateCodeCount: `${digit}`,
-              t: `${newTimestamp}`,
-            };
-            const url = await engineApis?.getValidateCodePicture(params);
-            setImgSrc(url);
-          } catch (e) {
-            console.log(e);
-          }
-        })();
-      }
-    };
-
-    const { disabled, required, readOnly, formFieldsRef, finalRules } =
-      useCommonImperativeHandle(ref, props, {
-        refreshPictureVeriryCode: () => {
-          getPicVerifyCode();
-        },
-        setVerificationCodeImageUrl: (url: string) => {
-          setImageURL(url);
-        },
-        startVerificationCodeCountdown: (start: Date) => {
-          setStartCountdown(start);
-        },
-        resetVerificationCodeCountdown: (reset: Date) => {
-          setResetCountdown(reset);
-        },
-      });
-
-    const countdownReading = () => {
-      timer.current = setInterval(() => {
-        let readingTime = time.current ? time.current : countdownTime;
-        readingTime -= 1;
-        time.current = readingTime;
-        if (readingTime < 1) {
-          setReading(false);
-          setCountdownText('send');
-          clearInterval(timer?.current);
-          updateTime(undefined);
-        } else {
-          setCountdownText('refresh');
-          updateTime(readingTime);
-          // setCountdownText(`${getLocale?.('VerificationCode.refresh')} ${readingTime}s`);
+const VerificationCode: React.FC<MyVerificationCodeProps> = forwardRef((props, ref) => {
+  const { placeholderText, displayStyle, countdownTime, style, regexp, digit, getEngineApis, onChange, onClick, imageURL: myImageURL } = props;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const { getLocale } = useLocale(engineApis);
+
+  const countDownTextMap: any = countDownTextFn(getLocale);
+  const { color, margin: customMargin, display: customDisplay, visibility: customVisibility, ...otherStyle } = style;
+
+  const { inForm } = useForm();
+
+  const [startCountdown, setStartCountdown] = useState<Date>();
+  const [resetCountdown, setResetCountdown] = useState<Date>();
+  const [imageURL, setImageURL] = useState('');
+  const [imgSrc, setImgSrc] = useState(IconPlaceholder);
+  const [countdownText, setCountdownText] = useState('send');
+  const [readingTime, updateTime] = useState();
+  const [errorInfo, setErrorInfo] = useState(null);
+  const [reading, setReading] = useState(false);
+  const time = useRef<any>();
+  const timer = useRef<any>();
+
+  useEffect(() => {
+    setImageURL(myImageURL || '');
+  }, [myImageURL]);
+
+  const getPicVerifyCode = () => {
+    const newTimestamp = new Date().getTime();
+    if (digit && newTimestamp) {
+      (async () => {
+        try {
+          const params = {
+            validateCodeCount: `${digit}`,
+            t: `${newTimestamp}`,
+          };
+          const url = await engineApis?.getValidateCodePicture(params);
+          setImgSrc(url);
+        } catch (e) {
+          console.log(e);
         }
-      }, 1000);
-    };
-
-    const onMyChange = (e: any) => {
-      if (onChange) {
-        onChange(e.target.value);
-      }
-    };
-
-    const onMyBlur = (e: any) => {
-      setErrorInfo(null);
-      if (!inForm && regexp && e.target.value.length > 0) {
-        regexp.forEach((item: any) => {
-          const { pattern, message: msg } = item;
-          if (pattern && !pattern.test(e.target.value)) {
-            setErrorInfo(msg);
-          }
-        });
-      }
-    };
-
-    /**
-     * 获取验证码
-     * @returns
-     */
-    const renderPicVerifyCode = () => {
-      if (displayStyle === 'random') {
-        return (
-          <img
-            src={imgSrc}
-            alt=""
-            className="imageActive"
-            onClick={(e) => {
-              if (onClick) {
-                onClick(e);
-              } else {
-                getPicVerifyCode();
-              }
-            }}
-          />
-        );
-      }
-      return null;
-    };
-
-    const renderView = (p: any) => {
-      return (
-        <div className={`${prefixCls}-inputContent`} style={otherStyle}>
-          <div className="normalArea">
-            <Input
-              placeholder={placeholderText}
-              value={p.value}
-              onBlur={p.onBlur}
-              onChange={p.onChange}
-            />
-            {displayStyle === 'imageStyle' && (
-              <img
-                className="imageActive"
-                src={imageURL}
-                alt=""
-                onClick={onClick}
-              />
-            )}
-            {displayStyle === 'countdownStyle' && (
-              <div
-                className={
-                  countdownText === 'send'
-                    ? 'sendButtonActive'
-                    : 'sendButtonDisable'
-                }
-                style={countdownText === 'send' ? { color } : {}}
-                onClick={onClick}
-              >
-                {`${countDownTextMap[countdownText]}${
-                  countdownText === 'refresh' ? ` ${readingTime}s` : ''
-                }`}
-              </div>
-            )}
-            {renderPicVerifyCode()}
-          </div>
-          {errorInfo && (
-            <span className={`${prefixCls}-errorNotice`}>{errorInfo}</span>
-          )}
-        </div>
-      );
-    };
-
-    // 开始倒计时
-    useEffect(() => {
-      if (startCountdown && displayStyle === 'countdownStyle') {
-        if (reading) return;
-        setReading(true);
-        countdownReading();
-      }
-    }, [startCountdown]);
-
-    // 重置倒计时
-    useEffect(() => {
-      if (resetCountdown && displayStyle === 'countdownStyle') {
+      })();
+    }
+  };
+
+  const { disabled, required, readOnly, formFieldsRef, finalRules } = useCommonImperativeHandle(ref, props, {
+    refreshPictureVeriryCode: () => {
+      getPicVerifyCode();
+    },
+    setVerificationCodeImageUrl: (url: string) => {
+      setImageURL(url);
+    },
+    startVerificationCodeCountdown: (start: Date) => {
+      setStartCountdown(start);
+    },
+    resetVerificationCodeCountdown: (reset: Date) => {
+      setResetCountdown(reset);
+    },
+  });
+
+  const countdownReading = () => {
+    timer.current = setInterval(() => {
+      let readingTime = time.current ? time.current : countdownTime;
+      readingTime -= 1;
+      time.current = readingTime;
+      if (readingTime < 1) {
         setReading(false);
-        setCountdownText(getLocale?.('VerificationCode.text'));
+        setCountdownText('send');
         clearInterval(timer?.current);
-        time.current = null;
-      }
-    }, [resetCountdown]);
-
-    useEffect(() => {
-      if (displayStyle === 'random') {
-        // 随机数的情况下自动刷新
-        getPicVerifyCode();
+        updateTime(undefined);
+      } else {
+        setCountdownText('refresh');
+        updateTime(readingTime);
+        // setCountdownText(`${getLocale?.('VerificationCode.refresh')} ${readingTime}s`);
       }
-    }, [displayStyle, digit]);
+    }, 1000);
+  };
+
+  const onMyChange = (e: any) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  const onMyBlur = (e: any) => {
+    setErrorInfo(null);
+    if (!inForm && regexp && e.target.value.length > 0) {
+      regexp.forEach((item: any) => {
+        const { pattern, message: msg } = item;
+        if (pattern && !pattern.test(e.target.value)) {
+          setErrorInfo(msg);
+        }
+      });
+    }
+  };
+
+  /**
+   * 获取验证码
+   * @returns
+   */
+  const renderPicVerifyCode = () => {
+    if (displayStyle === 'random') {
+      return (
+        <img
+          src={imgSrc}
+          alt=""
+          className="imageActive"
+          onClick={e => {
+            if (onClick) {
+              onClick(e);
+            } else {
+              getPicVerifyCode();
+            }
+          }}
+        />
+      );
+    }
+    return null;
+  };
 
+  const renderView = (p: any) => {
     return (
-      <FormFields
-        {...getFieldsProps(props)}
-        ref={formFieldsRef}
-        trigger="onChange"
-        required={required}
-        disabled={disabled as any}
-        readOnly={readOnly}
-        validateTrigger="onBlur"
-        rules={finalRules}
-      >
-        <InnerView
-          renderView={renderView}
-          onChange={onMyChange}
-          onBlur={onMyBlur}
-        />
-      </FormFields>
+      <div className={`${prefixCls}-inputContent`} style={otherStyle}>
+        <div className="normalArea">
+          <Input placeholder={placeholderText} value={p.value} onBlur={p.onBlur} onChange={p.onChange} />
+          {displayStyle === 'imageStyle' && <img className="imageActive" src={imageURL} alt="" onClick={onClick} />}
+          {displayStyle === 'countdownStyle' && (
+            <div
+              className={countdownText === 'send' ? 'sendButtonActive' : 'sendButtonDisable'}
+              style={countdownText === 'send' ? { color } : {}}
+              onClick={onClick}
+            >
+              {`${countDownTextMap[countdownText]}${countdownText === 'refresh' ? ` ${readingTime}s` : ''}`}
+            </div>
+          )}
+          {renderPicVerifyCode()}
+        </div>
+        {errorInfo && <span className={`${prefixCls}-errorNotice`}>{errorInfo}</span>}
+      </div>
     );
-  },
-);
+  };
+
+  // 开始倒计时
+  useEffect(() => {
+    if (startCountdown && displayStyle === 'countdownStyle') {
+      if (reading) return;
+      setReading(true);
+      countdownReading();
+    }
+  }, [startCountdown]);
+
+  // 重置倒计时
+  useEffect(() => {
+    if (resetCountdown && displayStyle === 'countdownStyle') {
+      setReading(false);
+      setCountdownText(getLocale?.('VerificationCode.text'));
+      clearInterval(timer?.current);
+      time.current = null;
+    }
+  }, [resetCountdown]);
+
+  useEffect(() => {
+    if (displayStyle === 'random') {
+      // 随机数的情况下自动刷新
+      getPicVerifyCode();
+    }
+  }, [displayStyle, digit]);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      ref={formFieldsRef}
+      trigger="onChange"
+      required={required}
+      disabled={disabled as any}
+      readOnly={readOnly}
+      validateTrigger="onBlur"
+      rules={finalRules}
+    >
+      <InnerView renderView={renderView} onChange={onMyChange} onBlur={onMyBlur} />
+    </FormFields>
+  );
+});
 
 export default VerificationCode;

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

@@ -1,22 +1,14 @@
 import React from 'react';
 
-export interface VerticalViewProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {
+export interface VerticalViewProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   visible?: boolean;
 }
 
-const VerticalView: React.FC<VerticalViewProps> = (props) => {
+const VerticalView: React.FC<VerticalViewProps> = props => {
   const { children, style, className, visible = true } = props;
 
   return visible ? (
-    <div
-      style={style}
-      className={className}
-      data-compid={(props as any)?.['data-compid']}
-    >
+    <div style={style} className={className} data-compid={(props as any)?.['data-compid']}>
       {children}
     </div>
   ) : null;

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

@@ -34,12 +34,7 @@ const VideoPlayer: React.FC<ReactPlayerProps> = (props, ref) => {
   const [videoUrl, setVideoUrl] = useState<any>('');
   const totalTime = useRef<number>();
   const rate = useMemo(() => {
-    if (
-      speed &&
-      typeof playbackRate === 'number' &&
-      playbackRate &&
-      playbackRate > 0
-    ) {
+    if (speed && typeof playbackRate === 'number' && playbackRate && playbackRate > 0) {
       return playbackRate;
     }
     return 1;
@@ -75,9 +70,7 @@ const VideoPlayer: React.FC<ReactPlayerProps> = (props, ref) => {
     if (fileCode) {
       (async () => {
         try {
-          setLight(
-            await engineApis?.service?.getAppFileUrlByFileCode(fileCode),
-          );
+          setLight(await engineApis?.service?.getAppFileUrlByFileCode(fileCode));
         } catch (e) {
           console.log(`获取视频封面出错:${e}`);
         }
@@ -92,9 +85,7 @@ const VideoPlayer: React.FC<ReactPlayerProps> = (props, ref) => {
       if (videoCode) {
         (async () => {
           try {
-            setVideoUrl(
-              await engineApis?.service?.getAppFileUrlByFileCode(videoCode),
-            );
+            setVideoUrl(await engineApis?.service?.getAppFileUrlByFileCode(videoCode));
           } catch (e) {
             console.log(`获取视频资源出错:${e}`);
           }

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

@@ -1,12 +1,5 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, {
-  CSSProperties,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useHiddenStyle, useListenProps } from '../utils';
 import { useLocale } from '../utils/hooks/useLocale';
 import SpinComp from '../utils/Spin';
@@ -24,16 +17,7 @@ export interface MyViewProps {
 }
 
 const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
-  const {
-    children,
-    style,
-    className,
-    visible = true,
-    backgroundType,
-    getEngineApis,
-    visibility = false,
-    ...restProps
-  } = props;
+  const { children, style, className, visible = true, backgroundType, getEngineApis, visibility = false, ...restProps } = props;
 
   const [loading, setLoading] = useListenProps(props.loading);
 
@@ -102,14 +86,7 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
       );
     }
     return null;
-  }, [
-    loading,
-    loadingRef.current,
-    reload,
-    lang,
-    dataState?.loading,
-    loadingText,
-  ]);
+  }, [loading, loadingRef.current, reload, lang, dataState?.loading, loadingText]);
 
   useEffect(() => {
     if (loading) {

package/lib/pcpublic/src/components/pcfactory/src/View/useBackgroundStyle.ts

@@ -23,9 +23,7 @@ const useBackgroundStyle = (props: BackgroundConfig) => {
               if (apis.getAppFileUrlByFileCode) {
                 func = apis.getAppFileUrlByFileCode;
               }
-            } else if (
-              typeof engineApis?.getAppFileUrlByFileCode === 'function'
-            ) {
+            } else if (typeof engineApis?.getAppFileUrlByFileCode === 'function') {
               func = engineApis.getAppFileUrlByFileCode;
             }
             if (func) {
@@ -33,7 +31,7 @@ const useBackgroundStyle = (props: BackgroundConfig) => {
                 await func({
                   appId: props?.appId || window.appId,
                   fileCode: code,
-                }),
+                })
               );
             }
           } else if (mode === 'engine') {

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

@@ -0,0 +1,25 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import classNames from 'classnames';
+import { useHiddenStyle } from '../utils';
+import useWebComponent, { WebComponentProps } from './useWebComponent';
+
+const WebComponent = LingxiForwardRef<any, WebComponentProps>((props, ref) => {
+  const { name, visible, className } = props;
+
+  const { iframeRef, src, style } = useWebComponent(props);
+  const hiddenStyle = useHiddenStyle(visible, style);
+
+  return (
+    <iframe
+      data-compid={props?.['data-compid']}
+      className={classNames('ued-webComponent', className)}
+      ref={iframeRef}
+      style={hiddenStyle}
+      src={src}
+      title="WebComponent"
+      name={name}
+    />
+  );
+});
+
+export default WebComponent;

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

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