@lingxiteam/ebe-utils 0.0.9 → 0.0.10

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

@@ -0,0 +1,131 @@
+import {
+  LoadMoreListView,
+  LoadMoreListViewProps,
+} from '@lingxiteam/antd-mobile-plus';
+import { ErrorBlock } from 'antd-mobile-5';
+import { useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AppForwardRef } from '../BasicComponents';
+import './index.less';
+
+export interface MyListViewProps extends LoadMoreListViewProps {
+  components: any[];
+  // loadMoreParams: any;
+  pageData: any;
+  // loadMoreRef: any;
+  [key: string]: any;
+  columnNum?: number;
+}
+
+const prefixCls = 'lcdp-loadmore';
+
+const LoadMore = AppForwardRef<MyListViewProps>((props, ref) => {
+  const {
+    height,
+    children,
+    alias,
+    components,
+    // loadMoreParams,
+    pageData,
+    // loadMoreRef,
+    requestFunc,
+    columnNum = 1,
+    ...otherProps
+  } = props;
+
+  const { MemoRenderer } = props.getEngineApis();
+  const { MemoLoopItem, renderer } = MemoRenderer;
+
+  const loadMoreParamsRef = useRef({});
+  const loadMoreRef = useRef<any>(null);
+  const [listData, setListData] = useState<any[]>([]);
+  let aliasUser = {};
+  if (Array.isArray(alias) && alias.length > 0) {
+    const [ali] = alias;
+    aliasUser = ali;
+  }
+  const renderColumn = (columnData: any, i: any) => {
+    const renderProps = {
+      item: columnData,
+      i,
+      __render__: props.__render__,
+      renderer,
+      itemId: i,
+      compId: props.$$componentItem.uid,
+    };
+    return (
+      <div className={`${prefixCls}-column`} key={i}>
+        <MemoLoopItem {...renderProps} />
+      </div>
+    );
+  };
+  const renderColumnPlaceholder = (key: number) => {
+    return <div className={`${prefixCls}-columnPlaceholder`} key={key} />;
+  };
+  const renderRow = (item: any, sectionID: any, rowId: any) => {
+    const rowID = parseInt(rowId, 10);
+    let realColumnNum = columnNum;
+    if (!(typeof realColumnNum === 'number' && realColumnNum > 0)) {
+      realColumnNum = 1;
+    }
+    if (rowID % realColumnNum > 0) return <></>;
+    const columns: any = [];
+    for (let i = 0; i < realColumnNum; i += 1) {
+      const columnData = listData[rowID + i];
+      if (columnData) {
+        columns.push(renderColumn(columnData, rowID + i));
+      } else {
+        columns.push(renderColumnPlaceholder(rowID + i));
+      }
+    }
+    return (
+      <div className={`${prefixCls}-row`} key={sectionID}>
+        {columns}
+      </div>
+    );
+  };
+
+  const wrapperHeight = useMemo(() => {
+    return props.type === 'inhert' ? '100%' : undefined;
+  }, [props.type]);
+
+  const style = useMemo(() => {
+    const tStyle = props.style || {};
+    if (wrapperHeight) {
+      tStyle.height = wrapperHeight;
+    }
+    return tStyle;
+  }, [props.style, wrapperHeight]);
+
+  useImperativeHandle(ref, () => ({
+    refreshLoadMore: () => loadMoreRef?.current?.reloadDataSource(),
+    setLoadMoreParams: (params: any) => {
+      loadMoreParamsRef.current = params;
+    },
+    getLoadMoreParams: () => loadMoreParamsRef.current,
+  }));
+
+  return (
+    <div
+      className={`${prefixCls}-loadMore`}
+      style={wrapperHeight ? { height: wrapperHeight } : {}}
+    >
+      <LoadMoreListView
+        {...otherProps}
+        /* @ts-ignore */
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        type={props.type}
+        ref={loadMoreRef}
+        requestFunc={requestFunc}
+        noData={<ErrorBlock status="empty" />}
+        style={style}
+        alias={aliasUser}
+        renderRow={renderRow}
+        onChange={(data: any) => {
+          setListData(data);
+        }}
+      />
+    </div>
+  );
+});
+
+export default LoadMore;

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

