@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,45 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle, useRef } from 'react';
+import type { ForwardRefProps, MyAudioProps } from './Audio';
+import AudioLoader from './loader';
+
+const Audio = LingxiForwardRef<unknown, Omit<MyAudioProps, 'forwardRef'>>(
+  (props, ref) => {
+    const sequenceRef = useRef<{ methodName: string; args: any[] }[]>([]);
+    const audioRef = useRef<ForwardRefProps>();
+
+    // 解决页面加载完成时，无法调用内部方法
+    const runSeq = () => {
+      sequenceRef.current.forEach((seq) => {
+        const { methodName, args } = seq;
+        try {
+          // @ts-ignore
+          audioRef.current?.[methodName](...args);
+        } catch (error) {
+          console.log(error);
+        }
+      });
+
+      sequenceRef.current = [];
+    };
+
+    // 缓存节点
+    useImperativeHandle(ref, () => ({
+      onOperationAudio(s: 'toggle' | 'play' | 'pasue') {
+        if (!audioRef.current?.audio) {
+          sequenceRef.current.push({
+            methodName: 'toggelAudioStatus',
+            args: [s],
+          });
+        } else {
+          audioRef.current.toggelAudioStatus(s);
+        }
+      },
+    }));
+    return (
+      <AudioLoader {...props} forwardRef={audioRef} componentDidLoad={runSeq} />
+    );
+  },
+);
+
+export default Audio;

package/lib/h5public/src/components/factory/src/Audio/loader.tsx

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

package/lib/h5public/src/components/factory/src/BasicComponents/DFormWrapper/dform.less

