@lingxiteam/ebe-utils 0.5.2 → 0.5.3

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

@@ -1,5 +1,5 @@
+import React, { useImperativeHandle, useState, useEffect, useMemo } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import IconPlaceholder from './assets/placeholder.png';
 
 export interface PictureVerifyCodeProps {
@@ -10,15 +10,14 @@ export interface PictureVerifyCodeProps {
 }
 // @ts-ignore
 const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = LingxiForwardRef<any, PictureVerifyCodeProps>((props, ref) => {
-  const { digit, onClick, style, visible, getEngineApis, ...restProps } = props;
+  const { onClick, style, visible, getEngineApis, ...restProps } = props;
   const { getValidateCodePicture } = getEngineApis();
   const [imgSrc, setImgSrc] = useState(IconPlaceholder);
   const getPicVerifyCode = () => {
     const newTimestamp = new Date().getTime();
-    if (digit && newTimestamp) {
+    if (newTimestamp) {
       try {
         const params = {
-          validateCodeCount: `${digit}`,
           t: `${newTimestamp}`,
         };
         setImgSrc(getValidateCodePicture(params));
@@ -42,21 +41,18 @@ const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = LingxiForwardRef<any
     return null;
   }
   // eslint-disable-next-line jsx-a11y/alt-text
-  return (
-    <img
-      {...restProps}
-      style={targetStyle}
-      src={imgSrc}
-      onClick={e => {
-        if (onClick) {
-          onClick(e);
-        } else {
-          // 点击事件如果有自定义则执行自定义事件，反之默认刷新验证码
-          getPicVerifyCode();
-        }
-      }}
-    />
-  );
+  return <img
+    {...restProps}
+    style={targetStyle}
+    src={imgSrc}
+    onClick={(e) => {
+      if (onClick) {
+        onClick(e);
+      } else { // 点击事件如果有自定义则执行自定义事件，反之默认刷新验证码
+        getPicVerifyCode();
+      }
+    }}
+  />;
 });
 
 export default PictureVerifyCode;

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

@@ -1,12 +1,13 @@
-import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import DynamicForm from '@lingxiteam/dform';
 import Field from '@lingxiteam/dform/es/components/Field';
-import { LingxiForwardRef } from '@lingxiteam/types';
-import classNames from 'classnames';
-import useAsyncState from '../utils/hooks/useAsyncState';
+import DynamicForm from '@lingxiteam/dform';
+import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useFormItem } from '../utils/hooks/useFormItem';
 import IconPlaceholder from './assets/placeholder.png';
 import './index.less';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import classNames from 'classnames';
+
 
 const { Context } = DynamicForm;
 export interface MyVerificationCodeProps {
@@ -45,7 +46,6 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
     style,
     fieldProps,
     onClick,
-    digit,
     visible = true,
     getEngineApis,
     formItemInstance,
@@ -61,9 +61,7 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
   const readingRef = useRef(false);
   const time = useRef<any>();
   const timer = useRef<any>();
-  const [{ imageURL }, setState] = useAsyncState({
-    imageURL: props.imageURL,
-  });
+  const [{ imageURL }, setState] = useAsyncState({ imageURL: props.imageURL });
   const [imgSrc, setImgSrc] = useState(IconPlaceholder);
   const countdownReading = () => {
     timer.current = setInterval(() => {
@@ -126,20 +124,17 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
 
   const getPicVerifyCode = () => {
     const newTimestamp = new Date().getTime();
-    if (digit) {
-      const params = {
-        validateCodeCount: `${digit}`,
-        t: `${newTimestamp}`,
-      };
-      setImgSrc(getValidateCodePicture(params));
-    }
+    const params = {
+      t: `${newTimestamp}`,
+    };
+    setImgSrc(getValidateCodePicture(params));
   };
   useEffect(() => {
     if (displayStyle === 'random') {
       // 随机数的情况下自动刷新
       getPicVerifyCode();
     }
-  }, [displayStyle, digit]);
+  }, [displayStyle]);
 
   /**
    * 获取验证码
@@ -152,7 +147,7 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
           src={imgSrc}
           alt=""
           className="imageActive"
-          onClick={e => {
+          onClick={(e) => {
             if (onClick) {
               onClick(e);
             } else {
@@ -171,15 +166,21 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
           <div className={`${prefixCls}-titleTop`} style={otherStyle}>
             <span className="topText">
               {title}
-              {required && <div className="redStar">*</div>}
+              {required && (
+                <div className="redStar">*</div>
+              )}
             </span>
             <div className={`${prefixCls}-inputContent`}>
               <div className="normalArea">
                 <input placeholder={placeholderText} onBlur={onBlur} value={val} onChange={onMyChange} />
-                {displayStyle === 'imageStyle' && <img className="imageActive" src={imageURL} alt="" onClick={onClick} />}
+                {displayStyle === 'imageStyle' && (
+                  <img className="imageActive" src={imageURL} alt="" onClick={onClick} />
+                )}
                 {displayStyle === 'countdownStyle' && (
                   <div
-                    className={readingRef.current === false ? 'sendButtonActive' : 'sendButtonDisable'}
+                    className={
+                      readingRef.current === false ? 'sendButtonActive' : 'sendButtonDisable'
+                    }
                     style={readingRef.current === false ? { color } : {}}
                     onClick={onClick}
                   >
@@ -198,13 +199,19 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
           <div className="normalArea">
             <span className="titleText">
               {title}
-              {required && <div className="redStar">*</div>}
+              {required && (
+                <div className="redStar">*</div>
+              )}
             </span>
             <input placeholder={placeholderText} onBlur={onBlur} value={val} onChange={onMyChange} />
-            {displayStyle === 'imageStyle' && <img className="imageActive" src={imageURL} alt="" onClick={onClick} />}
+            {displayStyle === 'imageStyle' && (
+              <img className="imageActive" src={imageURL} alt="" onClick={onClick} />
+            )}
             {displayStyle === 'countdownStyle' && (
               <div
-                className={readingRef.current === false ? 'sendButtonActive' : 'sendButtonDisable'}
+                className={
+                  readingRef.current === false ? 'sendButtonActive' : 'sendButtonDisable'
+                }
                 style={readingRef.current === false ? { color } : {}}
                 onClick={onClick}
               >
@@ -221,7 +228,9 @@ const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>((props,
       <div className={`${prefixCls}-inputContent`} style={otherStyle}>
         <div className="normalArea">
           <input placeholder={placeholderText} value={val} onBlur={onBlur} onChange={onMyChange} />
-          {displayStyle === 'imageStyle' && <img className="imageActive" src={imageURL} alt="" onClick={onClick} />}
+          {displayStyle === 'imageStyle' && (
+            <img className="imageActive" src={imageURL} alt="" onClick={onClick} />
+          )}
           {displayStyle === 'countdownStyle' && (
             <div
               className={readingRef.current === false ? 'sendButtonActive' : 'sendButtonDisable'}
@@ -261,7 +270,7 @@ export default LingxiForwardRef<unknown, MyVerificationCodeProps>((props, ref) =
 
   return (
     <Field initialValue={props.defaultValue} name={props?.fieldProps} rules={visible ? formItemInstance.getRules() : []} validateTrigger="onBlur">
-      <VerificationCode {...props} onBlur={() => {}} ref={extraRef} formItemInstance={formItemInstance} />
+      <VerificationCode {...props} onBlur={() => { }} ref={extraRef} formItemInstance={formItemInstance} />
     </Field>
   );
 });

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { useImperativeHandle, forwardRef, useState, useEffect, useMemo } from 'react';
 import IconPlaceholder from './assets/placeholder.png';
 
 export interface PictureVerifyCodeProps {
@@ -9,7 +9,14 @@ export interface PictureVerifyCodeProps {
   getEngineApis?: any;
 }
 const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef((props, ref) => {
-  const { digit, onClick, style, visible, getEngineApis, ...restProps } = props;
+  const {
+    digit,
+    onClick,
+    style,
+    visible,
+    getEngineApis,
+    ...restProps
+  } = props;
 
   const engineApis = getEngineApis?.() || {};
 
@@ -21,7 +28,7 @@ const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef((props, r
       (async () => {
         try {
           const params = {
-            validateCodeCount: `${digit}`,
+            // validateCodeCount: `${digit}`,
             t: `${newTimestamp}`,
           };
           const url = await engineApis.getValidateCodePicture(params);
@@ -46,22 +53,19 @@ const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef((props, r
   if (!visible) {
     return null;
   }
-  return (
-    <img
-      alt=""
-      {...restProps}
-      style={targetStyle}
-      src={imgSrc}
-      onClick={e => {
-        if (onClick) {
-          onClick(e);
-        } else {
-          // 点击事件如果有自定义则执行自定义事件，反之默认刷新验证码
-          getPicVerifyCode();
-        }
-      }}
-    />
-  );
+  return <img
+    alt=""
+    {...restProps}
+    style={targetStyle}
+    src={imgSrc}
+    onClick={(e) => {
+      if (onClick) {
+        onClick(e);
+      } else { // 点击事件如果有自定义则执行自定义事件，反之默认刷新验证码
+        getPicVerifyCode();
+      }
+    }}
+  />;
 });
 
 export default PictureVerifyCode;

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

@@ -1,8 +1,8 @@
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import { Input } from 'antd';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { FormFields, getFieldsProps, useCommonImperativeHandle, useForm } from '../utils';
-import { useLocale } from '../utils/hooks/useLocale';
 import IconPlaceholder from './assets/placeholder.png';
+import { useLocale } from '../utils/hooks/useLocale';
 
 export interface MyVerificationCodeProps {
   defaultValue?: any;
@@ -58,18 +58,38 @@ const countDownTextFn = (getLocale?: any) => ({
 
 const InnerView = (p: any) => {
   const { renderView, ...restProps } = p;
-  return <div className={prefixCls}>{p.renderView(restProps)}</div>;
+  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 {
+    placeholderText,
+    displayStyle,
+    countdownTime,
+    style,
+    regexp,
+    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 {
+    color,
+    margin: customMargin,
+    display: customDisplay,
+    visibility: customVisibility,
+    ...otherStyle
+  } = style;
 
   const { inForm } = useForm();
 
@@ -90,11 +110,10 @@ const VerificationCode: React.FC<MyVerificationCodeProps> = forwardRef((props, r
 
   const getPicVerifyCode = () => {
     const newTimestamp = new Date().getTime();
-    if (digit && newTimestamp) {
+    if (newTimestamp) {
       (async () => {
         try {
           const params = {
-            validateCodeCount: `${digit}`,
             t: `${newTimestamp}`,
           };
           const url = await engineApis?.getValidateCodePicture(params);
@@ -158,25 +177,23 @@ const VerificationCode: React.FC<MyVerificationCodeProps> = forwardRef((props, r
   };
 
   /**
-   * 获取验证码
-   * @returns
-   */
+ * 获取验证码
+ * @returns
+ */
   const renderPicVerifyCode = () => {
     if (displayStyle === 'random') {
-      return (
-        <img
-          src={imgSrc}
-          alt=""
-          className="imageActive"
-          onClick={e => {
-            if (onClick) {
-              onClick(e);
-            } else {
-              getPicVerifyCode();
-            }
-          }}
-        />
-      );
+      return <img
+        src={imgSrc}
+        alt=""
+        className="imageActive"
+        onClick={(e) => {
+          if (onClick) {
+            onClick(e);
+          } else {
+            getPicVerifyCode();
+          }
+        }}
+      />;
     }
     return null;
   };
@@ -186,7 +203,9 @@ const VerificationCode: React.FC<MyVerificationCodeProps> = forwardRef((props, r
       <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 === 'imageStyle' && (
+            <img className="imageActive" src={imageURL} alt="" onClick={onClick} />
+          )}
           {displayStyle === 'countdownStyle' && (
             <div
               className={countdownText === 'send' ? 'sendButtonActive' : 'sendButtonDisable'}
@@ -223,11 +242,10 @@ const VerificationCode: React.FC<MyVerificationCodeProps> = forwardRef((props, r
   }, [resetCountdown]);
 
   useEffect(() => {
-    if (displayStyle === 'random') {
-      // 随机数的情况下自动刷新
+    if (displayStyle === 'random') { // 随机数的情况下自动刷新
       getPicVerifyCode();
     }
-  }, [displayStyle, digit]);
+  }, [displayStyle]);
 
   return (
     <FormFields

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

@@ -1,9 +1,16 @@
-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 useBackgroundStyle from './useBackgroundStyle';
 import { useHiddenStyle, useListenProps } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { useLocale } from '../utils/hooks/useLocale';
 import SpinComp from '../utils/Spin';
-import useBackgroundStyle from './useBackgroundStyle';
 
 export interface MyViewProps {
   style: React.CSSProperties;
@@ -17,7 +24,16 @@ 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);
 
@@ -46,18 +62,10 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
   const getLoadingStyle = (isShow: boolean): CSSProperties => {
     const res: CSSProperties = {};
     if (containerRef.current && loadingRef.current) {
-      const containerRefProps = window.getComputedStyle(containerRef.current);
       const { offsetWidth, offsetHeight } = containerRef.current;
-      const containerOffset = containerRef.current.getBoundingClientRect();
-      // 获取loading基于父级的偏移量
-      const loadingOffset = loadingRef.current.getBoundingClientRect();
-
-      const offset = {
-        x: loadingOffset.left - containerOffset.left,
-        y: loadingOffset.top - containerOffset.top,
-      };
+      const containerRefProps = window.getComputedStyle(containerRef.current);
 
-      res.position = 'absolute';
+      // res.position = 'absolute';
       res.width = `${offsetWidth}px`;
       res.height = `${offsetHeight}px`;
       res.zIndex = containerRefProps.zIndex;
@@ -65,11 +73,8 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
       res.display = 'flex';
       res.justifyContent = 'center';
       res.alignItems = 'center';
-      res.left = 0;
-      res.top = 0;
-      if (offset.x > 0 || offset.y > 0) {
-        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
-      }
+      // res.left = 0;
+      // res.top = 0;
     }
     if (!isShow) {
       res.display = 'none';
@@ -86,7 +91,14 @@ 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) {
@@ -107,12 +119,23 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
   //   return null;
   // }
 
-  return (
-    <div
-      style={{
+  const combineStyle = useMemo(() => {
+    if (loading) {
+      return {
         ...backgroundStyle,
         ...finalStyle,
-      }}
+        overflow: 'hidden',
+      };
+    }
+    return {
+      ...backgroundStyle,
+      ...finalStyle,
+    };
+  }, [backgroundStyle, finalStyle, loading]);
+
+  return (
+    <div
+      style={combineStyle}
       className={className}
       data-compid={props?.['data-compid']}
       {...restProps}
@@ -123,11 +146,15 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
       {loading && (
         <div
           style={{
-            width: 0,
-            height: 0,
-            position: 'relative',
-            backgroundColor: 'transparent',
-            visibility: loading ? 'visible' : 'hidden',
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 99,
           }}
           ref={loadingRef}
         >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/ebe-utils",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "keywords": [],
   "author": "",
@@ -19,7 +19,7 @@
     "@babel/types": "^7.12.12",
     "cac": "^6.7.14",
     "fs-extra": "9.x",
-    "@lingxiteam/ebe": "0.5.2"
+    "@lingxiteam/ebe": "0.5.3"
   },
   "publishConfig": {
     "access": "public"