@@ -0,0 +1,100 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useDeepCompareEffect } from '../utils/ahooks';
+import useStyle from '../View/useStyle';
+
+export interface MyLoopprops extends React.HTMLProps<HTMLDivElement> {
+  visible: boolean;
+  src?: string;
+  fileCode?: string;
+  backgroundType: any;
+  style: React.CSSProperties;
+  className: string;
+  dataSource: any[];
+  itemKey: string;
+  indexKey: string;
+  uniqueField: string;
+}
+
+const Loop = LingxiForwardRef<any, MyLoopprops>((props, ref) => {
+  const {
+    visible = true,
+    backgroundType,
+    className,
+    fileCode,
+    src,
+    style,
+    getEngineApis,
+    dataSource: myDataSource = [],
+    itemKey = 'item',
+    indexKey = 'i',
+    uniqueField,
+    ...restProps
+  } = props;
+
+  const { MemoRenderer, getAppFileUrlByFileCode } = props.getEngineApis();
+  const { MemoLoopItem, renderer } = MemoRenderer;
+  const [dataSource, setDataSource] = useState(
+    Array.isArray(myDataSource) ? myDataSource : [],
+  );
+
+  const [imgSrc, setImgSrc] = useState();
+
+  useImperativeHandle(ref, () => ({
+    setDataSource: (data: any[]) => {
+      if (Array.isArray(data)) {
+        setDataSource(data);
+      }
+    },
+  }));
+  useEffect(() => {
+    if (backgroundType?.image || fileCode) {
+      // @ts-ignore
+      setImgSrc(getAppFileUrlByFileCode(backgroundType.image || fileCode));
+    }
+  }, [backgroundType, src, fileCode]);
+
+  useDeepCompareEffect(() => {
+    if (Array.isArray(myDataSource)) {
+      setDataSource(myDataSource);
+    }
+  }, [myDataSource]);
+
+  const viewRef = useRef<HTMLDivElement>();
+  const restStyle = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      {...restProps}
+      className={`${className}`}
+      style={{ ...restStyle, ...style }}
+    >
+      {dataSource?.map((item, i) => {
+        const renderProps = {
+          itemKey,
+          indexKey,
+          item,
+          i,
+          __render__: props.__render__,
+          renderer,
+          key: item[uniqueField] ?? i,
+          itemId: item[uniqueField] ?? i,
+          compId: props.$$componentItem.uid,
+        };
+        return <MemoLoopItem {...renderProps} />;
+      })}
+    </div>
+  );
+});
+
+export default Loop;

package/lib/h5public/src/components/factory/src/MultipleProgress/MultipleProgress.tsx

@@ -0,0 +1,43 @@
+import MultipleProgress from '@lingxiteam/charts/es/MultipleProgress';
+import { LingXiFC } from '@lingxiteam/types';
+import { useEffect } from 'react';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { useJsonToParse } from '../utils/hooks/useJsonToParse';
+import { MyMultipleProgressProps, ProgressProps } from './PropsType';
+
+const MyMultipleProgress: LingXiFC<MyMultipleProgressProps> = (props, ref) => {
+  const {
+    style = {},
+    $$componentItem,
+    visible,
+    getEngineApis,
+    className,
+    refData,
+    ...restProps
+  } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  const [{ data: myData }, setState] = useAsyncState({
+    data: props.data,
+  });
+
+  const iData: ProgressProps[] = useJsonToParse(myData)?.map((item: any) => ({
+    ...item,
+    count: Number(item.count),
+  }));
+
+  useEffect(() => {
+    if (refData) {
+      setState(refData);
+    }
+  }, [refData]);
+
+  return (
+    <div style={finalStyle} className={className}>
+      <MultipleProgress {...restProps} data={iData} />
+    </div>
+  );
+};
+
+MyMultipleProgress.displayName = 'MultipleProgress';
+export default MyMultipleProgress;

package/lib/h5public/src/components/factory/src/MultipleProgress/PropsType.ts

@@ -0,0 +1,37 @@
+export interface ProgressProps {
+  /**
+   * @description 进度条颜色
+   */
+  color: string;
+
+  /**
+   * @description label文字
+   */
+  label: string;
+
+  /**
+   * @description 数量
+   */
+  count: number | string;
+}
+
+export interface MyMultipleProgressProps {
+  /**
+   * @description 进度条颜色
+   */
+  data: ProgressProps[];
+
+  /**
+   * @description 进度条高度
+   * @default 8
+   */
+  height?: number;
+
+  /**
+   * @description 样式
+   */
+  style?: React.CSSProperties;
+  visible: boolean;
+  className: string;
+  refData: { data: any };
+}

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

