@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,238 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-dformfile;
+
+.@{prefixCls} {
+  &-extra-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 11 * @hd;
+    height: 11 * @hd;
+    color: @brand-primary;
+  }
+  &-extra-right {
+    flex-direction: row-reverse;
+  }
+  &-extra {
+    display: flex;
+    align-items: center;
+    padding: 2 * @hd 12 * @hd;
+    color: @brand-primary;
+    font-weight: 500;
+    font-size: @button-font-size-sm;
+    border-radius: 100 * @hd;
+    background-color: rgba(68, 119, 238, 0.10);
+    .@{prefixCls}-extra-icon-left {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 5 * @hd;
+      width: 11 * @hd;
+      height: 11 * @hd;
+      color: @brand-primary;
+    }
+    .@{prefixCls}-extra-icon-right {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 5 * @hd;
+      width: 11 * @hd;
+      height: 11 * @hd;
+      color: @brand-primary;
+    }
+  }
+  &-img-close {
+    position: fixed;
+    top: 10 * @hd;
+    right: 10 * @hd;
+    width: 20 * @hd;
+    height: 20 * @hd;
+    z-index: 1001;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16 * @hd;
+    height: 16 * @hd;
+    align-self: center;
+    margin-right: 6 * @hd;
+
+    svg {
+      width: 16 * @hd;
+      height: 16 * @hd;
+    }
+  }
+
+  &-line-icon {
+    width: 16 * @hd;
+    height: 16 * @hd;
+    color: rgba(146, 149, 154, 0.75);
+
+    svg {
+      width: 16 * @hd;
+      height: 16* @hd;
+      color: rgba(146, 149, 154, 0.75);
+    }
+  }
+
+  &-card-icon {
+    width: 16 * @hd;
+    height: 16 * @hd;
+    color: #47e;
+    margin-bottom: 6 * @hd;
+
+    svg {
+      width: 16 * @hd;
+      height: 16* @hd;
+      color: #47e;
+    }
+  }
+
+  &-list-style-text-item {
+    display: flex;
+    padding: 8 * @hd;
+    background: rgba(28, 36, 46, 0.04);
+    border-radius: 4 * @hd;
+    align-items: center;
+    margin-bottom: 4* @hd;
+    margin-left: -6 * @hd;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &-file-icon {
+      width: 20 * @hd;
+      height: 20 * @hd;
+    }
+
+    &-left-item {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      align-items: center;
+    }
+
+    &-file-name {
+      display: inline-block;
+      font-size: 14 * @hd;
+      font-family: PingFang SC-Regular, PingFang SC, Sans-serif;
+      font-weight: 400;
+      color: rgba(28, 36, 46, 0.75);
+      margin-left: 8*@hd;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: break-all;
+    }
+
+    &-right-icon {
+      display: flex;
+      gap: 4 * @hd;
+      align-items: center;
+      justify-content: center;
+      height: 16 * @hd;
+    }
+  }
+
+  &-list-style-img-item {
+    display: flex;
+    padding: 5 * @hd 0;
+    align-items: center;
+    margin-bottom: 4* @hd;
+    border-bottom: solid 1px #efefef;
+    margin-left: -6 * @hd;
+
+    &:last-child {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    &-left-item {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      align-items: center;
+    }
+
+    &-fileInfo {
+      flex: 1;
+      width: 0;
+      margin-right: 8* @hd;
+    }
+
+    &-file-name {
+      font-size: 14 * @hd;
+      font-weight: 400;
+      color: rgba(28, 36, 46, 0.75);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      height: 22 * @hd;
+      line-height: 22 * @hd;
+    }
+
+    &-file-icon {
+      width: 48 * @hd;
+      height: 48 * @hd;
+      margin-left: -6 * @hd;
+      object-fit: scale-down;
+      border-radius: 4 * @hd;
+    }
+
+    &-upload-time {
+      font-size: 12* @hd;
+      font-weight: 400;
+      color: rgba(28, 36, 46, 0.25);
+      display: flex;
+      align-items: center;
+      height: 22 * @hd;
+      line-height: 22 * @hd;
+    }
+
+    &-more-btn {
+      padding: 1* @hd 12*@hd;
+      font-size: 13 * @hd;
+      color: var(--adm-color-primary);
+      border-radius: 100* @hd;
+      border: 1* @hd solid var(--adm-color-primary);
+      font-family: PingFang SC-Medium, PingFang SC, Sans-serif;
+      line-height: 1.5;
+    }
+
+    &-pover-text {
+      padding: 8 * @hd;
+      font-size: 13 * @hd;
+      font-weight: 400;
+      color: #1C242E;
+    }
+  }
+
+  &-popover {
+    .adm-popover-menu-list {
+      min-width: 10* @hd;
+    }
+
+    .adm-popover-menu-item {
+      padding-left: 0;
+    }
+
+    .adm-popover-menu-item-text {
+      border: none !important;
+      padding: 8px 16px;
+      font-size: 13px;
+    }
+
+    .adm-popover-menu-item-text:first-child {
+      padding-top: 12px;
+
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Form } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import { FormItem } from '../BasicComponents';
+import { DFormContext } from '../utils/form';
+import { withTransformProps } from '../utils/withTransformProps';
+import type { FormFileProps } from './FormFile';
+import FormFile from './FormFile';
+import transformProps from './transformProps';
+
+export type MyDformFileProps = FormFileProps;
+
+const MyDformFile = LingxiForwardRef<any, MyDformFileProps>((props, ref) => {
+  // @ts-ignore
+  const { fieldProps, defaultValue, fieldName } = props;
+  const { isForm } = React.useContext(DFormContext) || {};
+
+  if (!isForm) {
+    return (
+      <FormItem>
+        <FormFile {...props} ref={ref} />
+      </FormItem>
+    );
+  }
+  return (
+    <FormItem>
+      {/* 统一由AddressPicker组件的hidden校验 */}
+      <Form.DFormField
+        name={fieldProps || fieldName}
+        initialValue={defaultValue}
+        params={{ formFlag: true, hidden: true }}
+      >
+        <FormFile {...props} ref={ref} />
+      </Form.DFormField>
+    </FormItem>
+  );
+});
+
+MyDformFile.displayName = 'DformFile';
+
+export default withTransformProps(MyDformFile, transformProps);

package/lib/h5public/src/components/factory/src/DformFile/transformProps.tsx

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

package/lib/h5public/src/components/factory/src/DformImagePicker/ImagePicker.tsx

@@ -0,0 +1,326 @@
+import { DformImagePicker } from '@lingxiteam/dform';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DFormWrapper } from '../BasicComponents';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import UploadHandle from '../utils/upload';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { EngineApisType, LingxiForwardRef } from '@lingxiteam/types';
+// import { usePatchUploadImage } from './usePatchUploadImage';
+
+// @ts-ignore
+export interface ImagePickerProps extends UseFormItemProps {
+  onUpload?: (file: any) => void;
+  onDelete?: (i: any) => void;
+  headers?: any;
+  resAliaKeys?: string;
+  credentials?: boolean;
+  fileIdKey?: string;
+  filePrefix?: string;
+  value?: string;
+  uploadType?: string;
+  onImageClick?: (index: number, files: any, currentFiles: any) => void;
+  isFilespreview: boolean; // 是否点击图片预览
+  limitSize?: any;
+  disableDelete?: boolean;
+  maxLength?: any;
+  capture?: string;
+  selectable?: boolean;
+  columns: any;
+  getEngineApis?: () => EngineApisType;
+  appId: any;
+  fileName?: string;
+  newDefaultValue?: any; // 添加id和url的文件数据
+}
+const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
+  const {
+    // defaultValue,
+    onChange,
+    maxLength,
+    fileName = 'file',
+    headers,
+    resAliaKeys,
+    credentials,
+    fileIdKey,
+    filePrefix,
+    // value,
+    uploadType,
+    capture = '',
+    onImageClick,
+    limitSize,
+    isFilespreview = false,
+    columns,
+    getEngineApis,
+    newDefaultValue = [],
+    ...restProps
+  } = props;
+  const {
+    api = '/app/file/uploadSingleFile',
+    _source,
+    _serviceId,
+  } = columns || {};
+  const uploadResultRef = useRef<any>();
+  const [selectable, setSelectable] = useState(props.selectable);
+  const engineApis = getEngineApis?.();
+
+  const {
+    disabled,
+    val,
+    onInputChange,
+    required,
+    getRules,
+    readOnly,
+    visible,
+    // isForm,
+  } = useFormItem(ref, { ...props, defaultValue: newDefaultValue });
+
+  // const [imageList, setImageList] = useState<any>(val);
+  // const { value, cache } = usePatchUploadImage({ isForm, defaultValue: val, fileIdKey });
+
+  // 上传图片大小，支持MB和KB，存量数据默认是KB
+  const imgLimitSize = useMemo(() => {
+    if (typeof limitSize === 'string') {
+      const num = parseInt(limitSize, 10);
+      if (!isNaN(num)) {
+        const [, unit] = limitSize?.split(`${num}`);
+        if (unit === 'KB') {
+          return num * 1024;
+        }
+        if (unit === 'MB') {
+          return num * 1024 * 1024;
+        }
+      }
+    }
+    return +limitSize * 1024;
+  }, [limitSize]);
+  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,
+        headers,
+        fileIdKey,
+        getLocale: engineApis.getLocale,
+        // @ts-ignore
+        request: engineApis?.http,
+        // @ts-ignore
+        filePrefix: filePrefix || engineApis?.downFieldPrefix(),
+        credentials: 'include', // 跨越携带cookie
+        withCredentials: true,
+        extendUploadData: extendData,
+        getAppFileUrlById: filePrefix ? null : engineApis?.getAppFileUrlById,
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (uploadResultRef?.current) {
+      uploadResultRef.current.setLocale(engineApis.getLocale);
+    }
+  }, [engineApis.getLocale]);
+  useEffect(() => {
+    // 修复当图片已选满，但是中途用户又用组件动作设置了图片数量，导致上传按钮不出现的问题
+    if (val) {
+      setSelectable(getSelectable(val));
+    }
+  }, [val]);
+  const getSelectable = useCallback(
+    (files) => {
+      if (props.selectable === false) {
+        return false;
+      }
+      if (maxLength && files?.length >= maxLength) {
+        return false;
+      }
+      return true;
+    },
+    [maxLength, props.selectable],
+  );
+
+  const onUpload = async (file: any) =>
+    new Promise((resolve, reject) => {
+      uploadResultRef.current.setProps({
+        file,
+        hooks: {
+          uploadAfter(opts: unknown) {
+            resolve(opts);
+          },
+          uploadError: () => {
+            setSelectable(true);
+            reject();
+          },
+        },
+      });
+      uploadResultRef.current.sendRequest();
+    });
+
+  const getImgSize = (base64Str: string) => {
+    if (base64Str) {
+      if (base64Str.includes(',')) {
+        const base64 = base64Str.split(',')[1].split('=')[0];
+        const strLength = base64.length;
+        const fileLength = strLength - (strLength / 8) * 2;
+        const size = parseInt(`${fileLength}`, 10);
+        return size;
+      }
+      return -1;
+    }
+    return -1;
+  };
+
+  // eslint-disable-next-line consistent-return
+  const onDelete = (file: any) => {
+    if (props.onDelete) {
+      return props.onDelete(file);
+    }
+  };
+  const onUploadChangeFile = async (files: any[]) => {
+    let imgList = files;
+    try {
+      if (typeof imgList === 'string') {
+        imgList = JSON.parse(imgList);
+      }
+    } catch (e) {
+      //
+      imgList = [];
+    }
+    // cache(imgList);
+    setSelectable(getSelectable(imgList));
+    onInputChange(imgList);
+  };
+
+  // 上传
+  const handleUpload = (file: any, base64Url: any) => {
+    setSelectable(false);
+    // 当上传方式修改base64时，不需要上传图片，只需要将图片转换成base64String
+    if (uploadType === 'base64StringType' && base64Url) {
+      let size = -1;
+      let url;
+      if (typeof base64Url === 'string') {
+        url = base64Url;
+        size = getImgSize(url);
+      }
+      const base64String = {
+        name: file?.name || '',
+        data: url || '',
+        size: size !== -1 ? size : 0,
+        url,
+        file,
+      };
+      let res: any;
+      if (props.onUpload) {
+        res = props.onUpload([base64String]);
+      }
+      return res?.url ? res : base64String;
+    }
+    return uploadResultRef.current.queue([onUpload], [file]).then(() => {
+      const values = uploadResultRef.current.values();
+      if (props.onUpload) {
+        props.onUpload(values);
+      }
+      return values[0];
+    });
+  };
+
+  const ImgPicker: any = DformImagePicker;
+
+  const preview = useMemo(() => {
+    // 如编排了点击图片事件，将不采用系统默认预览弹窗
+    if (typeof onImageClick === 'function') {
+      return false;
+    }
+    if (disabled) {
+      // 禁用不允许预览
+      return false;
+    }
+    return isFilespreview;
+  }, [isFilespreview, onImageClick, disabled]);
+
+  return (
+    <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+      {capture === 'camera' ? (
+        <ImgPicker
+          {...restProps}
+          limitSize={imgLimitSize}
+          onImageClick={(index: number, file: any, files: any) => {
+            if (onImageClick) {
+              onImageClick(index, files, file);
+            }
+          }}
+          rules={getRules()}
+          maxCount={maxLength}
+          required={required}
+          preview={preview}
+          defaultValue={val}
+          accept="image/*,image/heic"
+          positionType="vertical"
+          deletable={restProps.disableDelete}
+          disabled={disabled}
+          getLocale={(
+            t: string,
+            tempValue: Record<string, any> | undefined,
+          ) => {
+            return engineApis?.getLocale(
+              `DformImagePicker.${t}`,
+              '',
+              tempValue,
+            );
+          }}
+          selectable={selectable}
+          onChange={onUploadChangeFile}
+          capture="camera"
+          upload={handleUpload}
+          onDelete={onDelete}
+          uploadType={uploadType}
+          readonly={readOnly}
+        />
+      ) : (
+        <ImgPicker
+          {...restProps}
+          comp
+          rules={getRules()}
+          maxCount={maxLength}
+          preview={preview}
+          limitSize={imgLimitSize}
+          onImageClick={(index: number, file: any, files: any) => {
+            if (onImageClick) {
+              onImageClick(index, files, file);
+            }
+          }}
+          required={required}
+          defaultValue={val}
+          accept="image/*,image/heic"
+          deletable={restProps.disableDelete}
+          positionType="vertical"
+          selectable={selectable}
+          disabled={disabled}
+          upload={handleUpload}
+          onChange={onUploadChangeFile}
+          onDelete={onDelete}
+          uploadType={uploadType}
+          readonly={readOnly}
+          getLocale={(
+            t: string,
+            tempValue: Record<string, any> | undefined,
+          ) => {
+            return engineApis?.getLocale(
+              `DformImagePicker.${t}`,
+              '',
+              tempValue,
+            );
+          }}
+        />
+      )}
+    </DFormWrapper>
+  );
+});
+
+ImagePicker.displayName = 'dformImagePicker';
+
+export default ImagePicker;