@lingxiteam/ebe-utils 0.5.11 → 0.6.2

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

@@ -0,0 +1,211 @@
+import React, { useEffect, useState, useRef, forwardRef, useMemo } from 'react';
+import { PlayButton, VolumeControl, Timer, Progress } from 'react-soundplayer/components';
+// it's just an alias for `withSoundCloudAudio` but makes code clearer
+import { withCustomAudio } from 'react-soundplayer/addons';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { useLocale } from '../utils/hooks/useLocale';
+
+export interface MyAudioProps {
+  audioTitle?: string;
+  autoPlay?: string;
+  preloadType?: string;
+  streamUrl?: string;
+  streamType?: string;
+  fileCode?: string;
+  hideType?: string;
+  visible?: boolean;
+  play?: any;
+  pause?: any;
+  style?: React.CSSProperties;
+  backgroundType?: any;
+  appId?: string;
+  getEngineApis?: any;
+  audioStatus: 'play' | 'pasue' | 'toggle';
+}
+
+// const prefixCls = 'audio';
+
+const AudioClsWrapper = 'AWSSoundPlayer';
+
+function getAbsoluteUrl(path?: string) {
+  if (path) {
+    if (path.startsWith('http:') || path.startsWith('https:')) {
+      return path;
+    }
+    if (path.startsWith('/')) {
+      return window.location.origin + path;
+    }
+  }
+  return path;
+}
+
+// 预留扩展
+// PlayButton, VolumeControl 等可支持换皮肤
+const CustomAudio = withCustomAudio((props: any) => {
+  const {
+    audioTitle,
+    soundCloudAudio,
+    autoPlay,
+    hideType,
+    visible,
+    style,
+    backgroundType,
+    appId,
+    engineApis,
+  } = props;
+
+  // preloadType = "none" // auto | metadata | none
+  const otherProps = useMemo(() => {
+    return { ...props, style: null };
+  }, [props]);
+  const { audio } = soundCloudAudio || {};
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId, mode: 'engine' });
+  if (autoPlay && audio && !audio.autoPlay) {
+    audio.autoplay = true;
+  }
+  if (audio && !audio.crossOrigin) {
+    audio.crossOrigin = 'anonymous';
+  }
+  if (!visible) {
+    if (hideType === 'hidden') {
+      return (
+        <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} />
+            <VolumeControl {...otherProps} />
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }
+  return (
+    <div className={AudioClsWrapper} style={{ ...style, ...backgroundStyle }}>
+      <div className={`${AudioClsWrapper}-audioTitle`}>{audioTitle}</div>
+      <div className={`${AudioClsWrapper}-audioContent`}>
+        <PlayButton {...otherProps} />
+        <Timer className={`${AudioClsWrapper}-audioTimer`} {...otherProps} />
+        <Progress className={`${AudioClsWrapper}-progress`} {...otherProps} />
+        <VolumeControl {...otherProps} />
+      </div>
+    </div>
+  );
+});
+
+const Audio: React.FC<MyAudioProps> = forwardRef((props, ref) => {
+  const {
+    audioTitle,
+    autoPlay,
+    preloadType,
+    streamUrl,
+    streamType,
+    fileCode,
+    visible,
+    hideType,
+    style,
+    backgroundType,
+    appId,
+    getEngineApis,
+    audioStatus,
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+  
+  const [audioUrl, setAudioUrl] = useState<any>('');
+  const sRef = useRef();
+  
+  useEffect(() => {
+    if (streamType === 'fileCode') { // 选择的文件资源
+      if (fileCode) {
+        (async () => {
+          try {
+            const url = await engineApis?.service?.getAppFileUrlByFileCode(fileCode);
+            setAudioUrl(url);
+          } catch (e) {
+            console.error(`${getLocale?.('Audio.warning')}:${e}`);
+          }
+        })();
+      } else {
+        setAudioUrl('');
+      }
+    } else if (streamUrl) {
+      setAudioUrl(getAbsoluteUrl(streamUrl));// 外部资源
+    }
+  }, [streamType, fileCode, streamUrl]);
+
+  const onMediaPlay = () => {
+    if (!visible && hideType === 'remove') {
+      console.info(getLocale?.('Audio.cannotPlay'));
+    } else if (sRef && sRef?.current) {
+      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
+      if (targetAudio?.play) {
+        targetAudio?.play();
+      }
+    }
+  };
+  const onMediaPause = () => {
+    if (!visible && hideType === 'remove') {
+      console.info(getLocale?.('Audio.cannotStop'));
+    } else if (sRef && sRef?.current) {
+      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
+      if (targetAudio?.pause) {
+        targetAudio?.pause();
+      }
+    }
+  };
+  const onMediaToggle = () => {
+    if (!visible && hideType === 'remove') {
+      console.info(getLocale?.('Audio.cannotSwitch'));
+    } else if (sRef && sRef?.current) {
+      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
+      const paused = targetAudio?.paused;
+      if (targetAudio) {
+        if (!paused && targetAudio?.pause) {
+          targetAudio?.pause();
+        } else if (paused && targetAudio?.play) {
+          targetAudio?.play();
+        }
+      }
+    }
+  };
+
+  const toggelAudioStatus = (type: string) => {
+    switch (type) {
+      case 'play':
+        onMediaPlay();
+        break;
+      case 'pasue':
+        onMediaPause();
+        break;
+      case 'toggle':
+        onMediaToggle();
+        break;
+      default:
+        break;
+    }
+  };
+  useEffect(() => {
+    toggelAudioStatus(audioStatus);
+  }, [audioStatus]);
+  return (
+    <CustomAudio
+      audioTitle={audioTitle}
+      autoPlay={autoPlay}
+      preloadType={preloadType}
+      streamUrl={audioUrl}
+      visible={visible}
+      hideType={hideType}
+      ref={sRef}
+      style={style}
+      backgroundType={backgroundType}
+      appId={appId}
+      engineApis={engineApis}
+    />
+  );
+});
+
+export default Audio;

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

@@ -1,195 +1,17 @@
-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';
-import useBackgroundStyle from '../View/useBackgroundStyle';
+import React, { useState, useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import AudioLoader from './loader';
 
-export interface MyAudioProps {
-  audioTitle?: string;
-  autoPlay?: string;
-  preloadType?: string;
-  streamUrl?: string;
-  streamType?: string;
-  fileCode?: string;
-  hideType?: string;
-  visible?: boolean;
-  play?: any;
-  pause?: any;
-  style?: React.CSSProperties;
-  backgroundType?: any;
-  appId?: string;
-  getEngineApis?: any;
-}
+const Audio = LingxiForwardRef<unknown, any>((props, ref) => {
+  const [audioStatus, toggelAudioStatus] = useState<'play' | 'pasue' | 'toggle'>();
 
-// const prefixCls = 'audio';
-
-const AudioClsWrapper = 'AWSSoundPlayer';
-
-function getAbsoluteUrl(path?: string) {
-  if (path) {
-    if (path.startsWith('http:') || path.startsWith('https:')) {
-      return path;
-    }
-    if (path.startsWith('/')) {
-      return window.location.origin + path;
-    }
-  }
-  return path;
-}
-
-// 预留扩展
-// PlayButton, VolumeControl 等可支持换皮肤
-const CustomAudio = withCustomAudio((props: any) => {
-  const { audioTitle, soundCloudAudio, autoPlay, hideType, visible, style, backgroundType, appId, engineApis } = props;
-
-  // preloadType = "none" // auto | metadata | none
-  const otherProps = useMemo(() => {
-    return { ...props, style: null };
-  }, [props]);
-  const { audio } = soundCloudAudio || {};
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId,
-    mode: 'engine',
-  });
-  if (autoPlay && audio && !audio.autoPlay) {
-    audio.autoplay = true;
-  }
-  if (audio && !audio.crossOrigin) {
-    audio.crossOrigin = 'anonymous';
-  }
-  if (!visible) {
-    if (hideType === 'hidden') {
-      return (
-        <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} />
-            <VolumeControl {...otherProps} />
-          </div>
-        </div>
-      );
-    }
-    return null;
-  }
-  return (
-    <div className={AudioClsWrapper} style={{ ...style, ...backgroundStyle }}>
-      <div className={`${AudioClsWrapper}-audioTitle`}>{audioTitle}</div>
-      <div className={`${AudioClsWrapper}-audioContent`}>
-        <PlayButton {...otherProps} />
-        <Timer className={`${AudioClsWrapper}-audioTimer`} {...otherProps} />
-        <Progress className={`${AudioClsWrapper}-progress`} {...otherProps} />
-        <VolumeControl {...otherProps} />
-      </div>
-    </div>
-  );
-});
-
-const Audio: React.FC<MyAudioProps> = forwardRef((props, ref) => {
-  const { audioTitle, autoPlay, preloadType, streamUrl, streamType, fileCode, visible, hideType, style, backgroundType, appId, getEngineApis } =
-    props;
-
-  const engineApis = getEngineApis?.() || {};
-  const { getLocale } = useLocale(engineApis);
-
-  const [audioUrl, setAudioUrl] = useState<any>('');
-  const sRef = useRef();
-
-  useEffect(() => {
-    if (streamType === 'fileCode') {
-      // 选择的文件资源
-      if (fileCode) {
-        (async () => {
-          try {
-            const url = await engineApis?.service?.getAppFileUrlByFileCode(fileCode);
-            setAudioUrl(url);
-          } catch (e) {
-            console.error(`${getLocale?.('Audio.warning')}:${e}`);
-          }
-        })();
-      } else {
-        setAudioUrl('');
-      }
-    } else if (streamUrl) {
-      setAudioUrl(getAbsoluteUrl(streamUrl)); // 外部资源
-    }
-  }, [streamType, fileCode, streamUrl]);
-
-  const onMediaPlay = () => {
-    if (!visible && hideType === 'remove') {
-      console.info(getLocale?.('Audio.cannotPlay'));
-    } else if (sRef && sRef?.current) {
-      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
-      if (targetAudio?.play) {
-        targetAudio?.play();
-      }
-    }
-  };
-  const onMediaPause = () => {
-    if (!visible && hideType === 'remove') {
-      console.info(getLocale?.('Audio.cannotStop'));
-    } else if (sRef && sRef?.current) {
-      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
-      if (targetAudio?.pause) {
-        targetAudio?.pause();
-      }
-    }
-  };
-  const onMediaToggle = () => {
-    if (!visible && hideType === 'remove') {
-      console.info(getLocale?.('Audio.cannotSwitch'));
-    } else if (sRef && sRef?.current) {
-      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
-      const paused = targetAudio?.paused;
-      if (targetAudio) {
-        if (!paused && targetAudio?.pause) {
-          targetAudio?.pause();
-        } else if (paused && targetAudio?.play) {
-          targetAudio?.play();
-        }
-      }
-    }
-  };
-
-  const toggelAudioStatus = (type: string) => {
-    switch (type) {
-      case 'play':
-        onMediaPlay();
-        break;
-      case 'pasue':
-        onMediaPause();
-        break;
-      case 'toggle':
-        onMediaToggle();
-        break;
-      default:
-        break;
-    }
-  };
   useImperativeHandle(ref, () => ({
-    onOperationAudio: (status: string) => {
+    onOperationAudio: (status: 'play' | 'pasue' | 'toggle') => {
       toggelAudioStatus(status);
     },
   }));
-  return (
-    <CustomAudio
-      audioTitle={audioTitle}
-      autoPlay={autoPlay}
-      preloadType={preloadType}
-      streamUrl={audioUrl}
-      visible={visible}
-      hideType={hideType}
-      ref={sRef}
-      style={style}
-      backgroundType={backgroundType}
-      appId={appId}
-      engineApis={engineApis}
-    />
-  );
+
+  return <AudioLoader {...props} audioStatus={audioStatus} />;
 });
 
 export default Audio;

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

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const ReactChartsLoader = Loadable({
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-Audio' */('./Audio')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ReactChartsLoader;

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

@@ -7,10 +7,11 @@ import { handleIsValidIconCfg } from '../Icon/hooks';
 import { useListenProps, useListenToggleBoolean } from '../utils';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import useDoubleClick from '../utils/hooks/useDoubleClick';
+import classnames from 'classnames';
 
 const WrapperButton = ({ children }: Record<string, any>) =>
   React.cloneElement(children, {
-    className: `ued-button-wrap ${children.props.className || ''}`,
+    className: `ued-button-wrap${children.props.size === 'mini' ? ' pcfactory-btn-mini' : ''} ${children.props.className || ''}`,
   });
 
 export interface MyButtonProps extends ButtonProps {
@@ -59,6 +60,7 @@ const MyButton = LingxiForwardRef<any, MyButtonProps>((props, ref) => {
     $$componentItem,
     onDoubleClick,
     onClick,
+    className,
     ...restProps
   } = props;
 
@@ -113,12 +115,24 @@ const MyButton = LingxiForwardRef<any, MyButtonProps>((props, ref) => {
     } else {
       curWidth = 'fit-content';
     }
+    if (restProps.type === 'primary' && style.color) {
+      delete style.color;
+    }
     return { width: curWidth, ...style };
-  }, [style, block]);
+  }, [style, block, restProps.type]);
 
   return visible ? (
     <WrapperButton>
-      <Button {...restProps} style={{ ...(myStyle || {}) }} loading={loading} disabled={disabled} {...events}>
+      <Button
+        {...restProps}
+        style={{ ...(myStyle || {}) }}
+        className={classnames({
+          [className]: true,
+        })}
+        loading={loading}
+        disabled={disabled}
+        {...events}
+      >
         {iconPosition === 'left' && hasIcon && (
           // @ts-ignore
           <CommIcon svgContent={svgContent} icon={iconRest} getEngineApis={getEngineApis} />

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

@@ -45,6 +45,7 @@ export interface MyCardProps extends CardProps {
   subTitleFont?: string;
   subTitleLineHeight?: string;
   subTitleFontWeight?: number;
+  extra?: React.ReactNode;
 }
 
 const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
@@ -84,6 +85,7 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
     subTitleFont,
     subTitleLineHeight,
     subTitleFontWeight,
+    extra,
     ...restProps
   } = props;
   const [loading, setLoading] = useState(props.loading);
@@ -198,6 +200,9 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
   // if (visible === false) {
   //   return null;
   // }
+  const genExtra = () => (
+    <>{extra || <></>}</>
+  );
   return (
     <Card
       style={finalStyle}
@@ -213,7 +218,14 @@ const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
         display: ['flex', 'table', undefined].includes(headStyle.display) ? 'block' : headStyle.display,
       }}
       bodyStyle={padding ? { padding, ...backgroundStyle, ...bodyStyleRelative } : { ...backgroundStyle, ...bodyStyleRelative }}
-      extra={<div className="ued-card-extend">{renderExtendBtn()}</div>}
+      extra={(
+        <>
+          {genExtra()}
+          <div className="ued-card-extend">
+            {renderExtendBtn()}
+          </div>
+        </>
+      )}
     >
       {/** Card 的loingd 会导致子容器重新刷新 */}
       {loading === true && <Skeleton loading active paragraph={{ rows: 4 }} title={false} className="ued-card-children-skeleton" />}

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

@@ -6,6 +6,7 @@ import CommIcon from '../Icon';
 import React from 'react';
 import { useLocale } from '../utils/hooks/useLocale';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
+import { WrapperButton } from '../Button';
 
 interface ExtendProps {
   extend?: Array<{icon: IconCfg,
@@ -81,15 +82,44 @@ const useExtendBtn = (props: ExtendProps) => {
               )
             ) : isPopover ? (
               <div>
+                <WrapperButton>
+                  <Button
+                    disabled={disabled}
+                    key={id}
+                    type="link"
+                    size={btnSize}
+                    onClick={handleOnClick}
+                  >
+                    {iconPos && iconPos === 'left' && icon &&
+                    <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=""
+                    />}
+                  </Button>
+                </WrapperButton>
+              </div>
+            ) : (
+              <WrapperButton>
                 <Button
                   disabled={disabled}
                   key={id}
-                  type="link"
+                  className={`${prefixCls}-extend-btn`}
+                  type={btnType}
                   size={btnSize}
                   onClick={handleOnClick}
                 >
-                  {iconPos && iconPos === 'left' && icon &&
-                  <CommIcon
+                  {iconPos && iconPos === 'left' && icon && <CommIcon
                     icon={icon}
                     engineApis={engineApis}
                     getEngineApis={getEngineApis}
@@ -105,32 +135,7 @@ const useExtendBtn = (props: ExtendProps) => {
                     className=""
                   />}
                 </Button>
-              </div>
-            ) : (
-              <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=""
-                />}
-                {c.title}
-                {iconPos && iconPos === 'right' && icon && <CommIcon
-                  icon={icon}
-                  engineApis={engineApis}
-                  getEngineApis={getEngineApis}
-                  $$componentItem={props.$$componentItem}
-                  className=""
-                />}
-              </Button>
+              </WrapperButton>
             )
           ) : null
         );