@lingxiteam/ebe-utils 0.6.1 → 0.6.3

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

@@ -1,29 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,297 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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;