@cloudbase/weda-ui 0.2.15 → 1.0.21

package/src/web/components/tabs/tabs.pc.tsx

@@ -1,30 +1,43 @@
+import { useCustomCompareEffect, useMountEffect, useSyncedRef } from '@react-hookz/web';
 import * as React from 'react';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
+import isObjectEqual from '../../utils/isObjectEqual';
 import { useSyncValue } from '../../utils/useSyncValue';
 import { PropsType } from './index';
 
 
 export default function TabsPc({
-  tabs,
+  tabs = [],
   selectedIndex,
   events,
   className,
   style,
+  isMultipleSlot = true,
   ...restProps
 }: PropsType) {
 
   const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
-  const _tabs = Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
-    return {
-      id: index.toString(),
-      label: item.title
-    };
-  });
+  const _tabs = React.useMemo(() => {
+    return Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
+      return {
+        id: index.toString(),
+        label: item.title,
+        value: item.value
+      };
+    });
+  }, [tabs]);
 
+  const eventsRef = useSyncedRef(events);
+  useCustomCompareEffect(() => {
+    eventsRef.current && eventsRef.current.change({
+      id: _tabs[activeIndex]?.id,
+      label: _tabs[activeIndex]?.label,
+      value: _tabs[activeIndex]?.value,
+    });
+  }, [activeIndex, _tabs], isObjectEqual);
   const onActive = (e) => {
     setActiveIndex(e.id);
-    events && events.change(e);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
@@ -40,11 +53,11 @@ export default function TabsPc({
           key={item.id}
           id={item.id}
           >
-            {restProps[`panel${index + 1}`]}
+            {isMultipleSlot ? restProps[`panel${index + 1}`] : restProps['panel1']}
           </TabPanel>
         )
         )}
     </TeaTabs>
   </ConfigProvider>
   );
-}
+}

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

@@ -21,8 +21,6 @@ export default function Text({
   maxLines = 2,
   space = false,
   userSelect = true,
-  textAlign = '',
-  textColor = '',
   style = {},
   className,
   events,
@@ -42,23 +40,17 @@ export default function Text({
   }
   const levelName = level === '0' ? '' : `level_${level}`;
 
-  // 添加文本颜色属性
-  let style2 = {};
-  if (textColor !== "") {
-    style2 = {color: textColor};
-  }
-
-  // 添加对齐属性
-  if (textAlign !== "") {
-    style2 = {...style2, textAlign};
-  }
+  const inlineStyle = React.useMemo(
+    () => ({ ...textStyle, ...style }),
+    [textStyle, style]
+  );
   return (
     <p
       //@ts-expect-error contentEditable type def sucks
       contentEditable={contenteditable}
       onInput={onInput}
       onBlur={onBlur}
-      style={{  ...style, ...textStyle, ...style2 }}
+      style={inlineStyle}
       className={classNames('weda-text', 'weda-ui', className, levelName)}
       id={id}
       onClick={(e) => events.tap({}, { originEvent: e })}
@@ -66,4 +58,4 @@ export default function Text({
       {text}
     </p>
   );
-}
+}

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

@@ -1,11 +1,11 @@
-a.weda-file-view-pc__single{
-    display: inline-block;
-    vertical-align: middle;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
+a.weda-uploader-file-view__single {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
-a.weda-file-view-pc__single:hover{
-    text-decoration: underline;
+a.weda-uploader-file-view__single:hover {
+  text-decoration: underline;
 }

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/components/userInfo/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Button from '../../components/button';
+import { CommonPropsType } from '../../types';
+
+const UserInfo = (props: PropsType) => <Button {...props} />;
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 按钮标题
+   */
+  text?: string;
+  /**
+   * 按钮风格
+   */
+  type?: 'primary' | 'warn' | 'wechat' | 'default';
+  /**
+   * 按钮大小
+   */
+  size?: 'default' | 'mini' | 'large';
+  /**
+   * 信息用途
+   */
+  usage?: string;
+  /**
+   * 语言
+   */
+  language?: string;
+}
+
+export default UserInfo;

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,28 @@ 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;
+};
+
+/**
+ * 判断是否是url
+ */
+const reg =
+  // eslint-disable-next-line no-useless-escape
+  /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+
+export const isUrl = (path) => reg.test(path);

package/src/web/utils/tcb.js

@@ -1,3 +1,4 @@
+import { isInIde } from './platform';
 /**
  * 云存储/云函数相关
  */
@@ -35,3 +36,51 @@ 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：获取用户自定义导航内容
+ *  param
+ *  WeAppId: string,
+ *  EnvId: string,
+ *  PublishType?: string,
+ */
+export async function getAppCustomNav() {
+  try {
+    const PublishType = isInIde() ? 'preview' : '';
+    const WeAppId = window?.app?.id;
+    const res = await callWedaApi({
+      action: 'DescribeAppCustomNav',
+      serviceType: 'lowcode',
+      data: {
+        WeAppId,
+        PublishType,
+      },
+    });
+    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/src/web/weda-ui.css

@@ -6,6 +6,8 @@ body .weda-ui {
   --weui-BRAND: #006eff;
   --weui-TAG-TEXT-BLUE: #0067eb;
   --weui-BTN-DEFAULT-COLOR: #576b95;
+  --weui-WECHAT: #07c160;
+  --weui-TAG-TEXT-GREEN: #06ae56;
   --weui-BG-2: rgba(255, 255, 255, 0);
 }