@cloudbase/weda-ui 3.3.0 → 3.3.2

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import classNames from '../../utils/classnames';
 import './index.css';
 import { ImageInner } from './image';
 import { emptyObject } from '../../utils/constant';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
 export default function Image({ 
 // 系统属性
 className, events = emptyObject, style, 
@@ -17,22 +18,7 @@ src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
         [className]: className,
     });
     const objectFit = fit || getObjectFitByWxImageMode(mode);
-    const [realSrc, setRealSrc] = useState(/^cloud:\/\//.test(src) ? undefined : src);
-    useEffect(() => {
-        if (/^cloud:\/\//.test(src)) {
-            window.app.cloud
-                .getTempFileURL(src)
-                .then((res) => {
-                setRealSrc(res || '');
-            })
-                .catch(() => {
-                setRealSrc('');
-            });
-        }
-        else {
-            setRealSrc(src);
-        }
-    }, [src]);
+    const { data: realSrc } = useTempUrl(src);
     /**
      * 模拟小程序的widthFix、heightFix模式
      */
@@ -60,7 +46,7 @@ src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
         else {
             return style;
         }
-    }, [style, fit]);
+    }, [objectFit, style]);
     return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (React.createElement(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable })) : null;
 }
 function getObjectFitByWxImageMode(mode) {

package/dist/web/components/index.js

@@ -80,7 +80,9 @@ export { default as NavigationBar } from './navigationBar';
 // export { default as Bar } from './chart/bar';
 // export { default as Pie } from './chart/pie';
 export const Line = loadable(() => import('./chart/line'), { fallback });
-export const Bar = loadable(() => import('./chart/bar'), { fallback });
+export const Bar = loadable(() => import('./chart/bar/index'), {
+    fallback,
+});
 export const Pie = loadable(() => import('./chart/pie'), { fallback });
 export { default as DataView } from './dataView';
 export { default as StatisticsCard } from './chart/statisticsCard';

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

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useCallback, } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { callDataSource } from '../../utils/tcb';
 import { isInIde, getWhereList } from '../../utils/platform';
 import classNames from '../../utils/classnames';
