@cloudbase/weda-ui 0.2.14 → 0.2.17

package/src/web/components/uploaderFileView/index.jsx

@@ -1,43 +1,52 @@
 import * as React from 'react';
 import { UploadFilePc } from '../form/uploaderFile/uploadFile.pc';
+import { UploadFileH5 } from '../form/uploaderFile/uploadFile.h5';
 import {
   filterStrList,
   isCloudFileID,
   downloadFile,
+  usePlatform,
+  transFileCloudidToName,
 } from '../../utils/platform';
 import { getTempFileURL } from '../../utils/tcb';
 import './index.css';
 
-const CLASS_PREFIX = 'weda-file-view-pc';
+const CLASS_PREFIX = 'weda-uploader-file-view';
 
 /**
- * 上传文件回显
- * single 表示单个文件回显
+ * 上传文件回显，传showType强制展示某端样式，否则根据平台自动判断
  */
 export default function UploaderFileView({
   value,
   className,
-  single = true,
+  single = true, // 展示为单行 a 标签
+  showType, // 展示端为 pc 还是 h5 样式
   ...rest
 }) {
   const fileIDList = filterStrList(value);
-  if(single){
-    return <FileView fileID={fileIDList[0]}/>
-  }else{
-    return (
-      <UploadFilePc
-        className={`${CLASS_PREFIX} ${className}`}
-        decorator={null}
-        {...rest}
-        value={fileIDList}
-        isEdit={false}
-      />
-    )
+  if (single) {
+    return <FileView fileID={fileIDList[0]} />;
+  } else {
+    const platform = usePlatform();
+    const showTypeMix = showType ? (showType === 'h5' ? 'h5' : 'pc') : platform;
+    const uploadFileProps = {
+      ...rest,
+      className: `${CLASS_PREFIX} ${className}`,
+      decorator: null,
+      labelVisible: false,
+      value: fileIDList,
+      isEdit: false,
+    };
+    return showTypeMix === 'pc' ? (
+      <UploadFilePc {...uploadFileProps} />
+    ) : (
+      <UploadFileH5 {...uploadFileProps} />
+    );
   }
 }
 
 /**
- * 单个文件回显
+ * 单个文件回显，用在表格里面
  */
 const FileView = ({ fileID }) => {
   const [src, setSrc] = React.useState('');
@@ -58,18 +67,18 @@ const FileView = ({ fileID }) => {
 
   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;
     }
   }, [fileID]);
   return (
-      <a title={title} onClick={() => downloadFile(src)} className={`${CLASS_PREFIX}__single`}>
+    <a
+      title={title}
+      onClick={() => downloadFile(src)}
+      className={`${CLASS_PREFIX}__single`}
+    >
       {title}
-      </a>
-  )
+    </a>
+  );
 };

package/src/web/types.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="resize-observer-browser" />
 
-import * as React from "react";
-export type unknownFunction = (...args: unknown[]) => unknown
+import { any } from 'prop-types';
+import * as React from 'react';
+export type unknownFunction = (...args: unknown[]) => unknown;
 export interface CommonPropsType {
-    style?: React.CSSProperties,
-    id?: string,
-    events?: Record<string, unknownFunction>;
-    className?: string,
-    children?: React.ReactNode | undefined
+  style?: React.CSSProperties;
+  id?: string;
+  events?: Record<string, unknownFunction>;
+  className?: string;
+  children?: React.ReactNode | undefined;
 }
 
-
 declare global {
-    var app: any
-    interface Window { 
-        app: any;
-    }
-
-}
+  var app: any;
+  interface Window {
+    app: any;
+    qq: any;
+    TMap: any;
+  }
+}

package/src/web/utils/debounce.js

