@cloudbase/weda-ui 0.2.7 → 0.2.11

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

@@ -6,6 +6,7 @@ import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
+import { IMAGE_TYPES } from './uploader.pc';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -14,6 +15,8 @@ const uploadPath = 'weda-uploader';
 export function ImageUploaderH5({
   title,
   maxUploadCount,
+  maxSize = 10,
+  acceptTypes,
   className,
   id,
   events,
@@ -34,8 +37,17 @@ export function ImageUploaderH5({
   const [uploading, setUploading] = React.useState(false);
   //上传进度
   const [progress, setProgress] = React.useState(0);
-  const [fileIDList, setfileIDList] = useSyncValue(defaultValue, isObjectEqual);
-  const uploadCount = (fileIDList ?? []).length;
+  const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+  const fileIdList = React.useMemo(() => {
+    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;
@@ -43,18 +55,22 @@ export function ImageUploaderH5({
   }, [single, maxUploadCount]);
   
   const deleteFile = (url) => {
-    setfileIDList((list) => list.filter(f => f !== url));
+    if(single) {
+      setInputValue('');
+      return;
+    }
+    setInputValue((list) => list.filter(f => f !== url));
   };
   React.useEffect(() => {
     if (single) {
-      const file = fileIDList[0] || '';
+      const file = fileIdList[0] || '';
       file && onChange && onChange(file);
       events.change && events.change({ value: file });
     } else {
-      onChange && onChange(fileIDList);
-      events.change && events.change({ value: fileIDList });
+      onChange && onChange(fileIdList);
+      events.change && events.change({ value: fileIdList });
     }
-  }, [fileIDList]);
+  }, [fileIdList]);
   const onProgress = (progressEvent) => {
     let percentCompleted = 0;
     try {
@@ -77,7 +93,7 @@ export function ImageUploaderH5({
           onUploadProgress: onProgress,
           
         });
-        fileID && setfileIDList((list) => [...list, fileID]);
+        fileID && setInputValue((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
       } catch (err) {
         events.error && events.error(err);
@@ -87,6 +103,13 @@ export function ImageUploaderH5({
       }
     });
   };
+
+  const accepts = React.useMemo(() => {
+    return acceptTypes.includes('image/*') || acceptTypes.length === 0
+      ? IMAGE_TYPES
+      : Array.from(new Set(acceptTypes));
+  }, [acceptTypes]);
+
   return (
     <div className={cls} id={id} style={style}>
       <div className="weui-cell">
@@ -95,13 +118,13 @@ export function ImageUploaderH5({
             <div className={classNames("weui-uploader__hd", layout)}>
               <p className="weui-uploader__title">{title}</p>
               <div className="weui-uploader__info">
-                <span id="uploadCount">{uploadCount}</span>
+                <span id="uploadCount">{fileIdList.length}</span>
                 {`/${finalMaxImgCount}`}
               </div>
             </div>
             <div className="weui-uploader__bd">
               <ul className="weui-uploader__files" id="uploaderFiles">
-                {(fileIDList ?? []).map(f => <SingleImage  key={f} src={f} deleteBySrc={deleteFile} />)}
+                {(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">
@@ -109,18 +132,18 @@ export function ImageUploaderH5({
                 </div>
               </li>}
               </ul>
-              {(fileIDList.length < maxUploadCount ||
-                (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+              {(fileIdList.length < maxUploadCount ||
+                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
                   <div className="weui-uploader__input-box">
                   <input
                     id="uploaderInput"
                     className="weui-uploader__input"
                     type="file"
-                    accept="image/*"
+                    accept={accepts.join(',')}
                     multiple
                     onChange={e => {
                       const files = [...e.target.files];
-                      if (files.some(f => f.size > 10 * 1024 * 1024)) {
+                      if (files.some(f => f.size > maxSize * 1024 * 1024)) {
                         weui.alert('请上传不超过10M的图片');
                         return false;
                       }
@@ -130,7 +153,7 @@ export function ImageUploaderH5({
                         weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
                         return false;
                       }
-                      if (uploadCount + files.length > finalMaxImgCount) {
+                      if (fileIdList.length + files.length > finalMaxImgCount) {
                         weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
                         return false;
                       }
@@ -195,12 +218,15 @@ function SingleImage({src, deleteBySrc}) {
   );
 }
 SingleImage.propTypes = {
-  src: PropTypes.string
+  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,

package/src/web/components/form/uploader/uploader.pc.jsx

@@ -18,7 +18,7 @@ import * as PropTypes from 'prop-types';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
-const IMAGE_TYPES = [
+export const IMAGE_TYPES = [
   'image/jpg',
   'image/png',
   'image/tif',

package/src/web/components/image/image.jsx

@@ -3,7 +3,6 @@ import * as PropTypes from 'prop-types';
 import { ConfigProvider, ImagePreview } from 'tea-component';
 import { usePlatform } from '../../utils/platform';
 import { useGesture } from '@use-gesture/react';
-import { off } from 'react-use/lib/util';
 
 ImageInner.propTypes = {
   objectFit: PropTypes.string,

package/src/web/components/index.js

@@ -1,7 +1,6 @@
 import '../wedatheme/style-package/index.css';
 
 export { default as Button } from './button';
-export { default as Markdown } from './markdown';
 export { default as Text } from './text';
 export { default as Container } from './container';
 export { default as Image } from './image';
@@ -29,6 +28,7 @@ export { default as Select } from './form/select';
 export { default as Uploader } from './form/uploader';
 export { default as Tips } from './form/tips';
 export { default as Tabs } from './tabs';
+export { default as EnumSelect } from './form/enumSelect';
 // open
 // import Auth from './auth';