@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,169 @@
+import { Signature, SignatureType } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Toast } from 'antd-mobile-5';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { dataURLtoFile } from '../utils';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import UploadHandle from '../utils/upload';
+
+export interface SignatureProps extends SignatureType {
+  resAliaKeys?: any;
+  onChange: (e: any) => void;
+  fileName: string;
+  headers?: any;
+  credentials: boolean;
+  uploadType?: string;
+  visible: boolean;
+  columns: any;
+}
+
+export interface SignatureRef {
+  value?: () => any;
+  clearValue?: () => void;
+}
+const MySignature = LingxiForwardRef<SignatureRef, SignatureProps>(
+  (props, ref) => {
+    const uploadResultRef = React.useRef<any>();
+    const {
+      onChange,
+      fileName = 'file',
+      headers,
+      resAliaKeys,
+      credentials,
+      uploadType,
+      style,
+      visible = true,
+      columns,
+      getEngineApis,
+      className,
+      $$componentItem,
+      type = 'image/png',
+      encoderOptions = 0.92,
+      clear,
+      footerNode,
+      ...restProps
+    } = props;
+    const { api = '', _source, _serviceId } = columns || {};
+    // @ts-ignore
+    const { contentBackground, contentBorderRadius, ...resStyle } = style || {};
+    const { http, downFieldPrefix, getLocale, getAppFileUrlById } =
+      getEngineApis() || {};
+    const hiddenStyle = useHiddenStyle(visible);
+    let canvasRef = useRef<React.MutableRefObject<null>>(null);
+
+    const getCanvasRef = (ref: React.MutableRefObject<null>) => {
+      canvasRef = ref;
+    };
+    useEffect(() => {
+      if (!uploadResultRef.current) {
+        const extendData: any = {};
+        if (_source === 'std') {
+          extendData['ORCHESTRATION.appId'] = $$componentItem?.appId;
+          extendData['ORCHESTRATION.serviceVersionId'] = _serviceId;
+        }
+        uploadResultRef.current = new UploadHandle({
+          request: http,
+          alias: resAliaKeys,
+          filePrefix: downFieldPrefix(),
+          fileName,
+          getLocale,
+          url: api,
+          headers,
+          onChange: (v) => {
+            if (onChange) {
+              onChange(v);
+            }
+          },
+          credentials: credentials === true ? 'include' : 'same-origin',
+          extendUploadData: extendData,
+          getAppFileUrlById,
+        });
+      }
+    }, []);
+    useEffect(() => {
+      if (uploadResultRef?.current) {
+        uploadResultRef.current.setLocale(getLocale);
+      }
+    }, [getLocale]);
+    const getSigin = (dataURI: string) => {
+      if (uploadType === 'base64StringType') {
+        // 不做图片上传，将图片base64数据返回
+        if (onChange) {
+          onChange(dataURI);
+        }
+      } else {
+        uploadResultRef.current.setProps({
+          file: dataURLtoFile(dataURI, 'png'),
+          hooks: {
+            uploadAfter: () => {
+              Toast.show({
+                content: getLocale('Upload.success'),
+                icon: 'success',
+              });
+            },
+            uploadError: () => {
+              Toast.show({
+                content: getLocale('Upload.failed'),
+                icon: 'fail',
+              });
+            },
+          },
+        });
+        uploadResultRef.current.sendRequest();
+      }
+    };
+
+    useImperativeHandle(ref, () => ({
+      get value() {
+        if (uploadType === 'base64StringType') {
+          if (canvasRef) {
+            return (canvasRef as any).canvas.drawing.toDataURL(
+              type,
+              encoderOptions,
+            );
+          }
+          return uploadResultRef?.current?.value?.();
+        }
+        return uploadResultRef?.current?.value?.();
+      },
+      clearValue() {
+        if (canvasRef) {
+          (canvasRef as any).clear();
+          clear && clear();
+        }
+      },
+    }));
+
+    const renderFooterNode = () => {
+      if (footerNode === true) {
+        return <></>;
+      }
+      // 使用内部的footerNode
+      return undefined;
+    };
+    return (
+      <Signature
+        {...restProps}
+        style={{
+          width: `${style?.width ? style.width : '100%'}`,
+          height: `${style?.height ? style.height : '100%'}`,
+          ...resStyle,
+          ...hiddenStyle,
+        }}
+        footerNode={renderFooterNode()}
+        className={className}
+        contentBackground={contentBackground}
+        contentBorderRadius={contentBorderRadius}
+        getSigin={getSigin}
+        getCanvasRef={getCanvasRef}
+        clear={clear}
+        type={type}
+        encoderOptions={encoderOptions}
+        okText={getLocale('confirm')}
+        clearText={getLocale('clearText')}
+      />
+    );
+  },
+);
+
+export default MySignature;

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