@@ -0,0 +1,20 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle, useState } from 'react';
+import DountLoader from './loader';
+import { MyMultipleProgressProps } from './PropsType';
+
+const MultipleProgress = LingxiForwardRef<unknown, MyMultipleProgressProps>(
+  (props, ref) => {
+    const [refData, setRefData] = useState();
+
+    useImperativeHandle(ref, () => ({
+      // 这里暴漏部分指令方法
+      // 由于组件采用懒加载延迟执行组件，导致组件在未加载完成的时候已经执行了页面加载完成的生命周期，所以未来的指令方法不应放入懒加载中，避免页面加载完成时机无法调用指令。
+      setData: setRefData,
+    }));
+
+    return <DountLoader {...props} refData={refData} />;
+  },
+);
+
+export default MultipleProgress;

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

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

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

@@ -0,0 +1,77 @@
+import { NoticeBarPlus, NoticeBarProps } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useEffect, useRef, useState } from 'react';
+import useStyle from '../View/useStyle';
+
+export interface MyNoticeBarPlusProps extends NoticeBarProps {
+  backgroundType?: any;
+  srcType?: 'fileCode' | 'src';
+  fileCode?: string;
+  errorSrc: string;
+  clsasName?: string;
+}
+
+const MyNoticeBarPlus = LingxiForwardRef<any, MyNoticeBarPlusProps>(
+  (props, ref) => {
+    const {
+      backgroundType = {},
+      srcType,
+      src,
+      fileCode,
+      errorSrc,
+      getEngineApis,
+      clsasName,
+      ...restProps
+    } = props;
+    const NoticeBarPlusRef = useRef<HTMLDivElement>(null);
+    const [imgSrc, setImgSrc] = useState('');
+    const [error, setError] = useState('');
+    const [icon, setIcon] = useState('');
+    const engineApis = getEngineApis();
+    const viewRef = useRef<HTMLDivElement>();
+    const style = useStyle(
+      {
+        ...props,
+        src: imgSrc,
+      } as any,
+      viewRef,
+    ) as any;
+    useEffect(() => {
+      if (errorSrc) {
+        setError(engineApis.getAppFileUrlByFileCode(errorSrc));
+      }
+    }, [errorSrc]);
+
+    useEffect(() => {
+      if (backgroundType.image) {
+        setImgSrc(engineApis.getAppFileUrlByFileCode(backgroundType.image));
+      }
+    }, [backgroundType]);
+
+    useEffect(() => {
+      if (srcType === 'fileCode' && fileCode) {
+        setIcon(engineApis.getAppFileUrlByFileCode(fileCode));
+      } else if (srcType === 'src' && src) {
+        setIcon(src);
+      }
+    }, [fileCode, src, srcType]);
+
+    return (
+      <div
+        className={`use-app-noticebarplus ${clsasName}`}
+        ref={NoticeBarPlusRef}
+      >
+        <NoticeBarPlus
+          {...restProps}
+          style={style}
+          src={icon}
+          errorSrc={error}
+          imgStyle={style.imgStyle}
+          extraText={restProps.extraText ?? engineApis.getLocale('more')}
+        />
+      </div>
+    );
+  },
+);
+
+export default MyNoticeBarPlus;

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

@@ -0,0 +1,26 @@
+import { Notification, NotificationType } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+
+export interface MyNotificationProp extends NotificationType {
+  visible: boolean;
+}
+const MyNotification = LingxiForwardRef<any, MyNotificationProp>(
+  (props, ref) => {
+    const { visible, style, title, dataSource, className } = props;
+    const displayStyle = useHiddenStyle(visible, style);
+
+    return (
+      <Notification
+        title={title}
+        dataSource={dataSource}
+        style={displayStyle}
+        className={className}
+      />
+    );
+  },
+);
+
+MyNotification.displayName = 'Notification';
+
+export default MyNotification;

package/lib/h5public/src/components/factory/src/Picker/InnerPicker.tsx

