@cloudbase/weda-ui 0.2.15 → 1.0.21

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import isObjectEqual from '../../../utils/isObjectEqual';
 import weui from '../../../utils/weui';
 import { CommonFormPropsType } from '../types';
-
+import isObjectEqual from '../../../utils/isObjectEqual';
 import {
   Upload,
   ConfigProvider,
@@ -23,11 +21,11 @@ import {
   isHttpFileID,
   transSize,
   downloadFile,
+  transFileCloudidToName,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
-
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-mobile';
 // 默认图片类型
@@ -74,12 +72,20 @@ export function UploadFileH5({
   uploadPath = 'weda-uploader',
   single = true,
   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(()=>{
+    //有有效默认值时不刷新，解决初次渲染默认值不显示问题
+   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
+   prevDefaultRef.current =defaultValue;
+      setfileIDList(filterStrList([].concat(defaultValue)));
+    }
+    },[defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(
@@ -115,9 +121,9 @@ export function UploadFileH5({
     // 上传时新增事件
     if (type === 'add') {
       fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
-      fileID && setfileIDList((list) => [...list, fileID]);
+      fileID && setfileIDList([...fileIDList, fileID]);
     } else {
-      fileID && setfileIDList((list) => list.filter((f) => f !== fileID));
+      fileID && setfileIDList(fileIDList.filter((f) => f !== fileID));
     }
     uuid && setFileList((list) => list.filter((item) => uuid !== item?._uuid));
   };
@@ -141,74 +147,81 @@ export function UploadFileH5({
           downloadVisible,
           deleteVisible,
           onChange: handleChange,
+          isEdit,
           events,
           fileSizeObj,
         }}
       >
         <div data-testid="uploadFileH5" className={cls} id={id} style={style}>
           <div className={classNames(`${CLASS_PREFIX}`)}>
-            <div className={classNames(`${CLASS_PREFIX}__hd`, layout)}>
-              <div>
-                {btnDisabled ? (
-                  <Button
-                    type="weak"
-                    className={classNames(`${CLASS_PREFIX}__btn--weak`)}
-                    disabled={btnDisabled}
-                  >
-                    {btnTitle}
-                  </Button>
-                ) : (
-                  <div>
-                    <input
-                      id="uploaderInput"
-                      type="file"
-                      data-testid="button-up"
-                      className="weui-uploader-mobile__input"
-                      accept={accepts.join(',')}
-                      multiple={!single}
-                      onChange={(e) => {
-                        const fileList = [...e.target.files];
-                        if (single && fileList.length > 1) {
-                          weui.alert(`上传文件总数不能超过1个`);
-                          return false;
-                        }
-                        if (
-                          fileList.length + fileIDList.length >
-                          maxUploadCount
-                        ) {
-                          weui.alert(`上传文件总数不能超过${maxUploadCount}个`);
-                          return false;
-                        }
-                        if (
-                          maxSize &&
-                          fileList.some((f) => f.size > maxSize * 1024 * 1024)
-                        ) {
-                          weui.alert(`请上传不超过${maxSize}M的文件`);
-                          return false;
-                        }
-                        if (fileList.some((f) => f.size > 1024 * 1024 * 1024)) {
-                          weui.alert(`请上传不超过1024M的文件`);
-                          return false;
-                        }
-                        fileList.forEach((f) => (f['_uuid'] = v4()));
-                        setFileList((list) => [...list, ...fileList]);
-                      }}
-                    />
-                    <a
+            {isEdit && (
+              <div className={classNames(`${CLASS_PREFIX}__hd`, layout)}>
+                <div>
+                  {btnDisabled ? (
+                    <Button
                       type="weak"
-                      className="wedatea2td-btn wedatea2td-btn--weak"
+                      className={classNames(`${CLASS_PREFIX}__btn--weak`)}
+                      disabled={btnDisabled}
                     >
-                      点击上传
-                    </a>
-                    {!single && (
-                      <Text className={`${CLASS_PREFIX}__tips`}>
-                        支持批量上传
-                      </Text>
-                    )}
-                  </div>
-                )}
+                      {btnTitle}
+                    </Button>
+                  ) : (
+                    <div>
+                      <input
+                        id="uploaderInput"
+                        type="file"
+                        data-testid="button-up"
+                        className="weui-uploader-mobile__input"
+                        accept={accepts.join(',')}
+                        multiple={!single}
+                        onChange={(e) => {
+                          const fileList = [...e.target.files];
+                          if (single && fileList.length > 1) {
+                            weui.alert(`上传文件总数不能超过1个`);
+                            return false;
+                          }
+                          if (
+                            fileList.length + fileIDList.length >
+                            maxUploadCount
+                          ) {
+                            weui.alert(
+                              `上传文件总数不能超过${maxUploadCount}个`
+                            );
+                            return false;
+                          }
+                          if (
+                            maxSize &&
+                            fileList.some((f) => f.size > maxSize * 1024 * 1024)
+                          ) {
+                            weui.alert(`请上传不超过${maxSize}M的文件`);
+                            return false;
+                          }
+                          if (
+                            fileList.some((f) => f.size > 1024 * 1024 * 1024)
+                          ) {
+                            weui.alert(`请上传不超过1024M的文件`);
+                            return false;
+                          }
+                          fileList.forEach((f) => (f['_uuid'] = v4()));
+                          setFileList((list) => [...list, ...fileList]);
+                        }}
+                      />
+                      <a
+                        type="weak"
+                        className="wedatea2td-btn wedatea2td-btn--weak"
+                      >
+                        点击上传
+                      </a>
+                      {!single && (
+                        <Text className={`${CLASS_PREFIX}__tips`}>
+                          支持批量上传
+                        </Text>
+                      )}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
             <div className={`${CLASS_PREFIX}__bd`}>
               <List>
                 {fileIDList.map((d) => (
@@ -267,6 +280,7 @@ export interface IUploadFileH5 extends CommonFormPropsType {
   uploadPath?: string; // 上传路径
   single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
   onChange?: (v: any) => void; // 配合 fomily 受控使用
+  isEdit: boolean; // 当前是编辑态还是展示态，展示态会去掉删除等按钮
 }
 
 /**
@@ -298,11 +312,7 @@ const TcbFileEcho = ({
   //上传文件名称
   const label = 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 label = name.replace(uuidReg, '');
-      return label;
+      return transFileCloudidToName(fileID);
     } else {
       return fileID;
     }
@@ -367,7 +377,7 @@ const TcbFileUpload = ({
     try {
       setStatus('UPLOAD_STATUS_PENDING');
       const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${`file-${uuid}-${title}`}`,
+        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
         filePath: file,
         onUploadProgress: (progressEvent) => {
           let percent = 0;
@@ -430,6 +440,7 @@ const UploadFileStatus = ({
   title = null,
   percentSize = 0,
 }: IUploadFileStatus) => {
+  const { isEdit } = React.useContext(FileContext) || {};
   //上传中、待上传状态
   if (
     status == 'UPLOAD_STATUS_LOADING' ||
@@ -470,23 +481,28 @@ const UploadFileStatus = ({
         <Tooltip title={title}>
           <Text className={`${CLASS_PREFIX}__file-name`}>{title}</Text>
         </Tooltip>
-        <div className={`${CLASS_PREFIX}__file-status`}>
-          <Icon
-            type={
-              statusMap[status]?.icon || statusMap['UPLOAD_STATUS_PENDING'].icon
-            }
-          ></Icon>
-          <Text className={`${CLASS_PREFIX}__file-status--msg`}>
-            {statusMap[status]?.title ||
-              statusMap['UPLOAD_STATUS_PENDING'].title}
-          </Text>
-        </div>
+        {isEdit && (
+          <div className={`${CLASS_PREFIX}__file-status`}>
+            <Icon
+              type={
+                statusMap[status]?.icon ||
+                statusMap['UPLOAD_STATUS_PENDING'].icon
+              }
+            ></Icon>
+            <Text className={`${CLASS_PREFIX}__file-status--msg`}>
+              {statusMap[status]?.title ||
+                statusMap['UPLOAD_STATUS_PENDING'].title}
+            </Text>
+          </div>
+        )}
       </div>
-      <div className={`${CLASS_PREFIX}__file-foot`}>
-        <div>
-          <Text>{size}</Text>
+      {isEdit && (
+        <div className={`${CLASS_PREFIX}__file-foot`}>
+          <div>
+            <Text>{size}</Text>
+          </div>
         </div>
-      </div>
+      )}
     </>
   );
 };
@@ -514,36 +530,39 @@ const UploadFileAction = ({
   onReLoad = null,
   onCancel = null,
 }: IUploadFileAction) => {
-  const { onChange, downloadVisible, deleteVisible } =
+  const { onChange, downloadVisible, deleteVisible, isEdit } =
     React.useContext(FileContext) || {};
   // 操作列按钮-删除
-  const renderDelete = () => (
-    <Icon
-      type="delete"
-      style={{ cursor: 'pointer' }}
-      onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
-    />
-  );
+  const renderDelete = () =>
+    isEdit && (
+      <Icon
+        type="delete"
+        style={{ cursor: 'pointer' }}
+        onClick={() => onChange?.({ fileID, uuid, type: 'delete' })}
+      />
+    );
 
   // 操作列按钮-取消
-  const renderCancel = () => (
-    <Icon
-      type="dismiss"
-      style={{ cursor: 'pointer' }}
-      onClick={() => onCancel?.(uuid)}
-    />
-  );
+  const renderCancel = () =>
+    isEdit && (
+      <Icon
+        type="dismiss"
+        style={{ cursor: 'pointer' }}
+        onClick={() => onCancel?.(uuid)}
+      />
+    );
 
   // 操作列按钮-重新上传
-  const renderReLoad = () => (
-    <Icon
-      type="refresh"
-      style={{ cursor: 'pointer' }}
-      onClick={() => {
-        onReLoad?.(file);
-      }}
-    />
-  );
+  const renderReLoad = () =>
+    isEdit && (
+      <Icon
+        type="refresh"
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          onReLoad?.(file);
+        }}
+      />
+    );
 
   // 操作列按钮-下载
   const renderDownLoad = () => (

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

@@ -16,11 +16,13 @@ import {
   transSize,
   downloadFile,
   cutFileTitle,
+  transFileCloudidToName,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import isObjectEqual from '../../../utils/isObjectEqual';
 
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-pc';
@@ -66,12 +68,20 @@ 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(()=>{
+    //有有效默认值时不刷新，解决初次渲染默认值不显示问题
+   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
+      prevDefaultRef.current =defaultValue;
+      setfileIDList(filterStrList([].concat(defaultValue)));
+    }
+    },[defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(
@@ -88,7 +98,6 @@ export function UploadFilePc({
       events?.success?.({ value: pureFileIDList });
     }
   }, [fileIDList]);
-
   // 外层组件类
   const cls = classNames({
     'weda-ui': true,
@@ -283,11 +292,7 @@ const TcbFileEcho = ({ fileID }: ITcbFileEcho) => {
 
   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;
+      return transFileCloudidToName(fileID);
     } else {
       return fileID;
     }
@@ -342,7 +347,7 @@ const TcbFileUpload = ({ file }: ITcbFileUpload) => {
     try {
       setStatus('0');
       const { fileID } = await tcb.uploadFile({
-        cloudPath: `${uploadPath}/${`file-${uuid}-${title}`}`,
+        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
         filePath: file,
         onUploadProgress: (progressEvent) => {
           let percent = 0;

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

@@ -0,0 +1,159 @@
+/* pc style */
+.weda-graphic-card {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__wrapper {
+  width: 100%;
+  padding: 0 24px;
+}
+
+.weda-graphic-card .weda-graphic-card__row {
+  margin: 0;
+  padding: 20px 0;
+}
+
+.weda-graphic-card .weda-graphic-card__col {
+  padding: 0;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__col-body {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__col .wedatea2td-grid__box,
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__col-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .weda-graphic-card__col-body {
+  align-items: flex-start;
+  width: 100%;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .weda-graphic-card__col-body {
+  align-items: flex-end;
+  width: 100%;
+}
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--center
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--center
+  .weda-graphic-card__col-body {
+  align-items: center;
+  width: 100%;
+}
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--justify
+  .wedatea2td-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--justify
+  .weda-graphic-card__col-body {
+  width: 100%;
+}
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__icon {
+  width: 100%;
+  height: 200px;
+}
+
+.weda-graphic-card .weda-graphic-card__icon .weda-graphic-card__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__detail {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
+  font-size: 14px;
+  line-height: 22px;
+  color: #0052d9;
+  margin-right: 8px;
+}
+
+.weda-graphic-card .weda-graphic-card__btn-icon {
+  margin-bottom: 2px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  margin-top: 20px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  margin-top: 8px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn {
+  margin-top: 20px;
+}
+
+/* h5 style */
+.weda-graphic-card-mobile .weda-graphic-card__wrapper {
+  width: 100%;
+  padding: 0 16px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__row {
+  padding: 18px 0;
+  margin: 0 -5.5px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col {
+  padding: 0 5.5px !important;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__detail {
+  padding: 0 !important;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__title {
+  margin-top: 16px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__desc {
+  margin-top: 6px;
+}
+
+.weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__btn {
+  margin-top: 16px;
+}