@lingxiteam/ebe-utils 0.2.3 → 0.2.5

package/lib/h5public/src/components/common/PreviewFile/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // @ts-ignore
 import { Document, Page, pdfjs } from 'react-pdf';
 // @ts-ignore
@@ -55,8 +49,7 @@ const LOCAL_PREVIEW = [
   },
   {
     previewMode: 'TXT',
-    mimeTypeReg:
-      /^(application|text)\/(json|javascript|x-javascript|plain|x-sh)$/i,
+    mimeTypeReg: /^(application|text)\/(json|javascript|x-javascript|plain|x-sh)$/i,
     suffix: /\.(less|scss|lock|ts|txt|js|jsx)$/i,
   },
   // {
@@ -69,15 +62,13 @@ const LOCAL_PREVIEW = [
 const LOCAL_PREVIEW_PLUS = [
   {
     previewMode: 'WORD',
-    mimeTypeReg:
-      /^application\/vnd.openxmlformats-officedocument.wordprocessingml.document$/i,
+    mimeTypeReg: /^application\/vnd.openxmlformats-officedocument.wordprocessingml.document$/i,
     suffix: /\.docx$/i,
     cors: true,
   },
   {
     previewMode: 'EXCEL',
-    mimeTypeReg:
-      /^application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet$/i,
+    mimeTypeReg: /^application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet$/i,
     suffix: /\.xlsx$/i,
     cors: true,
   },
@@ -88,17 +79,8 @@ const LOCAL_PREVIEW_PLUS = [
   // }
 ];
 pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-const PreviewFile: React.FC<PreviewFileProps> = (props) => {
-  const {
-    fileId: fileIdOrUrl,
-    isEnableWaterMark = true,
-    file,
-    pdfInfo,
-    onClose,
-    onLoaded,
-    getLocale,
-    language,
-  } = props;
+const PreviewFile: React.FC<PreviewFileProps> = props => {
+  const { fileId: fileIdOrUrl, isEnableWaterMark = true, file, pdfInfo, onClose, onLoaded, getLocale, language } = props;
   const [loading, setLoading] = useState(false);
   const [fileDataMap, setFileDataMap] = useState<any>({});
   const fileCacheMap = useRef<any>({});
@@ -108,11 +90,9 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
   // const { watermarkInfo } = appInst || {};
 
   // 判断是否是网络地址，是的话不调用后端接口预览
-  const isUrlFormat = (id: string) =>
-    /^http(s)?:\/\/[^\s/$.?#].[^\s]*$/i.test(id);
+  const isUrlFormat = (id: string) => /^http(s)?:\/\/[^\s/$.?#].[^\s]*$/i.test(id);
 
-  const getFilePreviewUrl = (id: string) =>
-    /^\d+$/.test(id) ? api.previewFileById(id) : id;
+  const getFilePreviewUrl = (id: string) => (/^\d+$/.test(id) ? api.previewFileById(id) : id);
 
   // 根据下载接口获取文件，判断文件类型是否可以预览
   const getFileData = (fileId: string): Promise<any> => {
@@ -124,7 +104,7 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
       const headers: any = {
         'X-B-AUTH': '1',
       };
-      Object.keys(headers).forEach((header) => {
+      Object.keys(headers).forEach(header => {
         xhr.setRequestHeader(header, headers[header]); // 设置请求头参数
       });
       xhr.setRequestHeader(
@@ -134,7 +114,7 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
           headers,
           body: '',
           search: '',
-        }),
+        })
       );
       xhr.withCredentials = true;
       return new Promise((resolve, reject) => {
@@ -204,11 +184,8 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
       localPreview = [...LOCAL_PREVIEW, ...LOCAL_PREVIEW_PLUS];
     }
 
-    const target = localPreview.find((val) => {
-      if (
-        val.suffix?.test(fileInfo?.name || fileBlob?.name || '') ||
-        val.mimeTypeReg?.test(fileBlob?.type || '')
-      ) {
+    const target = localPreview.find(val => {
+      if (val.suffix?.test(fileInfo?.name || fileBlob?.name || '') || val.mimeTypeReg?.test(fileBlob?.type || '')) {
         fileInfo.previewMode = val.previewMode;
         if (fileBlob?.cors && !val.cors) {
           // 预览跨域文件地址且无法通过平台定制方式预览的，通过iframe展示
@@ -262,10 +239,7 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
         fileInfo = await api.viewFile({ fileId: fileIdOrUrl });
       }
       if (fileInfo && fileInfo?.resultCode !== '-2') {
-        if (
-          fileInfo?.previewMode === 'IMG_PPT' &&
-          fileInfo?.fileIdList.length > 0
-        ) {
+        if (fileInfo?.previewMode === 'IMG_PPT' && fileInfo?.fileIdList.length > 0) {
           fileInfo.totalPage = fileInfo?.fileIdList.length;
           setVisible(true);
         }
@@ -301,17 +275,10 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
     initFile();
   }, [getFile, file]);
   // 当前预览文件信息
-  const data = useMemo(
-    () => fileDataMap[fileIdOrUrl || file?.fileId],
-    [file, fileIdOrUrl, fileDataMap],
-  );
+  const data = useMemo(() => fileDataMap[fileIdOrUrl || file?.fileId], [file, fileIdOrUrl, fileDataMap]);
 
   // 签名每次会增加一个时间戳，需要缓存url
-  const filePreviewUrl = useMemo(
-    () =>
-      getFilePreviewUrl(data?.data?.dataUrl || data?.data?.url || data?.fileId),
-    [data?.fileId],
-  );
+  const filePreviewUrl = useMemo(() => getFilePreviewUrl(data?.data?.dataUrl || data?.data?.url || data?.fileId), [data?.fileId]);
 
   const renderPPT = () => {
     const imgs: string[] = [];
@@ -341,11 +308,7 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
             cMapPacked: true,
           }}
         >
-          <Page
-            pageNumber={pdfInfo.pageNum}
-            scale={pdfInfo.scale}
-            loading={<SpinLoading style={{ '--size': '48px' }} />}
-          />
+          <Page pageNumber={pdfInfo.pageNum} scale={pdfInfo.scale} loading={<SpinLoading style={{ '--size': '48px' }} />} />
         </Document>
       </div>
     );
@@ -363,13 +326,7 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
         return renderPDF(filePreviewUrl);
       case 'WORD':
       case 'EXCEL':
-        return (
-          <DocViewer
-            docData={data?.data}
-            docUrl={data?.fileId}
-            type={data?.previewMode}
-          />
-        );
+        return <DocViewer docData={data?.data} docUrl={data?.fileId} type={data?.previewMode} />;
       case 'HTML':
         // eslint-disable-next-line react/no-danger
         return (
@@ -398,14 +355,7 @@ const PreviewFile: React.FC<PreviewFileProps> = (props) => {
       case 'TXT':
         return renderContent();
       case 'IFRAME':
-        return (
-          <iframe
-            src={getFilePreviewUrl(data?.fileId)}
-            key={data?.fileId}
-            title={data?.name}
-            className="iframe"
-          />
-        );
+        return <iframe src={getFilePreviewUrl(data?.fileId)} key={data?.fileId} title={data?.name} className="iframe" />;
       default:
         // if (resultInfo) {
         //   return <Result status="error" title="" description={resultInfo} />;

package/lib/h5public/src/components/factory/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@lingxiteam/factory",
-  "version": "3.8.1-alpha.12"
+  "version": "4.1.1"
 }

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

@@ -3,10 +3,7 @@ import React, { useEffect, useImperativeHandle, useState } from 'react';
 import { withTransformProps } from '../utils/withTransformProps';
 import transformProps from './transformProps';
 
-export type MyALinkprops = React.DetailedHTMLProps<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  HTMLAnchorElement
->;
+export type MyALinkprops = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 interface ALinkProps extends MyALinkprops {
   content: string;
   visible: boolean;
@@ -14,8 +11,7 @@ interface ALinkProps extends MyALinkprops {
 }
 
 const ALink = LingxiForwardRef<any, ALinkProps>((props, ref) => {
-  const { children, content, visible, href, onClick, className, ...restProps } =
-    props;
+  const { children, content, visible, href, onClick, className, ...restProps } = props;
 
   const [myHref, setHref] = useState(href);
   const [myContent, setContent] = useState(content);
@@ -46,12 +42,7 @@ const ALink = LingxiForwardRef<any, ALinkProps>((props, ref) => {
     return <></>;
   }
   return (
-    <a
-      {...restProps}
-      {...specialProps}
-      className={`use-app-alink ${className}`}
-      onClick={onClick}
-    >
+    <a {...restProps} {...specialProps} className={`use-app-alink ${className}`} onClick={onClick}>
       {myContent || children}
     </a>
   );

package/lib/h5public/src/components/factory/src/Accordion/index.less

@@ -6,14 +6,39 @@
   display: flex;
   flex: 1;
   align-items: center;
-  margin-right: -60* @hd;
-  padding-top: 12* @hd;
-  padding-bottom: 12* @hd;
+  // margin-right: -60* @hd;
+
+  .title-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .main {
+      overflow: hidden;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+    }
+    .sub {
+      overflow: hidden;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  
+  .main-title-padding {
+    padding-top: 12* @hd;
+    padding-bottom: 12* @hd;
+  }
+  .sub-title-padding {
+    padding-top: 8* @hd;
+    padding-bottom: 8* @hd;
+  }
 }
 
 .@{prefixCls} {
   .adm-list-item-content-main {
     padding: 0 !important;
+    overflow: hidden;
   }
 
   .adm-list-item-content {
@@ -31,12 +56,18 @@
   &-header {
     .pannel-default;
 
+    &-left-header-margin {
+      margin-left: 6 * @hd;
+      overflow: hidden;
+    }
+    
     &-default-icon {
       width: 8px;
       height: 32px;
       background: #47e;
       margin-right: 12px;
       border-radius: 4px;
+      flex-shrink: 0;
     }
 
     &-icon-left {

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

@@ -2,17 +2,10 @@ import { LingxiForwardRef } from '@lingxiteam/types';
 import { Collapse } from 'antd-mobile-5';
 import classnames from 'classnames';
 import isUndefined from 'lodash/isUndefined';
-import React, {
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import CardTitle from '../Card/CardTitle';
 import MyIcon, { IconFileProps } from '../Icon';
-import ChannelContainer, {
-  ChannelContainerOptions,
-} from '../utils/ChannelContainer';
+import ChannelContainer, { ChannelContainerOptions } from '../utils/ChannelContainer';
 import useHiddenStyle from '../utils/hooks/useHiddenStyle';
 import './index.less';
 
@@ -41,6 +34,7 @@ export interface MyAccordionProps {
   onChange: (key: any) => void;
   fontSize?: number;
   header?: React.ReactNode | string;
+  subTitle?: React.ReactNode | string;
   style?: any;
   src?: string;
   fileCode?: string;
@@ -71,18 +65,10 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
     prefixIcon,
   } = props;
   const displayStyle = useHiddenStyle(visible);
-  const [activeKeys, setActiveKeys] = useState<
-    string[] | string | null | undefined
-  >([]);
+  const [activeKeys, setActiveKeys] = useState<string[] | string | null | undefined>([]);
   const childKeys = useRef<string[]>([]);
 
-  const {
-    prefixIconType,
-    prefixIconTheme,
-    prefixIconIsIconFont,
-    prefixIconFontAddress,
-    prefixIconiconFile,
-  } = prefixIcon || {};
+  const { prefixIconType, prefixIconTheme, prefixIconIsIconFont, prefixIconFontAddress, prefixIconiconFile } = prefixIcon || {};
   useEffect(() => {
     if (Array.isArray(defaultActiveKey)) {
       setActiveKeys(defaultActiveKey || []);
@@ -98,9 +84,7 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
       } else if (type === '1') {
         setActiveKeys([]);
       } else if (type === '2') {
-        const childsKeys = childKeys.current?.filter(
-          (key) => !activeKeys?.includes(key),
-        );
+        const childsKeys = childKeys.current?.filter(key => !activeKeys?.includes(key));
         setActiveKeys(childsKeys);
       } else if (type === '3') {
         if (typeof keys === 'string') {
@@ -120,10 +104,8 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
     return activeKeys;
   }, [activeKeys, accordion]);
 
-  const renderHeader = (header: string) => {
+  const renderHeader = (header: string, subTitle?: string) => {
     const headStyle: any = {
-      fontSize: `${fontSize}px`,
-      ...style,
       border: 'none',
       borderRadius: 0,
     };
@@ -132,51 +114,47 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
       headStyle.backgroundColor = aHeaderColor;
     }
     const aTitleColor = titleColor || style?.titleColor || style?.color;
-    const panelHeader =
-      cardIconType === 'left' ? (
-        <div style={{ color: aTitleColor, width: '100%' }}>{header}</div>
-      ) : (
-        <div style={{ color: aTitleColor, width: '82%' }}>{header}</div>
-      );
-
+    const allNewHeader = (
+      <CardTitle
+        title={header}
+        subTitle={subTitle}
+        titleColor={aTitleColor}
+        titleFont={style?.fontSize || `${fontSize}px`}
+        titleLineHeight={style?.lineHeight}
+        titleFontWeight={style?.fontWeight}
+        subTitleColor={style?.subTitleColor}
+        subTitleFont={style?.subTitleFontSize}
+        subTitleFontWeight={style?.subTitleFontWeight}
+        subTitleLineHeight={style?.subTitleLineHeight}
+      />
+    );
+    let subClassName = 'main-title-padding';
+    if (subTitle && subTitle.length > 0) {
+      subClassName = 'sub-title-padding';
+    }
+    // style={{ maxWidth: cardIconType === 'left' ? '100%' : '84%' }}
+    const panelHeader = <div className={classnames('title-content', subClassName)}>{allNewHeader}</div>;
     if (cardIconType) {
       // 兼容存量数据中没有设置标题样式的
       switch (cardIconType) {
         case 'middle':
           return (
             <div className={`${prefixCls}-header`} style={headStyle}>
-              <span
-                className={`${prefixCls}-header-default-icon`}
-                style={{ backgroundColor: aTitleColor }}
-              />
+              <span className={`${prefixCls}-header-default-icon`} style={{ backgroundColor: aTitleColor }} />
               {panelHeader}
             </div>
           );
         case 'left':
           return (
             <div style={headStyle} className={`${prefixCls}-header`}>
-              <span
-                className={`${prefixCls}-header-icon-left`}
-                style={{ backgroundColor: aTitleColor }}
-              />
-              <div style={{ marginLeft: '6px', width: '84%' }}>
-                {panelHeader}
-              </div>
+              <span className={`${prefixCls}-header-icon-left`} style={{ backgroundColor: aTitleColor }} />
+              <div className={`${prefixCls}-header-left-header-margin`}>{panelHeader}</div>
             </div>
           );
         case 'auto':
           return (
-            <div
-              style={headStyle}
-              className={classnames(
-                `${prefixCls}-header`,
-                `${prefixCls}-header-icon-auto`,
-              )}
-            >
-              {(prefixIconTheme ||
-                prefixIconFontAddress ||
-                prefixIconiconFile) &&
-              (prefixIconType || prefixIconiconFile) ? (
+            <div style={headStyle} className={classnames(`${prefixCls}-header`, `${prefixCls}-header-icon-auto`)}>
+              {(prefixIconTheme || prefixIconFontAddress || prefixIconiconFile) && (prefixIconType || prefixIconiconFile) ? (
                 // @ts-ignore
                 <MyIcon
                   style={{ color: aTitleColor }}
@@ -216,10 +194,10 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
 
   const renderChildren = (options: ChannelContainerOptions) => {
     childKeys.current = [];
-    return React.Children.toArray(children).map((c) => {
+    return React.Children.toArray(children).map(c => {
       const { getProps, uploadChannelProps } = options;
       if (React.isValidElement(c) && c.key) {
-        const { visible = true, extendProps, header } = getProps(c);
+        const { visible = true, extendProps, header, subTitle } = getProps(c);
         // 这里是为了兼容旧逻辑，理论上不应该在props上设置key值。这个属性无法带入到组件内
         const {
           schema: {
@@ -230,13 +208,14 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
           childKeys.current.push(key);
           console.log('childKeys', childKeys.current);
         }
+        const aHeaderColor = headerColor || style?.background;
         return (
           <Collapse.Panel
-            title={renderHeader(header)}
+            title={renderHeader(header, subTitle)}
             forceRender
             {...extendProps}
             key={key}
-            style={!visible && { display: 'none' }}
+            style={visible ? { backgroundColor: aHeaderColor } : { display: 'none' }}
           >
             <ChannelContainer.Item
               extendProps={{
@@ -294,13 +273,9 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
   //  }, [data, children]);
 
   return (
-    <div
-      className={`${prefixCls} ${className}`}
-      id={`${$$componentItem?.uid}`}
-      style={displayStyle}
-    >
+    <div className={`${prefixCls} ${className}`} id={`${$$componentItem?.uid}`} style={displayStyle}>
       <ChannelContainer>
-        {(options) => (
+        {options => (
           // @ts-ignore
           <Collapse
             activeKey={myActiveKeys}

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

@@ -12,15 +12,7 @@ export interface MyAccordionHeaderProps {
 
 const prefixCls = 'lcdp-accordion';
 const AccordionHeader = AppForwardRef<MyAccordionHeaderProps>((props, ref) => {
-  const {
-    title,
-    subTitle,
-    titleKey,
-    subTitleKey,
-    titleStyle,
-    subTitleStyle,
-    children,
-  } = props;
+  const { title, subTitle, titleKey, subTitleKey, titleStyle, subTitleStyle, children } = props;
   return children ? (
     <>{children}</>
   ) : (

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

@@ -14,6 +14,7 @@ export interface MyAccordionPanelProps {
   titleColor: string;
   headerColor?: string;
   header?: React.ReactNode | string;
+  subTitle?: React.ReactNode | string;
   fontSize?: number;
   bordered?: boolean;
   key: string;
@@ -24,41 +25,30 @@ export interface MyAccordionPanelProps {
   extendProps: Record<string, any>;
 }
 const prefixCls = 'lcdp-accordion';
-const MyAccordionPanel = LingxiForwardRef<any, MyAccordionPanelProps>(
-  (props, ref) => {
-    const {
-      visible = true,
-      children,
-      src,
-      fileCode,
-      backgroundType = {},
-      getEngineApis,
-    } = props;
-    const [imgSrc, setImgSrc] = useState<string>();
-    const { getAppFileUrlByFileCode } = getEngineApis();
+const MyAccordionPanel = LingxiForwardRef<any, MyAccordionPanelProps>((props, ref) => {
+  const { visible = true, children, src, fileCode, backgroundType = {}, getEngineApis } = props;
+  const [imgSrc, setImgSrc] = useState<string>();
+  const { getAppFileUrlByFileCode } = getEngineApis();
 
-    useEffect(() => {
-      if (backgroundType.image || fileCode) {
-        setImgSrc(
-          getAppFileUrlByFileCode(backgroundType.image || fileCode, {}),
-        );
-      }
-    }, [backgroundType, src, fileCode]);
-    const viewRef = useRef();
-    const resultStyle = useStyle(
-      {
-        ...props,
-        src: imgSrc,
-      },
-      viewRef,
-    );
-    return visible ? (
-      <div className={`${prefixCls}-border-none`} style={resultStyle}>
-        {children}
-      </div>
-    ) : null;
-  },
-);
+  useEffect(() => {
+    if (backgroundType.image || fileCode) {
+      setImgSrc(getAppFileUrlByFileCode(backgroundType.image || fileCode, {}));
+    }
+  }, [backgroundType, src, fileCode]);
+  const viewRef = useRef();
+  const resultStyle = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef
+  );
+  return visible ? (
+    <div className={`${prefixCls}-border-none`} style={resultStyle}>
+      {children}
+    </div>
+  ) : null;
+});
 
 MyAccordionPanel.defaultProps = {
   extendProps: {},
@@ -66,5 +56,5 @@ MyAccordionPanel.defaultProps = {
 };
 
 export default withChannelItem(MyAccordionPanel, {
-  keyPath: ['visible', 'header', 'extendProps'],
+  keyPath: ['visible', 'header', 'subTitle', 'extendProps'],
 });

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

@@ -10,16 +10,7 @@ export interface AnimationProps extends AppViewProps, AnimationOpts {
 }
 
 const Animation = LingxiForwardRef<any, AnimationProps>((props, ref) => {
-  const {
-    backgroundType = {},
-    fileCode,
-    src,
-    className,
-    children,
-    getEngineApis,
-    $$componentItem,
-    ...animationOpts
-  } = props;
+  const { backgroundType = {}, fileCode, src, className, children, getEngineApis, $$componentItem, ...animationOpts } = props;
   const [imgSrc, setImgSrc] = useState<string>();
 
   const { getAppFileUrlByFileCode } = getEngineApis();
@@ -29,7 +20,7 @@ const Animation = LingxiForwardRef<any, AnimationProps>((props, ref) => {
       ...props,
       src: imgSrc,
     },
-    viewRef,
+    viewRef
   );
 
   const { visible, ...tweenOne } = useAnimation(animationOpts, ref);
@@ -39,7 +30,7 @@ const Animation = LingxiForwardRef<any, AnimationProps>((props, ref) => {
       setImgSrc(
         getAppFileUrlByFileCode(backgroundType.image || fileCode, {
           appId: $$componentItem.appId,
-        }),
+        })
       );
     }
   }, [backgroundType, src, fileCode]);

package/lib/h5public/src/components/factory/src/Animation/useAnimation.ts

@@ -30,7 +30,7 @@ const removeNullOrUndefined = (obj: Record<string, any>) => {
   if (!obj) {
     return obj;
   }
-  Object.keys(obj).forEach((key) => {
+  Object.keys(obj).forEach(key => {
     if (_.isNull(obj[key]) || _.isUndefined(obj[key])) {
       delete obj[key];
     }
@@ -38,10 +38,7 @@ const removeNullOrUndefined = (obj: Record<string, any>) => {
   return obj;
 };
 
-export const useAnimation = (
-  opts: AnimationOpts,
-  ref: Ref<unknown> | undefined,
-) => {
+export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined) => {
   const {
     effect,
     repeatCustom,
@@ -177,7 +174,7 @@ export const useAnimation = (
 
   const IAnimation = useMemo(() => {
     const animation = opts.animation || [];
-    return animation?.map((item) => ({
+    return animation?.map(item => ({
       ...item,
       ...item.style,
     }));

package/lib/h5public/src/components/factory/src/Animation/useStyle.ts

@@ -14,10 +14,7 @@ export interface AppViewProps {
   $$componentItem?: $$componentItem;
 }
 
-const useStyle = (
-  props: AppViewProps,
-  ref: React.MutableRefObject<HTMLDivElement | null | undefined>,
-) => {
+const useStyle = (props: AppViewProps, ref: React.MutableRefObject<HTMLDivElement | null | undefined>) => {
   const { src: imgSrc, style, backgroundType = {} } = props;
   const { mode, type, color, startColor, endColor } = backgroundType || {};
   const [size, setSize] = useState({
@@ -112,7 +109,7 @@ const useStyle = (
       targetStyle.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
     } else if (type === 'image') {
       const imageStyle = getImageStyle();
-      Object.keys(imageStyle).forEach((key) => {
+      Object.keys(imageStyle).forEach(key => {
         // @ts-ignore
         targetStyle[key] = imageStyle[key];
       });