@@ -0,0 +1,85 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import Picker from 'antd-mobile-5/es/components/picker';
+import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import { useListenToggleBoolean } from '../utils/hooks/useToggleBoolean';
+
+export interface PickerProps {
+  visible: boolean;
+  onPopViewCancel?: () => void;
+  onChange?: (e: any, e2: any) => void;
+  data: Record<string, any>[];
+  title: string;
+  style: Record<string, any>;
+  closeOnMaskClick: boolean;
+}
+const MyPicker = LingxiForwardRef<any, PickerProps>((props, ref) => {
+  const {
+    onChange = () => {},
+    visible = false,
+    onPopViewCancel,
+    getEngineApis,
+    title,
+    style,
+    closeOnMaskClick = true,
+    className,
+  } = props;
+  const [data, setData] = useState<any>([]);
+  const [show, setShow] = useListenToggleBoolean(visible);
+  const { getLocale } = getEngineApis?.() || {};
+
+  useEffect(() => {
+    if (props.data) {
+      setData(props.data);
+    }
+  }, [props.data]);
+
+  useImperativeHandle(ref, () => ({
+    visible: show,
+    setVisible: setShow,
+    setData,
+  }));
+
+  const onClose = () => {
+    setShow(false);
+  };
+
+  const onMyDismiss = () => {
+    if (onPopViewCancel) {
+      onPopViewCancel();
+    }
+    onClose();
+  };
+
+  const getItem = useCallback(
+    (val) => data?.find((item: any) => item.value === val),
+    [data],
+  );
+
+  const onOk = (v: string | any[]) => {
+    onClose();
+    if (v && Array.isArray(v) && v.length > 0) {
+      if (typeof onChange === 'function') {
+        onChange(v[0], getItem(v[0]));
+      }
+    }
+  };
+
+  return (
+    <Picker
+      className={className}
+      closeOnMaskClick={closeOnMaskClick}
+      style={style}
+      cancelText={getLocale?.('cancelText', '取消')}
+      confirmText={getLocale?.('confirm', '确定')}
+      title={title}
+      visible={show}
+      columns={data ? [data] : []}
+      onConfirm={onOk}
+      onClose={onMyDismiss}
+    />
+  );
+});
+
+MyPicker.displayName = 'InnerPicker';
+
+export default MyPicker;

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

@@ -0,0 +1,13 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import DformCustom from '../DformCustom';
+import InnerPicker, { PickerProps } from './InnerPicker';
+
+const Picker = LingxiForwardRef<any, PickerProps>((props, ref) => {
+  return (
+    <DformCustom.Item showError={false}>
+      <InnerPicker {...props} ref={ref} />
+    </DformCustom.Item>
+  );
+});
+
+export default Picker;

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

@@ -0,0 +1,70 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import IconPlaceholder from './assets/placeholder.png';
+
+export interface PictureVerifyCodeProps {
+  digit?: number;
+  onClick?: (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+  style?: React.CSSProperties;
+  visible?: boolean;
+}
+// @ts-ignore
+const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = LingxiForwardRef<
+  any,
+  PictureVerifyCodeProps
+>((props, ref) => {
+  const { digit, onClick, style, visible, getEngineApis, ...restProps } = props;
+  const { getValidateCodePicture } = getEngineApis();
+  const [imgSrc, setImgSrc] = useState(IconPlaceholder);
+  const getPicVerifyCode = () => {
+    const newTimestamp = new Date().getTime();
+    if (digit && newTimestamp) {
+      try {
+        const params = {
+          validateCodeCount: `${digit}`,
+          t: `${newTimestamp}`,
+        };
+        setImgSrc(getValidateCodePicture(params));
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  };
+  useEffect(() => {
+    getPicVerifyCode();
+  }, []);
+  useImperativeHandle(ref, () => ({
+    refreshPictureVeriryCode: () => {
+      getPicVerifyCode();
+    },
+  }));
+  const targetStyle = useMemo(() => {
+    return { ...style, cursor: 'pointer' };
+  }, [style]);
+  if (!visible) {
+    return null;
+  }
+  // eslint-disable-next-line jsx-a11y/alt-text
+  return (
+    <img
+      {...restProps}
+      style={targetStyle}
+      src={imgSrc}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e);
+        } else {
+          // 点击事件如果有自定义则执行自定义事件，反之默认刷新验证码
+          getPicVerifyCode();
+        }
+      }}
+    />
+  );
+});
+
+export default PictureVerifyCode;

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

@@ -0,0 +1,44 @@
+import { ProcessTrack, ProTrackProps } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+
+export interface MyProcessTrackProps extends ProTrackProps {
+  visible: boolean;
+  style: React.CSSProperties;
+}
+const MyProcessTrack = LingxiForwardRef<any, MyProcessTrackProps>(
+  (props, ref) => {
+    const {
+      visible = true,
+      style,
+      className,
+      empty,
+      getEngineApis,
+      ...restProps
+    } = props;
+
+    const { getLocale } = getEngineApis();
+
+    const displayStyle = useHiddenStyle(visible);
+
+    return (
+      <div
+        style={{
+          ...style,
+          ...displayStyle,
+        }}
+        className={className}
+      >
+        <ProcessTrack
+          {...restProps}
+          empty={empty ?? getLocale('ProcessTrack.empty')}
+        />
+      </div>
+    );
+  },
+);
+
+MyProcessTrack.displayName = 'ProcessTrack';
+
+export default MyProcessTrack;