amis-ui 6.11.0 → 6.12.0-ab.2

package/lib/components/GroupedSelection.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */
 

package/lib/components/HeadCellDropDown.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */
 

package/lib/components/HorizontalScroll.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="lodash" />
+import { TestIdBuilder, ThemeProps } from 'amis-core';
+import React, { ReactNode } from 'react';
+type ChildrenType = React.ReactNode | ((showSelect: () => void) => React.ReactNode);
+export interface HorizontalScrollProps extends ThemeProps {
+    /**
+     * 左右按钮图标
+     */
+    icons?: ReactNode | ReactNode[];
+    /**
+     * 外层容器类名
+     */
+    className?: string;
+    /**
+     * 左右图标类名
+     */
+    iconsClassName?: string | string[];
+    /**
+     * 测试ID生成器
+     */
+    testIdBuilder?: TestIdBuilder;
+    children: ChildrenType;
+    /**
+     * 子元素滚动容器，用于计算当前点击。默认为当前滚动容器最内层
+     */
+    getScrollParentElement?: () => HTMLElement;
+    /**
+     * 激活的子元素类名，如果设置，那么每次页面缩放的时候，都会让对应的位置滚动到可视区域。如果命中多个元素，则只会滚动第一个
+     * 支持传入多个类名，按照传入数组中元素的顺序作为优先级顺序。[p0, p1, p2...]，优先级高的类名命中元素则会停止寻找
+     */
+    activeChildClassName?: string | string[];
+}
+interface HorizontalScrollState {
+    isOverflow: boolean;
+    arrowLeftDisabled: boolean;
+    arrowRightDisabled: boolean;
+    scroll: boolean;
+}
+export declare class HorizontalScroll extends React.Component<HorizontalScrollProps, HorizontalScrollState> {
+    innerWrapper: React.RefObject<HTMLDivElement>;
+    resizeDom: React.RefObject<HTMLDivElement>;
+    toDispose: Array<() => void>;
+    constructor(props: HorizontalScrollProps);
+    /**
+     * 处理箭头点击事件
+     * @param type 箭头方向，'left' 表示向左，'right' 表示向右
+     */
+    handleArrow(type: 'left' | 'right'): void;
+    /**
+     * 根据滚动条位置更新左右箭头的禁用状态
+     */
+    checkArrowStatus: import("lodash").DebouncedFunc<() => void>;
+    /**
+     * 保证选中的yua始终显示在可视区域
+     */
+    showSelected(isOverflow?: boolean): void;
+    /**
+     * 处理内容与容器之间的位置关系
+     */
+    checkIsOverflow(): void;
+    /**
+     * 渲染箭头图标
+     * @param type 箭头类型，'left' 表示左箭头，'right' 表示右箭头
+     * @returns 返回渲染的箭头图标组件或 null
+     */
+    renderArrow(type: 'left' | 'right'): React.JSX.Element | null;
+    /**
+     * 监听导航上的滚动事件
+     */
+    handleWheel(e: WheelEvent): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): ReactNode;
+}
+export {};

package/lib/components/HorizontalScroll.js