@@ -0,0 +1,49 @@
+import SingleProgress from '@lingxiteam/charts/es/SingleProgress';
+import React from 'react';
+import { AppForwardRef } from '../BasicComponents';
+
+export interface MySingleProgressPros {
+  /**
+   * @description 总的数量
+   */
+  total: number;
+
+  /**
+   * @description 当前数量
+   */
+  count: number | string;
+
+  /**
+   * @description 要展示的进度条颜色
+   * @default #3563F5
+   */
+  color?: string;
+
+  /**
+   * @description 进度条上部分的内容
+   *
+   */
+  topNode?: React.ReactNode;
+
+  /**
+   * @description 进度条右边的内容
+   */
+  rightNode?: React.ReactNode;
+
+  /**
+   * @description 背后进度条的颜色
+   * @default #EDF0F5
+   */
+  bgColor?: string;
+  visible?: boolean;
+  value?: MySingleProgressPros;
+}
+
+const MySingleProgress = AppForwardRef<MySingleProgressPros>((props, ref) => {
+  const { visible } = props;
+  return visible ? <SingleProgress {...props} /> : <></>;
+});
+
+MySingleProgress.displayName = 'SingleProgress';
+
+export default MySingleProgress;

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

@@ -0,0 +1,11 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import SingleProgressLoader from './loader';
+import type { MySingleProgressPros } from './SingleProgress';
+
+const SingleProgress = LingxiForwardRef<unknown, MySingleProgressPros>(
+  (props, ref) => {
+    return <SingleProgressLoader {...props} {...(props.value || {})} />;
+  },
+);
+
+export default SingleProgress;

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

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

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

@@ -0,0 +1,11 @@
+export interface MySmallColumnarProps {
+  colors?: string;
+  visible?: boolean;
+  showScrollBar?: boolean; // 是否显示滚动条
+  style: any;
+  number?: any;
+  data?: any;
+  x: string;
+  y: string;
+  refData?: { data?: any[]; x?: string; y?: string };
+}

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

