@cloudbase/weda-ui 0.2.10 → 0.2.14

package/src/web/components/form/uploader/{index.jsx → index.tsx}

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { usePlatform } from '../../../utils/platform';
 import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
 import classNames from '../../../utils/classnames';
@@ -28,16 +27,19 @@ function UploaderPc(props) {
   const cls = classNames({
     'weda-ui': true,
     [className]: className,
-    'cloudbase_standard': true
+    cloudbase_standard: true,
   });
   return renderDecorator(
-  <UploaderPCInner 
-  {...restProps}
-  style={{
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center'
-  }} />, decorator)({
+    <UploaderPCInner
+      {...restProps}
+      style={{
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    />,
+    decorator
+  )({
     id,
     className: cls,
     style,
@@ -55,9 +57,9 @@ export default function Uploader(props) {
   if (props?.showType === 'h5') {
     return <UploaderH5 {...props} />;
   }
-  return platform === 'h5' ? <UploaderH5 {...props} /> : <UploaderPc {...props} />;
+  return platform === 'h5' ? (
+    <UploaderH5 {...props} />
+  ) : (
+    <UploaderPc {...props} />
+  );
 }
-
-Uploader.propTypes = {
-  showType: PropTypes.string, // 强制展示某个平台 pc | h5
-};

package/src/web/components/form/uploader/{uploader.h5.jsx → uploader.h5.tsx}

@@ -1,4 +1,3 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import weui from '../../../utils/weui';
 import classNames from '../../../utils/classnames';
@@ -7,6 +6,7 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
+import { CommonFormPropsType } from '../types';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -23,9 +23,10 @@ export function ImageUploaderH5({
   layout,
   defaultValue,
   single = false,
+  requiredFlag = false,
   onChange,
   style,
-}) {
+}: H5UploaderProps) {
   const cls = classNames({
     'weda-ui': true,
     'weui-cells': true,
@@ -39,27 +40,28 @@ export function ImageUploaderH5({
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
   const fileIdList = React.useMemo(() => {
-    if( typeof inputValue  === 'string') {
+    if (typeof inputValue === 'string') {
       // single = true 传入的是字符串
-      return [inputValue].filter(i => i.length > 0); // 排除空串
+      return [inputValue].filter((i) => i.length > 0); // 排除空串
     }
-    if(Array.isArray(inputValue)) {
+    if (Array.isArray(inputValue)) {
       return inputValue;
     }
     return [];
   }, [inputValue]);
 
   const finalMaxImgCount = React.useMemo(() => {
-    if(single) return 1;
+    if (single) return 1;
     return maxUploadCount;
   }, [single, maxUploadCount]);
-  
+
   const deleteFile = (url) => {
-    if(single) {
+    if (single) {
       setInputValue('');
       return;
     }
-    setInputValue((list) => list.filter(f => f !== url));
+    // @ts-expect-error list should be array in not single mode
+    setInputValue((list: string[]) => list.filter((f) => f !== url));
   };
   React.useEffect(() => {
     if (single) {
@@ -91,8 +93,8 @@ export function ImageUploaderH5({
           cloudPath,
           filePath: file,
           onUploadProgress: onProgress,
-          
         });
+        // @ts-expect-error TODO
         fileID && setInputValue((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
       } catch (err) {
@@ -114,8 +116,11 @@ export function ImageUploaderH5({
     <div className={cls} id={id} style={style}>
       <div className="weui-cell">
         <div className="weui-cell__bd">
-          <div className={classNames("weui-uploader", layout)}>
-            <div className={classNames("weui-uploader__hd", layout)}>
+          <div className={classNames('weui-uploader', layout)}>
+            <div className={classNames('weui-uploader__hd', layout)}>
+              {requiredFlag && (
+                <label className="weda-formcells__flag">*</label>
+              )}
               <p className="weui-uploader__title">{title}</p>
               <div className="weui-uploader__info">
                 <span id="uploadCount">{fileIdList.length}</span>
@@ -124,40 +129,45 @@ export function ImageUploaderH5({
             </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>}
+                {(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>
               {(fileIdList.length < maxUploadCount ||
                 (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
-                  <div className="weui-uploader__input-box">
+                <div className="weui-uploader__input-box">
                   <input
                     id="uploaderInput"
                     className="weui-uploader__input"
                     type="file"
                     accept={accepts.join(',')}
                     multiple
-                    onChange={e => {
+                    onChange={(e) => {
                       const files = [...e.target.files];
-                      if (files.some(f => f.size > maxSize * 1024 * 1024)) {
+                      if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
                         weui.alert('请上传不超过10M的图片');
                         return false;
                       }
-              
+
                       if (files.length > finalMaxImgCount) {
                         // 防止一下子选择过多文件
-                        weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
+                        weui.alert(
+                          `最多只能上传${finalMaxImgCount}张图片，请重新选择`
+                        );
                         return false;
                       }
                       if (fileIdList.length + files.length > finalMaxImgCount) {
                         weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
                         return false;
                       }
-                      files.forEach(f => uploadToTcb(f));
+                      files.forEach((f) => uploadToTcb(f));
                     }}
                   />
                 </div>
@@ -170,7 +180,12 @@ export function ImageUploaderH5({
   );
 }
 
-function SingleImage({src, deleteBySrc}) {
+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,
@@ -187,51 +202,46 @@ function SingleImage({src, deleteBySrc}) {
         console.error('图片加载失败');
       }
     };
-    if(isCloudFileID(src)) {
+    if (isCloudFileID(src)) {
       getSrc();
     } else {
       setRealSrc(src);
     }
   }, [src]);
   const imgStyle = {
-    backgroundImage: `url(${realSrc})`
-};
+    backgroundImage: `url(${realSrc})`,
+  };
   const showGallery = () => {
     const gallery = weui.gallery(realSrc, {
-      onDelete: function() {
+      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
-        }
+      {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>
   );
 }
-SingleImage.propTypes = {
-  src: PropTypes.string,
-  deleteBySrc: PropTypes.func
-};
-ImageUploaderH5.propTypes = {
-  id: PropTypes.string,
-  title: PropTypes.string,
-  className: PropTypes.string, // 传入类
-  maxSize: PropTypes.number,
-  acceptTypes: PropTypes.array,
-  maxUploadCount: PropTypes.number, // 【上传图片最大数量】
-  events: PropTypes.objectOf(PropTypes.func), // 事件
-  style: PropTypes.object,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
-  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
-};
+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;
+}

package/src/web/components/form/uploader/{uploader.pc.jsx → uploader.pc.tsx}

@@ -13,7 +13,7 @@ import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import { isCloudFileID } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import * as PropTypes from 'prop-types';
+import { H5UploaderProps } from './uploader.h5';
 
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
@@ -80,30 +80,28 @@ export function UploaderPCInner(props) {
   const [progress, setProgress] = React.useState(0);
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
-  const prevValueRef = React.useRef();
+  const fileRef = React.useRef(fileIDList);
+
   React.useEffect(() => {
-    if (prevValueRef.current !== defaultValue) {
-      let initialValue = []
-        .concat(defaultValue)
-        .filter((d) => typeof d === 'string' && d !== '');
-      if (single) {
-        initialValue = initialValue[0] ? [initialValue[0]] : [];
-      }
-      setfileIDList(initialValue);
-      prevValueRef.current = defaultValue;
+    let initialValue = []
+      .concat(defaultValue)
+      .filter((d) => typeof d === 'string' && d !== '');
+    if (single) {
+      initialValue = initialValue[0] ? [initialValue[0]] : [];
     }
-  }, [defaultValue, maxUploadCount, single]);
-  const fileRef = React.useRef(fileIDList);
+    setfileIDList(initialValue);
+  }, []);
 
   // 值变化事件
   React.useEffect(() => {
     if (!isObjectEqual(fileRef.current, fileIDList)) {
-      events.change && events.change({ value: fileIDList });
       if (single) {
         const file = fileIDList[0] || '';
         file && onChange && onChange(file);
+        events.change && events.change({ value: file });
       } else {
         onChange && onChange(fileIDList);
+        events.change && events.change({ value: fileIDList });
       }
       fileRef.current = fileIDList;
     }
@@ -229,10 +227,12 @@ export function UploaderPCInner(props) {
   );
 }
 
-/**
- * 单张图片回显组件
- */
-export const TcbImage = (props) => {
+export interface TcbImageProps {
+  fileID?: string; // 云存储id
+  isZoom?: boolean; // 是否点击放大
+  onError?: (e: any) => void; // 图片显示错误事件
+}
+export const TcbImage = (props: TcbImageProps) => {
   const { fileID, isZoom, ...rest } = props;
   const [src, setSrc] = React.useState('');
   const [isError, setIsError] = React.useState(false);
@@ -258,6 +258,7 @@ export const TcbImage = (props) => {
         {...rest}
         src={src}
         previewSrc={src}
+        /** @ts-expect-error tea imagepreview onError */
         onError={(e) => {
           setIsError(true);
           props?.onError && props.onError(e);
@@ -279,28 +280,10 @@ export const TcbImage = (props) => {
   ) : null;
 };
 
-UploaderPCInner.propTypes = {
-  className: PropTypes.string, // 传入类
-  title: PropTypes.string, // 官方属性：标题
-  tips: PropTypes.string, // 官方属性：提示
-  btnTitle: PropTypes.string, // 官方属性：上传按钮标题
-  maxUploadCount: PropTypes.number, // 官方属性：上传图片最大数量
-  maxSize: PropTypes.number, // 官方属性：单个图片大小限制，单位是M
-  acceptTypes: PropTypes.array, // 官方属性：图片类型，TIF | BMP | JPEG | TIFF | PNG
-  uploadPath: PropTypes.string, // 上传路径
-  uploadFileName: PropTypes.string, // 上传文件名称
-  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  events: PropTypes.objectOf(PropTypes.func), // 事件
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
-  onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
-  style: PropTypes.object,
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  disabled: PropTypes.bool,
-};
-
-TcbImage.propTypes = {
-  fileID: PropTypes.string, // 云存储id
-  isZoom: PropTypes.bool, // 是否点击放大
-  onError: PropTypes.func, // 图片显示错误事件
-};
+export interface PropsType extends H5UploaderProps {
+  tips?: string;
+  value: string | string[];
+  btnTitle?: string;
+  uploadPath?: string;
+  uploadFileName?: string;
+}

package/src/web/components/form/uploaderFile/fail.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Bace基础/3.Icon图标/操作/move</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-104.000000, -210.000000)">
+            <g id="1.Bace基础/3.Icon图标/操作/move" transform="translate(103.000000, 209.000000)">
+                <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="close-circle-filled-(Background)"></path>
+                <path d="M8,1 C4.13400912,1 1,4.13400483 1,8 C1,11.8659916 4.13400483,15 8,15 C11.8659916,15 15,11.8659954 15,8 C15,4.13400912 11.8659954,1 8,1 Z M8.00001192,7.29075146 L10.3291178,4.94753814 L11.0383558,5.65250731 L8.70499325,8 L11.0383472,10.3474894 L10.3291082,11.0524578 L8.00001144,8.70925426 L5.6709156,11.0524578 L4.9616766,10.3474884 L7.29503059,8 L4.96166778,5.65250683 L5.67090654,4.94753814 L8.00001192,7.29075146 Z" id="close-circle-filled" fill="#E34D59"></path>
+            </g>
+        </g>
+    </g>
+</svg>