@cloudbase/weda-ui 0.2.16 → 0.2.17

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

@@ -93,6 +93,7 @@ export default function Select({
     !!endDate && (options.end = decodeIsoDatetime(endDate, 'date'));
 
     weui.datePicker({
+      id: String(Date.now()),
       ...options,
       onConfirm(result) {
         const value = moment()
@@ -129,6 +130,7 @@ export default function Select({
 
   const onSelect = function () {
     weui.picker(range, {
+      id: String(Date.now()),
       defaultValue: [selectedValue || range[0].value],
       onConfirm(result) {
         const item = result[0];
@@ -246,7 +248,7 @@ export function decodeIsoDatetime(isoStringOrTimesnap, type) {
     } else {
       return moment(isoStringOrTimesnap).format('HH:mm');
     }
-  } else {                                                
+  } else {
     return moment(isoStringOrTimesnap).format('YYYY-MM-DD');
   }
 }

package/src/web/components/form/select/time.jsx

@@ -48,6 +48,7 @@ export function timePicker(options) {
   ];
   weui.picker(hours, {
     ...options,
+    id: String(Date.now()),
     start: [startHour, startMin],
     end: [endHour, endMin],
     defaultValue,

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

@@ -7,7 +7,7 @@ import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
 import { CommonFormPropsType } from '../types';
-import SparkMD5 from 'spark-md5';
+import { v4 } from 'uuid';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -40,7 +40,12 @@ export function ImageUploaderH5({
   //上传进度
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+
   const fileIdList = React.useMemo(() => {
+    //兼容h5默认值为空时情况
+    if (inputValue === null) {
+      setInputValue('');
+    }
     if (typeof inputValue === 'string') {
       // single = true 传入的是字符串
       return [inputValue].filter((i) => i.length > 0); // 排除空串
@@ -67,7 +72,7 @@ export function ImageUploaderH5({
   React.useEffect(() => {
     if (single) {
       const file = fileIdList[0] || '';
-      file && onChange && onChange(file);
+      onChange && onChange(file);
       events.change && events.change({ value: file });
     } else {
       onChange && onChange(fileIdList);
@@ -88,21 +93,18 @@ export function ImageUploaderH5({
     setUploading(true);
     getCloudInstance().then(async (tcb) => {
       try {
-        const fileReader = new FileReader();
-        fileReader.readAsBinaryString(file);
-        fileReader.onload = async function (e) {
-          const md5Path = SparkMD5.hashBinary(e.target.result);
-          const fileType = file.type.split('/')?.[1];
-          const cloudPath = `${uploadPath}/${md5Path}-${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 });
-        };
+        const fileType = file.type.split('/')?.[1];
+        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
+          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) {
         events.error && events.error(err);
       } finally {

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

@@ -8,12 +8,12 @@ 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 isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
-import SparkMD5 from 'spark-md5';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -96,7 +96,7 @@ export function UploaderPCInner(props) {
     if (!isObjectEqual(fileRef.current, fileIDList)) {
       if (single) {
         const file = fileIDList[0] || '';
-        file && onChange && onChange(file);
+        onChange && onChange(file);
         events.change && events.change({ value: file });
       } else {
         onChange && onChange(fileIDList);
@@ -130,20 +130,17 @@ export function UploaderPCInner(props) {
     setUploading(true);
     getCloudInstance().then(async (tcb) => {
       try {
-        const fileReader = new FileReader();
-        fileReader.readAsBinaryString(file);
-        fileReader.onload = async function (e) {
-          const md5Path = SparkMD5.hashBinary(e.target.result);
-          const fileType = file.type.split('/')?.[1];
-          const cloudPath = `${uploadPath}/${md5Path}-${file?.name}`;
-          const { fileID } = await tcb.uploadFile({
-            cloudPath,
-            filePath: file,
-            onUploadProgress: onProgress,
-          });
-          fileID && setfileIDList((list) => [...list, fileID]);
-          fileID && events.success && events.success({ value: fileID, file });
-        };
+        const fileType = file.type.split('/')?.[1];
+        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
+          file?.name
+        }`;
+        const { fileID } = await tcb.uploadFile({
+          cloudPath,
+          filePath: file,
+          onUploadProgress: onProgress,
+        });
+        fileID && setfileIDList((list) => [...list, fileID]);
+        fileID && events.success && events.success({ value: fileID, file });
       } catch (e) {
         events.error && events.error({ value: e, file });
       } finally {

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import weui from '../../../utils/weui';
 import { CommonFormPropsType } from '../types';
-import SparkMD5 from 'spark-md5';
 
 import {
   Upload,
@@ -22,7 +21,7 @@ import {
   isHttpFileID,
   transSize,
   downloadFile,
-  transFileCloudidToName
+  transFileCloudidToName,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -371,25 +370,20 @@ const TcbFileUpload = ({
     const tcb = await getCloudInstance();
     try {
       setStatus('UPLOAD_STATUS_PENDING');
-      const fileReader = new FileReader();
-      fileReader.readAsBinaryString(file);
-      fileReader.onload = async function (e) {
-        const md5Path = SparkMD5.hashBinary(e.target.result);
-        const { fileID } = await tcb.uploadFile({
-          cloudPath: `${uploadPath}/${md5Path}-${file?.name}`,
-          filePath: file,
-          onUploadProgress: (progressEvent) => {
-            let percent = 0;
-            percent = Math.round(
-              (progressEvent.loaded * 100) / progressEvent.total
-            );
-            setStatus('UPLOAD_STATUS_LOADING');
-            setPercent(percent < 100 ? percent : 100);
-          },
-        });
-        !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
-        setStatus('UPLOAD_STATUS_SUCCESS');
-      };
+      const { fileID } = await tcb.uploadFile({
+        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
+        filePath: file,
+        onUploadProgress: (progressEvent) => {
+          let percent = 0;
+          percent = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          setStatus('UPLOAD_STATUS_LOADING');
+          setPercent(percent < 100 ? percent : 100);
+        },
+      });
+      !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
+      setStatus('UPLOAD_STATUS_SUCCESS');
     } catch (err) {
       setStatus('UPLOAD_STATUS_ERROR');
       events?.error?.(err);
@@ -481,24 +475,28 @@ const UploadFileStatus = ({
         <Tooltip title={title}>
           <Text className={`${CLASS_PREFIX}__file-name`}>{title}</Text>
         </Tooltip>
-        {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>}
+        {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>
-      {isEdit && <div className={`${CLASS_PREFIX}__file-foot`}>
-        <div>
-          <Text>{size}</Text>
+      {isEdit && (
+        <div className={`${CLASS_PREFIX}__file-foot`}>
+          <div>
+            <Text>{size}</Text>
+          </div>
         </div>
-      </div>}
+      )}
     </>
   );
 };

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

@@ -8,7 +8,6 @@ import {
   Text,
   List,
 } from 'tea-component';
-import SparkMD5 from 'spark-md5';
 import { v4 } from 'uuid';
 import {
   filterStrList,
@@ -17,7 +16,7 @@ import {
   transSize,
   downloadFile,
   cutFileTitle,
-  transFileCloudidToName
+  transFileCloudidToName,
 } from '../../../utils/platform';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -339,25 +338,20 @@ const TcbFileUpload = ({ file }: ITcbFileUpload) => {
     const tcb = await getCloudInstance();
     try {
       setStatus('0');
-      const fileReader = new FileReader();
-      fileReader.readAsBinaryString(file);
-      fileReader.onload = async function (e) {
-        const md5Path = SparkMD5.hashBinary(e.target.result);
-        const { fileID } = await tcb.uploadFile({
-          cloudPath: `${uploadPath}/${md5Path}-${file?.name}`,
-          filePath: file,
-          onUploadProgress: (progressEvent) => {
-            let percent = 0;
-            percent = Math.round(
-              (progressEvent.loaded * 100) / progressEvent.total
-            );
-            setStatus('1');
-            setPercent(percent < 100 ? percent : 100);
-          },
-        });
-        !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
-        setStatus('2');
-      };
+      const { fileID } = await tcb.uploadFile({
+        cloudPath: `${uploadPath}/${uuid.replaceAll('-', '')}-${file?.name}`,
+        filePath: file,
+        onUploadProgress: (progressEvent) => {
+          let percent = 0;
+          percent = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          setStatus('1');
+          setPercent(percent < 100 ? percent : 100);
+        },
+      });
+      !cancleRef.current && onChange?.({ fileID, type: 'add', uuid, size });
+      setStatus('2');
     } catch (e) {
       setStatus('3');
       events.error && events.error(e);

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

@@ -111,11 +111,7 @@
   margin-right: 8px;
 }
 
-.weda-graphic-card
-  .weda-graphic-card__col
-  .weda-graphic-card__btn
-  .weda-graphic-card__btn--icon {
-  transform: rotate(180deg);
+.weda-graphic-card .weda-graphic-card__btn-icon {
   margin-bottom: 2px;
 }
 

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

@@ -4,6 +4,7 @@ import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import { Row, Col, ConfigProvider, Button, Icon, Text } from 'tea-component';
 import { usePlatform } from '../../utils/platform';
+import { IconFont } from 'tdesign-icons-react';
 
 const CLASS_PREFIX = 'weda-graphic-card';
 
@@ -288,9 +289,9 @@ export default function GraphicCard({
                                 <Text className={`${CLASS_PREFIX}__btn--text`}>
                                   {buttonText}
                                 </Text>
-                                <Icon
-                                  type="btnback"
-                                  className={`${CLASS_PREFIX}__btn--icon`}
+                                <IconFont
+                                  name="arrow-right"
+                                  className={`${CLASS_PREFIX}__btn-icon`}
                                 />
                               </Button>
                             )}

package/src/web/components/index.js

@@ -1,6 +1,6 @@
 import '@tcwd/style-wedatheme/index.css';
-import loadable from '@loadable/component';
-import { fallback } from '../utils/loading-fallback';
+// import loadable from '@loadable/component';
+// import { fallback } from '../utils/loading-fallback';
 
 // export const Button = loadable(() => import('./button'), {fallback});
 // export const Text = loadable(() => import('./text'), {fallback});
@@ -72,6 +72,9 @@ export { default as NavLayout } from './navLayout';
 
 // Data Contaier
 export { default as ListView } from './listView';
+export { default as Line } from './chart/line';
+export { default as Bar } from './chart/bar';
+export { default as Pie } from './chart/pie';
 export { default as DataView } from './dataView';
 
 export { default as StatisticsCard } from './chart/statisticsCard';

package/src/web/utils/platform.js

@@ -126,7 +126,7 @@ export const isInIde = () => !!window?.app?.cloud?.IS_WEDA_IDE;
  * cloudid和文件名转换
  */
 export const transFileCloudidToName = (fileID) => {
-  const uuidReg = /(file-)?[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}-/;
+  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, '');

package/src/web/utils/tcb.js

@@ -54,19 +54,7 @@ export async function callDataSource(param) {
   }
 }
 
-/**
- * 调用微搭后端API服务
- */
-export async function callWedaApi(param) {
-  const { data, action } = param;
-  try {
-    const res = await window?.app?.cloud?.callWedaApi?.({
-      action,
-      data,
-    });
-    return res;
-  } catch (error) {
-    console.error('错误', error);
-    return {};
-  }
+
+export function callWedaApi(...args) {
+  return window.app.cloud.callWedaApi(...args);
 }

package/CHANGELOG.md

@@ -1,240 +0,0 @@
-> 为了更好的区分组件类型，仅在更新日志中进行如下约定：低码组件使用大驼峰命名，源码组件使用小驼峰命名。
-
-## [1.2] - 2021-08-24
-
-### Changed
-
-- swiper 轮播
-
-  - 添加示例图片
-
-## [1.1] - 2021-08-09
-
-### Added
-
-- text 文本
-
-  - 新增事件 `tap`
-
-- modal 模态弹窗
-
-  - 新增组件 `modal`, web 使用 tea 样式用于 PC 样式响应式。
-
-- showModal 显示弹窗
-
-  - 新增动作 `showModal`，用于平台方法的 PC 大屏响应式版本，小程序对齐 wx.showModal api。
-
-- FormTextarea 表单多行输入
-
-  - 新增组件 `FormTextarea`, 用以替代被移除的 `Textarea` 组件
-
-- link 链接
-
-  - 新增组件 `link`，可通过插槽来配置自定义内容
-
-### Changed
-
-- button 按钮
-
-  - 添加响应式样式，屏幕宽度大于 **1024px** 时显示为方角
-
-- swiper 轮播
-
-  - 添加响应式样式，屏幕宽度大于 1024px 时显示为方角
-
-- FormRadio 表单单选
-
-  - 修复多个单选组件并存导致的选中问题
-
-- FormCheckbox 表单复选
-
-  - 修复多个复选组件并存导致的选中问题
-
-- 所有组件:
-  - 表单组件的默认背景色，统一配置为透明
-  - 组件最外层容器统一添加 `weda-ui` 类名，组件库级别重置样式及公共样式都限制在 `weda-ui` 类名下，防止污染
-  - 规范了组件事件的触发方式
-
-## [1.0] - 2021-06-10
-
-### Added
-
-- text 文本:
-
-  - 新增属性 `maxLines` 最大显示行数
-
-- FormRegion 表单区域选择:
-
-  - 新增组件 `FormRegion`, 用以替代被移除的 `RegionPicker` 组件
-
-### Removed
-
-- swiper 轮播:
-
-  - 移除属性 `displayMultipleItems`, `nextMargin`, `previousMargin`, `updated`
-  - 移除 `transition` 和 `animationfinished` 事件
-
-- text 文本:
-
-  - 移除属性 `decode` 是否解码
-  - 移除 `tap` 事件
-
-- image 图片:
-
-  - 移除属性 `webp` 能否解析 webp 格式
-
-- button 按钮:
-
-  - 移除属性 `plain` 镂空
-  - 移除属性 `openType` 微信开放能力的 `获取用户信息` 选项
-
-- FormInput 表单输入:
-
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormRadio 表单单选:
-
-  - 移除属性 `validateTrigger` 字段触发校验类型
-  - 移除属性 `validateStatus` 校验状态
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormCheckbox 表单复选:
-
-  - 移除属性 `validateTrigger` 字段触发校验类型
-  - 移除属性 `validateStatus` 校验状态
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormSwitch 表单开关:
-
-  - 移除属性 `type` 显示类型
-  - 移除属性 `checkedIcon` 选中图标
-  - 移除属性 `uncheckedIcon` 非选中图标
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormDate 表单日期:
-
-  - 移除属性 `suffixType` 操作尾部样式类型
-  - 移除属性 `suffixText` 操作尾部文案
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormTime 表单时间:
-
-  - 移除属性 `suffixType` 操作尾部样式类型
-  - 移除属性 `suffixText` 操作尾部文案
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormSelect 表单选择:
-
-  - 移除属性 `suffixType` 操作尾部样式类型
-  - 移除属性 `suffixText` 操作尾部文案
-  - 移除属性 `validateTrigger` 字段触发校验类型
-  - 移除属性 `validateStatus` 校验状态
-  - 移除属性 `rules` 校验规则
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormPhone 表单手机号码:
-
-  - 移除属性 `maxLength` 最大输入长度
-  - 移除属性 `rules` 校验规则
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormEmail 表单邮件地址:
-
-  - 移除属性 `rules` 校验规则
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormUrl 表单邮件地址:
-
-  - 移除属性 `rules` 校验规则
-  - 移除属性 `requiredFlag` 是否需要必填星号
-  - 移除属性 `underline` 是否需要底部下划线
-
-- FormItem 表单元素:
-
-  - 移除组件
-
-- FormCell 表单表格:
-
-  - 移除组件
-
-- RegionPicker 地域选择:
-
-  - 移除组件
-
-- Textarea 多行输入:
-
-  - 移除组件, 待优化后重新上架
-
-### Changed
-
-- image 图片:
-
-  - 默认大小由 320\*240 rpx 调整为 240\*240 rpx
-
-- text 文本:
-
-  - 跟随小程序定义，`selectabble` 变更为 `userSelect`
-  - 样式调整：默认布局模式从 `inline` 编程 `block`
-
-- button 按钮：
-
-  - 样式调整：从默认宽度 `100%` 调整为默认 `184px`
-
-- Form 表单容器:
-
-  - 样式优化
-
-- FormInput 表单输入:
-
-  - 样式优化
-
-- FormRadio 表单单选:
-
-  - 属性 `name` 表单字段名称，默认值由 `thisIsRadioKey` 改为 `formRadio`
-  - 样式优化
-
-- FormCheckbox 表单复选:
-
-  - 属性 `name` 表单字段名称，默认值由 `thisIsCheckboxKey` 改为 `formCheckbox`
-  - 样式优化
-
-- FormSwitch 表单开关:
-
-  - 属性 `name` 表单字段名称，默认值由 `thisIsSelectKey` 改为 `formSwitch`
-  - 样式优化
-
-- FormDate 表单日期:
-
-  - 属性 `name` 表单字段名称，默认值由 `thisIsDateKey` 改为 `formDate`
-  - 样式优化
-
-- FormTime 表单时间:
-
-  - 属性 `name` 表单字段名称，默认值由 `thisIsTimeKey` 改为 `formTime`
-  - 样式优化
-
-- FormSelect 表单选择:
-
-  - 属性 `name` 表单字段名称，默认值由 `thisIsSelectKey` 改为 `formSelect`
-  - 样式优化
-
-- FormPhone 表单手机号码:
-
-  - 样式优化
-
-- FormEmail 表单邮件地址:
-
-  - 样式优化
-
-- FormUrl 表单邮件地址:
-
-  - 样式优化

package/src/mp/.gitignore

@@ -1,10 +0,0 @@
-/.yarn/*
-!/.yarn/patches
-!/.yarn/plugins
-!/.yarn/releases
-!/.yarn/sdks
-
-# Swap the comments on the following lines if you don't wish to use zero-installs
-# Documentation here: https://yarnpkg.com/features/zero-installs
-!/.yarn/cache
-#/.pnp.*