@@ -0,0 +1,98 @@
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === 'object' || type === 'function');
+}
+function debounce(func, wait, options) {
+  let lastArgs, lastThis, maxWait, result, timerId, lastCallTime;
+  let lastInvokeTime = 0;
+  let leading = false;
+  let maxing = false;
+  let trailing = true;
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function');
+  }
+  wait = +wait || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    const args = lastArgs;
+    const thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function startTimer(pendingFunc, wait) {
+    return setTimeout(pendingFunc, wait);
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = startTimer(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime;
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    const timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime;
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    return (
+      lastCallTime === undefined ||
+      timeSinceLastCall >= wait ||
+      timeSinceLastCall < 0 ||
+      (maxing && timeSinceLastInvoke >= maxWait)
+    );
+  }
+  function timerExpired() {
+    const time = Date.now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = startTimer(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = undefined;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  //debouncedFunc
+  function debounced(...args) {
+    const time = Date.now();
+    const isInvoking = shouldInvoke(time);
+
+    lastArgs = args;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        timerId = startTimer(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = startTimer(timerExpired, wait);
+    }
+    return result;
+  }
+  return debounced;
+}
+export default debounce;

package/src/web/utils/platform.js

@@ -38,6 +38,21 @@ export function usePlatform() {
   return touchDevice || smallScreen ? 'h5' : 'pc';
 }
 
+/**
+ * 在h5下，判断当前是否是移动浏览器
+ */
+export function inH5IsMobile() {
+  try {
+    // 区分h5是在编辑器还是移动浏览器
+    let is_mobile_ua = false;
+    const ua = navigator && navigator.userAgent;
+    is_mobile_ua = /Android|webOS|BlackBerry|iPhone|iPad|iPod|iOS/i.test(ua);
+    return is_mobile_ua;
+  } catch (e) {
+    console.log('isMobile err', e);
+  }
+}
+
 /**
  * 过滤非字符串，返回字符串数组
  * 用于兼容单个组件和组件数组
@@ -101,3 +116,19 @@ export const cutFileTitle = (str = '', count = 10) => {
   }
   return title;
 };
+
+/**
+ * 判断是否在 ide 中
+ */
+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 lastIndex = `${fileID}`.lastIndexOf('/');
+  const name = `${fileID}`.slice(lastIndex + 1);
+  const title = name.replace(uuidReg, '');
+  return title;
+};

package/src/web/utils/tcb.js

@@ -35,3 +35,26 @@ export async function getTempFileURL(data) {
     return await window?.app?.cloud?.getTempFileURL(data);
   }
 }
+
+/**
+ * 云函数获取数据
+ */
+export async function callDataSource(param) {
+  const { params, dataSourceName, methodName } = param;
+  try {
+    const res = await window?.app?.cloud?.callDataSource?.({
+      params,
+      dataSourceName,
+      methodName,
+    });
+    return res;
+  } catch (error) {
+    console.error('错误', error);
+    return {};
+  }
+}
+
+
+export function callWedaApi(...args) {
+  return window.app.cloud.callWedaApi(...args);
+}

package/src/web/utils/tmap.js

@@ -0,0 +1,4 @@
+export function getTMap() {
+  const TMap = window?.TMap;
+  return TMap;
+}

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.*

package/src/web/wedatheme/.code.yml

@@ -1,16 +0,0 @@
-source:
-  # 文件或目录使用绝对路径，绝对路径按代码库根目录计算，以/开头。
-  # 提供产品代码库中编写的测试代码存放目录或文件名格式，以便代码检查时进行排除处理
-  # 不要使用.*/等正则表达式屏蔽掉所有代码，会使得代码存在风险，还会导致Coverity扫不到任何代码而失败
-  test_source:
-    #用于匹配文件; 匹配方式为正则表达式，例如[".*/java/test/.*", ".*/test.java"]
-    filepath_regex:  
-  # 提供产品代码库中工具或框架自动生成的且在代码库中的代码，没有可为空。以便代码检查时进行排除处理。
-  auto_generate_source:
-    # 自动生成代码文件的正则表达式，若无统一标识格式，可以指定具体目录，样例可参考test_source举例
-    filepath_regex: ["/style-package/*.*"]
-  # 提供产品代码库中直接以源码形式存在的第三方代码目录或代码文件名的正则表达。
-  # 此处备注的第三方代码将在代码检查时进行排除，若代码库中不存在需要排除的第三方代码，该项配置标识可为空
-  third_party_source:
-    #第三方代码文件的正则表达式，若无统一标识格式，可以指定具体目录，样例可参考test_source举例
-    filepath_regex: 

