@cloudbase/weda-ui 3.3.0 → 3.3.2

package/dist/web/components/swiper/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
 import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@react-hookz/web';
@@ -12,6 +12,15 @@ export default function Swiper({ children, className, style, autoplay = true, ci
     const [swipeStyle, setSwipeStyle] = useState(null);
     const [height, setHeight] = useState(0);
     const { change = () => { } } = events;
+    const setIndex = useCallback((index) => {
+        if (index >= itemCount) {
+            index = 0;
+        }
+        if (index < 0) {
+            index = itemCount - 1;
+        }
+        setCurrentIndex(index);
+    }, [itemCount]);
     useEffect(() => {
         if (autoplay) {
             // 自动切换
@@ -21,10 +30,60 @@ export default function Swiper({ children, className, style, autoplay = true, ci
             }, interval);
             return () => clearInterval(timer);
         }
-    }, [currentIndex, autoplay, itemCount]);
+    }, [currentIndex, autoplay, itemCount, interval, setIndex]);
     // 触发切换
     const pre = useRef({ index: currentIndex }).current;
     useEffect(() => {
+        // 设置容器样式、动画
+        // TODO fix settimeout mess
+        const updateSwipeStyle = (to, cur, length) => {
+            // 最后向前到最开始
+            if (to === 0 && cur === length - 1) {
+                circular &&
+                    setSwipeStyle({
+                        transform: `translate3d(0, 0, 0)`,
+                    });
+                // 不知道
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -100%, 0)`
+                            : `translate3d(-100%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            // 第一个后退到最后
+            if (to === length - 1 && cur === 0) {
+                circular &&
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 2) * 100}%, 0)`
+                            : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
+                    });
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                            : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            const style = {
+                transform: vertical
+                    ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                    : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+            };
+            if (to !== cur) {
+                style.transitionDuration = `${duration}ms`;
+            }
+            setSwipeStyle(style);
+        };
         updateSwipeStyle(currentIndex, pre.index, itemCount);
         change({
             current: currentIndex,
@@ -32,7 +91,7 @@ export default function Swiper({ children, className, style, autoplay = true, ci
         return () => {
             pre.index = currentIndex;
         };
-    }, [currentIndex, vertical]);
+    }, [change, circular, currentIndex, duration, itemCount, pre, vertical]);
     const outerWrapRef = useRef();
     useEventListener(outerWrapRef, 'load', (e) => {
         setHeight(e.target.clientHeight);
@@ -40,65 +99,6 @@ export default function Swiper({ children, className, style, autoplay = true, ci
     const itemsClone = React.Children.map(children, (x, i) => {
         return (React.createElement("div", { className: "g-swiper-item", "data-index": i }, x));
     });
-    const setIndex = (index) => {
-        if (index >= itemCount) {
-            index = 0;
-        }
-        if (index < 0) {
-            index = itemCount - 1;
-        }
-        setCurrentIndex(index);
-    };
-    // 设置容器样式、动画
-    // TODO fix settimeout mess
-    const updateSwipeStyle = (to, cur, length) => {
-        // 最后向前到最开始
-        if (to === 0 && cur === length - 1) {
-            circular &&
-                setSwipeStyle({
-                    transform: `translate3d(0, 0, 0)`,
-                });
-            // 不知道
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -100%, 0)`
-                        : `translate3d(-100%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        // 第一个后退到最后
-        if (to === length - 1 && cur === 0) {
-            circular &&
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 2) * 100}%, 0)`
-                        : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        const style = {
-            transform: vertical
-                ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-        };
-        if (to !== cur) {
-            style.transitionDuration = `${duration}ms`;
-        }
-        setSwipeStyle(style);
-    };
     return (React.createElement("div", { className: classNames('g-swiper weda-ui', className, {
             vertical: vertical,
         }), style: { height: height ? height : 'auto', ...style }, ref: outerWrapRef, id: id },

package/dist/web/components/tabs/index.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
+import { CommonErrorBoundary } from '../common/error-boundary';
 // import { fallback } from '../../utils/loading-fallback';
 import TabsH5 from './tabs.h5';
 import TabsPc from './tabs.pc';
-export default function Tabs(props) {
+function TabsImpl(props) {
     const platform = usePlatform();
     if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
         return React.createElement(TabsPc, { ...props });
@@ -13,3 +14,7 @@ export default function Tabs(props) {
     }
     return platform === 'h5' ? React.createElement(TabsH5, { ...props }) : React.createElement(TabsPc, { ...props });
 }
+export default function Tabs(props) {
+    return (React.createElement(CommonErrorBoundary, null,
+        React.createElement(TabsImpl, { ...props })));
+}

package/dist/web/components/tabs/tabs.h5.js

@@ -5,7 +5,9 @@ import { useSyncValue } from '../../utils/useSyncValue';
 import { useCustomCompareEffect, useSyncedRef } from '@react-hookz/web';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { emptyArray } from '../../utils/constant';
+import { useLoopRenderDetect } from '../common/use-loop-render-detect';
 export default function TabsH5({ tabs = emptyArray, selectedIndex, events, className, style, isMultipleSlot = true, ...restProps }) {
+    useLoopRenderDetect();
     const [currentIndex, setCurrentIndex] = useSyncValue(typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex);
     const stickyStyle = useMemo(() => {
         const length = tabs.length;

package/dist/web/components/text/index.js

@@ -2,15 +2,17 @@ import * as React from 'react';
 import classNames from '../../utils/classnames';
 import './index.css';
 export default function Text({ text, maxLines, space, userSelect, style, className, events, id, level, contenteditable, onInput, onBlur, }) {
-    const textStyle = {
-        WebkitLineClamp: maxLines,
-        whiteSpace: space ? 'pre-wrap' : 'pre-line',
-    };
-    if (!userSelect) {
-        textStyle.userSelect = 'none';
-    }
+    const inlineStyle = React.useMemo(() => {
+        const textStyle = {
+            WebkitLineClamp: maxLines,
+            whiteSpace: space ? 'pre-wrap' : 'pre-line',
+        };
+        if (!userSelect) {
+            textStyle.userSelect = 'none';
+        }
+        return { ...textStyle, ...style };
+    }, [maxLines, space, userSelect, style]);
     const levelName = level === '0' || !level ? '' : `level_${level}`;
-    const inlineStyle = React.useMemo(() => ({ ...textStyle, ...style }), [textStyle, style]);
     return (React.createElement("p", { 
         //@ts-expect-error contentEditable type def sucks
         contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, style: inlineStyle, className: classNames('weda-text', 'weda-ui', className, levelName), id: id, onClick: (e) => events.tap({}, { originEvent: e }) }, text));

package/dist/web/components/uploaderFileView/index.js

@@ -2,8 +2,8 @@ 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';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
 const CLASS_PREFIX = 'weda-uploader-file-view';
 /**
  * 上传文件回显，传showType强制展示某端样式，否则根据平台自动判断
@@ -11,12 +11,12 @@ const CLASS_PREFIX = 'weda-uploader-file-view';
 export default function UploaderFileView({ value, className, single = true, // 展示为单行 a 标签
 showType, // 展示端为 pc 还是 h5 样式
 ...rest }) {
+    const platform = usePlatform();
     const fileIDList = filterStrList(value);
     if (single) {
         return React.createElement(FileView, { fileID: fileIDList[0] });
     }
     else {
-        const platform = usePlatform();
         const showTypeMix = showType ? (showType === 'h5' ? 'h5' : 'pc') : platform;
         const uploadFileProps = {
             ...rest,
@@ -33,22 +33,7 @@ showType, // 展示端为 pc 还是 h5 样式
  * 单个文件回显，用在表格里面
  */
 const FileView = ({ fileID }) => {
-    const [src, setSrc] = React.useState('');
-    React.useEffect(() => {
-        const fetchFileId = async (id) => {
-            if (isCloudFileID(id)) {
-                try {
-                    const fileSrc = await getTempFileURL(id);
-                    setSrc(fileSrc);
-                }
-                catch (e) { }
-            }
-            else {
-                setSrc(id);
-            }
-        };
-        fetchFileId(fileID);
-    }, [fileID]);
+    const { data: src } = useTempUrl(fileID);
     const title = React.useMemo(() => {
         if (isCloudFileID(fileID)) {
             return transFileCloudidToName(fileID);

package/dist/web/components/uploaderView/index.js

@@ -19,7 +19,7 @@ alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObj
     const [errorList, setErrorList] = React.useState([]);
     React.useEffect(() => {
         events.load && events.load({ success: successList, error: errorList });
-    }, [successList, errorList]);
+    }, [successList, errorList, events]);
     const boxStyle = {
         marginRight: gutter,
         marginBottom: gutter,

package/dist/web/components/wedaVideo/index.js

@@ -3,9 +3,9 @@ import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import './index.css';
 import { usePlatform, isCloudFileID, isInIde } from '../../utils/platform';
-import { getTempFileURL } from '../../utils/tcb';
 import classNames from '../../utils/classnames';
 import { ConfigProvider, Icon } from 'tea-component';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
 const { useEffect, useRef, useMemo, useState } = React;
 const MimetypesKind = {
     opus: 'video/ogg',
@@ -40,32 +40,16 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
     });
     const videoRef = useRef(null);
     const playerRef = useRef(null);
-    const [realSrc, setRealSrc] = useState(null);
     const [videoModalStatus, setVideoModalStatus] = useState(true);
     const [videoErrMsg, setVideoErrMsg] = useState('');
+    const { data: realSrc, error } = useTempUrl(videoDataSource);
     const videoType = useMemo(() => {
         return realSrc === null || realSrc === void 0 ? void 0 : realSrc.substring(realSrc.lastIndexOf('.') + 1).toLowerCase();
     }, [realSrc]);
-    useEffect(() => {
-        async function getCloudUrl(fileID) {
-            if (isCloudFileID(fileID)) {
-                try {
-                    const fileSrc = await getTempFileURL(fileID);
-                    setVideoErrMsg('');
-                    setRealSrc(fileSrc);
-                }
-                catch (err) {
-                    console.error('getCloudUrl error', err);
-                    setVideoErrMsg('获取云文件资源失败');
-                    setRealSrc('');
-                }
-            }
-            else {
-                setRealSrc(videoDataSource);
-            }
-        }
-        getCloudUrl(videoDataSource);
-    }, [videoDataSource]);
+    if (error) {
+        console.error('getCloudUrl error', error);
+        setVideoErrMsg('获取云文件资源失败');
+    }
     useEffect(() => {
         const videoElement = videoRef.current;
         if (!playerRef.current) {
@@ -132,12 +116,24 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
                     !isCloudFileID(videoDataSource)) {
                     errorMsg = '请在预览区查看视频效果';
                 }
-                console.log('player error', errorMsg);
+                console.error('player error', errorMsg);
                 setVideoErrMsg(errorMsg);
                 setVideoModalStatus(true);
             });
         }
-    }, [videoRef]);
+    }, [
+        autoPlay,
+        controlBarStatus,
+        endTime,
+        loopPlay,
+        mutePlay,
+        posterImage,
+        realSrc,
+        startTime,
+        videoDataSource,
+        videoRef,
+        videoType,
+    ]);
     useEffect(() => {
         // 切换视频源
         if (playerRef.current && videoType) {
@@ -150,7 +146,7 @@ const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPla
             playerRef.current.src(srcOption);
             playerRef.current.load(realSrc);
         }
-    }, [realSrc]);
+    }, [realSrc, videoType]);
     return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
         React.createElement("div", { className: cls, id: id, style: style, "data-testid": "wedaVideo" },
             React.createElement("div", { "data-vjs-player": true },

package/dist/web/utils/platform.js

@@ -51,7 +51,7 @@ export function inH5IsMobile() {
         return is_mobile_ua;
     }
     catch (e) {
-        console.log('isMobile err', e);
+        console.error('isMobile checker err', e);
     }
 }
 /**

package/dist/web/utils/tcb.d.ts

@@ -1,21 +1,26 @@
 /**
  * 云存储/云函数相关
  */
-export function getCloudInstance(): Promise<any>;
+export declare function getCloudInstance(): Promise<any>;
 /**
  * 获取单个临时链接
  * 单个cos文件，返回字符串
  * 多个cos文件，返回 {fileID: src} 这样的对象
  */
-export function getTempFileURL(data: any): Promise<any>;
+export declare function getTempFileURL(data: any): Promise<any>;
 /**
  * 云函数获取数据
  */
-export function callDataSource(param: any, throwError?: boolean): Promise<any>;
+export declare function callDataSource(param: {
+    dataSourceName: string;
+    methodName: string;
+    params: Record<string, unknown>;
+    viewId?: string;
+}, throwError?: boolean): Promise<any>;
 /**
  * 云函数获取连接器数据
  */
-export function callConnector(param: any, throwError?: boolean): Promise<any>;
+export declare function callConnector(param: any, throwError?: boolean): Promise<any>;
 /**
  * 云API：获取用户自定义导航内容
  *  param
@@ -23,5 +28,6 @@ export function callConnector(param: any, throwError?: boolean): Promise<any>;
  *  EnvId: string,
  *  PublishType?: string,
  */
-export function getAppCustomNav(): Promise<any>;
-export function callWedaApi(...args: any[]): any;
+export declare function getAppCustomNav(): Promise<any>;
+export declare function callWedaApi(...args: any[]): any;
+export declare const getDataSourceByName: (dbName: any) => Promise<any>;

package/dist/web/utils/tcb.js

@@ -103,3 +103,16 @@ export async function getAppCustomNav() {
 export function callWedaApi(...args) {
     return window.app.cloud.callWedaApi(...args);
 }
+/*
+  获取数据源字段权限
+*/
+export const getDataSourceByName = async (dbName) => {
+    // dbName 为空时
+    if (!dbName)
+        return;
+    const datasource = await window.app.cloud.getDataSourceProfileAsync({
+        Name: dbName,
+        GetColumnAuth: true,
+    });
+    return datasource;
+};

package/dist/web/utils/use-cloud-id-temp-url.js

@@ -9,5 +9,7 @@ export function useTempUrl(cloudId) {
         }
         const tempUrl = await getTempFileURL(cloudId);
         return tempUrl;
-    });
+    }, 
+    // 8秒dedupe
+    { dedupingInterval: 8 * 1000 });
 }

