amis-ui 6.13.0-beta.8 → 6.13.0

package/lib/components/BarCode.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @file 基于实现 bar code
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ClassNamesFn } from 'amis-core';
+import JsBarcode from 'jsbarcode';
+export interface BarCodeProps {
+    value: string;
+    className?: string;
+    classPrefix: string;
+    options?: JsBarcode.Options;
+    classnames: ClassNamesFn;
+}
+export declare class BarCode extends React.Component<BarCodeProps> {
+    private dom;
+    constructor(props: BarCodeProps);
+    componentDidUpdate(prevProps: BarCodeProps): void;
+    renderBarCode(): void;
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+}
+declare const _default: {
+    new (props: Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<BarCodeProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof BarCode>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof BarCode, {}> & {
+    ComposedComponent: typeof BarCode;
+};
+export default _default;

package/lib/components/BarCode.js

@@ -0,0 +1,52 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var amisCore = require('amis-core');
+var JsBarcode = require('jsbarcode');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var JsBarcode__default = /*#__PURE__*/_interopDefaultLegacy(JsBarcode);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var BarCode = /** @class */ (function (_super) {
+    tslib.__extends(BarCode, _super);
+    function BarCode(props) {
+        var _this = _super.call(this, props) || this;
+        _this.dom = React__default["default"].createRef();
+        return _this;
+    }
+    BarCode.prototype.componentDidUpdate = function (prevProps) {
+        if (this.props.value !== prevProps.value ||
+            JSON.stringify(this.props.options) !== JSON.stringify(prevProps.options)) {
+            this.renderBarCode();
+        }
+    };
+    BarCode.prototype.renderBarCode = function () {
+        if (this.dom.current) {
+            JsBarcode__default["default"](this.dom.current, this.props.value, this.props.options);
+        }
+    };
+    BarCode.prototype.componentDidMount = function () {
+        this.renderBarCode();
+    };
+    BarCode.prototype.render = function () {
+        return _J$X_("img", { ref: this.dom });
+    };
+    return BarCode;
+}(React__default["default"].Component));
+var BarCode$1 = amisCore.themeable(BarCode);
+
+exports.BarCode = BarCode;
+exports["default"] = BarCode$1;

package/lib/components/Breadcrumb.d.ts

@@ -0,0 +1,115 @@
+/**
+ * @file Breadcrumb 面包屑
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { Trigger } from './TooltipWrapper';
+import { ClassNamesFn, ThemeProps } from 'amis-core';
+import type { TestIdBuilder } from 'amis-core';
+export type ItemPlace = 'start' | 'middle' | 'end';
+export type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
+interface BreadcrumbItemState {
+    isOpened: boolean;
+    tooltipTrigger: Trigger | Array<Trigger>;
+    tooltipRootClose: boolean;
+}
+interface BreadcrumbBaseItem {
+    href: string;
+    icon?: string;
+    label?: string;
+    dropdown?: Array<BreadcrumbBaseItem>;
+}
+interface BreadcrumbItemProps {
+    item: BreadcrumbBaseItem;
+    itemPlace: ItemPlace;
+    labelMaxLength?: number;
+    tooltipContainer?: any;
+    tooltipPosition?: TooltipPositionType;
+    classnames: ClassNamesFn;
+    testIdBuilder?: TestIdBuilder;
+    [propName: string]: any;
+}
+interface BreadcrumbProps extends ThemeProps {
+    tooltipContainer?: any;
+    tooltipPosition?: TooltipPositionType;
+    items: Array<BreadcrumbBaseItem>;
+    testIdBuilder?: TestIdBuilder;
+    [propName: string]: any;
+}
+/**
+ * Breadcrumb 面包屑类
+ */
+export declare class Breadcrumb extends React.Component<BreadcrumbProps> {
+    Item: typeof BreadcrumbItem;
+    static defaultProps: Pick<BreadcrumbProps, 'separator' | 'labelMaxLength' | 'tooltipPosition'>;
+    render(): React.JSX.Element;
+}
+/**
+ * BreadcrumbItem 面包项类
+ */
+export declare class BreadcrumbItem extends React.Component<BreadcrumbItemProps, BreadcrumbItemState> {
+    target: any;
+    state: BreadcrumbItemState;
+    domRef: (ref: any) => void;
+    toogle: (e: React.MouseEvent<any>) => void;
+    close: () => void;
+    /**
+     * 渲染基础面包项
+     * @param showHref 是否显示超链接
+     * @param itemType 基础面包项类型
+     * @param item 面包项
+     * @param label 渲染文本
+     * @returns
+     */
+    renderBreadcrumbBaseItem(showHref: boolean, itemType: 'default' | 'dropdown', item: BreadcrumbBaseItem, label?: string): React.JSX.Element;
+    /**
+     * 渲染基础面包项完整节点
+     * @param item 面包项
+     * @param tooltipPosition 浮窗提示位置
+     * @param itemPlace 面包香所在相对位置
+     * @param itemType 基础面包项类型
+     * @returns
+     */
+    renderBreadcrumbNode(item: BreadcrumbBaseItem, tooltipPosition: TooltipPositionType | undefined, itemPlace: ItemPlace, itemType: 'default' | 'dropdown'): React.JSX.Element;
+    /**
+     * 渲染下拉菜单节点
+     * @param dropdown 面包项下拉菜单
+     * @returns
+     */
+    renderDropdownNode(dropdown: BreadcrumbBaseItem[]): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+declare const _default: {
+    new (props: Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<BreadcrumbProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof Breadcrumb>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof Breadcrumb, {}> & {
+    ComposedComponent: typeof Breadcrumb;
+};
+export default _default;

package/lib/components/Breadcrumb.js

@@ -0,0 +1,170 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var TooltipWrapper = require('./TooltipWrapper.js');
+var amisCore = require('amis-core');
+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 __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+/**
+ * Breadcrumb 面包屑类
+ */
+var Breadcrumb = /** @class */ (function (_super) {
+    tslib.__extends(Breadcrumb, _super);
+    function Breadcrumb() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Breadcrumb.prototype.render = function () {
+        var cx = this.props.classnames;
+        var _a = this.props, className = _a.className, style = _a.style, separatorClassName = _a.separatorClassName, items = _a.items, separator = _a.separator, testIdBuilder = _a.testIdBuilder, restProps = tslib.__rest(_a, ["className", "style", "separatorClassName", "items", "separator", "testIdBuilder"]);
+        var crumbsLength = items === null || items === void 0 ? void 0 : items.length;
+        if (!crumbsLength) {
+            return _J$X_("div", { className: cx('Breadcrumb', className) });
+        }
+        var crumbs = items
+            .map(function (item, index) {
+            var itemTestIdBuilder = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(item.label || index));
+            var itemPlace = 'middle';
+            if (index === 0) {
+                itemPlace = 'start';
+            }
+            if (index === crumbsLength - 1) {
+                itemPlace = 'end';
+            }
+            return (_J$X_(BreadcrumbItem, tslib.__assign({}, restProps, { item: item, itemPlace: itemPlace, key: index, testIdBuilder: itemTestIdBuilder })));
+        })
+            .reduce(function (prev, curr, index) { return [
+            prev,
+            _J$X_("span", { className: cx('Breadcrumb-separator', separatorClassName), key: "separator-".concat(index) }, separator),
+            curr
+        ]; });
+        return (_J$X_("div", { className: cx('Breadcrumb', className), style: style }, crumbs));
+    };
+    Breadcrumb.defaultProps = {
+        separator: '>',
+        labelMaxLength: 16,
+        tooltipPosition: 'top'
+    };
+    return Breadcrumb;
+}(React__default["default"].Component));
+/**
+ * BreadcrumbItem 面包项类
+ */
+var BreadcrumbItem = /** @class */ (function (_super) {
+    tslib.__extends(BreadcrumbItem, _super);
+    function BreadcrumbItem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            tooltipTrigger: ['hover', 'focus'],
+            tooltipRootClose: false,
+            isOpened: false
+        };
+        _this.domRef = function (ref) {
+            _this.target = ref;
+        };
+        _this.toogle = function (e) {
+            e.preventDefault();
+            _this.setState({
+                isOpened: !_this.state.isOpened
+            });
+        };
+        _this.close = function () {
+            _this.setState({
+                isOpened: false
+            });
+        };
+        return _this;
+    }
+    /**
+     * 渲染基础面包项
+     * @param showHref 是否显示超链接
+     * @param itemType 基础面包项类型
+     * @param item 面包项
+     * @param label 渲染文本
+     * @returns
+     */
+    BreadcrumbItem.prototype.renderBreadcrumbBaseItem = function (showHref, itemType, item, label) {
+        var _a = this.props, itemClassName = _a.itemClassName, dropdownItemClassName = _a.dropdownItemClassName, cx = _a.classnames, testIdBuilder = _a.testIdBuilder;
+        var baseItemClassName = itemType === 'default' ? itemClassName : dropdownItemClassName;
+        if (showHref) {
+            return (_J$X_("a", tslib.__assign({ href: item.href, className: cx('Breadcrumb-item-' + itemType, baseItemClassName) }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()),
+                item.icon ? (_J$X_(icons.Icon, { cx: cx, icon: item.icon, className: "Icon", classNameProp: "Breadcrumb-icon" })) : null,
+                _J$X_("span", { className: cx('TplField fr-view') }, label)));
+        }
+        return (_J$X_("span", tslib.__assign({ className: cx('Breadcrumb-item-' + itemType, baseItemClassName) }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()),
+            item.icon ? (_J$X_(icons.Icon, { cx: cx, icon: item.icon, className: "Icon", classNameProp: "Breadcrumb-icon" })) : null,
+            _J$X_("span", { className: cx('TplField fr-view') }, label)));
+    };
+    /**
+     * 渲染基础面包项完整节点
+     * @param item 面包项
+     * @param tooltipPosition 浮窗提示位置
+     * @param itemPlace 面包香所在相对位置
+     * @param itemType 基础面包项类型
+     * @returns
+     */
+    BreadcrumbItem.prototype.renderBreadcrumbNode = function (item, tooltipPosition, itemPlace, itemType) {
+        if (tooltipPosition === void 0) { tooltipPosition = 'top'; }
+        var _a = this.props, labelMaxLength = _a.labelMaxLength, tooltipContainer = _a.tooltipContainer;
+        var _b = this.state, tooltipTrigger = _b.tooltipTrigger, tooltipRootClose = _b.tooltipRootClose;
+        var pureLabel = item.label ? amisCore.removeHTMLTag(item.label) : '';
+        // 限制最大展示长度的最小值
+        var maxLength = labelMaxLength && +labelMaxLength > 1 ? +labelMaxLength : 1;
+        // 面包项相对位置为 middle ，且超过最大展示长度的面包项，进行缩略展示，并使用浮窗提示
+        if (pureLabel.length > maxLength && itemPlace === 'middle') {
+            return (_J$X_(TooltipWrapper["default"], { tooltip: pureLabel, placement: tooltipPosition, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose }, this.renderBreadcrumbBaseItem(true, itemType, item, pureLabel.substring(0, maxLength) + '...')));
+        }
+        var showHref = !item.href || itemPlace === 'end';
+        return this.renderBreadcrumbBaseItem(!showHref, itemType, item, pureLabel);
+    };
+    /**
+     * 渲染下拉菜单节点
+     * @param dropdown 面包项下拉菜单
+     * @returns
+     */
+    BreadcrumbItem.prototype.renderDropdownNode = function (dropdown) {
+        var _this = this;
+        var _a = this.props, dropdownClassName = _a.dropdownClassName, cx = _a.classnames;
+        return (_J$X_(amisCore.RootClose, { disabled: !this.state.isOpened, onRootClose: this.close }, function (ref) {
+            return (_J$X_("ul", { className: cx('Breadcrumb-dropdown', dropdownClassName), onClick: _this.close, ref: ref }, Array.isArray(dropdown) &&
+                dropdown.map(function (menuItem, index) {
+                    return (_J$X_("li", { key: 'dropdown-item' + index }, _this.renderBreadcrumbNode(menuItem, 'right', 'middle', 'dropdown')));
+                })));
+        }));
+    };
+    BreadcrumbItem.prototype.render = function () {
+        var _a = this.props, item = _a.item, itemPlace = _a.itemPlace, tooltipPosition = _a.tooltipPosition, cx = _a.classnames;
+        var dropdown = item.dropdown, restItemProps = tslib.__rest(item, ["dropdown"]);
+        return (_J$X_("span", { className: cx('Breadcrumb-item', {
+                'is-opened': this.state.isOpened
+            }, {
+                'Breadcrumb-item-last': itemPlace === 'end'
+            }), ref: this.domRef },
+            this.renderBreadcrumbNode(tslib.__assign({}, restItemProps), tooltipPosition, itemPlace, 'default'),
+            dropdown ? (_J$X_("span", { onClick: this.toogle, className: cx('Breadcrumb-item-caret') },
+                _J$X_(icons.Icon, { icon: "down", className: "icon" }))) : null,
+            dropdown && this.state.isOpened
+                ? this.renderDropdownNode(dropdown)
+                : null));
+    };
+    return BreadcrumbItem;
+}(React__default["default"].Component));
+var Breadcrumb$1 = amisCore.themeable(Breadcrumb);
+
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports["default"] = Breadcrumb$1;