@cloudbase/weda-ui 2.0.10 → 2.0.26

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

@@ -6,7 +6,7 @@ import { ConfigProvider, Input } from 'tea-component';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Textarea({
   // 系统属性
@@ -26,7 +26,7 @@ export default function Textarea({
   requiredFlag = false,
   counterVisible = true,
   size = 'l',
-  decorator
+  decorator,
 }: PropsType) {
   const platform = usePlatform();
 
@@ -44,7 +44,7 @@ export default function Textarea({
 
   // 两次默认值不同时, 需要刷新value
   const [value, setValue] = useSyncValue(defaultValue);
-  const counter = React.useMemo(() => (value?.length || 0), [value]);
+  const counter = React.useMemo(() => value?.length || 0, [value]);
 
   const onChange = function (e) {
     const text = typeof e === 'string' ? e : e.target.value;
@@ -52,8 +52,16 @@ export default function Textarea({
     events.change({ value: text });
   };
 
+  const onFocus = function (e) {
+    events.focus?.({ value: e.target.value }, { originEvent: e });
+  };
+
+  const onBlur = function (e) {
+    events.blur?.({ value: e.target.value }, { originEvent: e });
+  };
+
   let textAreaElement;
-  if(platform === 'h5') {
+  if (platform === 'h5') {
     textAreaElement = (
       <div className={subCls}>
         <div className="weui-cell__bd">
@@ -62,6 +70,8 @@ export default function Textarea({
             placeholder={placeholder}
             value={value}
             onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
             maxLength={maxLength}
             disabled={disabled}
             autoFocus={autoFocus}
@@ -77,32 +87,35 @@ export default function Textarea({
   } else {
     textAreaElement = (
       <ConfigProvider classPrefix="wedatea2td">
-          <Input.TextArea
-            size={size}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            maxLength={maxLength}
-            disabled={disabled}
-            autoFocus={autoFocus}
-            showCount
-          ></Input.TextArea>
+        <Input.TextArea
+          size={size}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          maxLength={maxLength}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          showCount
+        ></Input.TextArea>
       </ConfigProvider>
     );
   }
 
-  return renderDecorator(textAreaElement, decorator)(
-    {
-      id,
-      className: cls,
-      style,
-      label: labelVisible ? label : null,
-      layout,
-      multiCell: false,
-      requiredFlag,
-      size
-    }
-  );
+  return renderDecorator(
+    textAreaElement,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+    size,
+  });
 }
 export interface PropsType extends CommonFormPropsType {
   defaultValue?: string;

package/src/web/components/form/types.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
-import { CommonPropsType } from "../../types";
+import * as React from 'react';
+import type { CommonPropsType } from '../../types';
 
 export interface CommonFormPropsType extends CommonPropsType {
-    name?: string;
-    label?: string;
-    labelVisible?: boolean;
-    layout?: "horizontal" | "vertical";
-    disabled?: boolean;
-    requiredFlag?: boolean;
-    decorator?: React.FC<any>;
-}
+  name?: string;
+  label?: string;
+  labelVisible?: boolean;
+  layout?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  requiredFlag?: boolean;
+  decorator?: React.FC<any>;
+}

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

@@ -106,3 +106,13 @@
 .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/uploader.h5.tsx

@@ -4,10 +4,9 @@ import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { isCloudFileID } from '../../../utils/platform';
+import { isCloudFileID, randomUuid } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
-import { CommonFormPropsType } from '../types';
-import { v4 } from 'uuid';
+import type { CommonFormPropsType } from '../types';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -40,7 +39,7 @@ export function ImageUploaderH5({
   //上传进度
   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) {
@@ -94,9 +93,7 @@ export function ImageUploaderH5({
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
+        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,
@@ -122,7 +119,7 @@ export function ImageUploaderH5({
   }, [acceptTypes]);
 
   const showAdd = React.useMemo(() => {
-    if(single) {
+    if (single) {
       // single 模式时，仅当数组为空时显示
       return fileIdList.length < 1;
     }
@@ -132,7 +129,13 @@ export function ImageUploaderH5({
     <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} />
+          <UploaderLabel
+            layout={layout}
+            title={title}
+            currentCount={fileIdList.length}
+            maxCount={finalMaxImgCount}
+            requiredFlag={requiredFlag}
+          />
         </div>
 
         <div className="weui-uploader__bd">
@@ -142,9 +145,7 @@ export function ImageUploaderH5({
             ))}
             {uploading && (
               <li className="weui-uploader__file weui-uploader__file_status">
-                <div className="weui-uploader__file-content">
-                  {progress}%
-                </div>
+                <div className="weui-uploader__file-content">{progress}%</div>
               </li>
             )}
           </ul>
@@ -251,11 +252,17 @@ export interface H5UploaderProps extends CommonFormPropsType {
   onChange?: (v: any) => void;
 }
 
-const UploaderLabel = ({layout, title, currentCount, maxCount, requiredFlag}) => {
-  if(layout === 'horizontal') {
+const UploaderLabel = ({
+  layout,
+  title,
+  currentCount,
+  maxCount,
+  requiredFlag,
+}) => {
+  if (layout === 'horizontal') {
     return (
       <React.Fragment>
-        <div className='weda-formcells__label weui-cell'>
+        <div className="weda-formcells__label weui-cell">
           <div>
             <p className="weui-uploader__title">{title}</p>
             <div className="weui-uploader__info">
@@ -263,25 +270,21 @@ const UploaderLabel = ({layout, title, currentCount, maxCount, requiredFlag}) =>
               {`/${maxCount}`}
             </div>
           </div>
-          {requiredFlag && (
-              <label className="weda-formcells__flag">*</label>
-          )}
+          {requiredFlag && <label className="weda-formcells__flag">*</label>}
         </div>
       </React.Fragment>
-    )
+    );
   }
   return (
-    <div className='weda-formcells__label weui-cell'>
-      <div className='weui-uploader__label'>
+    <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>
-        )}
+        {requiredFlag && <label className="weda-formcells__flag">*</label>}
       </div>
       <div className="weui-uploader__info">
         <span id="uploadCount">{currentCount}</span>
         {`/${maxCount}`}
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -8,10 +8,9 @@ import {
   ImagePreview,
   ConfigProvider,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import { isCloudFileID } from '../../../utils/platform';
+import { isCloudFileID, randomUuid } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
 // 默认组件类前缀
@@ -79,7 +78,7 @@ export function UploaderPCInner(props) {
   const [progress, setProgress] = React.useState(0);
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
-  const fileRef = React.useRef(fileIDList);
+  const fileRef = React.useRef(['']);
   React.useEffect(() => {
     let initialValue = []
       .concat(defaultValue)
@@ -130,9 +129,7 @@ export function UploaderPCInner(props) {
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
+        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,

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

@@ -87,7 +87,7 @@
 
 .weda-upload-file-pc .weda-upload-file-pc__btn-descripe {
   margin-left: 16px;
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.4);
 }
@@ -103,13 +103,13 @@
 
 .weda-upload-file-pc .weda-upload-file-pc--item {
   display: flex;
-  font-size: 14px;
+  font-size: 0.875em;
 }
 
 .weda-upload-file-pc .weda-upload-file-pc--item-header {
   border: 1px solid #e7e7e7;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: rgba(0, 0, 0, 0.4);
   margin-top: 16px;
 }
@@ -117,8 +117,8 @@
 .weda-upload-file-pc .weda-upload-file-pc--item-body {
   border-left: 1px dashed #e7e7e7;
   border-right: 1px dashed #e7e7e7;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: rgba(0, 0, 0, 0.9);
 }
 
@@ -166,7 +166,7 @@
   border-color: #dcdcdc;
   color: rgba(0, 0, 0, 0.9);
   width: 88px;
-  font-size: 14px;
+  font-size: 0.875em;
 }
 
 .weda-upload-file-pc
@@ -187,8 +187,8 @@
   .weda-upload-file-pc--item
   .weda-upload-file-pc--item-action
   .wedatea2td-btn {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: #0052d9;
   margin-right: 12px;
 }
@@ -214,9 +214,9 @@
 .weda-upload-file-pc
   .weda-upload-file-pc--item-empty
   .weda-upload-file-pc--item {
-  font-size: 14px;
+  font-size: 0.875em;
   color: rgba(0, 0, 0, 0.4);
-  line-height: 22px;
+  line-height: 1.375em;
 }
 
 /* ----上传文件----  h5 */
@@ -236,8 +236,8 @@
   padding: 0 20px 8px 20px;
 }
 .weda-upload-file-mobile .weda-upload-file-mobile__title {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 0.875em;
+  line-height: 1.25em;
   color: #000;
   margin-right: 20px;
   padding-top: 6px;
@@ -246,18 +246,18 @@
 .weda-upload-file-mobile .weda-upload-file-mobile__btn--weak {
   width: 88px;
   padding: 0 16px;
-  font-size: 14px;
+  font-size: 0.875em;
   color: rgba(0, 0, 0, 0.9);
   border: 1px solid #dcdcdc;
   border-radius: 3px;
-  line-height: 22px;
+  line-height: 1.375em;
 }
 
 .weda-upload-file-mobile .weda-upload-file-mobile__tips {
   display: block;
   margin-top: 8px;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.75em;
+  line-height: 1.25em;
   color: rgba(0, 0, 0, 0.4);
 }
 
@@ -331,8 +331,8 @@
 .weda-upload-file-mobile
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-name {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 0.875em;
+  line-height: 1.375em;
   color: rgba(0, 0, 0, 0.9);
   max-width: 6.5rem;
   overflow: hidden;
@@ -373,16 +373,16 @@
   .weda-upload-file-mobile__file-status--msg {
   width: 4.2rem;
   margin-left: 4px;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.75em;
+  line-height: 1.25em;
   color: rgba(0, 0, 0, 0.9);
 }
 
 .weda-upload-file-mobile
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-foot {
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.75em;
+  line-height: 1.25em;
   color: rgba(0, 0, 0, 0.4);
   margin-top: 8px;
   display: flex;
@@ -415,6 +415,7 @@
 }
 .weda-upload-file-mobile .weui-uploader-mobile__input {
   position: absolute;
+  font-size: 1em;
   opacity: 0;
   width: 92px;
   height: 32px;

package/src/web/components/form/uploaderFile/index.jsx

@@ -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 { UploadFileH5 as UploaderH5 } from './uploadFile.h5';
 import { UploadFilePc } from './uploadFile.pc';
@@ -24,7 +23,3 @@ export default function UploaderFile(props) {
     <UploadFilePc {...props} />
   );
 }
-
-UploaderFile.propTypes = {
-  showType: PropTypes.string, // 强制展示某个平台 pc | h5
-};

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

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../../utils/weui';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import {
-  Upload,
   ConfigProvider,
   Button,
-  message,
   Icon,
   Text,
   List,
   Progress,
   Tooltip,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import {
   filterStrList,
   isCloudFileID,
@@ -22,6 +18,7 @@ import {
   transSize,
   downloadFile,
   transFileCloudidToName,
+  randomUuid,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -74,18 +71,26 @@ export function UploadFileH5({
   onChange = null,
   isEdit = true,
 }: IUploadFileH5) {
-  const [fileIDList, setfileIDList] = React.useState(filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
+  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}
-    // 两次默认值不同, 需要刷新
-    const prevDefaultRef = React.useRef<any>([]);
-    React.useMemo(()=>{
+  // 两次默认值不同, 需要刷新
+  const prevDefaultRef = React.useRef<any>([]);
+  const fileRef = React.useRef(fileIDList);
+  React.useMemo(() => {
     //有有效默认值时不刷新，解决初次渲染默认值不显示问题
-   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
-   prevDefaultRef.current =defaultValue;
+    if (
+      defaultValue &&
+      !isObjectEqual(prevDefaultRef.current, defaultValue) &&
+      (JSON.stringify(prevDefaultRef.current) == '[]' ||
+        !prevDefaultRef.current)
+    ) {
+      prevDefaultRef.current = defaultValue;
       setfileIDList(filterStrList([].concat(defaultValue)));
     }
-    },[defaultValue]);
+  }, [defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(
@@ -99,7 +104,10 @@ export function UploadFileH5({
       onChange && onChange(pureFileIDList);
       events?.change?.({ value: pureFileIDList });
     }
-    events?.success?.({ value: pureFileIDList });
+    if (!isObjectEqual(fileRef.current, fileIDList)) {
+      events?.success?.({ value: pureFileIDList });
+      fileRef.current = fileIDList;
+    }
   }, [fileIDList]);
 
   // 外层组件类
@@ -202,13 +210,14 @@ export function UploadFileH5({
                             weui.alert(`请上传不超过1024M的文件`);
                             return false;
                           }
-                          fileList.forEach((f) => (f['_uuid'] = v4()));
+                          fileList.forEach((f) => (f['_uuid'] = randomUuid()));
                           setFileList((list) => [...list, ...fileList]);
                         }}
                       />
                       <a
                         type="weak"
                         className="wedatea2td-btn wedatea2td-btn--weak"
+                        style={{ fontSize: '1em' }}
                       >
                         点击上传
                       </a>
@@ -377,7 +386,7 @@ const TcbFileUpload = ({
     try {
       setStatus('UPLOAD_STATUS_PENDING');
       const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
+        cloudPath: `${uploadPath}/${randomUuid()}-${file?.name}`,
         filePath: file,
         onUploadProgress: (progressEvent) => {
           let percent = 0;

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

@@ -8,7 +8,6 @@ import {
   Text,
   List,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import {
   filterStrList,
   isCloudFileID,
@@ -17,11 +16,12 @@ import {
   downloadFile,
   cutFileTitle,
   transFileCloudidToName,
+  randomUuid,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import isObjectEqual from '../../../utils/isObjectEqual';
 
 // 默认组件类前缀
@@ -68,20 +68,26 @@ export function UploadFilePc({
   onChange = null,
   isEdit = true,
 }: IUploaderFilePc) {
-
-
-  const [fileIDList, setfileIDList] = React.useState(filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
+  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}
-    // 两次默认值不同, 需要刷新
+  // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>([]);
-  React.useMemo(()=>{
+  const fileRef = React.useRef(fileIDList);
+  React.useMemo(() => {
     //有有效默认值时不刷新，解决初次渲染默认值不显示问题
-   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
-      prevDefaultRef.current =defaultValue;
+    if (
+      defaultValue &&
+      !isObjectEqual(prevDefaultRef.current, defaultValue) &&
+      (JSON.stringify(prevDefaultRef.current) == '[]' ||
+        !prevDefaultRef.current)
+    ) {
+      prevDefaultRef.current = defaultValue;
       setfileIDList(filterStrList([].concat(defaultValue)));
     }
-    },[defaultValue]);
+  }, [defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(
@@ -91,11 +97,13 @@ export function UploadFilePc({
       const file = pureFileIDList[0] || '';
       onChange?.(file);
       events?.change?.({ value: file });
-      events?.success?.({ value: file });
     } else {
       onChange?.(pureFileIDList);
       events?.change?.({ value: pureFileIDList });
+    }
+    if (!isObjectEqual(fileRef.current, fileIDList)) {
       events?.success?.({ value: pureFileIDList });
+      fileRef.current = fileIDList;
     }
   }, [fileIDList]);
   // 外层组件类
@@ -123,7 +131,7 @@ export function UploadFilePc({
       } catch (e) {}
       return false;
     }
-    file['_uuid'] = v4();
+    file['_uuid'] = randomUuid();
     setFileList((list) => [...list, file]);
     return false;
   };
@@ -347,7 +355,7 @@ const TcbFileUpload = ({ file }: ITcbFileUpload) => {
     try {
       setStatus('0');
       const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
+        cloudPath: `${uploadPath}/${randomUuid()}-${file?.name}`,
         filePath: file,
         onUploadProgress: (progressEvent) => {
           let percent = 0;

package/src/web/components/graphicCard/index.css

@@ -81,8 +81,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 1.1428em;
+  line-height: 1.71428em;
   text-align: center;
   color: rgba(0, 0, 0, 0.9);
   display: -webkit-box;
@@ -93,8 +93,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: rgba(0, 0, 0, 0.4);
   text-align: center;
   display: -webkit-box;
@@ -105,8 +105,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: #0052d9;
   margin-right: 8px;
 }