@@ -184,7 +185,8 @@ export default function ListView(props) {
      * 根据fetchData方法返回值，回调给外部事件
      */
     const onEnvets = (data, datasource) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
+        const bottomLoadTimer = 150;
         const fetchRecords = [].concat(!isRecords && !isModel ? data : (data === null || data === void 0 ? void 0 : data.records) || []);
         const total = (_a = data === null || data === void 0 ? void 0 : data.total) !== null && _a !== void 0 ? _a : fetchRecords.length;
         if (['loadMoreButton', 'bottomLoad'].includes(paramRef.current.pagination)) {
@@ -200,20 +202,29 @@ export default function ListView(props) {
             data: beforeDataChange(dataRef.current.records || []),
         });
         if (total === 0) {
+            setStatus(isModel ? 'empty' : '');
             (_c = events === null || events === void 0 ? void 0 : events.queryEmpty) === null || _c === void 0 ? void 0 : _c.call(events, {
                 datasource,
                 data: beforeDataChange([]),
             });
-            setStatus(isModel ? 'empty' : '');
         }
         else {
-            window.setTimeout(() => setStatus('success'), pagination === 'bottomLoad' ? 150 : 0);
+            const statusCb = () => setStatus('success');
+            pagination === 'bottomLoad'
+                ? window.setTimeout(statusCb, bottomLoadTimer)
+                : statusCb();
         }
-        (_d = events === null || events === void 0 ? void 0 : events.querySuccess) === null || _d === void 0 ? void 0 : _d.call(events, {
-            datasource,
-            data: beforeDataChange(dataRef.current.records),
-        });
-        setPageNo(((_f = (_e = paramRef.current) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.pageNo) || 1);
+        const successCb = () => {
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.querySuccess) === null || _a === void 0 ? void 0 : _a.call(events, {
+                datasource,
+                data: beforeDataChange(dataRef.current.records),
+            });
+        };
+        pagination === 'bottomLoad'
+            ? window.setTimeout(successCb, bottomLoadTimer + 50)
+            : successCb();
+        setPageNo(((_e = (_d = paramRef.current) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.pageNo) || 1);
     };
     /**
      * 分页，加载更多

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import React, { useState, useEffect, useCallback, useImperativeHandle, } from 'react';
+import React, { useState, useEffect, useCallback, useImperativeHandle, useMemo, } from 'react';
 import { usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import './index.css';
@@ -14,7 +14,7 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
     const [lotteryList, setLotteryList] = useState([]);
     const [btnActived, setBtnActived] = useState(false);
     //获取初始化默认数据，数据不足8条设置默认，超过8条获取前8条
-    const lotteryListDefault = () => {
+    const lotteryListDefault = useMemo(() => {
         const list = [];
         if (prizeList == null) {
             return list;
@@ -39,21 +39,15 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
             }
         }
         return list;
-    };
+    }, [prizeList]);
     const startLottery = useCallback(() => {
-        setLotteryList(lotteryListDefault());
+        setLotteryList(lotteryListDefault);
         setBtnActived(true);
         if (lotteryAction.isStart)
             return;
         events === null || events === void 0 ? void 0 : events.clickLotteryButton();
         setIsStartLottery(true);
-    }, [
-        lotteryAction.isStart,
-        setIsStartLottery,
-        setBtnActived,
-        lotteryListDefault,
-        setLotteryList,
-    ]);
+    }, [lotteryListDefault, events]);
     useImperativeHandle(ref, () => {
         return {
             methods: {
@@ -62,8 +56,8 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
         };
     }, [startLottery]);
     useEffect(() => {
-        setLotteryList(lotteryListDefault());
-    }, [prizeList]);
+        setLotteryList(lotteryListDefault);
+    }, [lotteryListDefault]);
     useEffect(() => {
         lotteryAction.animationCallback = ({ idx, isEnd }) => {
             setActivedId(idx == -1 ? 0 : idx);
@@ -90,7 +84,7 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
                 }, 700);
             }
         };
-    }, [lotteryList]);
+    }, [events, lotteryList]);
     useEffect(() => {
         // 当满足开启抽奖条件并且点击了开奖开关时，启用抽奖
         if (enablePrize && isStartLottery) {
@@ -108,7 +102,7 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
             //立马停止抽奖
             lotteryAction.stop();
         }
-    }, [isStartLottery, enablePrize]);
+    }, [isStartLottery, enablePrize, prizeResult]);
     useEffect(() => {
         // 设置抽奖结果
         lotteryAction.end(prizeResult);
@@ -188,7 +182,7 @@ export default React.forwardRef(function Lottery({ className, id, style, prizeLi
                 setDotHeight(dotHeight);
             }
         }
-    }, [style]);
+    }, [platform, style]);
     const renderDot = (direction, list) => {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: classNames(`${CLASS_PREFIX}__dot`, `${CLASS_PREFIX}__dot-${direction}`) }, list.map((item, index) => {

package/dist/web/components/lottery/lotteryUtil.js

@@ -88,7 +88,7 @@ export default class LotteryAction {
         // 长度
         this.maxIdx = 8;
         // 回调动作
-        this.animationCallback = ({ idx, isEnd }) => { };
+        this.animationCallback = () => { };
         // 是否异常
         this.isError = false;
         // 是否加速

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

@@ -7,5 +7,5 @@ export default React.forwardRef(function WeDaModal(props, ref) {
     if (platform === 'h5') {
         return React.createElement(ModalH5, { ...props, outerRef: ref });
     }
-    return React.createElement(ModalPc, { ...props, outerRef: ref });
+    return React.createElement(ModalPc, { size: "auto", ...props, outerRef: ref });
 });

package/dist/web/components/navLayout/index.d.ts

@@ -1,12 +1,27 @@
 /// <reference types="react" />
 import type { CommonPropsType } from '../../types';
 import './index.css';
+export declare type INavOption = {
+    params: Array<{
+        key: string;
+        value: string;
+    }>;
+    paramObj?: any;
+    icon?: string;
+    iconSrc?: string;
+    title: string;
+    tapStatus: 'tap' | 'inside' | 'outer';
+    insideUrl?: string;
+    outerUrl?: string;
+    newPage?: boolean;
+    withParams?: boolean;
+};
 export default function NavLayout({ navOption, mobileCol, pcCol, iconSize, textColor, fontSize, lineHeight, fontWeight, maxLines, className, style, }: H5NavLayoutProps): JSX.Element;
 export interface H5NavLayoutProps extends CommonPropsType {
     /**
      * 导航配置
      */
-    navOption?: Array<any>;
+    navOption?: Readonly<INavOption[]>;
     /**
      * 移动端每行列数
      */

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

@@ -5,14 +5,19 @@ import { usePlatform } from '../../utils/platform';
 import './index.css';
 import { IconFont } from 'tdesign-icons-react';
 import Image from '../image';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { emptyArray } from '../../utils/constant';
 /**
  * Web端
  */
 const CLASS_PREFIX = 'weda-grid-navigation';
-export default function NavLayout({ navOption, mobileCol, pcCol, iconSize, textColor, fontSize, lineHeight, fontWeight, maxLines, className, style, }) {
+export default function NavLayout({ navOption = emptyArray, mobileCol, pcCol, iconSize, textColor, fontSize, lineHeight, fontWeight, maxLines, className, style, }) {
     const platform = usePlatform();
+    // 两次默认值不同, 需要刷新
+    const prevNavOptionRef = React.useRef(null);
     // 等分列占比
     const [colCount, setColCount] = React.useState(4);
+    const prevColRef = React.useRef(0);
     const cls = classNames({
         [CLASS_PREFIX]: true,
         [className]: className,
@@ -20,30 +25,36 @@ export default function NavLayout({ navOption, mobileCol, pcCol, iconSize, textC
     });
     const navList = React.useMemo(() => {
         const list = [];
-        list.length = Math.floor(navOption.length / colCount);
-        list.forEach((item, index) => {
-            list[index] = [];
-        });
-        navOption.forEach((item, index) => {
-            const _index = Math.floor(index / colCount);
-            if (!list[_index] || list[_index].length <= 0) {
-                // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
-                list[_index] = Array(colCount).fill(null);
-            }
-            const paramObj = {};
-            if (item === null || item === void 0 ? void 0 : item.params) {
-                for (const info of item.params) {
-                    paramObj[info.key] = info.value;
+        if (prevColRef.current !== colCount ||
+            (navOption.length > 0 &&
+                !isObjectEqual(prevNavOptionRef.current !== navOption))) {
+            list.length = Math.floor(navOption.length / colCount);
+            list.forEach((item, index) => {
+                list[index] = [];
+            });
+            navOption.forEach((item, index) => {
+                const _index = Math.floor(index / colCount);
+                if (!list[_index] || list[_index].length <= 0) {
+                    // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+                    list[_index] = Array(colCount).fill(null);
                 }
-            }
-            item.paramObj = paramObj;
-            list[_index][index - _index * colCount] = item;
-        });
+                const paramObj = {};
+                if (item === null || item === void 0 ? void 0 : item.params) {
+                    for (const info of item.params) {
+                        paramObj[info.key] = info.value;
+                    }
+                }
+                item.paramObj = paramObj;
+                list[_index][index - _index * colCount] = item;
+                prevNavOptionRef.current = [...navOption];
+                prevColRef.current = colCount;
+            });
+        }
         return list;
     }, [colCount, navOption]);
     React.useEffect(() => {
         setColCount(platform === 'h5' ? mobileCol : pcCol);
-    }, [mobileCol, pcCol]);
+    }, [mobileCol, pcCol, platform]);
     // 每个col的宽度百分比
     const colStyle = {
         width: `${(1 / colCount) * 100}%`,

package/dist/web/components/navigationBar/horizontalMenu.js

@@ -48,7 +48,7 @@ const HorizontalMenu = ({ menuData, navigationStyle, selected, setSelected }) =>
         if (platform !== 'h5' && isHorizontal && ((_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.children)) {
             getMenuOffset();
         }
-    }, [platform, isHorizontal, navWrapRef]);
+    }, [platform, isHorizontal, navWrapRef, getMenuOffset]);
     // 渲染下拉菜单
     const renderMenuList = (item, navigationStyle) => {
         return (React.createElement(List, { type: "option", className: `${CLASS_PREFIX}__dropdown-menu-list`, style: { background: navigationStyle.menuBackgroundColor } }, item === null || item === void 0 ? void 0 : item.map((menu) => {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import classNames from '../../utils/classnames';
 import { ConfigProvider } from 'tea-component';
 import { usePlatform, isInIde } from '../../utils/platform';
@@ -8,6 +8,7 @@ import VerticalMenu from './verticalMenu';
 import HorizontalMenu from './horizontalMenu';
 import H5Menu from './h5Menu';
 import { expandMenu, findMenuItemByPath } from './common';
+import isObjectEqual from '../../utils/isObjectEqual';
 import destr from 'destr';
 /**
  * Web端
@@ -55,6 +56,7 @@ const defaultSelectedMenu = (menu) => {
 const defaultCallApi = { getAppCustomNav };
 export default function NavigationBar({ navigationbar, contentSlot, className, style, callApi = defaultCallApi, }) {
     const platform = usePlatform();
+    const [preNavigationbar, setPreNavigationbar] = useState(navigationbar);
     const [menuData, setMenuData] = useState([]);
     const [mobileMenuData, setMobileMenuData] = useState([]);
     // 是否启用多端
@@ -79,13 +81,14 @@ export default function NavigationBar({ navigationbar, contentSlot, className, s
         ...style,
     };
     // 更新导航菜单
-    const updateNavigationData = () => {
+    const updateNavigationData = useCallback(() => {
         callApi
             .getAppCustomNav()
             .then((res) => {
             var _a;
             const { Content } = res;
             const navigationData = destr(Content);
+            setPreNavigationbar(navigationData);
             if (navigationData === null || navigationData === void 0 ? void 0 : navigationData.navigationStyle) {
                 // 设置默认选中
                 let selectedKey = '';
@@ -111,22 +114,24 @@ export default function NavigationBar({ navigationbar, contentSlot, className, s
             }
         })
             .catch((error) => {
-            console.log(error);
+            console.error(error);
         });
-    };
+    }, [callApi]);
     /**
      * 每次渲染组件通过接口拉取数据
      */
     useEffect(() => {
+        // 仅执行一次
         updateNavigationData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        if (isInIde()) {
-            // setMenuData(navigationbar?.menuData);
-            // setNavigationStyle(navigationbar?.navigationStyle);
+        if (!isObjectEqual(navigationbar, preNavigationbar)) {
             updateNavigationData();
         }
-    }, [navigationbar]);
+        // 检查navigationbar更新之后，重新渲染
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [navigationbar, updateNavigationData]);
     // 初始化css变量
     useEffect(() => {
         if (navigationStyle.menuHoverColor) {

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

@@ -92,7 +92,7 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
     useEffect(() => {
         const state = createStateFromContent(initialValue, {});
         setEditorState(state);
-    }, []);
+    }, [initialValue]);
     const excludeControls = useMemo(() => {
         const result = [
             'media',
@@ -134,7 +134,6 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
         maxSize,
         cloudPath,
         latestEditorState,
-        insertMedias,
         setEditorState,
         isH5,
     ]);

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

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import classNames from '../../utils/classnames';
 import { getTempFileURL } from '../../utils/tcb';
 import './index.css';
 import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
 import destr from 'destr';
+const imgRegex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
 export default function RichTextView({ value = '', className, style, id, }) {
     const parseValue = destr(value);
     const cls = classNames({
@@ -12,25 +13,26 @@ export default function RichTextView({ value = '', className, style, id, }) {
         [className]: className,
     });
     const [displayValue, setDisplayValue] = useState('');
-    const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
     const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
-    let tempValue = parseValue
-        .toString()
-        .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
-    const getSrc = async (img) => {
-        const url = img.replace(regex, '$1');
-        if (img.includes('cloud://')) {
-            const newURL = await getTempFileURL(url);
-            if (newURL) {
-                tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
-                setDisplayValue(tempValue);
-            }
-        }
-    };
+    const valueWithErrorHandle = useMemo(() => {
+        return parseValue
+            .toString()
+            .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+    }, [iferror, parseValue]);
     useEffect(() => {
-        setDisplayValue(tempValue);
+        const getSrc = async (img) => {
+            const url = img.replace(imgRegex, '$1');
+            if (img.includes('cloud://')) {
+                const newURL = await getTempFileURL(url);
+                if (newURL) {
+                    const htmlWithTempUrl = valueWithErrorHandle.replace(new RegExp(url, 'g'), newURL);
+                    setDisplayValue(htmlWithTempUrl);
+                }
+            }
+        };
+        setDisplayValue(valueWithErrorHandle);
         try {
-            const imgs = parseValue.match(regex);
+            const imgs = parseValue.match(imgRegex);
             if (imgs && imgs.length > 0) {
                 imgs.forEach((img) => {
                     getSrc(img);
@@ -38,7 +40,7 @@ export default function RichTextView({ value = '', className, style, id, }) {
             }
         }
         catch (e) { }
-    }, [value]);
+    }, [parseValue, valueWithErrorHandle]);
     return (displayValue && (React.createElement("div", { className: cls, style: style, id: id },
         React.createElement("div", { dangerouslySetInnerHTML: { __html: displayValue } }))));
 }

package/dist/web/components/scrollView/index.d.ts

@@ -10,7 +10,7 @@ export interface PropsType extends CommonPropsType {
     lowerThreshold?: number;
     domRef?: any;
 }
-export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold, lowerThreshold, domRef, events, }: {
+export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold, lowerThreshold, events, }: {
     id: any;
     scrollX?: boolean;
     scrollY?: boolean;
@@ -22,6 +22,5 @@ export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scr
     children: any;
     upperThreshold?: number;
     lowerThreshold?: number;
-    domRef: any;
     events: any;
 }): JSX.Element;

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

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import classNames from '../../utils/classnames';
-export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, domRef, events, }) {
+export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, 
+// domRef,
+events, }) {
     const [toUpper, setToUpper] = React.useState(false);
     const [toLower, setToLower] = React.useState(false);
     const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
     const [scrollTopPos, setScrollTopPos] = React.useState(0);
-    const scrollViewRef = domRef || React.useRef(null);
+    const scrollViewRef = React.useRef(null);
     const handleOnScroll = function (e) {
         const detail = {
             scrollLeft: e.target.scrollLeft,
@@ -64,10 +66,10 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
     }, [scrollLeft]);
     React.useEffect(() => {
         toUpper && events.scrolltoupper();
-    }, [toUpper]);
+    }, [events, toUpper]);
     React.useEffect(() => {
         toLower && events.scrolltolower();
-    }, [toLower]);
+    }, [events, toLower]);
     React.useEffect(() => {
         if (scrollIntoView) {
             const children = scrollViewRef.current.children;
@@ -76,7 +78,7 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
             scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
             // console.log('children', children, item)
         }
-    }, [scrollIntoView]);
+    }, [scrollIntoView, scrollX, scrollY]);
     const webStyles = {
         position: 'relative',
         width: '100%',