@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/Text/index.tsx

@@ -0,0 +1,118 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useMemo } from 'react';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+
+export interface MyTextprops {
+  showHtml?: boolean;
+  visible?: boolean;
+  name?: string;
+  style?: React.CSSProperties;
+  textReg?: any;
+}
+
+const Text = LingxiForwardRef<any, MyTextprops>((props, ref) => {
+  const {
+    children,
+    name,
+    textReg,
+    showHtml = false,
+    visible = true,
+    style,
+    ...restProps
+  } = props;
+
+  const hiddenStyle = useHiddenStyle(visible, style);
+
+  /**
+   * attrNbrInfo 静态数据的值，预处理的上报随后返回
+   */
+  const { customs, attrNbrInfo } = textReg || {};
+
+  const getRegStr = (str: string) =>
+    /^\/.+\/.*/g.test(str) ? str.replace(/^\//, '').replace(/\/$/g, '') : str;
+
+  const getRegMap = (
+    array: string[],
+    originKey: string,
+    targetKey: string,
+  ): [Record<string, any>, string[]] => {
+    const regExpMap = {};
+    const regExpSort = [...array].sort(
+      (a: any, b: any) =>
+        String(b[originKey]).length - String(a[originKey]).length,
+    );
+    regExpSort.forEach((c) => {
+      // @ts-ignore
+      regExpMap[getRegStr(c[originKey])] = c[targetKey];
+    });
+    // @ts-ignore
+    return [regExpMap, regExpSort.map((c) => c[originKey])];
+  };
+  const getRegMapItem = (map: any, item: string) => {
+    const key = Object.keys(map).find((c) => new RegExp(c).test(item)) || '';
+    return map[key];
+  };
+  const getFinalStr = (
+    array: string[],
+    originKey: string,
+    targetKey: string,
+  ) => {
+    const [customRegMap, customRegSort] = getRegMap(
+      array,
+      originKey,
+      targetKey,
+    );
+    const reStr = `(${customRegSort.join('|')})`;
+    const newReg = new RegExp(reStr, 'g');
+    const pcontent = typeof children === 'string' ? children : '';
+    return pcontent.replace(
+      newReg,
+      (it) => customRegMap[it] || getRegMapItem(customRegMap, it),
+    );
+  };
+  const showContent = useMemo(() => {
+    if (textReg) {
+      if (Array.isArray(attrNbrInfo) && attrNbrInfo.length) {
+        return attrNbrInfo?.length
+          ? getFinalStr(attrNbrInfo, 'value', 'label')
+          : children;
+      }
+      if (Array.isArray(customs) && customs.length) {
+        return getFinalStr(customs, 'text', 'translation');
+      }
+    }
+    return children;
+  }, [children, attrNbrInfo]);
+
+  return (
+    <>
+      {showHtml ? (
+        <span
+          style={{
+            whiteSpace: 'pre-wrap',
+            ...hiddenStyle,
+          }}
+          aria-label="factory-text"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: (showContent || name) as any }}
+          {...restProps}
+        />
+      ) : (
+        <span
+          aria-label="factory-text"
+          style={{
+            whiteSpace: 'pre-wrap',
+            ...hiddenStyle,
+          }}
+          {...restProps}
+        >
+          {showContent || name}
+        </span>
+      )}
+    </>
+  );
+});
+
+export default withTransformProps(Text, transformProps);

package/lib/h5public/src/components/factory/src/Text/transformProps.ts

@@ -0,0 +1,13 @@
+interface Props {
+  content: string;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { content, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    children: content,
+  };
+  return newProps;
+}

package/lib/h5public/src/components/factory/src/VerificationCode/index.less

@@ -0,0 +1,87 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: verificationCode;
+
+.@{prefixCls} {
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  color: #1c242e;
+
+  .redStar {
+    color: #FF7474;
+    font-size: 16 * @hd;
+    padding-top: 6 * @hd;
+    padding-left: 2 * @hd;
+  }
+
+  &-titleTop {
+    display: flex;
+    flex-direction: column;
+
+    .topText {
+      display: flex;
+      align-items: center;
+      height: 32 * @hd;
+      padding: 0 5 * @hd;
+      line-height: 32 * @hd;
+    }
+  }
+
+  &-inputContent {
+    display: flex;
+    flex-direction: column;
+
+    .normalArea {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      height: 48 * @hd;
+      padding: 0 5 * @hd;
+
+      .titleText {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-right: 16 * @hd;
+      }
+
+      input {
+        flex: 1;
+        background: none;
+        border: 0;
+      }
+
+      ::-webkit-input-placeholder {
+        color: rgba(28, 36, 46, 0.25);
+      }
+
+      .sendButtonActive {
+        flex-shrink: 0;
+        color: #4477ee;
+      }
+
+      .sendButtonDisable {
+        flex-shrink: 0;
+        color: rgba(28, 36, 46, 0.45);
+        font-size: 86%;
+      }
+
+      .imageActive {
+        width: 80 * @hd;
+        height: 30 * @hd;
+        background-color: #f5f5f5;
+      }
+    }
+
+
+  }
+
+  .errorNotice {
+    text-align: right;
+    padding: 0 5 * @hd 5 * @hd 5 * @hd;
+    font-size: 12 * @hd;
+    color: @brand-error;
+  }
+}

