@lingxiteam/ebe-utils 0.5.1 → 0.5.2

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

@@ -0,0 +1,240 @@
+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';
+
+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 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) {
+        try {
+          (async () => {
+            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) => {
+      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}
+    />
+  );
+});
+
+export default Audio;

package/lib/public/src/components/pcfactory/src/BarChart/index.tsx

@@ -0,0 +1,3 @@
+import c from '../ReactECharts';
+
+export default c;

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

@@ -0,0 +1,151 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Button } from 'antd';
+import type { ButtonProps } from 'antd/lib/button';
+import React, { useImperativeHandle, useMemo } from 'react';
+import CommIcon from '../Icon';
+import type { IconCfg } from '../Icon/PropsType';
+import { useListenProps, useListenToggleBoolean } from '../utils';
+import useDoubleClick from '../utils/hooks/useDoubleClick';
+
+const WrapperButton = ({ children }: Record<string, any>) =>
+  React.cloneElement(children, {
+    className: `ued-button-wrap ${children.props.className || ''}`,
+  });
+
+export interface MyButtonProps extends ButtonProps {
+  visible?: boolean;
+  name?: string;
+  iconPosition?: string;
+  selfSpan?: any;
+  style?: any;
+  _component?: any;
+  colSpan?: string;
+  hidden?: boolean;
+  compType?: string;
+  pageState?: any;
+  pagePublicState?: any;
+  classification?: any;
+  autoProcessFlow?: any;
+  flowProcessResult?: any;
+  hasIcon?: boolean; // 是否有按钮图标
+  loadingText?: string;
+  btnText?: string;
+  icon?: IconCfg;
+  getEngineApis?: any;
+}
+
+const MyButton = LingxiForwardRef<any, MyButtonProps>((props, ref) => {
+  const {
+    visible = true,
+    name,
+    iconPosition: iconPositionProps,
+    selfSpan,
+    colSpan,
+    hidden,
+    compType,
+    pageState,
+    pagePublicState,
+    classification,
+    autoProcessFlow,
+    flowProcessResult,
+    icon: iconProps = {},
+    style,
+    block,
+    hasIcon: hasIconProp,
+    loadingText,
+    btnText: btnTextProp,
+    getEngineApis,
+    $$componentItem,
+    onDoubleClick,
+    onClick,
+    ...restProps
+  } = props;
+
+  const events = useDoubleClick({
+    clickName: 'onClick',
+    doubleClickName: 'onDoubleClick',
+    events: {
+      onClick,
+      onDoubleClick,
+    },
+  });
+  const [loading, setLoading] = useListenToggleBoolean(props.loading);
+  const [disabled, setDisabled] = useListenToggleBoolean(props.disabled);
+
+  const [btnText, setBtnText] = useListenProps<string | undefined>(
+    btnTextProp || name,
+  );
+  const [icon, setIcon] = useListenProps(iconProps);
+  const { svgContent, ...iconRest } = icon;
+
+  const [hasIcon, setHasIcon] = useListenProps(hasIconProp);
+
+  const [iconPosition, setIconPosition] = useListenProps(iconPositionProps);
+
+  useImperativeHandle(ref, () => ({
+    disabled,
+    changeContent(contentData: any) {
+      if (contentData?.name) {
+        setBtnText(contentData.name);
+        delete contentData.name;
+        if (contentData?.theme) {
+          setHasIcon(true);
+          if (!iconPosition) {
+            setIconPosition('left');
+          }
+          // icon 接收的是type 需要转化
+          setIcon({ ...contentData, type: contentData.iconType });
+        }
+      }
+    },
+    setLoading,
+    setDisabled,
+  }));
+
+  const myStyle = useMemo(() => {
+    let curWidth = 'fit-content';
+    if (style?.width) {
+      // 自定义宽度优先级最高
+      curWidth = style?.width;
+    } else if (block) {
+      // 设置按钮为块
+      curWidth = '100%';
+    } else {
+      curWidth = 'fit-content';
+    }
+    return { width: curWidth, ...style };
+  }, [style, block]);
+
+  return visible ? (
+    <WrapperButton>
+      <Button
+        {...restProps}
+        style={{ ...(myStyle || {}) }}
+        loading={loading}
+        disabled={disabled}
+        {...events}
+      >
+        {iconPosition === 'left' && hasIcon && (
+          // @ts-ignore
+          <CommIcon
+            svgContent={svgContent}
+            icon={iconRest}
+            getEngineApis={getEngineApis}
+          />
+        )}
+        {loading ? loadingText : btnText || name}
+        {iconPosition === 'right' && hasIcon && (
+          // @ts-ignore
+          <CommIcon
+            svgContent={svgContent}
+            icon={iconRest}
+            getEngineApis={getEngineApis}
+          />
+        )}
+      </Button>
+    </WrapperButton>
+  ) : null;
+});
+
+export default MyButton;
+export { WrapperButton };

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

