@cloudbase/weda-ui 0.2.11 → 0.2.15

package/src/web/components/form/uploaderFile/uploadFile.pc.tsx

@@ -0,0 +1,507 @@
+import * as React from 'react';
+import {
+  Upload,
+  ConfigProvider,
+  Button,
+  message,
+  Icon,
+  Text,
+  List,
+} from 'tea-component';
+import { v4 } from 'uuid';
+import {
+  filterStrList,
+  isCloudFileID,
+  isHttpFileID,
+  transSize,
+  downloadFile,
+  cutFileTitle,
+} from '../../../utils/platform';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import classNames from '../../../utils/classnames';
+import { renderDecorator } from '../renderDecorator';
+import { CommonFormPropsType } from '../types';
+
+// 默认组件类前缀
+const CLASS_PREFIX = 'weda-upload-file-pc';
+
+// 上传状态字典
+const statusMap = {
+  0: { title: '待上传', icon: 'pending-gray' },
+  1: { title: '上传 ...', icon: 'loading' },
+  2: { title: '上传成功', icon: 'success' },
+  3: { title: '上传失败', icon: 'error' },
+};
+
+// 上传文件Context
+const FileContext = React.createContext(null);
+
+/**
+ * 上传文件 PC 版本
+ */
+export function UploadFilePc({
+  // 系统属性
+  layout,
+  id = '',
+  style = {},
+  labelVisible = true,
+  label = '上传文件',
+  requiredFlag = false,
+  disabled = false,
+  className = '',
+  events = { success: null, error: null, change: null },
+  // 组件属性
+  decorator,
+  tips = '',
+  btnTitle = '点击上传',
+  maxUploadCount = 9,
+  maxSize = 1024,
+  single = true,
+  defaultValue = [], // 组件默认初始化值
+  value = [], // 用于模型组件中 formily 的值管理
+  acceptTypes = [],
+  downloadVisible = true,
+  deleteVisible = true,
+  uploadPath = 'weda-uploader',
+  onChange = null,
+  isEdit = true,
+}: IUploaderFilePc) {
+  const [fileIDList, setfileIDList] = React.useState(
+    filterStrList([].concat(defaultValue, value))
+  ); // 上传成功文件ID列表，fileID[]
+  const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
+  const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
+
+  React.useEffect(() => {
+    // 外部 onChange 事件
+    const pureFileIDList = fileIDList.filter(
+      (d) => isCloudFileID(d) || isHttpFileID(d)
+    );
+    if (single) {
+      const file = pureFileIDList[0] || '';
+      onChange?.(file);
+      events?.change?.({ value: file });
+      events?.success?.({ value: file });
+    } else {
+      onChange?.(pureFileIDList);
+      events?.change?.({ value: pureFileIDList });
+      events?.success?.({ value: pureFileIDList });
+    }
+  }, [fileIDList]);
+
+  // 外层组件类
+  const cls = classNames({
+    'weda-ui': true,
+    [className]: className,
+  });
+
+  // 批量上传文件前置事件
+  const handleBefore = (file, fileList, isAccepted, error) => {
+    if (fileList.length + fileIDList.length > maxUploadCount) {
+      message.warning({ content: `上传文件总数不能超过${maxUploadCount}个` });
+      return false;
+    }
+    if (!isAccepted) {
+      try {
+        const errorList = [];
+        if (error.find((item) => item?.code === 'file-invalid-type')) {
+          errorList.push('上传文件类型错误');
+        }
+        if (error.find((item) => item?.code === 'file-too-large')) {
+          errorList.push(`上传文件大小不能超过${maxSize}M`);
+        }
+        message.error({ content: errorList.join(', ') });
+      } catch (e) {}
+      return false;
+    }
+    file['_uuid'] = v4();
+    setFileList((list) => [...list, file]);
+    return false;
+  };
+
+  // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
+  const handleChange = ({ fileID, uuid, type, size }) => {
+    // 上传时新增事件
+    if (type === 'add') {
+      fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
+      fileID && setfileIDList((list) => [...list, fileID]);
+    } else {
+      fileID && setfileIDList((list) => list.filter((d) => d !== fileID));
+    }
+    uuid && setFileList((list) => list.filter((item) => uuid !== item?._uuid));
+  };
+
+  // 上传组件属性
+  const uploadProps = { multiple: !single };
+  if (
+    !(
+      !acceptTypes?.length ||
+      acceptTypes?.includes('*') ||
+      acceptTypes?.includes('')
+    )
+  ) {
+    uploadProps['accept'] = Array.from(new Set(acceptTypes));
+  }
+  tips && (uploadProps['title'] = tips);
+  maxSize && (uploadProps['maxSize'] = maxSize * 1024 * 1024);
+  const btnDisabled =
+    fileIDList.length >= maxUploadCount || (single && fileIDList.length > 0);
+
+  return renderDecorator(
+    <ConfigProvider classPrefix="wedatea2td">
+      <FileContext.Provider
+        value={{
+          uploadPath,
+          downloadVisible,
+          deleteVisible,
+          onChange: handleChange,
+          isEdit,
+          events,
+          fileSizeObj,
+        }}
+      >
+        <div className={`${CLASS_PREFIX}`}>
+          {isEdit && (
+            <div className={`${CLASS_PREFIX}__input-box`}>
+              {disabled || btnDisabled ? (
+                <Button type="weak" disabled={true}>
+                  {btnTitle}
+                </Button>
+              ) : (
+                <Upload {...uploadProps} beforeUpload={handleBefore}>
+                  <Button type="weak" className={`${CLASS_PREFIX}__btn--weak`}>
+                    {btnTitle}
+                  </Button>
+                  {!single && (
+                    <Text
+                      theme="weak"
+                      className={`${CLASS_PREFIX}__btn-descripe`}
+                    >
+                      支持批量上传
+                    </Text>
+                  )}
+                </Upload>
+              )}
+            </div>
+          )}
+          <List split="divide">
+            <List.Item>
+              <div
+                className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-header`}
+              >
+                <div
+                  className={`${CLASS_PREFIX}--item-title ${CLASS_PREFIX}--item-label`}
+                >
+                  文件名
+                </div>
+                <div
+                  className={`${CLASS_PREFIX}--item-size ${CLASS_PREFIX}--item-label`}
+                >
+                  大小
+                </div>
+                <div
+                  className={`${CLASS_PREFIX}--item-status ${CLASS_PREFIX}--item-label`}
+                >
+                  状态
+                </div>
+                <div className={`${CLASS_PREFIX}--item-action`}>操作</div>
+              </div>
+            </List.Item>
+
+            {fileIDList.map((d) => (
+              <List.Item key={d}>{<TcbFileEcho fileID={d} />}</List.Item>
+            ))}
+
+            {fileList.map((item) => (
+              <List.Item key={item?._uuid}>
+                {<TcbFileUpload file={item} />}
+              </List.Item>
+            ))}
+
+            {isEdit && fileIDList.length === 0 && fileList.length === 0 && (
+              <List.Item className={`${CLASS_PREFIX}--item-empty`}>
+                <div className={`${CLASS_PREFIX}--item`}>
+                  点击上方“{btnTitle}”按钮
+                </div>
+              </List.Item>
+            )}
+          </List>
+        </div>
+      </FileContext.Provider>
+    </ConfigProvider>,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+  });
+}
+
+export interface IUploaderFilePc extends CommonFormPropsType {
+  btnTitle?: string;
+  maxUploadCount?: number;
+  downloadVisible?: boolean;
+  deleteVisible?: boolean;
+  defaultValue?: string | string[];
+  maxSize?: number;
+  single?: boolean;
+  acceptTypes?: any[];
+  tips?: string;
+  value?: string | string[];
+  uploadPath?: string;
+  isEdit?: boolean;
+  onChange?: Function;
+}
+
+interface ITcbFileEcho {
+  fileID?: string;
+}
+
+/**
+ * 基于 FileID 回显文件表格行组件
+ */
+const TcbFileEcho = ({ fileID }: ITcbFileEcho) => {
+  const [src, setSrc] = React.useState('');
+  const { fileSizeObj } = React.useContext(FileContext) || {};
+  React.useEffect(() => {
+    const fetchFileId = async (id) => {
+      if (isCloudFileID(id)) {
+        try {
+          const fileSrc = await getTempFileURL(id);
+          setSrc(fileSrc);
+        } catch (e) {}
+      } else {
+        setSrc(id);
+      }
+    };
+    fetchFileId(fileID);
+  }, [fileID]);
+
+  const title = React.useMemo(() => {
+    if (isCloudFileID(fileID)) {
+      const uuidReg = /file-[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}-/;
+      const lastIndex = `${fileID}`.lastIndexOf('/');
+      const name = `${fileID}`.slice(lastIndex + 1);
+      const title = name.replace(uuidReg, '');
+      return title;
+    } else {
+      return fileID;
+    }
+  }, [fileID]);
+
+  return (
+    <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
+      <div className={`${CLASS_PREFIX}--item-title`} title={title}>
+        {cutFileTitle(title)}
+      </div>
+      <div className={`${CLASS_PREFIX}--item-size`}>
+        {fileSizeObj[fileID] || '--'}
+      </div>
+      <div className={`${CLASS_PREFIX}--item-status`}>
+        <UploadFileStatus />
+      </div>
+      <div className={`${CLASS_PREFIX}--item-action`}>
+        <UploadFileAction status="2" fileID={fileID} src={src} />
+      </div>
+    </div>
+  );
+};
+
+interface ITcbFileUpload {
+  file?: any;
+}
+
+/**
+ * 基于 File 上传文件过程表格行组件
+ */
+const TcbFileUpload = ({ file }: ITcbFileUpload) => {
+  const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
+  const [percent, setPercent] = React.useState(0); // 上传进度
+  const [status, setStatus] = React.useState('0'); // 上传状态
+  const cancleRef = React.useRef(''); // 取消的uuid
+
+  // 上传文件相关属性
+  const { size, title, uuid } = React.useMemo(() => {
+    const size = transSize(file?.size);
+    const title = file?.name || '';
+    const uuid = file?._uuid;
+    return { size, title, uuid };
+  }, [file?._uuid]);
+
+  React.useEffect(() => {
+    handleUpload(file);
+  }, [file?._uuid]);
+
+  // 上传过程
+  const handleUpload = async (file) => {
+    const tcb = await getCloudInstance();
+    try {
+      setStatus('0');
+      const { fileID } = await tcb.uploadFile({
+        cloudPath: `${uploadPath}/${`file-${uuid}-${title}`}`,
+        filePath: file,
+        onUploadProgress: (progressEvent) => {
+          let percent = 0;
+          percent = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          setStatus('1');
+          setPercent(percent < 100 ? percent : 100);
+        },
+      });
+      !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
+      setStatus('2');
+    } catch (e) {
+      setStatus('3');
+      events.error && events.error(e);
+    }
+  };
+
+  return (
+    <div className={`${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`}>
+      <div className={`${CLASS_PREFIX}--item-title`} title={title}>
+        {cutFileTitle(title)}
+      </div>
+      <div className={`${CLASS_PREFIX}--item-size`}>{size}</div>
+      <div className={`${CLASS_PREFIX}--item-status`}>
+        <UploadFileStatus status={status} percent={percent} />
+      </div>
+      <div className={`${CLASS_PREFIX}--item-action`}>
+        <UploadFileAction
+          file={file}
+          uuid={file?._uuid}
+          status={status}
+          onCancel={(uuid) => {
+            cancleRef.current = uuid;
+            onChange?.({ type: 'delete', uuid });
+          }}
+          onReLoad={handleUpload}
+        />
+      </div>
+    </div>
+  );
+};
+
+interface IUploadFileStatus {
+  status?: string;
+  percent?: number;
+}
+
+/**
+ * 上传文件状态组件
+ */
+const UploadFileStatus = ({ status = '2', percent = 0 }: IUploadFileStatus) => {
+  if (status == '1' && percent) {
+    return (
+      <>
+        <Icon type="loading" />
+        上传{percent}% ...
+      </>
+    );
+  }
+  return (
+    <>
+      <Icon type={statusMap[status]?.icon || statusMap['0'].icon} />
+      {statusMap[status]?.title || statusMap['0'].title}
+    </>
+  );
+};
+
+interface IUploadFileAction {
+  status?: string;
+  fileID?: string;
+  uuid?: string;
+  src?: string;
+  file?: any;
+  onReLoad?: any;
+  onCancel?: any;
+}
+
+/**
+ * 操作列组件, onChange 从最外层 UploadFilePc 传进来
+ * props: { status, fileID, uuid, src, onChange }
+ */
+const UploadFileAction = ({
+  status = '0',
+  fileID = '',
+  uuid = '',
+  src = '',
+  file = null,
+  onReLoad = null,
+  onCancel = null,
+}: IUploadFileAction) => {
+  const { onChange, downloadVisible, deleteVisible, isEdit } =
+    React.useContext(FileContext) || {};
+
+  // 操作列按钮-删除
+  const renderDelete = () =>
+    isEdit &&
+    deleteVisible && (
+      <Button
+        type="link"
+        onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
+      >
+        删除
+      </Button>
+    );
+
+  // 操作列按钮-取消
+  const renderCancel = () =>
+    isEdit && (
+      <Button onClick={() => onCancel?.(uuid)} type="link">
+        取消
+      </Button>
+    );
+
+  // 操作列按钮-重新上传
+  const renderReLoad = () =>
+    isEdit && (
+      <Button
+        type="link"
+        onClick={() => {
+          onReLoad?.(file);
+        }}
+      >
+        重新上传
+      </Button>
+    );
+
+  // 操作列按钮-下载
+  const renderDownLoad = () =>
+    downloadVisible && (
+      <Button
+        type="link"
+        title="点击下载文件"
+        onClick={() => downloadFile(src)}
+      >
+        下载
+      </Button>
+    );
+
+  switch (status) {
+    case '0':
+      return renderCancel();
+    case '1':
+      return renderCancel();
+    case '2':
+      return (
+        <>
+          {renderDelete()}
+          {renderDownLoad()}
+        </>
+      );
+    case '3':
+      return (
+        <>
+          {renderDelete()}
+          {renderReLoad()}
+        </>
+      );
+    default:
+      return null;
+  }
+};

package/src/web/components/image/image.tsx

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { ConfigProvider, ImagePreview } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { useGesture } from '@use-gesture/react';
+import { PropsType } from './index';
+interface ImageInnerPropsType extends Omit<PropsType, 'fit' | 'mode'> {
+  objectFit: React.CSSProperties['objectFit'];
+  isError: boolean;
+  setIsError: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export function ImageInner({
+  objectFit,
+  style,
+  className,
+  alt,
+  src,
+  isError,
+  setIsError,
+  events,
+  lazyLoad,
+  maskClosable,
+  imgPreview,
+}: ImageInnerPropsType) {
+  const platform = usePlatform();
+  const [imgShow, setImgShow] = React.useState(false);
+  const onMaskClick = () => {
+    if (maskClosable) {
+      setImgShow(false);
+    }
+  };
+
+  const [showHeight, setShowHeight] = React.useState(0);
+  const realWidth = React.useRef(0);
+  const realHeight = React.useRef(0);
+  const [offsetHeight, setOffsetHeight] = React.useState(0);
+  const [translateX, setTranslateX] = React.useState(0);
+  const [translateY, setTranslateY] = React.useState(0);
+  const [previewScale, setPreviewScale] = React.useState(1);
+  React.useEffect(() => {
+    // 防止触发浏览器的放大缩小
+    const handler = (e) => e.preventDefault();
+    document.addEventListener('gesturestart', handler);
+    document.addEventListener('gesturechange', handler);
+    return () => {
+      document.removeEventListener('gesturestart', handler);
+      document.removeEventListener('gesturechange', handler);
+    };
+  }, []);
+
+  const bind = useGesture(
+    {
+      onClick: ({ event }) => {
+        // 防止冒泡出发关闭预览
+        event.stopPropagation();
+      },
+      onPinch: ({ offset }) => {
+        const [s] = offset;
+        setPreviewScale(s);
+      },
+      onDrag: ({ offset, event }) => {
+        event.stopPropagation();
+        const [x, y] = offset;
+        setTranslateX(x);
+        setTranslateY(y);
+      },
+    },
+    {
+      drag: {
+        delay: true,
+        preventDefault: true,
+      },
+      pinch: {
+        scaleBounds: { min: 0.6, max: 5 },
+        pointer: {
+          touch: true,
+        },
+      },
+    }
+  );
+
+  if (platform === 'h5' || !imgPreview || isError) {
+    return (
+      <>
+        <img
+          style={{
+            objectFit,
+            ...style,
+          }}
+          className={className}
+          alt={alt}
+          src={src}
+          onLoad={(e) => {
+            const img = e.target as HTMLImageElement;
+            const { naturalHeight, naturalWidth } = img;
+            realHeight.current = naturalHeight;
+            realWidth.current = naturalWidth;
+            setIsError(false);
+            events.load && events.load({}, { originEvent: e });
+          }}
+          onError={(e) => {
+            setIsError(true);
+            events.error && events.error({}, { originEvent: e });
+          }}
+          onClick={(e) => {
+            if (imgPreview && !isError) {
+              setTranslateX(0);
+              setTranslateY(0);
+              setPreviewScale(1);
+              const windowHeight = window.innerHeight;
+              const windowWidth = window.innerWidth;
+              let ratio = realWidth.current / realHeight.current;
+              if(Number.isNaN(ratio)) {
+                ratio = 1;
+              }
+              const height = windowWidth / ratio;
+              setOffsetHeight(windowHeight / 2 - height / 2);
+              setShowHeight(height);
+              setImgShow(true);
+            }
+            events.tap && events.tap({}, { originEvent: e });
+          }}
+          loading={lazyLoad ? 'lazy' : undefined}
+        />
+        {imgShow && (
+          <div className="weda-img-mask" onClick={onMaskClick}>
+            <div
+              onClick={() => setImgShow(false)}
+              className="weda-img-modal-close-btn"
+            >
+              <i className="weui-icon-clear" style={{ color: 'white' }}></i>
+            </div>
+            <div
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...bind()}
+              className="weda-img-preview"
+              style={{
+                touchAction: 'none',
+                backgroundImage: `url(${src})`,
+                width: '100%',
+                height: showHeight,
+                marginTop: offsetHeight,
+                transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+              }}
+            ></div>
+          </div>
+        )}
+      </>
+    );
+  } else {
+    return (
+      <ConfigProvider classPrefix="wedatea2td">
+        <ImagePreview
+          previewSrc={src}
+          maskClosable={maskClosable}
+          className={className}
+          style={{ ...style, objectFit }}
+        >
+          {(open) => (
+            <img
+              style={{
+                objectFit,
+                cursor: 'zoom-in',
+                ...style,
+              }}
+              className={className}
+              alt={alt}
+              src={src}
+              onLoad={(e) => {
+                setIsError(false);
+                events.load && events.load({}, { originEvent: e });
+              }}
+              onError={(e) => {
+                setIsError(true);
+                events.error && events.error({}, { originEvent: e });
+              }}
+              loading={lazyLoad ? 'lazy' : undefined}
+              onClick={(e) => {
+                open();
+                events.tap && events.tap({}, { originEvent: e });
+              }}
+            />
+          )}
+        </ImagePreview>
+      </ConfigProvider>
+    );
+  }
+}