@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,304 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Spin } from '../../BasicComponents';
+import { transformFile } from '../../utils';
+import UploadHandle from '../../utils/upload';
+import './index.less';
+
+export interface FileProps {
+  value?: string;
+  fileName?: string;
+  headers?: Record<string, any>;
+  resAliaKeys?: string;
+  credentials?: boolean;
+  visible?: boolean;
+  accept?: string;
+  style?: React.CSSProperties;
+  hidden?: boolean;
+  onChange?: (file: any) => void;
+  uploadType?: string;
+  onBeforeUpload?: (file: any) => boolean;
+  columns?: any;
+  onInputValue?: any;
+  onCheckUpload?: () => Promise<any> | any;
+  compressMethod?: string;
+  compressRatio?: number;
+  triggerConditons?: number;
+  compressSize?: number;
+}
+
+interface UploadCallbackType {
+  success?: (data: any, file: any) => void;
+  fail?: (err?: any) => void;
+}
+
+const prefixCls = 'lcdp-file';
+const File = LingxiForwardRef<any, FileProps>((props, ref) => {
+  const {
+    style = {},
+    hidden = false,
+    value,
+    fileName = 'file',
+    uploadType,
+    headers,
+    resAliaKeys,
+    credentials,
+    onInputValue,
+    visible = true,
+    onBeforeUpload,
+    columns,
+    onCheckUpload,
+    getEngineApis,
+    accept,
+    compressMethod = 'compressRatio',
+    compressRatio,
+    triggerConditons,
+    compressSize,
+    ...restProps
+  } = props;
+  const {
+    api = '/app/file/uploadSingleFile',
+    _source,
+    _serviceId,
+  } = columns || {};
+  const engineApis = getEngineApis?.();
+  const [fileProps, setFileProps] = useState(restProps);
+  const uploadCallbackRef = useRef<UploadCallbackType>({});
+  const uploadResultRef = useRef<any>();
+  const FileRef = useRef<HTMLInputElement>(null);
+  const [selectImg, setSelectImg] = useState('');
+  const [spinning, setSpinning] = useState(false);
+  const [showStopRender, setShowStopRender] = useState(false);
+  const { getLocale } = engineApis;
+
+  useEffect(() => {
+    if (onCheckUpload && typeof onCheckUpload === 'function') {
+      setShowStopRender(true);
+    }
+  }, [onCheckUpload]);
+
+  const cStyle = useMemo(() => {
+    if (hidden) {
+      return {
+        width: 0,
+        height: 0,
+        display: 'none',
+        overflow: 'hidden',
+      };
+    }
+    const temObject = {
+      ...style,
+    };
+    if (selectImg || value) {
+      temObject.backgroundImage = `url(${selectImg || value})`;
+    }
+    return temObject;
+  }, [hidden, selectImg, value, style]);
+
+  const uploadAfter = async (options: { resultObject: any; file: any }) => {
+    setSpinning(false);
+    const { resultObject: fileObj, file } = options;
+    if (uploadCallbackRef.current.success) {
+      uploadCallbackRef.current.success(fileObj, file);
+    }
+    setSelectImg(engineApis.getAppFileUrlById(fileObj.fileId));
+  };
+
+  useImperativeHandle(ref, () => ({
+    upload(
+      opts = {},
+      success: ((data: any, file: any) => void) | undefined,
+      fail: any,
+    ) {
+      setFileProps((prevProps) => ({ ...prevProps, ...opts }));
+      uploadCallbackRef.current.success = success;
+      uploadCallbackRef.current.fail = fail;
+      setTimeout(() => {
+        if (FileRef.current) {
+          FileRef.current.click();
+        }
+      }, 0);
+    },
+    get value() {
+      return uploadResultRef?.current?.value() || selectImg || value;
+    },
+    setSrc(src: string) {
+      setSelectImg(src);
+    },
+    setCompFileId: (fileId: string) => {
+      setSelectImg(engineApis.getAppFileUrlById(fileId));
+    },
+  }));
+
+  /**
+   * 文件流上传方式
+   * @param targetFile
+   */
+  const uploadFileReq = (targetFile: any) => {
+    setSpinning(true);
+    uploadResultRef.current.setProps({
+      file: targetFile,
+      hooks: {
+        uploadAfter,
+        uploadError: () => {
+          setSpinning(false);
+        },
+      },
+    });
+    uploadResultRef.current.sendRequest();
+  };
+
+  /**
+   * base64上传方式
+   */
+  const uploadFileFromBase64 = (targetFile: any) => {
+    const reader = new FileReader();
+    reader.onload = (ev: any) => {
+      setSelectImg(ev.target.result);
+      if (props?.onChange) {
+        props.onChange(ev.target.result);
+      }
+    };
+    reader.readAsDataURL(targetFile);
+  };
+
+  const onChange = async (e: { currentTarget: any; target: any }) => {
+    const { files } = e.currentTarget || e.target;
+
+    if (typeof onBeforeUpload === 'function') {
+      const exit = await onBeforeUpload(files[0]);
+      console.log(exit);
+      if (exit) {
+        return;
+      }
+    }
+    let targetCompressRation: number | undefined;
+    const fileSizeToKB = files[0].size / 1024; // 统一转换成KB进行换算
+    let maxSizeKB: number | undefined;
+    if (
+      compressMethod === 'custom' &&
+      typeof triggerConditons === 'number' &&
+      typeof compressSize === 'number' &&
+      fileSizeToKB > triggerConditons &&
+      triggerConditons >= compressSize
+    ) {
+      // 压缩方式自定义:图片大小大于触发条件且大于指定压缩大小时进行压缩
+      // 压缩至指定大小， 初始1开始，内部会进行递归压缩
+      targetCompressRation = 1;
+      maxSizeKB = compressSize;
+    } else if (compressMethod === 'compressRatio') {
+      // 按照自定义压缩率压缩
+      targetCompressRation = compressRatio;
+    }
+    if (targetCompressRation) {
+      const newFile = await transformFile(
+        files[0],
+        targetCompressRation,
+        maxSizeKB,
+      );
+      // 当上传方式修改base64时，不需要上传图片，只需要将图片转换成base64String
+      if (uploadType === 'base64StringType') {
+        uploadFileFromBase64(newFile);
+      } else {
+        uploadFileReq(newFile);
+      }
+    } else if (uploadType === 'base64StringType') {
+      uploadFileFromBase64(files[0]);
+    } else {
+      uploadFileReq(files[0]);
+    }
+  };
+
+  useEffect(() => {
+    if (!uploadResultRef.current) {
+      const extendData = {};
+      if (_source === 'std') {
+        // @ts-ignore
+        extendData['ORCHESTRATION.appId'] = props?.appId;
+        // @ts-ignore
+        extendData['ORCHESTRATION.serviceVersionId'] = _serviceId;
+      }
+      uploadResultRef.current = new UploadHandle({
+        alias: resAliaKeys,
+        fileName,
+        url: api,
+        // @ts-ignore
+        request: engineApis?.http,
+        getLocale: engineApis.getLocale,
+        headers,
+        onChange: (v) => {
+          if (props.onChange) {
+            props.onChange(v);
+          }
+        },
+        credentials: credentials === true ? 'include' : 'same-origin',
+        extendUploadData: extendData,
+        getAppFileUrlById: engineApis?.getAppFileUrlById,
+        filePrefix: engineApis?.downFieldPrefix(),
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (uploadResultRef?.current) {
+      uploadResultRef.current.setLocale(engineApis.getLocale);
+    }
+  }, [engineApis.getLocale]);
+  // 模拟点击
+  const onSimulatedClick = () => {
+    if (FileRef.current) {
+      FileRef.current?.click();
+    }
+  };
+
+  // 模拟点击出发布局
+  const renderClickDiv = () => {
+    return (
+      <div
+        className={`${prefixCls}-stop`}
+        onClick={async (e) => {
+          e.stopPropagation();
+          if (onCheckUpload) {
+            const isCheck = await onCheckUpload();
+            // eslint-disable-next-line
+            if (isCheck == 0) {
+              // 不操作
+            } else {
+              onSimulatedClick();
+            }
+          }
+        }}
+      />
+    );
+  };
+
+  if (!visible) {
+    return <></>;
+  }
+  return (
+    <div className={prefixCls} style={cStyle}>
+      <Spin
+        spinning={spinning}
+        tip={`${getLocale('uploading', '正在上传')}...`}
+      >
+        <input
+          {...fileProps}
+          ref={FileRef}
+          accept={accept}
+          type="file"
+          onChange={onChange}
+          className={`${prefixCls}-input`}
+        />
+        {showStopRender && renderClickDiv()}
+      </Spin>
+    </div>
+  );
+});
+
+export default File;

package/lib/h5public/src/components/factory/src/Image/factoryImage.tsx

@@ -0,0 +1,114 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useMemo } from 'react';
+import { withTransformProps } from '../utils/withTransformProps';
+import IconError from './assets/error.png';
+import IconPlaceholder from './assets/placeholder.png';
+import Image from './BasicImage';
+import File from './File';
+import './index.less';
+import transformProps from './transformProps';
+
+export interface MyImageProps {
+  disabled: boolean;
+  visible?: boolean;
+  accept?: string;
+  value?: string;
+  srcType?: 'fileCode' | 'src';
+  src?: string;
+  fileCode?: string;
+  defaultSrc?: string;
+  errorSrc: string;
+  onClick: (e: HTMLElement) => void;
+}
+
+const prefixCls = 'lcdp-image';
+const MyImage = LingxiForwardRef<any, MyImageProps>((props, ref) => {
+  const {
+    disabled = false,
+    accept = 'image/*,image/heic',
+    value,
+    srcType,
+    src,
+    fileCode,
+    children,
+    defaultSrc = IconPlaceholder,
+    onClick,
+    getEngineApis,
+    ...restProps
+  } = props;
+  const { getAppFileUrlByFileCode, getAppFileUrlById } = getEngineApis() || {};
+  // const [imgSrc, setImgSrc] = React.useState<string>();
+  // const [errorSrc, setErrorSrc] = React.useState<string>();
+  const transValue = (temValue: any) => {
+    if (typeof temValue === 'string' && temValue.startsWith('http')) {
+      return temValue;
+    }
+    if (typeof temValue === 'object') {
+      if (temValue.fileId) {
+        return getAppFileUrlById(temValue.fileId);
+      }
+    }
+    return undefined;
+  };
+
+  const imgSrc = useMemo(() => {
+    let mySrcType = srcType;
+    if (!mySrcType) {
+      // 存量数据判断，建议三个月以上的时间之后再进行删除
+      if (fileCode) {
+        mySrcType = 'fileCode';
+      } else {
+        mySrcType = 'src';
+      }
+    }
+    if (value) {
+      const realvalue = transValue(value);
+      return realvalue;
+    }
+    if (mySrcType === 'fileCode' && fileCode) {
+      return getAppFileUrlByFileCode(fileCode);
+    }
+    if (mySrcType === 'src' && src) {
+      return src;
+    }
+    return undefined;
+  }, [fileCode, src, value, srcType]);
+
+  const errorSrc = useMemo(() => {
+    let tempSrc: string = IconError;
+    if (props.errorSrc) {
+      tempSrc = getAppFileUrlByFileCode(props.errorSrc);
+    }
+    return tempSrc;
+  }, [props.errorSrc]);
+
+  // 图片点击事件优先级最高
+  if (onClick || disabled) {
+    return (
+      <Image
+        {...restProps}
+        onClick={onClick}
+        getEngineApis={getEngineApis}
+        ref={ref}
+        className={prefixCls}
+        src={imgSrc}
+        errorSrc={errorSrc}
+        defaultSrc={defaultSrc}
+      />
+    );
+  }
+  if (!disabled) {
+    return (
+      <File
+        ref={ref}
+        value={imgSrc}
+        accept={accept}
+        {...restProps}
+        getEngineApis={getEngineApis}
+      />
+    );
+  }
+  return null;
+});
+
+export default withTransformProps(MyImage, transformProps);

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

@@ -0,0 +1,6 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+.lcdp-image {
+  width: 100 * @hd;
+  height: 100 * @hd;
+}

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

@@ -0,0 +1,13 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import DformCustom from '../DformCustom';
+import MyImage, { MyImageProps } from './factoryImage';
+
+const Image = LingxiForwardRef<any, MyImageProps>((props, ref) => {
+  return (
+    <DformCustom.Item showError getEngineApis={props.getEngineApis}>
+      <MyImage {...props} ref={ref} />
+    </DformCustom.Item>
+  );
+});
+
+export default Image;

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

@@ -0,0 +1,19 @@
+interface Props {
+  style: CSSStyleDeclaration;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { style, height, objectFit, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    disabled: true,
+    style: {
+      ...style,
+      width: '100%',
+      height,
+      objectFit,
+    },
+  };
+  return newProps;
+}

package/lib/h5public/src/components/factory/src/Input/BasicInput/index.less

@@ -0,0 +1,21 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-input;
+
+.@{prefixCls} {
+  display: inline-block;
+  height: 40 * @hd;
+  padding: 5 * @hd;
+  color: #333;
+  font-size: 14 * @hd;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.@{prefixCls}-error-text{
+  color: #FF7474;
+  font-size: 12 * @hd;
+  padding-top: 4 * @hd;
+  flex-direction: row-reverse;
+}

package/lib/h5public/src/components/factory/src/Input/BasicInput/index.tsx

@@ -0,0 +1,144 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import classnames from 'classnames';
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { getRules, ruesEcute } from '../../utils';
+import './index.less';
+
+interface BasicInputProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    'onChange'
+  > {
+  onChange?: (val: any) => void;
+  onBlur?: (val?: any) => void;
+  onKeyDown?: (val?: any) => void;
+  visible?: boolean;
+  rules?: any; // 如果在表单行容器中，会传入
+  regexp?: any[];
+}
+
+const prefixCls = 'lcdp-input';
+
+const BasicInput = LingxiForwardRef<any, BasicInputProps>((props, ref) => {
+  // eslint-disable-next-line max-len
+  const {
+    value,
+    onChange,
+    style,
+    rules,
+    disabled,
+    type,
+    onKeyDown,
+    onBlur,
+    maxLength,
+    regexp,
+    title,
+    readOnly,
+    required,
+    visible,
+    placeholder,
+    className,
+  } = props;
+  const [errMessage, setErrMessage] = useState('');
+  const curRef = useRef(null);
+  const getAppRules = useCallback(() => {
+    const finalRules = getRules({
+      required,
+      message: placeholder,
+      regexp,
+    });
+    if (Array.isArray(rules)) {
+      finalRules.push(...rules);
+    }
+    return finalRules as any;
+  }, [regexp, required, title, rules]);
+  const useErrorMessage = () => {
+    if (readOnly || disabled) return;
+    const errMessage = ruesEcute(getAppRules(), value);
+    setErrMessage(errMessage);
+  };
+  useImperativeHandle(ref, () => ({
+    clearValue() {
+      onChange && onChange('');
+    },
+    focus() {
+      if (curRef) {
+        (curRef as any)?.current.focus();
+      }
+    },
+    blur() {
+      if (curRef) {
+        (curRef as any)?.current.blur();
+      }
+    },
+  }));
+  if (!visible) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <input
+        title={title}
+        required={required}
+        placeholder={placeholder}
+        autoComplete="off"
+        maxLength={maxLength}
+        readOnly={readOnly}
+        disabled={disabled}
+        ref={curRef}
+        value={readOnly && !value ? '--' : value || ''}
+        className={classnames(prefixCls, className)}
+        style={style}
+        // number类型自己手动处理
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        type={type === 'number' && props.rules ? undefined : type}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter') {
+            if (onKeyDown) {
+              onKeyDown(e.currentTarget.value);
+            }
+            const inputDOM: HTMLInputElement = curRef.current!;
+            if (inputDOM) {
+              inputDOM.blur();
+            }
+            useErrorMessage();
+          }
+        }}
+        onBlur={(e) => {
+          const v = e.currentTarget.value;
+          if (onBlur) {
+            onBlur(v);
+          }
+          useErrorMessage();
+        }}
+        onInput={(e) => {
+          if (type === 'number') {
+            e.currentTarget.value = e.currentTarget.value.replace(/[^\d]/g, '');
+          }
+        }}
+        onChange={(e) => {
+          const v = e.currentTarget.value;
+          if (onChange) {
+            onChange(v);
+          }
+        }}
+      />
+      {errMessage && (
+        <div style={style} className={`${prefixCls}-error-text`}>
+          {errMessage}
+        </div>
+      )}
+    </>
+  );
+});
+
+export default BasicInput;

package/lib/h5public/src/components/factory/src/Input/BasicTextArea/index.less

@@ -0,0 +1,18 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-textarea;
+
+.@{prefixCls} {
+  height: 80 * @hd;
+  padding: 5 * @hd;
+  color: #333;
+  line-height: 20 * @hd;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+.@{prefixCls}-error-text{
+  color: #FF7474;
+  font-size: 12 * @hd;
+  padding-top: 4 * @hd;
+  flex-direction: row-reverse;
+}