@@ -0,0 +1,76 @@
+import ZeroColumn from '@lingxiteam/charts/es/SmallColumnar/ZeroColumn';
+import { LingXiFC } from '@lingxiteam/types';
+import { useEffect, useMemo } from 'react';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { useJsonToParse } from '../utils/hooks/useJsonToParse';
+import { MySmallColumnarProps } from './PropsType';
+
+const SmallColumnar: LingXiFC<MySmallColumnarProps> = (props, ref) => {
+  // number=5 为了兼容旧数据
+  const {
+    visible = true,
+    showScrollBar,
+    number = 5,
+    $$componentItem,
+    getEngineApis,
+    style,
+    refData,
+    ...restProps
+  } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  const [{ data: myData = [], x, y }, setState] = useAsyncState({
+    data: props.data,
+    x: props.x,
+    y: props.y,
+  });
+
+  const { xFontSize, xColor, guideTextFontSize, guideTextColor } = props?.style;
+  const data = useJsonToParse(myData);
+  const guideTextStyle = useMemo(() => {
+    return { fontSize: guideTextFontSize, fill: guideTextColor };
+  }, [guideTextFontSize, guideTextColor]);
+
+  const xStyle = useMemo(() => {
+    return { fontSize: xFontSize, fill: xColor };
+  }, [xFontSize, xColor]);
+
+  const max = useMemo(() => {
+    // eslint-disable-next-line radix
+    return parseInt(number) - 1;
+  }, [number]);
+
+  useEffect(() => {
+    if (refData) {
+      setState(refData as any);
+    }
+  }, [refData]);
+
+  return (
+    <ZeroColumn
+      {...restProps}
+      style={finalStyle}
+      x={x}
+      y={y}
+      data={data}
+      xStyle={xStyle}
+      guideTextStyle={guideTextStyle}
+      showGuide
+      showToolTips
+      scrollBarConfig={{
+        // @ts-ignore
+        visible: showScrollBar,
+      }}
+      colDefs={{
+        index: {
+          tickInterval: 1,
+          min: -0.2,
+          max,
+          range: [0, 0.98],
+        },
+      }}
+    />
+  );
+};
+
+export default SmallColumnar;

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

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

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

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

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

@@ -0,0 +1,10 @@
+export interface MyStackColumnProps {
+  colors?: string;
+  visible: boolean;
+  legendParams: Array<any>;
+  data: Array<any>;
+  style?: any;
+  x: string;
+  className: string;
+  refData?: { data?: any[]; legendParams: any[]; x?: string };
+}

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

@@ -0,0 +1,89 @@
+import StackColumn from '@lingxiteam/charts/es/StackColumn';
+import { LingXiFC } from '@lingxiteam/types';
+import { useEffect, useMemo } from 'react';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { useJsonToParse } from '../utils/hooks/useJsonToParse';
+import { MyStackColumnProps } from './PropsType';
+
+const MyStackColumn: LingXiFC<MyStackColumnProps> = (props, ref) => {
+  const {
+    colors: iColors,
+    visible,
+    $$componentItem,
+    getEngineApis,
+    style,
+    className,
+    refData,
+    ...restProps
+  } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  const [
+    { data: myData = [], legendParams: myLegendParams = [], x },
+    setState,
+  ] = useAsyncState({
+    data: props.data,
+    legendParams: props.legendParams,
+    x: props.x,
+  });
+
+  const legendParams = useJsonToParse(myLegendParams);
+  const data = useJsonToParse(myData);
+
+  const dataSource = useMemo(
+    () =>
+      data.map((i: any) => {
+        if (i.constructor === Object) {
+          const newObj = {} as any;
+          Object.keys(i).forEach((key) => {
+            newObj[key] = i[key];
+            if (!isNaN(parseInt(i[key], 10))) {
+              newObj[key] = parseInt(i[key], 10);
+            }
+          });
+          return newObj;
+        }
+        return i;
+      }),
+    [JSON.stringify(data)],
+  );
+
+  const { xFontSize, xColor, yFontSize, yColor } = props?.style;
+  const colors = useMemo(() => {
+    if (iColors) {
+      return iColors.split(',');
+    }
+    return undefined;
+  }, [iColors]);
+  const xStyle = useMemo(() => {
+    return { fontSize: xFontSize, fill: xColor };
+  }, [xFontSize, xColor]);
+  const yStyle = useMemo(() => {
+    return { fontSize: yFontSize, fill: yColor };
+  }, [yFontSize, yColor]);
+
+  useEffect(() => {
+    if (refData) {
+      setState(refData as any);
+    }
+  }, [refData]);
+
+  return (
+    <div className={className}>
+      <StackColumn
+        {...restProps}
+        style={finalStyle}
+        color={colors}
+        xStyle={xStyle}
+        yStyle={yStyle}
+        data={dataSource}
+        legendParams={legendParams}
+        x={x}
+      />
+    </div>
+  );
+};
+
+MyStackColumn.displayName = 'StackColumn';
+
+export default MyStackColumn;

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

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

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

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