package/lib/h5public/src/components/factory/src/VerificationCode/index.tsx

@@ -0,0 +1,340 @@
+import DynamicForm from '@lingxiteam/dform';
+import Field from '@lingxiteam/dform/es/components/Field';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import {
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import { useFormItem } from '../utils/hooks/useFormItem';
+import IconPlaceholder from './assets/placeholder.png';
+import './index.less';
+
+const { Context } = DynamicForm;
+export interface MyVerificationCodeProps {
+  defaultValue: any;
+  titleShow?: boolean;
+  title: string;
+  placeholderText?: string;
+  titlePosition?: string;
+  displayStyle?: string;
+  imageURL?: string;
+  countdownTime?: number;
+  style?: any;
+  onChange?: any;
+  onClick?: any;
+  fieldProps?: any;
+  startCountdown?: any;
+  resetCountdown?: any;
+  visible: boolean;
+  digit?: number;
+  formItemInstance: ReturnType<typeof useFormItem>;
+  onBlur: (e: any) => void;
+  readOnly: boolean;
+  required: boolean;
+}
+
+const prefixCls = 'verificationCode';
+
+const VerificationCode = LingxiForwardRef<any, MyVerificationCodeProps>(
+  (props, ref) => {
+    const {
+      titleShow,
+      title,
+      titlePosition,
+      placeholderText,
+      displayStyle,
+      countdownTime,
+      style,
+      fieldProps,
+      onClick,
+      digit,
+      visible = true,
+      getEngineApis,
+      formItemInstance,
+      onBlur,
+      required,
+    } = props;
+    const { onInputChange, val } = formItemInstance;
+    const { getValidateCodePicture, getLocale } = getEngineApis?.() || {};
+    const { color, ...otherStyle } = style;
+    const [countdownText, setCountdownText] = useState(
+      getLocale('VerificationCode.text') || '发送验证码',
+    );
+    // const [errorInfo, setErrorInfo] = useState(null);
+    const readingRef = useRef(false);
+    const time = useRef<any>();
+    const timer = useRef<any>();
+    const [{ imageURL }, setState] = useAsyncState({
+      imageURL: props.imageURL,
+    });
+    const [imgSrc, setImgSrc] = useState(IconPlaceholder);
+    const countdownReading = () => {
+      timer.current = setInterval(() => {
+        let readingTime = time.current ? time.current : countdownTime;
+        readingTime -= 1;
+        time.current = readingTime;
+        if (readingTime < 1) {
+          readingRef.current = false;
+          setCountdownText(getLocale('VerificationCode.text') || '发送验证码');
+          clearInterval(timer?.current);
+        } else {
+          setCountdownText(
+            `${
+              getLocale('VerificationCode.refresh') || '重新获取'
+            } ${readingTime}s`,
+          );
+        }
+      }, 1000);
+    };
+
+    const { errorValue } = useContext(Context);
+
+    useImperativeHandle(ref, () => ({
+      refreshPictureVeriryCode: () => {
+        getPicVerifyCode();
+      },
+      startCountdown: (date: Date) => {
+        if (displayStyle === 'countdownStyle') {
+          if (readingRef.current) return;
+          readingRef.current = true;
+          countdownReading();
+        }
+      },
+      resetCountdown: () => {
+        if (displayStyle === 'countdownStyle') {
+          readingRef.current = false;
+          setCountdownText(getLocale('VerificationCode.text') || '发送验证码');
+          clearInterval(timer?.current);
+          time.current = null;
+        }
+      },
+      setImageURL: (src: string) => {
+        setState({
+          imageURL: src,
+        });
+      },
+    }));
+
+    const errorInfo = errorValue?.[fieldProps];
+
+    const onMyChange = (e: any) => {
+      // setErrorInfo(null);
+      onInputChange(e.currentTarget.value, true);
+      // if (isForm) {
+      //   form?.setFieldsValue({ [fieldProps]: e.currentTarget.value });
+      // }
+    };
+
+    useEffect(() => {
+      return () => {
+        clearInterval(timer?.current);
+      };
+    }, []);
+
+    const getPicVerifyCode = () => {
+      const newTimestamp = new Date().getTime();
+      if (digit) {
+        const params = {
+          validateCodeCount: `${digit}`,
+          t: `${newTimestamp}`,
+        };
+        setImgSrc(getValidateCodePicture(params));
+      }
+    };
+    useEffect(() => {
+      if (displayStyle === 'random') {
+        // 随机数的情况下自动刷新
+        getPicVerifyCode();
+      }
+    }, [displayStyle, digit]);
+
+    /**
+     * 获取验证码
+     * @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 = () => {
+      if (titleShow) {
+        if (titlePosition === 'top') {
+          return (
+            <div className={`${prefixCls}-titleTop`} style={otherStyle}>
+              <span className="topText">
+                {title}
+                {required && <div className="redStar">*</div>}
+              </span>
+              <div className={`${prefixCls}-inputContent`}>
+                <div className="normalArea">
+                  <input
+                    placeholder={placeholderText}
+                    onBlur={onBlur}
+                    value={val}
+                    onChange={onMyChange}
+                  />
+                  {displayStyle === 'imageStyle' && (
+                    <img
+                      className="imageActive"
+                      src={imageURL}
+                      alt=""
+                      onClick={onClick}
+                    />
+                  )}
+                  {displayStyle === 'countdownStyle' && (
+                    <div
+                      className={
+                        readingRef.current === false
+                          ? 'sendButtonActive'
+                          : 'sendButtonDisable'
+                      }
+                      style={readingRef.current === false ? { color } : {}}
+                      onClick={onClick}
+                    >
+                      {countdownText}
+                    </div>
+                  )}
+                  {renderPicVerifyCode()}
+                </div>
+              </div>
+              {errorInfo && <span className="errorNotice">{errorInfo}</span>}
+            </div>
+          );
+        }
+        return (
+          <div className={`${prefixCls}-inputContent`} style={otherStyle}>
+            <div className="normalArea">
+              <span className="titleText">
+                {title}
+                {required && <div className="redStar">*</div>}
+              </span>
+              <input
+                placeholder={placeholderText}
+                onBlur={onBlur}
+                value={val}
+                onChange={onMyChange}
+              />
+              {displayStyle === 'imageStyle' && (
+                <img
+                  className="imageActive"
+                  src={imageURL}
+                  alt=""
+                  onClick={onClick}
+                />
+              )}
+              {displayStyle === 'countdownStyle' && (
+                <div
+                  className={
+                    readingRef.current === false
+                      ? 'sendButtonActive'
+                      : 'sendButtonDisable'
+                  }
+                  style={readingRef.current === false ? { color } : {}}
+                  onClick={onClick}
+                >
+                  {countdownText}
+                </div>
+              )}
+              {renderPicVerifyCode()}
+            </div>
+            {errorInfo && <span className="errorNotice">{errorInfo}</span>}
+          </div>
+        );
+      }
+      return (
+        <div className={`${prefixCls}-inputContent`} style={otherStyle}>
+          <div className="normalArea">
+            <input
+              placeholder={placeholderText}
+              value={val}
+              onBlur={onBlur}
+              onChange={onMyChange}
+            />
+            {displayStyle === 'imageStyle' && (
+              <img
+                className="imageActive"
+                src={imageURL}
+                alt=""
+                onClick={onClick}
+              />
+            )}
+            {displayStyle === 'countdownStyle' && (
+              <div
+                className={
+                  readingRef.current === false
+                    ? 'sendButtonActive'
+                    : 'sendButtonDisable'
+                }
+                style={readingRef.current === false ? { color } : {}}
+                onClick={onClick}
+              >
+                {countdownText}
+              </div>
+            )}
+            {renderPicVerifyCode()}
+          </div>
+          {errorInfo && <span className="errorNotice">{errorInfo}</span>}
+        </div>
+      );
+    };
+
+    return (
+      <div className={prefixCls} style={visible ? {} : { display: 'none' }}>
+        {renderView()}
+      </div>
+    );
+  },
+);
+
+export default LingxiForwardRef<unknown, MyVerificationCodeProps>(
+  (props, ref) => {
+    const extraRef = useRef({});
+    const { visible } = props;
+    const formItemInstance = useFormItem(ref, props, extraRef.current);
+
+    if (!formItemInstance.isForm) {
+      return (
+        <VerificationCode
+          {...props}
+          formItemInstance={formItemInstance}
+          ref={extraRef}
+        />
+      );
+    }
+
+    return (
+      <Field
+        initialValue={props.defaultValue}
+        name={props?.fieldProps}
+        rules={visible ? formItemInstance.getRules() : []}
+        validateTrigger="onBlur"
+      >
+        <VerificationCode
+          {...props}
+          onBlur={() => {}}
+          ref={extraRef}
+          formItemInstance={formItemInstance}
+        />
+      </Field>
+    );
+  },
+);

package/lib/h5public/src/components/factory/src/VideoPlayer/ViewPlayer.tsx

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