package/src/web/wedatheme/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = false
-end_of_line = lf

package/src/web/wedatheme/.eslintrc

@@ -1,20 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "extends": ["@tencent/eslint-config-tencent", "plugin:react/recommended"]
-}

package/src/web/wedatheme/.git

@@ -1 +0,0 @@
-gitdir: ../../../.git/modules/src/web/wedatheme

package/src/web/wedatheme/.gitignore

@@ -1,5 +0,0 @@
-node_modules
-dist
-.history
-src/.DS_Store
-*.DS_Store

package/src/web/wedatheme/.npmrc

@@ -1 +0,0 @@
-registry=https://mirrors.tencent.com/npm/

package/src/web/wedatheme/.orange-ci.yml

@@ -1,55 +0,0 @@
-### 该配置文件用于自动发布tnpm包，tnpm相关配置从git地址获取 ###
-master:
-  push:
-    - 
-      stages:
-        - name: 发布 npm 包
-          image: plugins/npm
-          envFrom: https://git.code.oa.com/tc-console/public-key/blob/master/tnpm.text
-          settings:
-            username: $TNPM_USER
-            password: $TNPM_PWD
-            email: $TNPM_EMAIL
-            registry: https://mirrors.tencent.com/npm/
-            folder: ./style-package/
-        - name: 获取包名
-          type: orange-ci:readFile
-          options:
-            filePath: ./style-package/package.json
-          envExport:
-            name: PACKAGE_NAME
-        - name: make message
-          script: echo '[http://mirrors.tencent.com/#/private/npm/detail?project_name=$PACKAGE_NAME](http://mirrors.tencent.com/#/private/npm/detail?project_name=$PACKAGE_NAME)' > message.txt
-        - name: send message
-          type: wework:message
-          options:
-            fromFile: message.txt
-### 该配置文件用于自动构建并部署文件到服务器，通过企业微信返回内网预览地址 ###
-### 接入配置可参考：http://km.oa.com/articles/show/422133 有疑问可联系youngerwang ###
-dev:
-  push:
-    - docker: 
-        image: node:10
-      env:
-        ORANGE_W_BUILD_SUCCESS_MSG: 预览地址：http://9.134.68.199/$ORANGE_REPO_SLUG/dist/index.html
-      stages:
-        ### 需要每次都安装一次，后续下放到开发机器
-        - name: 安装 tnpm
-          script: npm install @tencent/tnpm -g --registry=https://mirrors.tencent.com/npm/
-        - name: 安装 tea-cli
-          script: tnpm i @tencent/tea-cli -g  
-        - name: 安装依赖
-          script: tnpm install && tnpm i @tencent/tea-component
-        - name: 构建
-          script: tea login qaayH8xL2ATXSkWS8ahBB7IEYXMECyaKSAlbkDzX && tea build -l zh
-        - name: 预览地址
-          type: wework:message
-          options:
-            message: '[http://9.134.68.199/$ORANGE_REPO_SLUG/dist/index.html](http://9.134.68.199/$ORANGE_REPO_SLUG/dist/index.html)'
-        - name: 拷贝文件
-          type: orange-ci:transfer
-          options:
-            dist: '/'
-            to: /usr/share/nginx/html/$ORANGE_REPO_SLUG
-            ips: 
-              - 9.134.68.199

package/src/web/wedatheme/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["dbaeumer.vscode-eslint"]
-}