@@ -0,0 +1,201 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Card, Skeleton } from 'antd';
+import type { CardProps } from 'antd/lib/card';
+import classnames from 'classnames';
+import React, { useImperativeHandle, useMemo, useState } from 'react';
+import CommIcon from '../Icon';
+import { useHiddenStyle } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import useExtendBtn from './useExtendBtn';
+
+export type FunctionHandleType = (e: any) => void;
+
+export interface MyCardProps extends CardProps {
+  prefixIcon?: any;
+  name?: string;
+  hasHeader?: boolean;
+  hasIcon?: string;
+  pageState: any;
+  pagePublicState: any;
+  className: string;
+  cardIconType: string;
+  titleColor: string;
+  headerColor?: string;
+  extend?: any;
+  visible?: boolean;
+  size?: any;
+  onValueRelease?: FunctionHandleType;
+  onSelectedRowsRelease?: FunctionHandleType;
+  onSelectedRowKeysRelease?: FunctionHandleType;
+  onSelectedKeysRelease?: FunctionHandleType;
+  onEditingKeyRelease?: FunctionHandleType;
+  onInlineEditRelease?: FunctionHandleType;
+  onInlineSaveRelease?: FunctionHandleType;
+  onSelectedDataRelease?: FunctionHandleType;
+  extendNum?: number;
+  backgroundType?: any;
+  appId?: string;
+  getEngineApis?: any;
+}
+
+const MyCard = LingxiForwardRef<any, MyCardProps>((props, ref) => {
+  const {
+    children,
+    style,
+    name,
+    hasHeader,
+    hasIcon,
+    title,
+    headerColor,
+    extend,
+    size = 'small',
+    visible = true,
+    onValueRelease,
+    onSelectedRowsRelease,
+    onSelectedRowKeysRelease,
+    onSelectedKeysRelease,
+    onEditingKeyRelease,
+    onInlineEditRelease,
+    onInlineSaveRelease,
+    onSelectedDataRelease,
+    pageState,
+    pagePublicState,
+    className,
+    cardIconType,
+    titleColor,
+    backgroundType,
+    appId,
+    prefixIcon = {},
+    getEngineApis,
+    ...restProps
+  } = props;
+  const [loading, setLoading] = useState(props.loading);
+  const engineApis = getEngineApis?.() || {};
+
+  const { padding, ...restStyle } = style || {};
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    appId,
+    mode: 'engine',
+  });
+
+  const { renderExtendBtn } = useExtendBtn({ ...props, prefixCls: 'ued-card' });
+
+  const headStyle = useMemo(() => {
+    const s: React.CSSProperties = {};
+    if (headerColor) {
+      s.backgroundColor = headerColor;
+    }
+    if (hasHeader === false) {
+      s.display = 'none';
+    }
+    return s;
+  }, [headerColor, hasHeader]);
+  const bodyStyleRelative = useMemo(() => {
+    if (loading === true) {
+      return {
+        position: 'relative',
+      };
+    }
+    return {};
+  }, [loading]);
+  const renderTitle = () => {
+    const cardTitle = titleColor ? (
+      <div style={{ color: titleColor }}>{title}</div>
+    ) : (
+      title
+    );
+
+    if (hasIcon || cardIconType) {
+      switch (cardIconType) {
+        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>
+          );
+        case 'auto': {
+          const {
+            prefixIconIsIconFont,
+            prefixIconFontAddress,
+            prefixIconTheme,
+            prefixIconType,
+            prefixIconiconFile,
+            prefixIconIconFileInfo,
+          } = prefixIcon;
+          return (
+            <div className="ued-card-title ued-card-title-icon-auto">
+              <CommIcon
+                icon={{
+                  type: prefixIconType,
+                  theme: prefixIconTheme,
+                  isIconFont: prefixIconIsIconFont,
+                  fontAddress: prefixIconFontAddress,
+                  iconFile: prefixIconiconFile,
+                  iconFileInfo: prefixIconIconFileInfo,
+                }}
+                engineApis={engineApis}
+                getEngineApis={getEngineApis}
+                $$componentItem={props.$$componentItem}
+                className=""
+              />
+              {cardTitle}
+            </div>
+          );
+        }
+        case 'none':
+          return cardTitle;
+        default:
+          return <div className="ued-card-title">{cardTitle}</div>;
+      }
+    } else {
+      return cardTitle;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    setLoading: (_loading: boolean) => {
+      setLoading(_loading);
+    },
+  }));
+
+  const finalStyle = useHiddenStyle(visible, restStyle);
+  // if (visible === false) {
+  //   return null;
+  // }
+  return (
+    <Card
+      style={finalStyle}
+      {...restProps}
+      className={classnames('ued-card', className, {
+        'ued-card-simple': cardIconType === 'middle',
+      })}
+      size={size}
+      title={renderTitle()}
+      headStyle={headStyle}
+      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"
+        />
+      )}
+      {children}
+    </Card>
+  );
+});
+
+export default MyCard;