@cloudbase/weda-ui 0.2.15 → 0.2.16

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,38 @@ 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 {};
+  }
+}
+
+/**
+ * 调用微搭后端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 {};
+  }
+}

package/src/web/utils/tmap.js

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