@cloudbase/weda-ui 2.0.26 → 3.1.0

package/src/web/components/form/uploader/index.css

@@ -1,118 +0,0 @@
-.weda-uploader-pc {
-  margin: 0;
-  padding: 0;
-}
-
-.weda-uploader-pc .weda-uploader-pc__header {
-}
-
-.weda-uploader-pc .weda-uploader-pc__title {
-  color: #000000;
-  line-height: 20px;
-  font-weight: 400;
-  margin-bottom: 4px;
-}
-
-/* 单张图片回显 */
-.weda-uploader-pc .weda-uploader-pc__image-box {
-  height: 100px;
-  width: 100px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  background: #f2f2f2;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.weda-uploader-pc .weda-uploader-pc__body {
-  margin-bottom: 8px;
-}
-
-.weda-uploader-pc .weda-uploader-pc__input-box {
-  margin-bottom: 8px;
-}
-.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
-  margin-bottom: 0px;
-}
-
-.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
-  margin-bottom: 0px;
-}
-.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
-  margin-left: 8px;
-}
-
-.weda-uploader-pc .weda-uploader-pc__image-box:hover .weda-uploader-pc__action {
-  display: flex;
-}
-
-.weda-uploader-pc .weda-uploader-pc__image {
-  max-height: 100%;
-  height: auto;
-  width: 100%;
-  cursor: zoom-in;
-}
-
-.weda-uploader-pc .weda-uploader-pc__action {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-.weui-uploader.horizontal {
-  display: flex;
-}
-.weui-uploader.horizontal .weui-uploader__hd {
-  display: inline-block;
-  align-self: center;
-}
-.weda-uploader-pc.horizontal {
-  display: flex;
-  justify-content: space-between;
-}
-
-.weui-uploader.horizontal .weda-formcells__label {
-  width: 130px;
-}
-
-.weda-ui .weui-uploader__hd {
-  display: block;
-}
-
-.weui-uploader__label {
-  display: flex;
-  flex: 1;
-}
-.weui-uploader.vertical .weui-uploader__title {
-  flex: unset;
-}
-
-.weda-ui .weui-uploader.horizontal .weui-uploader__bd {
-  padding: 16px 0;
-}
-.weda-ui .weui-uploader.vertical .weui-uploader__bd {
-  padding: 16px;
-}
-
-.weui-uploader__hd.vertical {
-  padding-bottom: 0;
-}
-
-.weda-ui .weui-uploader__file {
-  width: 6.85714em;
-  height: 6.85714em;
-}
-
-.weda-ui .weui-uploader__input-box {
-  width: 6.85714em;
-  height: 6.85714em;
-}

package/src/web/components/form/uploader/index.tsx

@@ -1,65 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from 'react';
-import { usePlatform } from '../../../utils/platform';
-import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
-import classNames from '../../../utils/classnames';
-import { UploaderPCInner, CLASS_PREFIX } from './uploader.pc';
-
-import './index.css';
-import { renderDecorator } from '../renderDecorator';
-
-/**
- * 图片组件上传，区分 h5端/pc端
- */
-
-function UploaderPc(props) {
-  const {
-    layout,
-    className,
-    id,
-    style,
-    labelVisible = true,
-    title = '上传图片',
-    requiredFlag = false,
-    decorator,
-    ...restProps
-  } = props;
-  const cls = classNames({
-    'weda-ui': true,
-    [className]: className,
-    cloudbase_standard: true,
-  });
-  return renderDecorator(
-    <UploaderPCInner
-      {...restProps}
-      style={{
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    />,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? title : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-  });
-}
-export default function Uploader(props) {
-  const platform = usePlatform();
-  if (props?.showType === 'pc') {
-    return <UploaderPc {...props} />;
-  }
-  if (props?.showType === 'h5') {
-    return <UploaderH5 {...props} />;
-  }
-  return platform === 'h5' ? (
-    <UploaderH5 {...props} />
-  ) : (
-    <UploaderPc {...props} />
-  );
-}

package/src/web/components/form/uploader/uploader.h5.tsx

@@ -1,290 +0,0 @@
-import * as React from 'react';
-import weui from '../../../utils/weui';
-import classNames from '../../../utils/classnames';
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import { isCloudFileID, randomUuid } from '../../../utils/platform';
-import { IMAGE_TYPES } from './uploader.pc';
-import type { CommonFormPropsType } from '../types';
-
-const uploadPath = 'weda-uploader';
-/**
- * H5端
- */
-export function ImageUploaderH5({
-  title,
-  maxUploadCount,
-  maxSize = 10,
-  acceptTypes,
-  className,
-  id,
-  events,
-  layout,
-  defaultValue,
-  single = false,
-  requiredFlag = false,
-  onChange,
-  style,
-}: H5UploaderProps) {
-  const cls = classNames({
-    'weda-ui': true,
-    'weui-cells': true,
-    'weui-cells_form': true,
-    [className]: className,
-  });
-
-  // 上传中
-  const [uploading, setUploading] = React.useState(false);
-  //上传进度
-  const [progress, setProgress] = React.useState(0);
-  const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
-  const inputValueRef = React.useRef(inputValue);
-  const fileIdList = React.useMemo(() => {
-    //兼容h5默认值为空时情况
-    if (inputValue === null) {
-      setInputValue('');
-    }
-    if (typeof inputValue === 'string') {
-      // single = true 传入的是字符串
-      return [inputValue].filter((i) => i.length > 0); // 排除空串
-    }
-    if (Array.isArray(inputValue)) {
-      return inputValue;
-    }
-    return [];
-  }, [inputValue]);
-
-  const finalMaxImgCount = React.useMemo(() => {
-    if (single) return 1;
-    return maxUploadCount;
-  }, [single, maxUploadCount]);
-
-  const deleteFile = (url) => {
-    if (single) {
-      setInputValue('');
-      return;
-    }
-    // @ts-expect-error list should be array in not single mode
-    setInputValue((list: string[]) => list.filter((f) => f !== url));
-  };
-  React.useEffect(() => {
-    if (single) {
-      const file = fileIdList[0] || '';
-      onChange && onChange(file);
-      events.change && events.change({ value: file });
-    } else {
-      onChange && onChange(fileIdList);
-      events.change && events.change({ value: fileIdList });
-    }
-  }, [fileIdList]);
-  const onProgress = (progressEvent) => {
-    let percentCompleted = 0;
-    try {
-      percentCompleted = Math.round(
-        (progressEvent.loaded * 100) / progressEvent.total
-      );
-      percentCompleted < 100 ? percentCompleted : 100;
-    } catch (e) {}
-    setProgress(percentCompleted);
-  };
-  const uploadToTcb = (file) => {
-    setUploading(true);
-    getCloudInstance().then(async (tcb) => {
-      try {
-        const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
-        const { fileID } = await tcb.uploadFile({
-          cloudPath,
-          filePath: file,
-          onUploadProgress: onProgress,
-        });
-        // @ts-expect-error TODO
-        fileID && setInputValue((list) => [...list, fileID]);
-        fileID && events.success && events.success({ value: fileID, file });
-      } catch (err) {
-        weui.alert(`${err}` || '上传失败');
-        events.error && events.error(err);
-      } finally {
-        setUploading(false);
-        setProgress(0);
-      }
-    });
-  };
-
-  const accepts = React.useMemo(() => {
-    return acceptTypes.includes('image/*') || acceptTypes.length === 0
-      ? IMAGE_TYPES
-      : Array.from(new Set(acceptTypes));
-  }, [acceptTypes]);
-
-  const showAdd = React.useMemo(() => {
-    if (single) {
-      // single 模式时，仅当数组为空时显示
-      return fileIdList.length < 1;
-    }
-    return fileIdList.length < maxUploadCount;
-  }, [fileIdList, single, maxUploadCount]);
-  return (
-    <div className={cls} id={id} style={style}>
-      <div className={classNames('weui-uploader', layout)}>
-        <div className={classNames('weui-uploader__hd', layout)}>
-          <UploaderLabel
-            layout={layout}
-            title={title}
-            currentCount={fileIdList.length}
-            maxCount={finalMaxImgCount}
-            requiredFlag={requiredFlag}
-          />
-        </div>
-
-        <div className="weui-uploader__bd">
-          <ul className="weui-uploader__files" id="uploaderFiles">
-            {(fileIdList ?? []).map((f) => (
-              <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
-            ))}
-            {uploading && (
-              <li className="weui-uploader__file weui-uploader__file_status">
-                <div className="weui-uploader__file-content">{progress}%</div>
-              </li>
-            )}
-          </ul>
-          {showAdd && (
-            <div className="weui-uploader__input-box">
-              <input
-                id="uploaderInput"
-                className="weui-uploader__input"
-                type="file"
-                accept={accepts.join(',')}
-                multiple
-                onChange={(e) => {
-                  const files = [...e.target.files];
-                  if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
-                    weui.alert('请上传不超过10M的图片');
-                    return false;
-                  }
-
-                  if (files.length > finalMaxImgCount) {
-                    // 防止一下子选择过多文件
-                    weui.alert(
-                      `最多只能上传${finalMaxImgCount}张图片，请重新选择`
-                    );
-                    return false;
-                  }
-                  if (fileIdList.length + files.length > finalMaxImgCount) {
-                    weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
-                    return false;
-                  }
-                  files.forEach((f) => uploadToTcb(f));
-                }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export interface SingleImageProps {
-  src: string;
-  deleteBySrc: (url: string) => void;
-}
-
-function SingleImage({ src, deleteBySrc }: SingleImageProps) {
-  const [error, setError] = React.useState(false);
-  const cls = classNames({
-    'weui-uploader__file': true,
-  });
-  const [realSrc, setRealSrc] = React.useState('');
-  React.useEffect(() => {
-    const getSrc = async () => {
-      try {
-        const _src = await getTempFileURL(src);
-        setRealSrc(_src);
-        return _src;
-      } catch (e) {
-        setError(true);
-        console.error('图片加载失败');
-      }
-    };
-    if (isCloudFileID(src)) {
-      getSrc();
-    } else {
-      setRealSrc(src);
-    }
-  }, [src]);
-  const imgStyle = {
-    backgroundImage: `url(${realSrc})`,
-  };
-  const showGallery = () => {
-    const gallery = weui.gallery(realSrc, {
-      onDelete: function () {
-        deleteBySrc(src);
-        gallery.hide();
-      },
-    });
-  };
-
-  return (
-    <li className={cls} style={imgStyle} onClick={showGallery}>
-      {error || status ? (
-        <div className="weui-uploader__file-content">
-          {error ? (
-            <i role="img" aria-label="错误" className="weui-icon-warn"></i>
-          ) : (
-            <i className="weui-loading" style={{ width: 30, height: 30 }}></i>
-          )}
-        </div>
-      ) : (
-        false
-      )}
-    </li>
-  );
-}
-export interface H5UploaderProps extends CommonFormPropsType {
-  title?: string;
-  maxSize?: number;
-  acceptTypes?: unknown[];
-  maxUploadCount?: number;
-  defaultValue?: string[] | string; // 初始值，该参数需配合 formily 使用;
-  single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组;
-  onChange?: (v: any) => void;
-}
-
-const UploaderLabel = ({
-  layout,
-  title,
-  currentCount,
-  maxCount,
-  requiredFlag,
-}) => {
-  if (layout === 'horizontal') {
-    return (
-      <React.Fragment>
-        <div className="weda-formcells__label weui-cell">
-          <div>
-            <p className="weui-uploader__title">{title}</p>
-            <div className="weui-uploader__info">
-              <span id="uploadCount">{currentCount}</span>
-              {`/${maxCount}`}
-            </div>
-          </div>
-          {requiredFlag && <label className="weda-formcells__flag">*</label>}
-        </div>
-      </React.Fragment>
-    );
-  }
-  return (
-    <div className="weda-formcells__label weui-cell">
-      <div className="weui-uploader__label">
-        <p className="weui-uploader__title">{title}</p>
-        {requiredFlag && <label className="weda-formcells__flag">*</label>}
-      </div>
-      <div className="weui-uploader__info">
-        <span id="uploadCount">{currentCount}</span>
-        {`/${maxCount}`}
-      </div>
-    </div>
-  );
-};