@cloudbase/weda-ui 3.27.3 → 3.29.0

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

@@ -1,38 +1,71 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+import { useState, forwardRef, useEffect, useRef, useCallback } from 'react';
+import { useDebouncedCallback } from '@react-hookz/web';
 import classNames from '../../utils/classnames';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 import './style';
-export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, 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 = React.useRef(null);
-    const handleOnScroll = function (e) {
+export default forwardRef(function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, events, observerSelector = [], rootMargin, }, ref) {
+    const [ready, setReady] = useState(false);
+    const [toUpper, setToUpper] = useState(false);
+    const [toLower, setToLower] = useState(false);
+    const [scrollLeftPos, setScrollLeftPos] = useState(0);
+    const [scrollTopPos, setScrollTopPos] = useState(0);
+    const scrollViewRef = useRef(null);
+    const handleScrollToTarget = useDebouncedCallback((element, option) => {
+        const { onEnter = () => { } } = option;
+        const _rootMargin = ['top', 'right', 'bottom', 'left'].map((dir) => parseInt((rootMargin === null || rootMargin === void 0 ? void 0 : rootMargin[dir]) || 0)).join('px ') + 'px';
+        // eslint-disable-next-line compat/compat
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    // 当元素进入视口时执行
+                    // 执行你的动作
+                    onEnter(entry);
+                }
+            });
+        }, {
+            threshold: 0.5,
+            rootMargin: _rootMargin,
+        });
+        [].concat(element).forEach((el) => {
+            var _a;
+            let selector = el === null || el === void 0 ? void 0 : el.replace(/^#/, '').replace(/^\./, '');
+            if (selector && scrollViewRef.current) {
+                if (el.startsWith('#')) {
+                    selector = document.getElementById(selector);
+                }
+                else {
+                    selector = (_a = scrollViewRef.current.getElementsByClassName(selector)) === null || _a === void 0 ? void 0 : _a[0];
+                }
+                selector && observer.observe(selector);
+            }
+        });
+    }, [scrollViewRef, rootMargin], 500);
+    const handleOnScroll = useCallback((e) => {
+        var _a;
+        const target = e.target;
         const detail = {
-            scrollLeft: e.target.scrollLeft,
-            scrollTop: e.target.scrollTop,
-            scrollHeight: e.target.scrollHeight,
-            scrollWidth: e.target.scrollWidth,
-            clientHeight: e.target.clientHeight,
-            clientWidth: e.target.clientWidth,
+            scrollLeft: target.scrollLeft,
+            scrollTop: target.scrollTop,
+            scrollHeight: target.scrollHeight,
+            scrollWidth: target.scrollWidth,
+            clientHeight: target.clientHeight,
+            clientWidth: target.clientWidth,
         };
-        const deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
-        const deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
+        const deltaY = scrollY ? target.scrollTop - scrollTopPos : 0;
+        const deltaX = scrollX ? target.scrollLeft - scrollLeftPos : 0;
         let delta;
         // 横向滚动
         if (Math.abs(deltaX) > Math.abs(deltaY)) {
             delta = deltaX;
-            setScrollLeftPos(e.target.scrollLeft);
-            if (scrollX && e.target.scrollLeft <= upperThreshold) {
+            setScrollLeftPos(target.scrollLeft);
+            if (scrollX && target.scrollLeft <= upperThreshold) {
                 delta < 0 && setToUpper(true);
             }
             else {
                 setToUpper(false);
             }
-            if (scrollX &&
-                e.target.scrollLeft + e.target.offsetWidth + lowerThreshold >=
-                    e.target.scrollWidth) {
+            if (scrollX && target.scrollLeft + target.offsetWidth + lowerThreshold >= target.scrollWidth) {
                 delta > 0 && setToLower(true);
             }
             else {
@@ -41,52 +74,104 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
         }
         else {
             delta = deltaY;
-            setScrollTopPos(e.target.scrollTop);
-            if (scrollY && e.target.scrollTop <= upperThreshold) {
+            setScrollTopPos(target.scrollTop);
+            if (scrollY && target.scrollTop <= upperThreshold) {
                 delta < 0 && setToUpper(true);
             }
             else {
                 setToUpper(false);
             }
-            if (scrollY &&
-                e.target.scrollTop + e.target.offsetHeight + lowerThreshold >=
-                    e.target.scrollHeight) {
+            if (scrollY && target.scrollTop + target.offsetHeight + lowerThreshold >= target.scrollHeight) {
                 delta > 0 && setToLower(true);
             }
             else {
                 setToLower(false);
             }
         }
-        events.scroll(detail, { originEvent: e });
-    };
-    React.useEffect(() => {
-        scrollViewRef.current.scrollTop = scrollTop;
+        if (observerSelector.length) {
+            handleScrollToTarget(observerSelector, {
+                onEnter: (element) => {
+                    if (typeof (events === null || events === void 0 ? void 0 : events.scrollToTarget) === 'function') {
+                        element.id = element.target.id;
+                        events.scrollToTarget(element);
+                    }
+                },
+            });
+        }
+        (_a = events === null || events === void 0 ? void 0 : events.scroll) === null || _a === void 0 ? void 0 : _a.call(events, detail, { originEvent: e });
+    }, [
+        scrollY,
+        scrollTopPos,
+        scrollX,
+        scrollLeftPos,
+        observerSelector,
+        events,
+        upperThreshold,
+        lowerThreshold,
+        handleScrollToTarget,
+    ]);
+    const handleScrollToView = useCallback((_scrollIntoView = scrollIntoView) => {
+        var _a;
+        let selector = _scrollIntoView !== null && _scrollIntoView !== void 0 ? _scrollIntoView : scrollIntoView;
+        selector = _scrollIntoView === null || _scrollIntoView === void 0 ? void 0 : _scrollIntoView.replace(/^#/, '').replace(/^\./, '');
+        if (selector && scrollViewRef.current) {
+            if (_scrollIntoView.startsWith('#') || selector === scrollIntoView) {
+                selector = document.getElementById(selector);
+            }
+            else {
+                selector = (_a = scrollViewRef.current.getElementsByClassName(selector)) === null || _a === void 0 ? void 0 : _a[0];
+            }
+            if (selector) {
+                scrollY &&
+                    scrollViewRef.current.scrollTo({
+                        top: selector.offsetTop || 0,
+                        behavior: 'smooth',
+                    });
+                scrollX &&
+                    scrollViewRef.current.scrollTo({
+                        left: selector.offsetLeft || 0,
+                        behavior: 'smooth',
+                    });
+            }
+        }
+    }, [scrollIntoView, scrollX, scrollY]);
+    useEffect(() => {
+        if (scrollViewRef.current && scrollTop !== undefined) {
+            scrollViewRef.current.scrollTop = scrollTop;
+        }
     }, [scrollTop]);
-    React.useEffect(() => {
-        scrollViewRef.current.scrollLeft = scrollLeft;
+    useEffect(() => {
+        if (scrollViewRef.current && scrollLeft !== undefined) {
+            scrollViewRef.current.scrollLeft = scrollLeft;
+        }
     }, [scrollLeft]);
-    React.useEffect(() => {
-        toUpper && events.scrolltoupper();
-    }, [toUpper]);
-    React.useEffect(() => {
-        toLower && events.scrolltolower();
-    }, [toLower]);
-    React.useEffect(() => {
-        if (scrollIntoView) {
-            const children = scrollViewRef.current.children;
-            const item = Array.from(children).find((item) => item && item.id === scrollIntoView);
-            scrollY && (scrollViewRef.current.scrollTop = (item === null || item === void 0 ? void 0 : item.offsetTop) || 0);
-            scrollX && (scrollViewRef.current.scrollLeft = (item === null || item === void 0 ? void 0 : item.offsetLeft) || 0);
-            // console.log('children', children, item)
+    useEffect(() => {
+        var _a;
+        toUpper && ((_a = events === null || events === void 0 ? void 0 : events.scrolltoupper) === null || _a === void 0 ? void 0 : _a.call(events));
+    }, [toUpper, events]);
+    useEffect(() => {
+        var _a;
+        toLower && ((_a = events === null || events === void 0 ? void 0 : events.scrolltolower) === null || _a === void 0 ? void 0 : _a.call(events));
+    }, [toLower, events]);
+    useEffect(() => {
+        if (ready) {
+            handleScrollToView();
+        }
+    }, [handleScrollToView, ready]);
+    useEffect(() => {
+        if ((scrollViewRef.current, !ready)) {
+            setReady(true);
+            if ((events === null || events === void 0 ? void 0 : events.onReady) && typeof (events === null || events === void 0 ? void 0 : events.onReady) === 'function') {
+                events.onReady({ scrollViewContext: scrollViewRef.current });
+            }
         }
-    }, [scrollIntoView]);
+    }, [events, ready]);
     const webStyles = {
         position: 'relative',
         width: '100%',
         height: '100%',
-        // whiteSpace: scroll === 'y' ? 'normal' : 'nowrap',
-        overflowX: `${scrollX ? 'auto' : 'hidden'}`,
-        overflowY: `${scrollY ? 'auto' : 'hidden'}`,
+        overflowX: scrollX ? 'auto' : 'hidden',
+        overflowY: scrollY ? 'auto' : 'hidden',
         ...style,
     };
     const cls = classNames({
@@ -94,5 +179,11 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
         'g-scroll-view': true,
         [className]: className,
     });
+    useSetWidgetApi(() => ({
+        scrollViewContext: scrollViewRef.current,
+        scrollIntoElement: ({ selector }) => {
+            handleScrollToView(selector);
+        },
+    }), [], ref);
     return (_jsx("div", { id: id, style: webStyles, ref: scrollViewRef, className: cls, onScrollCapture: handleOnScroll, children: children }));
-}
+});

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

@@ -4,7 +4,6 @@ import { UploadFilePc } from '../form/uploaderFile/uploadFile.pc';
 import { UploadFileH5 } from '../form/uploaderFile/uploadFile.h5';
 import { filterStrList, isCloudFileID, isHttpFileID, downloadFile, usePlatform, transFileCloudidToName, } from '../../utils/platform';
 import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
-import { useTranslation } from '../../utils/i18n/translation';
 import './style';
 const CLASS_PREFIX = 'weda-uploader-file-view';
 /**
@@ -14,7 +13,6 @@ export default function UploaderFileView(props) {
     const { value, className, single = true, // 展示为单行 a 标签
     showType, // 展示端为 pc 还是 h5 样式
     ...rest } = props;
-    const t = useTranslation();
     const platform = usePlatform();
     const fileIDList = filterStrList(value);
     if (single) {

package/dist/web/components/wd-member/wd-member.css

@@ -1,12 +1,11 @@
 /* h5 */
 .wd-form-item.wd-h5-member-root .weui-cell {
   padding: 0;
+  width: 100%;
 }
 
 /* pc */
-.wd-form-item.wd-pc-member-root
-  .weda-ui-user-selected
-  .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
+.wd-form-item.wd-pc-member-root .weda-ui-user-selected .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
   border: none;
   padding: 0;
   height: 100%;
@@ -14,10 +13,7 @@
   padding-right: 0 !important;
 }
 
-.wd-form-item.wd-pc-member-root
-  .weda-ui-user-selected
-  .wedatea2td-dropdown__header
-  .wedatea2td-icon-arrowdown {
+.wd-form-item.wd-pc-member-root .weda-ui-user-selected .wedatea2td-dropdown__header .wedatea2td-icon-arrowdown {
   display: none;
 }
 

package/dist/web/components/wd-upload-file/wd-upload-file.js

@@ -13,7 +13,7 @@ import './style';
  * 文件上传-标准化
  */
 export const WdUploadFile = forwardRef(function WdUploadFile(props, ref) {
-    const { classRoot = 'upload-file', acceptTypes: _acceptTypes = X_RUNTIME_DEFAULT._acceptTypesInFile, maxSize = X_RUNTIME_DEFAULT.maxSize, single = X_RUNTIME_DEFAULT.single, maxUploadCount = X_RUNTIME_DEFAULT.maxUploadCount, events = emptyObject, deleteVisible = X_RUNTIME_DEFAULT.deleteVisible, downloadVisible = X_RUNTIME_DEFAULT.downloadVisible, callbacks, uploadButtonText: _uploadButtonText, uploadTipText: _uploadTipText, storageType = 'cloudID', } = props;
+    const { classRoot = 'upload-file', acceptTypes: _acceptTypes = X_RUNTIME_DEFAULT._acceptTypesInFile, maxSize = X_RUNTIME_DEFAULT.maxSize, single = X_RUNTIME_DEFAULT.single, maxUploadCount = X_RUNTIME_DEFAULT.maxUploadCount, events = emptyObject, deleteVisible = X_RUNTIME_DEFAULT.deleteVisible, downloadVisible = X_RUNTIME_DEFAULT.downloadVisible, callbacks, uploadButtonText: _uploadButtonText, uploadTipText: _uploadTipText, storageType = 'cloudID', draggable = X_RUNTIME_DEFAULT.draggable, } = props;
     const t = useTranslation();
     const uploadButtonText = _uploadButtonText !== null && _uploadButtonText !== void 0 ? _uploadButtonText : t.clickToUpload;
     const uploadTipText = _uploadTipText !== null && _uploadTipText !== void 0 ? _uploadTipText : t.supportBatchUpload;
@@ -38,5 +38,5 @@ export const WdUploadFile = forwardRef(function WdUploadFile(props, ref) {
     };
     if (!visible)
         return null;
-    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(UploaderFile, { btnTitle: uploadButtonText, uploadTipText: uploadTipText, events: events, labelVisible: false, acceptTypes: acceptTypes, defaultValue: value, deleteVisible: deleteVisible, downloadVisible: downloadVisible, maxSize: maxSize, maxUploadCount: maxUploadCount, single: single, readOnly: readOnly, disabled: disabled, decorator: null, onChange: onChange, callbacks: callbacks, storageType: storageType }) }));
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(UploaderFile, { btnTitle: uploadButtonText, uploadTipText: uploadTipText, events: events, labelVisible: false, acceptTypes: acceptTypes, defaultValue: value, deleteVisible: deleteVisible, downloadVisible: downloadVisible, maxSize: maxSize, maxUploadCount: maxUploadCount, single: single, readOnly: readOnly, disabled: disabled, decorator: null, onChange: onChange, callbacks: callbacks, storageType: storageType, draggable: draggable }) }));
 });

package/dist/web/utils/i18n/locale/en_US.d.ts

@@ -115,5 +115,6 @@ declare const _default: {
     noRelated: string;
     noSelectable: string;
     uploadImage: string;
+    draggableText: string;
 };
 export default _default;

package/dist/web/utils/i18n/locale/en_US.js

@@ -184,4 +184,5 @@ export default {
     noSelectable: ('None Available'),
     // UploaderPC component
     uploadImage: ('Upload Image'),
+    draggableText: ('drag and drop to this area')
 };

package/dist/web/utils/i18n/locale/zh_CN.d.ts

@@ -116,5 +116,6 @@ declare const _default: {
     noRelated: string;
     noSelectable: string;
     uploadImage: string;
+    draggableText: string;
 };
 export default _default;

package/dist/web/utils/i18n/locale/zh_CN.js

@@ -185,4 +185,5 @@ export default {
     noSelectable: ('无可选'),
     // UploaderPC组件
     uploadImage: ('上传图片'),
+    draggableText: ('拖拽到此区域')
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "3.27.3",
+  "version": "3.29.0",
   "main": "./dist/index.js",
   "module": "./dist/index",
   "miniprogram": "mpdist",
@@ -73,10 +73,8 @@
     "postpack": "pinst --enable",
     "test:icon": "node tools/publish-icon/test.mjs",
     "sync-icon": "node tools/publish-icon/sync-icon.mjs",
-    "deploy": "npm run use-node18 && node scripts/deploy.mjs && npm run release",
+    "deploy": "bash scripts/deploy.sh",
     "release": "node scripts/release.mjs",
-    "use-node18": "node scripts/use-node18.mjs",
-    "use-node20": "bash scripts/use-node20.sh",
     "scan": "tcb-i18n -c ./i18n/i18next-scanner.config.js",
     "dict:push": "lingo push",
     "dict:pull": "lingo pull"
@@ -91,7 +89,7 @@
   "description": "腾讯云微搭低代码组件库模板",
   "dependencies": {
     "@antv/g6": "^4.8.5",
-    "@cloudbase/weda-client": "^1.1.36",
+    "@cloudbase/weda-client": "^1.1.37",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -153,9 +151,9 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
-    "@cloudbase/cals": "^1.2.20",
-    "@cloudbase/lowcode-cli": "^0.22.4",
-    "@cloudbase/weda-cloud-sdk": "^1.0.107",
+    "@cloudbase/cals": "^1.2.22",
+    "@cloudbase/lowcode-cli": "^0.23.0",
+    "@cloudbase/weda-cloud-sdk": "^1.0.108",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@craco/craco": "^7.1.0",