@lingxiteam/ebe-utils 0.2.4 → 0.2.6

package/lib/pcpublic/src/components/pcfactory/src/Animation/useAnimation.ts

@@ -29,7 +29,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];
     }
@@ -37,10 +37,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,
@@ -172,7 +169,7 @@ export const useAnimation = (
 
   const IAnimation = useMemo(() => {
     const animation = opts.animation || [];
-    return animation?.map((item) => ({
+    return animation?.map(item => ({
       ...item,
       ...item.style,
     }));

package/lib/pcpublic/src/components/pcfactory/src/Animation/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) {
@@ -35,7 +33,7 @@ const useBackgroundStyle = (props: BackgroundConfig) => {
             setImgSrc(
               await engineApis?.service?.getAppFileUrlByFileCode(code, {
                 appId,
-              }),
+              })
             );
           }
         } catch (e) {

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

@@ -1,17 +1,5 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  PlayButton,
-  Progress,
-  Timer,
-  VolumeControl,
-} from 'react-soundplayer/components';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { PlayButton, Progress, Timer, VolumeControl } from 'react-soundplayer/components';
 // it's just an alias for `withSoundCloudAudio` but makes code clearer
 import { withCustomAudio } from 'react-soundplayer/addons';
 import { useLocale } from '../utils/hooks/useLocale';
@@ -53,17 +41,7 @@ function getAbsoluteUrl(path?: string) {
 // 预留扩展
 // PlayButton, VolumeControl 等可支持换皮肤
 const CustomAudio = withCustomAudio((props: any) => {
-  const {
-    audioTitle,
-    soundCloudAudio,
-    autoPlay,
-    hideType,
-    visible,
-    style,
-    backgroundType,
-    appId,
-    engineApis,
-  } = props;
+  const { audioTitle, soundCloudAudio, autoPlay, hideType, visible, style, backgroundType, appId, engineApis } = props;
 
   // preloadType = "none" // auto | metadata | none
   const otherProps = useMemo(() => {
@@ -85,21 +63,12 @@ const CustomAudio = withCustomAudio((props: any) => {
   if (!visible) {
     if (hideType === 'hidden') {
       return (
-        <div
-          className={AudioClsWrapper}
-          style={{ ...style, ...backgroundStyle, display: 'none' }}
-        >
+        <div className={AudioClsWrapper} style={{ ...style, ...backgroundStyle, display: 'none' }}>
           <div className={`${AudioClsWrapper}-audioTitle`}>{audioTitle}</div>
           <div className={`${AudioClsWrapper}-audioContent`}>
             <PlayButton {...otherProps} />
-            <Timer
-              className={`${AudioClsWrapper}-audioTimer`}
-              {...otherProps}
-            />
-            <Progress
-              className={`${AudioClsWrapper}-progress`}
-              {...otherProps}
-            />
+            <Timer className={`${AudioClsWrapper}-audioTimer`} {...otherProps} />
+            <Progress className={`${AudioClsWrapper}-progress`} {...otherProps} />
             <VolumeControl {...otherProps} />
           </div>
         </div>
@@ -121,20 +90,8 @@ const CustomAudio = withCustomAudio((props: any) => {
 });
 
 const Audio: React.FC<MyAudioProps> = forwardRef((props, ref) => {
-  const {
-    audioTitle,
-    autoPlay,
-    preloadType,
-    streamUrl,
-    streamType,
-    fileCode,
-    visible,
-    hideType,
-    style,
-    backgroundType,
-    appId,
-    getEngineApis,
-  } = props;
+  const { audioTitle, autoPlay, preloadType, streamUrl, streamType, fileCode, visible, hideType, style, backgroundType, appId, getEngineApis } =
+    props;
 
   const engineApis = getEngineApis?.() || {};
   const { getLocale } = useLocale(engineApis);
@@ -148,9 +105,7 @@ const Audio: React.FC<MyAudioProps> = forwardRef((props, ref) => {
       if (fileCode) {
         (async () => {
           try {
-            const url = await engineApis?.service?.getAppFileUrlByFileCode(
-              fileCode,
-            );
+            const url = await engineApis?.service?.getAppFileUrlByFileCode(fileCode);
             setAudioUrl(url);
           } catch (e) {
             console.error(`${getLocale?.('Audio.warning')}:${e}`);

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

@@ -62,6 +62,7 @@ const MyButton = LingxiForwardRef<any, MyButtonProps>((props, ref) => {
   } = props;
 
   const events = useDoubleClick({
+    type: 'Button',
     clickName: 'onClick',
     doubleClickName: 'onDoubleClick',
     events: {
@@ -72,9 +73,7 @@ const MyButton = LingxiForwardRef<any, MyButtonProps>((props, ref) => {
   const [loading, setLoading] = useListenToggleBoolean(props.loading);
   const [disabled, setDisabled] = useListenToggleBoolean(props.disabled);
 
-  const [btnText, setBtnText] = useListenProps<string | undefined>(
-    btnTextProp || name,
-  );
+  const [btnText, setBtnText] = useListenProps<string | undefined>(btnTextProp || name);
   const [icon, setIcon] = useListenProps(iconProps);
   const { svgContent, ...iconRest } = icon;
 
@@ -118,29 +117,15 @@ const MyButton = LingxiForwardRef<any, MyButtonProps>((props, ref) => {
 
   return visible ? (
     <WrapperButton>
-      <Button
-        {...restProps}
-        style={{ ...(myStyle || {}) }}
-        loading={loading}
-        disabled={disabled}
-        {...events}
-      >
+      <Button {...restProps} style={{ ...(myStyle || {}) }} loading={loading} disabled={disabled} {...events}>
         {iconPosition === 'left' && hasIcon && (
           // @ts-ignore
-          <CommIcon
-            svgContent={svgContent}
-            icon={iconRest}
-            getEngineApis={getEngineApis}
-          />
+          <CommIcon svgContent={svgContent} icon={iconRest} getEngineApis={getEngineApis} />
         )}
         {loading ? loadingText : btnText || name}
         {iconPosition === 'right' && hasIcon && (
           // @ts-ignore
-          <CommIcon
-            svgContent={svgContent}
-            icon={iconRest}
-            getEngineApis={getEngineApis}
-          />
+          <CommIcon svgContent={svgContent} icon={iconRest} getEngineApis={getEngineApis} />
         )}
       </Button>
     </WrapperButton>

package/lib/pcpublic/src/components/pcfactory/src/Card/CardTitle/index.tsx

@@ -0,0 +1,126 @@
+import { Tooltip } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+interface CardTitleProps {
+  title?: any;
+  subTitle?: string;
+  titleFont?: string;
+  titleLineHeight?: string;
+  titleFontWeight?: number;
+  subTitleColor?: string;
+  subTitleFont?: string;
+  subTitleLineHeight?: string;
+  subTitleFontWeight?: number;
+  titleColor?: string;
+  subTitleClassName?: string;
+}
+
+const CardTitle: React.FC<CardTitleProps> = props => {
+  const {
+    title,
+    subTitle,
+    titleFont,
+    titleLineHeight,
+    titleFontWeight,
+    titleColor,
+    subTitleColor,
+    subTitleFont,
+    subTitleLineHeight,
+    subTitleFontWeight,
+    subTitleClassName = 'ued-card-sub-title',
+  } = props;
+
+  // 创建ref用于获取主标题DOM元素
+  const mainTitleRef = useRef<any>(null);
+  // 创建ref用于获取副标题DOM元素
+  const subTitleRef = useRef<any>(null);
+
+  const [showMainPopover, setShowMainPopover] = useState(false);
+  const [showSubPopover, setShowSubPopover] = useState(false);
+
+  const mainTitle = useMemo(() => {
+    return (
+      <div
+        className="main"
+        ref={mainTitleRef}
+        style={{
+          color: titleColor,
+          fontSize: titleFont,
+          lineHeight: titleLineHeight,
+          fontWeight: titleFontWeight,
+        }}
+      >
+        {title}
+      </div>
+    );
+  }, [title, titleColor, titleFont, titleLineHeight, titleFontWeight]);
+
+  const secondTitle = useMemo(() => {
+    return (
+      <div
+        className="sub"
+        ref={subTitleRef}
+        style={{
+          color: subTitleColor,
+          fontSize: subTitleFont,
+          lineHeight: subTitleLineHeight,
+          fontWeight: subTitleFontWeight,
+        }}
+      >
+        {subTitle}
+      </div>
+    );
+  }, [subTitle, subTitleColor, subTitleFont, subTitleLineHeight, subTitleFontWeight]);
+
+  const checkTitleIsElipsis = () => {
+    // 用于在组件挂载后获取主标题和副标题元素的宽度
+    const mainTitleDiv = mainTitleRef.current;
+    const subTitleDiv = subTitleRef.current;
+    if (mainTitleDiv) {
+      // 判断主标题是否过长被省略了
+      const mainTitleIsElipsis = mainTitleDiv.scrollWidth > mainTitleDiv.clientWidth;
+      setShowMainPopover(mainTitleIsElipsis);
+    }
+    if (subTitleDiv) {
+      // 判断副标题是否过长被省略了
+      const subTitleIsElipsis = subTitleDiv.scrollWidth > subTitleDiv.clientWidth;
+      setShowSubPopover(subTitleIsElipsis);
+    }
+  };
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      checkTitleIsElipsis();
+    });
+    // 使用ResizeObserver来监听窗口尺寸变化
+    resizeObserver.observe(document.body);
+    return () => {
+      resizeObserver.unobserve(document.body);
+    };
+  }, []);
+
+  useEffect(() => {
+    checkTitleIsElipsis();
+  }, [mainTitle, secondTitle]);
+
+  return (
+    <>
+      {showMainPopover && (
+        <Tooltip title={title} color="white" overlayInnerStyle={{ color: '#333' }} placement="topLeft">
+          {mainTitle}
+        </Tooltip>
+      )}
+      {!showMainPopover && mainTitle}
+      <div className={subTitleClassName}>
+        {showSubPopover && (
+          <Tooltip title={subTitle} color="white" overlayInnerStyle={{ color: '#333' }} placement="topLeft">
+            {secondTitle}
+          </Tooltip>
+        )}
+        {!showSubPopover && secondTitle}
+      </div>
+    </>
+  );
+};
+
+export default CardTitle;

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

@@ -6,6 +6,7 @@ import React, { useImperativeHandle, useMemo, useState } from 'react';
 import CommIcon from '../Icon';
 import { useHiddenStyle } from '../utils';
 import useBackgroundStyle from '../View/useBackgroundStyle';
+import CardTitle from './CardTitle';
 import useExtendBtn from './useExtendBtn';
 
 export type FunctionHandleType = (e: any) => void;
@@ -36,6 +37,14 @@ export interface MyCardProps extends CardProps {
   backgroundType?: any;
   appId?: string;
   getEngineApis?: any;
+  subTitle?: string;
+  titleFont?: string;
+  titleLineHeight?: string;
+  titleFontWeight?: number;
+  subTitleColor?: string;
+  subTitleFont?: string;
+  subTitleLineHeight?: string;
+  subTitleFontWeight?: number;
 }
 
 const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
@@ -67,6 +76,14 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
     appId,
     prefixIcon = {},
     getEngineApis,
+    subTitle,
+    titleFont,
+    titleLineHeight,
+    titleFontWeight,
+    subTitleColor,
+    subTitleFont,
+    subTitleLineHeight,
+    subTitleFontWeight,
     ...restProps
   } = props;
   const [loading, setLoading] = useState(props.loading);
@@ -100,11 +117,22 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
     }
     return {};
   }, [loading]);
+
   const renderTitle = () => {
-    const cardTitle = titleColor ? (
-      <div style={{ color: titleColor }}>{title}</div>
-    ) : (
-      title
+    // const cardTitle = titleColor ? <div style={{ color: titleColor }}>{title}</div> : title;
+    const cardTitle = (
+      <CardTitle
+        title={title}
+        titleColor={titleColor}
+        titleFont={titleFont}
+        titleFontWeight={titleFontWeight}
+        titleLineHeight={titleLineHeight}
+        subTitle={subTitle}
+        subTitleColor={subTitleColor}
+        subTitleFont={subTitleFont}
+        subTitleFontWeight={subTitleFontWeight}
+        subTitleLineHeight={subTitleLineHeight}
+      />
     );
 
     if (hasIcon || cardIconType) {
@@ -112,20 +140,10 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
         case 'middle':
           return <div className="ued-card-title">{cardTitle}</div>;
         case 'left':
-          return (
-            <div className="ued-card-title ued-card-title-icon-left">
-              {cardTitle}
-            </div>
-          );
+          return <div className="ued-card-title ued-card-title-icon-left">{cardTitle}</div>;
         case 'auto': {
-          const {
-            prefixIconIsIconFont,
-            prefixIconFontAddress,
-            prefixIconTheme,
-            prefixIconType,
-            prefixIconiconFile,
-            prefixIconIconFileInfo,
-          } = prefixIcon;
+          const { prefixIconIsIconFont, prefixIconFontAddress, prefixIconTheme, prefixIconType, prefixIconiconFile, prefixIconIconFileInfo } =
+            prefixIcon;
           return (
             <div className="ued-card-title ued-card-title-icon-auto">
               <CommIcon
@@ -147,7 +165,7 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
           );
         }
         case 'none':
-          return cardTitle;
+          return <div className="ued-card-style-less-title">{cardTitle}</div>;
         default:
           return <div className="ued-card-title">{cardTitle}</div>;
       }
@@ -176,23 +194,11 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
       size={size}
       title={renderTitle()}
       headStyle={headStyle}
-      bodyStyle={
-        padding
-          ? { padding, ...backgroundStyle, ...bodyStyleRelative }
-          : { ...backgroundStyle, ...bodyStyleRelative }
-      }
+      bodyStyle={padding ? { padding, ...backgroundStyle, ...bodyStyleRelative } : { ...backgroundStyle, ...bodyStyleRelative }}
       extra={<div className="ued-card-extend">{renderExtendBtn()}</div>}
     >
       {/** Card 的loingd 会导致子容器重新刷新 */}
-      {loading === true && (
-        <Skeleton
-          loading
-          active
-          paragraph={{ rows: 4 }}
-          title={false}
-          className="ued-card-children-skeleton"
-        />
-      )}
+      {loading === true && <Skeleton loading active paragraph={{ rows: 4 }} title={false} className="ued-card-children-skeleton" />}
       {children}
     </Card>
   );

package/lib/pcpublic/src/components/pcfactory/src/Card/useExtendBtn.tsx

@@ -35,36 +35,16 @@ const useExtendBtn = (props: ExtendProps) => {
   const renderBtn = (btnList: any, isPopover = false, clicks: any) => {
     if (Array.isArray(btnList)) {
       return btnList.map((c, i) => {
-        const {
-          icon,
-          iconPos,
-          id,
-          btnType,
-          btnSize,
-          isIcon,
-          rule,
-          visible: buttonVisible = true,
-          disabled,
-        } = c;
+        const { icon, iconPos, id, btnType, btnSize, isIcon, rule, visible: buttonVisible = true, disabled } = c;
         const handleOnClick = (e: any) => {
           if (clicks[i] && typeof clicks[i] === 'function') {
             clicks[i](e);
           }
         };
         const BtnIcon = icon ? (
-          <Button
-            className={`${prefixCls}-extend-iconBtn`}
-            type="link"
-            disabled={disabled}
-            key={isIcon && id}
-            onClick={isIcon && handleOnClick}
-          >
+          <Button className={`${prefixCls}-extend-iconBtn`} type="link" disabled={disabled} key={isIcon && id} onClick={isIcon && handleOnClick}>
             {/** @ts-ignore */}
-            <CommIcon
-              icon={icon}
-              engineApis={engineApis}
-              getEngineApis={getEngineApis}
-            />
+            <CommIcon icon={icon} engineApis={engineApis} getEngineApis={getEngineApis} />
           </Button>
         ) : undefined;
         const TooltipBtn = <Tooltip title={c.title}>{BtnIcon}</Tooltip>;
@@ -86,13 +66,7 @@ const useExtendBtn = (props: ExtendProps) => {
               )
             ) : isPopover ? (
               <div>
-                <Button
-                  disabled={disabled}
-                  key={id}
-                  type="link"
-                  size={btnSize}
-                  onClick={handleOnClick}
-                >
+                <Button disabled={disabled} key={id} type="link" size={btnSize} onClick={handleOnClick}>
                   {iconPos && iconPos === 'left' && icon && (
                     <CommIcon
                       icon={icon}
@@ -115,32 +89,13 @@ const useExtendBtn = (props: ExtendProps) => {
                 </Button>
               </div>
             ) : (
-              <Button
-                disabled={disabled}
-                key={id}
-                className={`${prefixCls}-extend-btn`}
-                type={btnType}
-                size={btnSize}
-                onClick={handleOnClick}
-              >
+              <Button disabled={disabled} key={id} className={`${prefixCls}-extend-btn`} type={btnType} size={btnSize} onClick={handleOnClick}>
                 {iconPos && iconPos === 'left' && icon && (
-                  <CommIcon
-                    icon={icon}
-                    engineApis={engineApis}
-                    getEngineApis={getEngineApis}
-                    $$componentItem={props.$$componentItem}
-                    className=""
-                  />
+                  <CommIcon icon={icon} engineApis={engineApis} getEngineApis={getEngineApis} $$componentItem={props.$$componentItem} className="" />
                 )}
                 {c.title}
                 {iconPos && iconPos === 'right' && icon && (
-                  <CommIcon
-                    icon={icon}
-                    engineApis={engineApis}
-                    getEngineApis={getEngineApis}
-                    $$componentItem={props.$$componentItem}
-                    className=""
-                  />
+                  <CommIcon icon={icon} engineApis={engineApis} getEngineApis={getEngineApis} $$componentItem={props.$$componentItem} className="" />
                 )}
               </Button>
             )
@@ -165,11 +120,7 @@ const useExtendBtn = (props: ExtendProps) => {
       const clicks = [...showBtnClick];
       const preBtn = btnList.splice(0, extendNum);
       const preClicks = clicks.splice(0, extendNum);
-      const content = (
-        <div className={`${prefixCls}-extend-btn-pop`}>
-          {renderBtn(btnList, true, clicks)}
-        </div>
-      );
+      const content = <div className={`${prefixCls}-extend-btn-pop`}>{renderBtn(btnList, true, clicks)}</div>;
       return (
         <>
           {renderBtn(preBtn, false, preClicks)}