@lingxiteam/ebe-utils 0.5.6 → 0.5.8

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

@@ -0,0 +1,29 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useState } from 'react';
+import { useCommonImperativeHandle } from '../utils';
+import UploadLoader from './loader';
+import type { MyUploadProps } from './Upload';
+
+const Upload = LingxiForwardRef<unknown, any>((props, ref) => {
+  const [uploadProps, setUploadProps] =
+    useState<MyUploadProps['uploadProps']>();
+
+  const { formFieldsRef, disabled, readOnly, required } =
+    useCommonImperativeHandle(ref, props, {
+      setUploadProps: (_props: any) => {
+        setUploadProps(_props);
+      },
+    });
+  return (
+    <UploadLoader
+      {...props}
+      uploadProps={uploadProps}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      formFieldsRef={formFieldsRef}
+    />
+  );
+});
+
+export default Upload;

package/lib/public/src/components/pcfactory/src/Upload/loader.tsx

@@ -0,0 +1,13 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const UploadLoader = Loadable({
+  // eslint-disable-next-line func-call-spacing
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'factory-Upload' */ './Upload'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default UploadLoader;

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

@@ -0,0 +1,297 @@
+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';
+
+export interface MyVerificationCodeProps {
+  defaultValue?: any;
+  value?: string;
+  titleShow?: boolean;
+  title?: string;
+  placeholderText?: string;
+  titlePosition?: string;
+  displayStyle?: string;
+  imageURL?: string;
+  countdownTime?: number;
+  style?: any;
+  onChange?: any;
+  onClick?: any;
+  onValueRelease?: any;
+  fieldName?: any;
+  startCountdown?: any;
+  resetCountdown?: any;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  wrapperCol?: any;
+  selfSpan?: any;
+  colSpan?: any;
+  hidden?: any;
+  visible?: boolean;
+  regexp?: any;
+  rules?: any[];
+  name?: string;
+  required?: any;
+  message?: any;
+  compId?: any;
+  colon?: boolean;
+  digit?: number;
+  isFormChild?: boolean;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  titleTip?: any;
+  label?: any;
+  getEngineApis?: any;
+}
+
+const prefixCls = 'verificationCodePC';
+
+const countDownTextFn = (getLocale?: any) => ({
+  refresh: getLocale('VerificationCode.refresh'),
+  send: getLocale('VerificationCode.text'),
+});
+
+const InnerView = (p: any) => {
+  const { renderView, ...restProps } = p;
+  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 engineApis = getEngineApis?.() || {};
+
+    const { getLocale } = useLocale(engineApis);
+
+    const countDownTextMap: any = countDownTextFn(getLocale);
+    const {
+      color,
+      margin: customMargin,
+      display: customDisplay,
+      visibility: customVisibility,
+      ...otherStyle
+    } = style;
+
+    const { inForm } = useForm();
+
+    const [startCountdown, setStartCountdown] = useState<Date>();
+    const [resetCountdown, setResetCountdown] = useState<Date>();
+    const [imageURL, setImageURL] = useState('');
+    const [imgSrc, setImgSrc] = useState(IconPlaceholder);
+    const [countdownText, setCountdownText] = useState('send');
+    const [readingTime, updateTime] = useState();
+    const [errorInfo, setErrorInfo] = useState(null);
+    const [reading, setReading] = useState(false);
+    const time = useRef<any>();
+    const timer = useRef<any>();
+
+    useEffect(() => {
+      setImageURL(myImageURL || '');
+    }, [myImageURL]);
+
+    const getPicVerifyCode = () => {
+      const newTimestamp = new Date().getTime();
+      if (digit && newTimestamp) {
+        try {
+          (async () => {
+            const params = {
+              validateCodeCount: `${digit}`,
+              t: `${newTimestamp}`,
+            };
+            const url = await engineApis?.getValidateCodePicture(params);
+            setImgSrc(url);
+          })();
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    };
+
+    const { disabled, required, readOnly, formFieldsRef, finalRules } =
+      useCommonImperativeHandle(ref, props, {
+        refreshPictureVeriryCode: () => {
+          getPicVerifyCode();
+        },
+        setVerificationCodeImageUrl: (url: string) => {
+          setImageURL(url);
+        },
+        startVerificationCodeCountdown: (start: Date) => {
+          setStartCountdown(start);
+        },
+        resetVerificationCodeCountdown: (reset: Date) => {
+          setResetCountdown(reset);
+        },
+      });
+
+    const countdownReading = () => {
+      timer.current = setInterval(() => {
+        let readingTime = time.current ? time.current : countdownTime;
+        readingTime -= 1;
+        time.current = readingTime;
+        if (readingTime < 1) {
+          setReading(false);
+          setCountdownText('send');
+          clearInterval(timer?.current);
+          updateTime(undefined);
+        } else {
+          setCountdownText('refresh');
+          updateTime(readingTime);
+          // setCountdownText(`${getLocale?.('VerificationCode.refresh')} ${readingTime}s`);
+        }
+      }, 1000);
+    };
+
+    const onMyChange = (e: any) => {
+      if (onChange) {
+        onChange(e.target.value);
+      }
+    };
+
+    const onMyBlur = (e: any) => {
+      setErrorInfo(null);
+      if (!inForm && regexp && e.target.value.length > 0) {
+        regexp.forEach((item: any) => {
+          const { pattern, message: msg } = item;
+          if (pattern && !pattern.test(e.target.value)) {
+            setErrorInfo(msg);
+          }
+        });
+      }
+    };
+
+    /**
+     * 获取验证码
+     * @returns
+     */
+    const renderPicVerifyCode = () => {
+      if (displayStyle === 'random') {
+        return (
+          <img
+            src={imgSrc}
+            alt=""
+            className="imageActive"
+            onClick={(e) => {
+              if (onClick) {
+                onClick(e);
+              } else {
+                getPicVerifyCode();
+              }
+            }}
+          />
+        );
+      }
+      return null;
+    };
+
+    const renderView = (p: any) => {
+      return (
+        <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 === 'countdownStyle' && (
+              <div
+                className={
+                  countdownText === 'send'
+                    ? 'sendButtonActive'
+                    : 'sendButtonDisable'
+                }
+                style={countdownText === 'send' ? { color } : {}}
+                onClick={onClick}
+              >
+                {`${countDownTextMap[countdownText]}${
+                  countdownText === 'refresh' ? ` ${readingTime}s` : ''
+                }`}
+              </div>
+            )}
+            {renderPicVerifyCode()}
+          </div>
+          {errorInfo && (
+            <span className={`${prefixCls}-errorNotice`}>{errorInfo}</span>
+          )}
+        </div>
+      );
+    };
+
+    // 开始倒计时
+    useEffect(() => {
+      if (startCountdown && displayStyle === 'countdownStyle') {
+        if (reading) return;
+        setReading(true);
+        countdownReading();
+      }
+    }, [startCountdown]);
+
+    // 重置倒计时
+    useEffect(() => {
+      if (resetCountdown && displayStyle === 'countdownStyle') {
+        setReading(false);
+        setCountdownText(getLocale?.('VerificationCode.text'));
+        clearInterval(timer?.current);
+        time.current = null;
+      }
+    }, [resetCountdown]);
+
+    useEffect(() => {
+      if (displayStyle === 'random') {
+        // 随机数的情况下自动刷新
+        getPicVerifyCode();
+      }
+    }, [displayStyle, digit]);
+
+    return (
+      <FormFields
+        {...getFieldsProps(props)}
+        ref={formFieldsRef}
+        trigger="onChange"
+        required={required}
+        disabled={disabled as any}
+        readOnly={readOnly}
+        validateTrigger="onBlur"
+        rules={finalRules}
+      >
+        <InnerView
+          renderView={renderView}
+          onChange={onMyChange}
+          onBlur={onMyBlur}
+        />
+      </FormFields>
+    );
+  },
+);
+
+export default VerificationCode;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export interface VerticalViewProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  visible?: boolean;
+}
+
+const VerticalView: React.FC<VerticalViewProps> = (props) => {
+  const { children, style, className, visible = true } = props;
+
+  return visible ? (
+    <div
+      style={style}
+      className={className}
+      data-compid={(props as any)?.['data-compid']}
+    >
+      {children}
+    </div>
+  ) : null;
+};
+
+export default VerticalView;

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

@@ -0,0 +1,159 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactPlayerProps } from 'react-player';
+import ReactPlayer from 'react-player';
+
+const VideoPlayer: React.FC<ReactPlayerProps> = (props, ref) => {
+  const {
+    style,
+    volume = 100,
+    fileCode,
+    playing,
+    url,
+    streamType,
+    videoCode,
+    playbackRate,
+    speed,
+    getEngineApis,
+    onReady,
+    onStart,
+    onPlay,
+    onPause,
+    onProgress,
+    onError,
+    onDuration,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const { width, height, ...restStyle } = style || {};
+  const [videoHeight, setVideoHeight] = useState<any>();
+  const [light, setLight] = useState<any>(false);
+  const videoRef = useRef<any>();
+  const [curPlaying, setCurPlaying] = useState(playing);
+  const [videoUrl, setVideoUrl] = useState<any>('');
+  const totalTime = useRef<number>();
+  const rate = useMemo(() => {
+    if (
+      speed &&
+      typeof playbackRate === 'number' &&
+      playbackRate &&
+      playbackRate > 0
+    ) {
+      return playbackRate;
+    }
+    return 1;
+  }, [playbackRate, speed]);
+
+  useEffect(() => {
+    setCurPlaying(playing);
+  }, [playing]);
+
+  /**
+   * 音量的值为0-1
+   */
+  const myVolume = useMemo(() => {
+    if (!isNaN(volume)) {
+      return volume / 100;
+    }
+    return 1;
+  }, [volume]);
+  useEffect(() => {
+    if (!height && videoRef?.current?.offsetWidth) {
+      // UI要求默认按照16:9设置高度
+      const targetHeigth = (videoRef?.current?.offsetWidth / 16) * 9;
+      setVideoHeight(targetHeigth);
+    } else {
+      setVideoHeight(height);
+    }
+  }, [height]);
+
+  /**
+   * 封面图片
+   */
+  useEffect(() => {
+    if (fileCode) {
+      try {
+        (async () => {
+          setLight(
+            await engineApis?.service?.getAppFileUrlByFileCode(fileCode),
+          );
+        })();
+      } catch (e) {
+        console.log(`获取视频封面出错:${e}`);
+      }
+    } else {
+      setLight(false);
+    }
+  }, [fileCode]);
+
+  useEffect(() => {
+    if (streamType === 'fileCode') {
+      if (videoCode) {
+        try {
+          (async () => {
+            setVideoUrl(
+              await engineApis?.service?.getAppFileUrlByFileCode(videoCode),
+            );
+          })();
+        } catch (e) {
+          console.log(`获取视频资源出错:${e}`);
+        }
+      } else {
+        setVideoUrl('');
+      }
+    } else {
+      setVideoUrl(url);
+    }
+  }, [streamType, videoCode, url]);
+  return (
+    <div
+      ref={videoRef}
+      style={{
+        width: '100%',
+        height: videoHeight,
+        borderRadius: style?.borderRadius || '0px',
+      }}
+    >
+      <ReactPlayer
+        width={width || '100%'}
+        height={videoHeight || '100%'}
+        style={restStyle}
+        volume={myVolume}
+        light={light}
+        playing={curPlaying}
+        playbackRate={rate}
+        onClickPreview={() => {
+          setCurPlaying(true); // 点击封面的图标加载完成需要自动播放
+        }}
+        onEnded={() => {
+          if (!playing) {
+            // 当前没有设置自动播放则需要在播放完成时将自动播放的时改为用户设置的值
+            setCurPlaying(false);
+          }
+          if (props?.onEnded) {
+            // 播放结束，回掉总时长
+            // @ts-ignore
+            props?.onEnded(totalTime.current);
+          }
+        }}
+        url={videoUrl}
+        onReady={onReady}
+        onStart={onStart}
+        onPlay={onPlay}
+        onPause={onPause}
+        onProgress={onProgress}
+        onError={onError}
+        onDuration={(total: number) => {
+          totalTime.current = total;
+          onDuration && onDuration(total);
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+VideoPlayer.displayName = 'VideoPlayer';
+
+export default VideoPlayer;

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

@@ -0,0 +1,150 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Spin } from 'antd';
+import React, {
+  CSSProperties,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useHiddenStyle, useListenProps } from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import useBackgroundStyle from './useBackgroundStyle';
+
+export interface MyViewProps {
+  style: React.CSSProperties;
+  className: string;
+  visible: boolean;
+  backgroundType?: any;
+  appId?: string;
+  loading?: boolean;
+  getEngineApis?: any;
+  visibility?: boolean;
+}
+
+const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
+  const {
+    children,
+    style,
+    className,
+    visible = true,
+    backgroundType,
+    getEngineApis,
+    visibility = false,
+    ...restProps
+  } = props;
+
+  const [loading, setLoading] = useListenProps(props.loading);
+
+  const engineApis = getEngineApis?.() || {};
+
+  const { getLocale, lang } = useLocale(engineApis);
+
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    appId: restProps?.appId,
+    mode: 'engine',
+  });
+
+  const finalStyle = useHiddenStyle(visible, style, visibility);
+
+  const containerRef = useRef<any>();
+  const loadingRef = useRef<any>();
+
+  const [reload, setReload] = useState<number>(0);
+
+  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,
+      };
+
+      res.position = 'absolute';
+      res.width = `${offsetWidth}px`;
+      res.height = `${offsetHeight}px`;
+      res.zIndex = containerRefProps.zIndex;
+      res.backgroundColor = 'rgba(255,255,255,0.5)';
+      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)`;
+      }
+    }
+    if (!isShow) {
+      res.display = 'none';
+    }
+    return res;
+  };
+
+  const renderLoadingComp = useMemo(() => {
+    if (loading && loadingRef.current) {
+      return (
+        <div style={getLoadingStyle(true)}>
+          <Spin tip={getLocale?.('loading')} />
+        </div>
+      );
+    }
+    return null;
+  }, [loading, loadingRef.current, reload, lang]);
+
+  useEffect(() => {
+    if (loading) {
+      setReload(reload + 1);
+    }
+  }, [loading]);
+
+  useImperativeHandle(ref, () => ({
+    setLoading(_loading: boolean) {
+      setLoading(_loading);
+    },
+  }));
+
+  // if (visible === false) {
+  //   return null;
+  // }
+
+  return (
+    <div
+      style={{
+        ...backgroundStyle,
+        ...finalStyle,
+      }}
+      className={className}
+      data-compid={props?.['data-compid']}
+      {...restProps}
+      ref={containerRef}
+    >
+      {children}
+      {/* loading 定位元素 */}
+      {loading && (
+        <div
+          style={{
+            width: 0,
+            height: 0,
+            position: 'relative',
+            backgroundColor: 'transparent',
+            visibility: loading ? 'visible' : 'hidden',
+          }}
+          ref={loadingRef}
+        >
+          {renderLoadingComp}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default View;