package/dist/web/utils/useSyncValue.js

@@ -7,6 +7,7 @@ export function useSyncValue(defaultValue, comparotor = Object.is) {
         if (!comparotor(prevValue, defaultValue)) {
             setStateValue(defaultValue);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultValue]);
     const setter = useCallback((next) => {
         setStateValue(next);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "main": "./dist/index.js",
   "module": "./dist/index",
   "miniprogram": "mpdist",

package/dist/cypress/support/commands.d.ts

@@ -1 +0,0 @@
-import 'cypress-wait-until';

package/dist/cypress/support/commands.js

@@ -1,40 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-const compareSnapshotCommand = require('cypress-image-diff-js/dist/command');
-compareSnapshotCommand();
-import 'cypress-wait-until';

package/dist/cypress/support/e2e.d.ts

@@ -1,24 +0,0 @@
-import './commands';
-import 'style-loader!css-loader!./global-app.css';
-declare global {
-    namespace Cypress {
-        interface Chainable {
-            /**
-             * @param name The name of the snapshots that will be generated
-             * @param testThreshold @default 0 A number between 0 and 1 that represents the allowed percentage of pixels that can be different between the two snapshots
-             * @param retryOptions @default { limit: 0, timeout: Cypress.config('defaultCommandTimeout'), delay: Cypress.config('defaultCommandTimeout') / 5 }
-             * @example cy.compareSnapshot('empty-canvas', 0.1)
-             */
-            compareSnapshot(name: string, testThreshold?: number, retryOptions?: {
-                /**
-                 * The maximum number of retries
-                 */
-                limit: number;
-                /**
-                 * Delay before next iteration in ms
-                 */
-                delay: number;
-            }): Chainable<Element>;
-        }
-    }
-}

package/dist/cypress/support/e2e.js

@@ -1,22 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-// Import commands.js using ES2015 syntax:
-import './commands';
-import 'style-loader!css-loader!./global-app.css';
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-after(() => {
-    cy.task('generateReport');
-});

package/dist/src/configs/actions/showModal.json

@@ -1,48 +0,0 @@
-{
-    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_action.json",
-    "data": {
-        "properties": {
-            "title": {
-                "title": "标题",
-                "default": "弹窗标题",
-                "type": "string"
-            },
-            "content": {
-                "title": "内容",
-                "default": "请输入弹窗内容",
-                "type": "string"
-            },
-            "showCancel": {
-                "title": "是否显示取消按钮",
-                "type": "boolean",
-                "default": true
-            },
-            "cancelText": {
-                "type": "string",
-                "title": "取消按钮的文字",
-                "description": "最多 4 个字符",
-                "default": "取消"
-            },
-            "cancelColor": {
-                "title": "取消按钮的文字颜色",
-                "type": "color",
-                "default": "#000000"
-            },
-            "confirmText": {
-                "type": "string",
-                "title": "确认按钮的文字",
-                "description": "最多 4 个字符",
-                "default": "确认"
-            },
-            "confirmColor": {
-                "title": "确认按钮的文字颜色",
-                "type": "color",
-                "default": "#576B95"
-            }
-        }
-    },
-    "meta": {
-        "title": "showModal",
-        "description": "showModal 弹窗"
-    }
-}

package/dist/src/configs/actions/showToast.json

@@ -1,41 +0,0 @@
-{
-    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_action.json",
-    "data": {
-        "properties": {
-            "title": {
-                "title": "标题",
-                "type": "string",
-                "default": "提示的内容"
-            },
-            "icon": {
-                "title": "图标",
-                "type": "string",
-                "default": "success",
-                "x-component": "radio",
-                "enum": [
-                    {
-                        "label": "success",
-                        "value": "success"
-                    },
-                    {
-                        "label": "loading",
-                        "value": "loading"
-                    },
-                    {
-                        "label": "none",
-                        "value": "none"
-                    }
-                ]
-            },
-            "duration": {
-                "title": "提示的延迟时间",
-                "type": "number",
-                "default": 1500
-            }
-        }
-    },
-    "meta": {
-        "title": "showToast",
-        "description": "自定义提示"
-    }
-}

package/dist/src/configs/components/auth.json

@@ -1,16 +0,0 @@
-{
-    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
-    "data": {
-        "properties": {}
-    },
-    "events": [],
-    "meta": {
-        "name": "Auth",
-        "title": "登录",
-        "description": "登录组件",
-        "icon": "./auth.svg",
-        "category": "开放能力",
-        "categoryOrder": 1,
-        "componentOrder": 1
-    }
-}