@@ -0,0 +1,283 @@
+/**
+ * amis-ui v6.12.0-ab.2
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var amisCore = require('amis-core');
+var React = require('react');
+var debounce = require('lodash/debounce');
+var icons = require('./icons.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var HorizontalScroll = /** @class */ (function (_super) {
+    tslib.__extends(HorizontalScroll, _super);
+    function HorizontalScroll(props) {
+        var _this = _super.call(this, props) || this;
+        _this.innerWrapper = React__default["default"].createRef(); // 内部滚动容器
+        _this.resizeDom = React__default["default"].createRef(); // 外部容器
+        _this.toDispose = []; // 监听函数数组
+        /**
+         * 根据滚动条位置更新左右箭头的禁用状态
+         */
+        _this.checkArrowStatus = debounce__default["default"](function () {
+            var _a, _b;
+            var wrapElement = ((_b = (_a = _this.props).getScrollParentElement) === null || _b === void 0 ? void 0 : _b.call(_a)) || _this.innerWrapper.current;
+            var _c = wrapElement || {
+                scrollLeft: 0,
+                scrollWidth: 0,
+                clientWidth: 0
+            }, scrollLeft = _c.scrollLeft, scrollWidth = _c.scrollWidth, clientWidth = _c.clientWidth;
+            var _d = _this.state, arrowRightDisabled = _d.arrowRightDisabled, arrowLeftDisabled = _d.arrowLeftDisabled;
+            if (scrollLeft === 0 && !arrowLeftDisabled) {
+                _this.setState({
+                    arrowRightDisabled: false,
+                    arrowLeftDisabled: true
+                });
+            }
+            else if (scrollWidth === scrollLeft + clientWidth &&
+                !arrowRightDisabled) {
+                _this.setState({
+                    arrowRightDisabled: true,
+                    arrowLeftDisabled: false
+                });
+            }
+            else if (scrollLeft !== 0 && arrowLeftDisabled) {
+                _this.setState({
+                    arrowLeftDisabled: false
+                });
+            }
+            else if (scrollWidth !== scrollLeft + clientWidth &&
+                arrowRightDisabled) {
+                _this.setState({
+                    arrowRightDisabled: false
+                });
+            }
+        }, 100, {
+            trailing: true,
+            leading: false
+        });
+        _this.resizeDom = React__default["default"].createRef();
+        _this.state = {
+            isOverflow: false,
+            arrowLeftDisabled: false,
+            arrowRightDisabled: false,
+            scroll: false
+        };
+        return _this;
+    }
+    /**
+     * 处理箭头点击事件
+     * @param type 箭头方向，'left' 表示向左，'right' 表示向右
+     */
+    HorizontalScroll.prototype.handleArrow = function (type) {
+        var _a, _b, _c, _d;
+        // 滚动元素的父元素
+        var wrapElement = ((_b = (_a = this.props).getScrollParentElement) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.innerWrapper.current;
+        var _e = wrapElement || {
+            scrollLeft: 0,
+            scrollWidth: 0,
+            clientWidth: 0
+        }, scrollLeft = _e.scrollLeft, scrollWidth = _e.scrollWidth, clientWidth = _e.clientWidth;
+        if (type === 'left' && scrollLeft > 0) {
+            var newScrollLeft = scrollLeft - clientWidth;
+            (_c = wrapElement === null || wrapElement === void 0 ? void 0 : wrapElement.scrollTo) === null || _c === void 0 ? void 0 : _c.call(wrapElement, {
+                left: newScrollLeft > 0 ? newScrollLeft : 0,
+                behavior: 'smooth'
+            });
+            this.setState({
+                arrowRightDisabled: false,
+                arrowLeftDisabled: newScrollLeft <= 0
+            });
+        }
+        else if (type === 'right' && scrollWidth > scrollLeft + clientWidth) {
+            var newScrollLeft = scrollLeft + clientWidth;
+            (_d = wrapElement === null || wrapElement === void 0 ? void 0 : wrapElement.scrollTo) === null || _d === void 0 ? void 0 : _d.call(wrapElement, {
+                left: newScrollLeft > scrollWidth ? scrollWidth : newScrollLeft,
+                behavior: 'smooth'
+            });
+            this.setState({
+                arrowRightDisabled: newScrollLeft > scrollWidth - clientWidth,
+                arrowLeftDisabled: false
+            });
+        }
+        this.setState({
+            scroll: true
+        });
+    };
+    /**
+     * 保证选中的yua始终显示在可视区域
+     */
+    HorizontalScroll.prototype.showSelected = function (isOverflow) {
+        var _a, _b, _c, _d;
+        var isContentOverflow = isOverflow === undefined ? this.state.isOverflow : isOverflow;
+        var activeChildClassName = this.props.activeChildClassName;
+        if (!isContentOverflow || !activeChildClassName) {
+            return;
+        }
+        // 滚动子元素容器
+        var wrapperDom = ((_b = (_a = this.props).getScrollParentElement) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.innerWrapper.current;
+        // 查找第一个命中的元素
+        var activeElement = null;
+        var searchClassNames = Array.isArray(activeChildClassName)
+            ? activeChildClassName
+            : [activeChildClassName];
+        // 根据传入类名数组从前到后查找是否能匹配到对应元素
+        var classNameIndex = 0;
+        while (!activeElement && classNameIndex < searchClassNames.length) {
+            activeElement = wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.querySelector(".".concat(activeChildClassName[classNameIndex]));
+            classNameIndex++;
+        }
+        // 检查查找到的元素是否是直接子元素，如果不是则一直向上找
+        while (activeElement && activeElement.parentElement !== wrapperDom) {
+            activeElement = activeElement.parentElement;
+        }
+        if (!activeElement) {
+            return;
+        }
+        var activeLeftOffset = activeElement === null || activeElement === void 0 ? void 0 : activeElement.offsetLeft;
+        var activeWidth = activeElement === null || activeElement === void 0 ? void 0 : activeElement.clientWidth;
+        var scrollLeft = (wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.scrollLeft) || 0;
+        var clientWidth = (wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.clientWidth) || 0;
+        // 左边被遮住了
+        if (scrollLeft > activeLeftOffset) {
+            (_c = wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.scrollTo) === null || _c === void 0 ? void 0 : _c.call(wrapperDom, {
+                left: activeLeftOffset,
+                behavior: 'smooth'
+            });
+        }
+        // 右边被遮住了
+        if (activeLeftOffset + activeWidth > scrollLeft + clientWidth) {
+            (_d = wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.scrollTo) === null || _d === void 0 ? void 0 : _d.call(wrapperDom, {
+                left: activeLeftOffset + activeWidth - clientWidth,
+                behavior: 'smooth'
+            });
+        }
+    };
+    /**
+     * 处理内容与容器之间的位置关系
+     */
+    HorizontalScroll.prototype.checkIsOverflow = function () {
+        var _a, _b;
+        var navMainRef = ((_b = (_a = this.props).getScrollParentElement) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.innerWrapper.current;
+        var clientWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.clientWidth) || 0;
+        var scrollWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.scrollWidth) || 0;
+        var isOverflow = scrollWidth > clientWidth;
+        // 内容超出容器长度标记溢出
+        if (isOverflow !== this.state.isOverflow) {
+            this.setState({ isOverflow: isOverflow });
+        }
+        if (isOverflow) {
+            this.showSelected(isOverflow);
+        }
+    };
+    /**
+     * 渲染箭头图标
+     * @param type 箭头类型，'left' 表示左箭头，'right' 表示右箭头
+     * @returns 返回渲染的箭头图标组件或 null
+     */
+    HorizontalScroll.prototype.renderArrow = function (type) {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, testIdBuilder = _a.testIdBuilder, icons$1 = _a.icons, iconsClassName = _a.iconsClassName;
+        var _b = this.state, isOverflow = _b.isOverflow, arrowLeftDisabled = _b.arrowLeftDisabled, arrowRightDisabled = _b.arrowRightDisabled;
+        var disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
+        // 优先使用外部传入图标
+        var _c = tslib.__read(Array.isArray(icons$1) ? icons$1 : [icons$1, icons$1], 2), leftIcon = _c[0], rightIcon = _c[1];
+        var renderIconContent = type === 'left' ? leftIcon : rightIcon;
+        var _d = tslib.__read(Array.isArray(iconsClassName)
+            ? iconsClassName
+            : [iconsClassName, iconsClassName], 2), leftIconClassName = _d[0], rightIconClassName = _d[1];
+        var renderIconClassName = type === 'left' ? leftIconClassName : rightIconClassName;
+        return isOverflow ? (_J$X_("div", tslib.__assign({ onClick: function () { return _this.handleArrow(type); }, className: cx('HorizontalScroll-arrow', 'HorizontalScroll-arrow--' + type, disabled && 'HorizontalScroll-arrow--disabled') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("arrow-".concat(type)).getTestId()), renderIconContent ? (_J$X_(icons.Icon, { icon: renderIconContent, className: renderIconClassName })) : (_J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon" })))) : null;
+    };
+    /**
+     * 监听导航上的滚动事件
+     */
+    HorizontalScroll.prototype.handleWheel = function (e) {
+        var _a, _b, _c;
+        var deltaY = e.deltaY, deltaX = e.deltaX;
+        var absX = Math.abs(deltaX);
+        var absY = Math.abs(deltaY);
+        // 当鼠标上下滚动时转换为左右滚动
+        if (absY > absX) {
+            var wrapElement = ((_b = (_a = this.props).getScrollParentElement) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.innerWrapper.current;
+            (_c = wrapElement === null || wrapElement === void 0 ? void 0 : wrapElement.scrollTo) === null || _c === void 0 ? void 0 : _c.call(wrapElement, {
+                left: (wrapElement === null || wrapElement === void 0 ? void 0 : wrapElement.scrollLeft) + deltaY
+            });
+            e.preventDefault();
+        }
+        this.checkArrowStatus();
+        this.setState({
+            scroll: true
+        });
+    };
+    HorizontalScroll.prototype.componentDidMount = function () {
+        var _this = this;
+        var _a, _b, _c;
+        this.checkIsOverflow();
+        var wrapElement = ((_b = (_a = this.props).getScrollParentElement) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.innerWrapper.current;
+        if (wrapElement) {
+            wrapElement.addEventListener('wheel', this.handleWheel, {
+                passive: false
+            });
+            this.checkArrowStatus();
+        }
+        ((_c = this.resizeDom) === null || _c === void 0 ? void 0 : _c.current) &&
+            this.toDispose.push(amisCore.resizeSensor(this.resizeDom.current, function () {
+                return _this.checkIsOverflow();
+            }));
+    };
+    HorizontalScroll.prototype.componentWillUnmount = function () {
+        this.checkArrowStatus.cancel();
+        this.toDispose.forEach(function (fn) { return fn(); });
+        this.toDispose = [];
+    };
+    HorizontalScroll.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, children = _a.children, testIdBuilder = _a.testIdBuilder, className = _a.className;
+        return (_J$X_("div", { ref: this.resizeDom, className: cx('HorizontalScroll-wrapper', className) },
+            _J$X_("div", tslib.__assign({ className: cx('HorizontalScroll-Container', this.state.isOverflow && 'HorizontalScroll-Container--overflow') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('links').getTestId()),
+                this.renderArrow('left'),
+                _J$X_("div", { className: cx('HorizontalScroll-Container-main'), ref: this.innerWrapper }, typeof children === 'function'
+                    ? children(this.showSelected)
+                    : children),
+                this.renderArrow('right'))));
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], HorizontalScroll.prototype, "handleArrow", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Boolean]),
+        tslib.__metadata("design:returntype", void 0)
+    ], HorizontalScroll.prototype, "showSelected", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], HorizontalScroll.prototype, "checkIsOverflow", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [WheelEvent]),
+        tslib.__metadata("design:returntype", void 0)
+    ], HorizontalScroll.prototype, "handleWheel", null);
+    return HorizontalScroll;
+}(React__default["default"].Component));
+
+exports.HorizontalScroll = HorizontalScroll;