@@ -0,0 +1,26 @@
+@prefixCls: lcdp-dformwrapper;
+
+.@{prefixCls} {
+  // background-color: #fff;
+  .alitajs-dform-cell {
+    position: relative;
+  }
+  &.@{prefixCls}-hidden {
+    display: none;
+    height: 0;
+    overflow: hidden;
+  }
+  .alitajs-dform-radio {
+    overflow: hidden;
+  }
+  &-right-content {
+    .anticon {
+        color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  &-extra {
+      color: rgba(0, 0, 0, 0.45);
+      fill: rgba(0, 0, 0, 0.45);
+  }
+}

package/lib/h5public/src/components/factory/src/BasicComponents/DFormWrapper/index.tsx

@@ -0,0 +1,391 @@
+import { EngineBaseProps } from '@lingxiteam/types';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import Icon from '../../Icon';
+import { dateToFormatter, toDate } from '../../utils/date';
+import './dform.less';
+
+const prefixCls = 'lcdp-dformwrapper';
+
+interface DformWrapperProps {
+  style?: React.CSSProperties;
+  visible: boolean;
+  children: any;
+  ctmCoverStyle?: any;
+  getEngineApis: EngineBaseProps['getEngineApis'];
+}
+
+const DFormWrapper: React.FC<DformWrapperProps> = (props) => {
+  const { children, style, visible, ctmCoverStyle, getEngineApis } = props;
+  const { useTopContainerHidden } = getEngineApis?.() || {};
+  // 获取上层容器是否被隐藏
+  const topHidden = useTopContainerHidden?.() || false;
+  // const [, hidden] = useStatus(children?.props);
+  // const { visible = true } = useContext(DFormContext) || {};
+
+  // const titleProps = useMemo(() => {
+  //   if (React.isValidElement(children)) {
+  //     const { props: cProps }: any = children;
+  //     const { titleProps: tProps, fieldProps, required, title, subTitle, extra } = cProps || {};
+  //     return {
+  //       ...(tProps || {}),
+  //       key: fieldProps,
+  //       hidden: visible ? hide ?? hidden : false,
+  //       required,
+  //       hasStar: true,
+  //       title,
+  //       subTitle,
+  //       extra,
+  //       fieldProps,
+  //     };
+  //   }
+  //   return {};
+  // }, [children, hidden, hide, visible]);
+
+  const dformKeys = [
+    'DformInput',
+    'DformInputNumber',
+    'DformRadio',
+    'DformTextArea',
+    'DformSwitch',
+    'DAddressPicker',
+    'DformSelect',
+    'DformPicker',
+    'DMultiplePicker',
+    'DformImagePicker',
+    'DformFile',
+    'DformDate',
+    'DCheckbox',
+    'DformRangePicker',
+    'DformRate',
+  ];
+  const dformStyleProps = {} as any;
+
+  const dformExtraKeys = [
+    'DformInput',
+    // 'DformInputNumber',
+    'DAddressPicker',
+    'DformPicker',
+    'DformSelect',
+    'DformDate',
+    'DMultiplePicker',
+    'DformRangePicker',
+    'Card',
+  ];
+
+  // const dformContentSettingKeys = [
+  //   'DformInput',
+  //   'DformInputNumber',
+  //   'DformTextArea',
+  // ];
+
+  const getExtra = () => {
+    const {
+      onDformItemExtra,
+      icon = {},
+      fieldProps,
+      defaultValue,
+      postfix,
+      postfixIconPosition,
+      iconColor,
+    } = children?.props || {};
+    const { type, theme, isIconFont, fontAddress, iconFileInfo, iconFile } =
+      icon;
+    let value = defaultValue;
+    if (children?.props?.dformType === 'DAddressPicker') {
+      value = value?.value;
+    }
+    if (children?.props?.dformType === 'DformDate') {
+      const { formatter = 'YYYY-MM-DD HH:mm:ss' } = children?.props || {};
+      value = dateToFormatter(formatter, toDate(value));
+    }
+    let after = null;
+    const style = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px',
+      whiteSpace: 'nowrap',
+    };
+    if (type) {
+      after = (
+        // @ts-ignore
+        <Icon
+          icon={{
+            type,
+            theme,
+            isIconFont,
+            iconFileInfo,
+            fontAddress,
+            iconFile,
+          }}
+          className={`${prefixCls}-extra`}
+          style={{ color: iconColor }}
+          getEngineApis={getEngineApis}
+        />
+      );
+    }
+    if (postfix) {
+      switch (postfixIconPosition) {
+        case 'after':
+          after = (
+            // @ts-ignore
+            <span style={{ ...style }}>
+              {postfix}
+              {after}
+            </span>
+          );
+          break;
+        case 'before':
+        default:
+          after = (
+            // @ts-ignore
+            <span style={{ ...style }}>
+              {after}
+              {postfix}
+            </span>
+          );
+          break;
+      }
+    }
+
+    return (
+      <span
+        className={`${prefixCls}-right-content`}
+        style={after ? { marginLeft: '8px' } : {}}
+        onClick={
+          onDformItemExtra
+            ? () => onDformItemExtra({ [fieldProps]: value })
+            : undefined
+        }
+      >
+        {after}
+      </span>
+    );
+  };
+  const getOriginStyle = (props: any) => {
+    const {
+      borderSetting,
+      borderRadius,
+      backgroundColor,
+      color,
+      fontSize,
+      fontWeight,
+      textAlign,
+      lineHeight,
+      boxStyle,
+      titleStyle,
+      coverStyle,
+    } = props || {};
+    const originStyle = {
+      backgroundColor,
+      fontSize,
+      fontWeight,
+      color,
+      borderRadius,
+      borderSetting,
+      boxStyle,
+      titleStyle,
+      coverStyle,
+      textAlign,
+      lineHeight,
+    };
+    return originStyle;
+  };
+
+  if (dformKeys.includes(children?.props?.dformType)) {
+    // 以下是存量数据，11月份版本兼容，3个月后可替换成从children?.props?.style 取值
+    // 存量数据默认有children?.props?.style={textAlign:"right"},需要针对这一个属性单独处理，3个月后可不对textAlign做处理
+    const propsStyle = { ...children?.props?.style };
+    if (children?.props.textAlign && propsStyle?.textAlign) {
+      propsStyle.textAlign = children?.props?.textAlign;
+    }
+    // 对测试期间地址选择器的textAlign进行兼容
+    if (
+      children?.props?.dformType === 'DAddressPicker' &&
+      children?.props?.style?.textAlign
+    ) {
+      propsStyle.textAlign = children.props.style.textAlign;
+    }
+    const mewStyle: any = { ...getOriginStyle(children?.props), ...propsStyle };
+    const {
+      inputContent,
+      coverStyle,
+      titleStyle,
+      inputBackground,
+      inputBorderRadius,
+      borderSetting,
+      borderRadius,
+      backgroundColor,
+      color,
+      fontSize,
+      fontWeight,
+      textAlign,
+      lineHeight,
+      inputColor,
+      inputFontSize,
+      inputLineHeight,
+      inputFontWeight,
+      inputTextAlign,
+      boxStyle,
+    } = mewStyle;
+    let borderArr: string[] = [];
+    if (borderSetting) {
+      borderArr = borderSetting.split(' ');
+    }
+    dformStyleProps.boxStyle = { borderRadius, backgroundColor, ...boxStyle };
+    dformStyleProps.titleStyle = {
+      color,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      ...titleStyle,
+    };
+    dformStyleProps.coverStyle = {
+      color: inputColor || color,
+      fontSize: inputFontSize || fontSize,
+      fontWeight: inputFontWeight || fontWeight,
+      textAlign: inputTextAlign || textAlign,
+      lineHeight: inputLineHeight || lineHeight,
+      ...coverStyle,
+    };
+    if (inputContent === '2') {
+      if (inputBackground) {
+        dformStyleProps.coverStyle.background = inputBackground;
+      }
+      dformStyleProps.coverStyle.borderRadius = inputBorderRadius || '4px';
+    }
+    // 自定义style转换
+    if (ctmCoverStyle && Object.keys(ctmCoverStyle).length) {
+      Object.keys(ctmCoverStyle).forEach((styleK: string) => {
+        if (propsStyle[styleK]) {
+          dformStyleProps.coverStyle[ctmCoverStyle[styleK]] =
+            propsStyle[styleK];
+        }
+      });
+    }
+    // 边框属性处理
+    if (borderArr.length) {
+      let borderStyleStr = '';
+      borderArr.forEach((s, i) => {
+        if (i) {
+          borderStyleStr += `${s} `;
+        }
+      });
+      dformStyleProps.boxStyle[borderArr[0]] = borderStyleStr;
+    }
+  }
+
+  if (dformExtraKeys.includes(children?.props?.dformType)) {
+    dformStyleProps.extra = getExtra();
+    if (
+      children?.props?.dformType === 'DformRangePicker' &&
+      children?.props.style?.inputContent === '2'
+    ) {
+      dformStyleProps.showExtra = false;
+    } else {
+      dformStyleProps.showExtra = !!dformStyleProps.extra;
+    }
+    if (
+      children?.props?.dformType !== 'DformInput' &&
+      children?.props?.dformType !== 'DformInputNumber'
+    ) {
+      dformStyleProps.arrow = !getExtra();
+    }
+  }
+
+  // 设置内容样式
+  // if (dformKeys.includes(children?.props?.dformType)) {
+  //   const childrenProps = children?.props;
+  //   // 输入区域样式
+  //   const coverStyle = { ...dformStyleProps.coverStyle } || {};
+  //   const titleStyle = { ...dformStyleProps.titleStyle } || {};
+  //   const style = { ...childrenProps?.style };
+  //   coverStyle.color = style?.inputColor || childrenProps?.inputColor || '#1c242e';
+  //   coverStyle.fontSize = style?.inputFontSize || childrenProps?.inputFontSize || '16px';
+  //   coverStyle.fontWeight = style?.inputFontWeight || childrenProps?.inputFontWeight || '400';
+  //   coverStyle.lineHeight = style?.inputLineHeight || childrenProps?.inputLineHeight || '24px';
+  //   coverStyle.textAlign = style?.textAlign || childrenProps?.textAlign || 'right';
+  //   // inputContent 用于设置内容部分背景及圆角，值为'2'时生效，默认背景颜色不设置，圆角为4px
+  //   if (style?.inputContent === '2') {
+  //     if (style?.inputBackground) {
+  //       coverStyle.background = style.inputBackground;
+  //     }
+  //     coverStyle.borderRadius = style?.inputBorderRadius || '4px';
+  //   }
+  //   // 标题样式
+  //   titleStyle.lineHeight = style?.lineHeight || '24px';
+  //   titleStyle.color = style?.color || childrenProps?.color || '#1c242e';
+  //   titleStyle.fontSize = style?.fontSize || childrenProps?.fontSize || '16px';
+  //   titleStyle.fontWeight = style?.fontWeight || '400';
+  //   // 手写的自定义样式级别高于设置样式
+  //   dformStyleProps.coverStyle = { ...coverStyle, ...childrenProps?.coverStyle, ...childrenProps?.style?.coverStyle };
+  //   dformStyleProps.titleStyle = { ...titleStyle, ...childrenProps?.titleStyle, ...childrenProps?.style?.titleStyle };
+  // }
+  // console.log("dformStyleProps：", dformStyleProps);
+
+  // 标题图标
+  const { titleIcon, prefixIcon, color, fontSize, titleExtension } =
+    children?.props || {};
+  const titleIconRender = useMemo(() => {
+    if (
+      titleIcon === 'icon' &&
+      (prefixIcon?.prefixIconType || prefixIcon?.prefixIconiconFile) &&
+      !titleExtension
+    ) {
+      return (
+        // @ts-ignore
+        <Icon
+          icon={{
+            type: prefixIcon?.prefixIconType,
+            theme: prefixIcon?.prefixIconTheme,
+            isIconFont: prefixIcon?.prefixIconIsIconFont,
+            fontAddress: prefixIcon?.prefixIconFontAddress,
+            iconFileInfo: prefixIcon?.prefixIconIconFileInfo,
+            iconFile: prefixIcon?.prefixIconiconFile,
+          }}
+          className="cust-icon-theme"
+          style={{
+            fontSize,
+            width: fontSize,
+            height: fontSize,
+            marginRight: '6px',
+          }}
+          getEngineApis={getEngineApis}
+        />
+      );
+    }
+    return '';
+  }, [titleIcon, prefixIcon, color, fontSize]);
+
+  const myProps = { titleExtension: titleIconRender, ...children?.props } || {};
+  // if (children?.props?.status === '4') { // 设置表单只读
+  //   myProps.readonly = true;
+  // } else {
+  //   myProps.readonly = false;
+  // }
+  return (
+    <div
+      className={classNames(prefixCls, {
+        [`ued-${children?.props?.dformType}`]: true,
+        [`${prefixCls}-hidden`]: !visible,
+      })}
+      style={style}
+      aria-label={children?.props?.fieldProps}
+      aria-disabled={children?.props?.disabled}
+    >
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            ...myProps,
+            ...dformStyleProps,
+            fieldProps: (children?.props as any)?.fieldProps || '',
+            // ...titleProps,
+            error: false,
+            hidden: topHidden || !visible, // 隐藏模式下表单模式不校验
+          })
+        : children}
+    </div>
+  );
+};
+
+DFormWrapper.displayName = 'DFormWrapper';
+export default DFormWrapper;

package/lib/h5public/src/components/factory/src/BasicComponents/Empty/empty.tsx

@@ -0,0 +1,37 @@
+export default (props: any) => {
+  return (
+    <svg
+      width="1.28rem"
+      viewBox="0 0 64 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id=".components/empty-img-simple" clipPath="url(#clip0_6752_81174)">
+        <path
+          id="Vector"
+          d="M32 39.7027C49.6731 39.7027 64 36.592 64 32.7547C64 28.9174 49.6731 25.8066 32 25.8066C14.3269 25.8066 0 28.9174 0 32.7547C0 36.592 14.3269 39.7027 32 39.7027Z"
+          fill="#F5F5F5"
+        />
+        <g id="Group">
+          <path
+            id="Vector_2"
+            d="M55 13.6653L44.854 2.24866C44.367 1.47048 43.656 1 42.907 1H21.093C20.344 1 19.633 1.47048 19.146 2.24767L9 13.6663V22.8367H55V13.6653Z"
+            fill="white"
+            stroke="#D9D9D9"
+          />
+          <path
+            id="Vector_3"
+            d="M41.613 16.8135C41.613 15.2205 42.607 13.9053 43.84 13.9043H55V31.9067C55 34.0139 53.68 35.741 52.05 35.741H11.95C10.32 35.741 9 34.0129 9 31.9067V13.9043H20.16C21.393 13.9043 22.387 15.2175 22.387 16.8106V16.8324C22.387 18.4255 23.392 19.7119 24.624 19.7119H39.376C40.608 19.7119 41.613 18.4136 41.613 16.8205V16.8135Z"
+            fill="#FAFAFA"
+            stroke="#D9D9D9"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_6752_81174">
+          <rect width="64" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/lib/h5public/src/components/factory/src/BasicComponents/Empty/index.less

@@ -0,0 +1,25 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-app-empty;
+
+.@{prefixCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .adm-error-block-image {
+    height: auto;
+  }
+  .adm-error-block-description {
+    margin-top: .16rem;
+    .adm-error-block-description-title {
+      display: none;
+    }
+    .adm-error-block-description-subtitle {
+      margin-top: 0;
+      font-size: var(--adm-font-size-6);
+      color: #B0B2BF;
+    }
+  }
+}

package/lib/h5public/src/components/factory/src/BasicComponents/Empty/index.tsx

@@ -0,0 +1,37 @@
+import { LocaleFunction } from '@lingxiteam/types';
+import { ErrorBlock } from 'antd-mobile-5';
+import { FC, useMemo } from 'react';
+import useCompState from '../../utils/hooks/useCompState';
+import EmptySvg from './empty';
+import './index.less';
+
+interface EmptyProps {
+  dataState: any;
+  getLocale: LocaleFunction;
+}
+
+const Empty: FC<EmptyProps> = (props) => {
+  const { dataState, getLocale } = props;
+
+  const { stateIcon, stateTip } = useCompState({ dataState, type: 'empty' });
+
+  const emptyProps = useMemo(() => {
+    const _spinProps: any = {};
+    if (stateIcon) {
+      _spinProps.image = stateIcon;
+    }
+    return _spinProps;
+  }, [stateIcon]);
+
+  return (
+    <ErrorBlock
+      className="lcdp-app-empty"
+      status="empty"
+      description={stateTip ?? getLocale('noData', '暂无数据')}
+      image={<EmptySvg />}
+      {...emptyProps}
+    />
+  );
+};
+
+export default Empty;

package/lib/h5public/src/components/factory/src/BasicComponents/FormItem/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+/**
+ * 本方法主要用来包裹formItem组件，目的是为了对表单项下划线进行处理
+ */
+interface FormItemProps {}
+
+const FormItem: FC<FormItemProps> = (props) => {
+  // 增加form组件的classname, 使对应的customClass生效。
+  let formItemClassName = '';
+  const getClassName = (item: any) => {
+    if (item?.children) {
+      getClassName(item.children?.props);
+    } else if (item?.className) {
+      formItemClassName = item.className;
+    }
+  };
+  getClassName(props);
+  return (
+    <div className={`lcdp-form-item ${formItemClassName}`}>
+      {props.children}
+    </div>
+  );
+};
+
+export default FormItem;

package/lib/h5public/src/components/factory/src/BasicComponents/ForwardRef/index.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import React from 'react';
+
+function AppForwardRef<P, T = any>(
+  Comp: FC<P & { ref?: React.LegacyRef<T> | undefined }>,
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<P> & React.RefAttributes<T>
+>;
+
+function AppForwardRef(Comp: any) {
+  return React.forwardRef(Comp);
+}
+
+export default AppForwardRef;

package/lib/h5public/src/components/factory/src/BasicComponents/Image/index.tsx

@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface ImageProps
+  extends React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > {
+  defaultSrc?: string;
+  errorSrc?: string;
+}
+
+const MyImage: FC<ImageProps> = (props) => {
+  const { defaultSrc, errorSrc, ...restProps } = props;
+  const imageRef = useRef<HTMLImageElement>();
+  const [src, setSrc] = useState(props.defaultSrc);
+
+  useEffect(() => {
+    imageRef.current = new Image();
+  }, []);
+
+  useEffect(() => {
+    if (props.src && imageRef.current) {
+      imageRef.current.onload = () => setSrc(props.src);
+      imageRef.current.onerror = () => setSrc(errorSrc);
+      imageRef.current.src = props.src;
+    }
+  }, [props.src, errorSrc]);
+
+  return <img {...restProps} src={src} alt="" />;
+};
+
+export default MyImage;