package/lib/h5public/src/components/factory/src/Star/ctmCoverStyle.tsx

@@ -0,0 +1,7 @@
+export const ctmCoverStyle = {
+  activeColor: '--active-color',
+  inactiveColor: '--inactive-color',
+  inactiveColorHalf: '--inactive-color-half',
+  inputFontSize: '--star-size',
+  justifyContent: 'justifyContent',
+};

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

@@ -0,0 +1,118 @@
+import { DformRate } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { RateProps } from 'antd-mobile-5/es/components/rate/index';
+import React, { useMemo } from 'react';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import Icon from '../Icon';
+import { useFormItem } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import { ctmCoverStyle } from './ctmCoverStyle';
+import transformProps from './transformProps';
+
+export interface MyStarProps extends RateProps {
+  visible: boolean;
+  character?: React.ReactNode;
+  characterIcon?: any;
+  stringCharacter?: string;
+  style: any;
+  fieldProps: string;
+  title: string;
+}
+
+export interface ImperativeProps {
+  setVal: (value: number) => void;
+}
+
+const MyStar = LingxiForwardRef<ImperativeProps, MyStarProps>((props, ref) => {
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onChange = () => {},
+    character,
+    characterIcon,
+    stringCharacter,
+    style = {},
+    defaultValue,
+    getEngineApis,
+    ...restProps
+  } = props;
+  const {
+    disabled,
+    val,
+    getRules,
+    required,
+    visible,
+    onInputChange,
+    readOnly,
+    // @ts-ignore
+  } = useFormItem(ref, props);
+  const { inputFontSize } = style;
+
+  // eslint-disable-next-line consistent-return
+  // @ts-ignore
+  // eslint-disable-next-line consistent-return
+  const mCharacter: React.ReactNode = useMemo(() => {
+    if (character === 'icon') {
+      return (
+        // @ts-ignore
+        <Icon
+          icon={{
+            type: characterIcon?.type,
+            theme: characterIcon?.theme,
+            isIconFont: characterIcon?.isIconFont,
+            fontAddress: characterIcon?.fontAddress,
+            iconFileInfo: characterIcon?.iconFileInfo,
+            iconFile: characterIcon?.iconFile,
+          }}
+          className="cust-icon-theme"
+          style={{
+            fontSize: inputFontSize,
+            width: inputFontSize,
+            height: inputFontSize,
+          }}
+          getEngineApis={getEngineApis}
+          name=""
+        />
+      );
+    }
+    if (character === 'string') {
+      return stringCharacter;
+    }
+  }, [character, characterIcon, stringCharacter]);
+
+  const coverStyle = useMemo(() => {
+    const target = {};
+
+    Object.keys(ctmCoverStyle).forEach((key) => {
+      // @ts-ignore
+      const themeVar = ctmCoverStyle[key];
+      if (style[key]) {
+        // @ts-ignore
+        target[themeVar] = style[key];
+      }
+    });
+
+    return target;
+  }, [style, ctmCoverStyle]);
+
+  return (
+    <FormItem>
+      <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+        <DformRate
+          {...restProps}
+          onChange={onInputChange}
+          required={required}
+          disabled={disabled}
+          defaultValue={val}
+          character={mCharacter}
+          rules={getRules()}
+          style={style}
+          readonly={readOnly}
+          validateTrigger="onChange"
+          coverStyle={coverStyle}
+        />
+      </DFormWrapper>
+    </FormItem>
+  );
+});
+
+export default withTransformProps(MyStar, transformProps);

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

@@ -0,0 +1,18 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { basicStatus, fieldName, value, name, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    status: `${basicStatus}`,
+    defaultValue: value,
+  };
+  return newProps;
+}