package/lib/components/Html.d.ts

@@ -15,11 +15,13 @@ export interface HtmlProps {
     classnames: ClassNamesFn;
     filterHtml?: (input: string) => string;
 }
+export declare const HTMLFilterContext: React.Context<(txt: string) => string>;
 export declare class Html extends React.Component<HtmlProps> {
     static defaultProps: {
         inline: boolean;
     };
     dom: any;
+    static contextType: React.Context<(txt: string) => string>;
     constructor(props: HtmlProps);
     componentDidUpdate(prevProps: HtmlProps): void;
     htmlRef(dom: any): void;

package/lib/components/Html.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */
 
@@ -18,6 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var __react_jsx__ = require('react');
 var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
 (__react_jsx__["default"] || __react_jsx__).Fragment;
+var HTMLFilterContext = React__default["default"].createContext(function (txt) { return txt; });
 var Html = /** @class */ (function (_super) {
     tslib.__extends(Html, _super);
     function Html(props) {
@@ -40,7 +41,8 @@ var Html = /** @class */ (function (_super) {
     Html.prototype._render = function () {
         var _a = this.props, html = _a.html, filterHtml = _a.filterHtml;
         if (html) {
-            this.dom.innerHTML = filterHtml ? filterHtml(html) : html;
+            var filter = filterHtml || this.context || (function (text) { return text; });
+            this.dom.innerHTML = filter(html);
         }
     };
     Html.prototype.render = function () {
@@ -51,9 +53,11 @@ var Html = /** @class */ (function (_super) {
     Html.defaultProps = {
         inline: true
     };
+    Html.contextType = HTMLFilterContext;
     return Html;
 }(React__default["default"].Component));
 var Html$1 = amisCore.themeable(Html);
 
+exports.HTMLFilterContext = HTMLFilterContext;
 exports.Html = Html;
 exports["default"] = Html$1;

package/lib/components/Icon.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */