amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/schema-editor/index.js

@@ -0,0 +1,122 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { autobind, themeable, localeable, uncontrollable } from 'amis-core';
+import { SchemaEditorItem } from './Item.js';
+import { schemaEditorItemPlaceholder } from './Common.js';
+import './Array.js';
+import './Object.js';
+
+/**
+ * 用来定义数据结构的编辑器
+ */
+var SchemaEditor = /** @class */ (function (_super) {
+    __extends(SchemaEditor, _super);
+    function SchemaEditor(props) {
+        var _this = _super.call(this, props) || this;
+        var __ = props.translate;
+        _this.defaultTypes = [
+            {
+                label: __('SchemaType.string'),
+                value: 'string'
+            },
+            {
+                label: __('SchemaType.number'),
+                value: 'number'
+            },
+            {
+                label: __('SchemaType.integer'),
+                value: 'integer'
+            },
+            {
+                label: __('SchemaType.boolean'),
+                value: 'boolean'
+            },
+            {
+                label: __('SchemaType.null'),
+                value: 'null'
+            },
+            {
+                label: __('SchemaType.object'),
+                value: 'object'
+            },
+            {
+                label: __('SchemaType.array'),
+                value: 'array'
+            }
+        ];
+        return _this;
+    }
+    SchemaEditor.prototype.handleTypeChange = function (type, value, origin) {
+        var definitions = this.props.definitions;
+        if (type === 'array') {
+            value.items = {
+                type: 'string'
+            };
+        }
+        if (definitions === null || definitions === void 0 ? void 0 : definitions[type]) {
+            value = __assign(__assign(__assign({}, value), definitions[type]), { $ref: type });
+        }
+        return value;
+    };
+    SchemaEditor.prototype.render = function () {
+        var _a = this.props, defaultType = _a.defaultType, cx = _a.classnames, onChange = _a.onChange, renderExtraProps = _a.renderExtraProps, renderModalProps = _a.renderModalProps, translate = _a.translate, locale = _a.locale, classPrefix = _a.classPrefix, rootTypeMutable = _a.rootTypeMutable, showRootInfo = _a.showRootInfo, disabled = _a.disabled, definitions = _a.definitions, enableAdvancedSetting = _a.enableAdvancedSetting, popOverContainer = _a.popOverContainer, placeholder = _a.placeholder, mobileUI = _a.mobileUI, mini = _a.mini, className = _a.className, addButtonText = _a.addButtonText;
+        var value = this.props.value || {
+            type: defaultType || 'object'
+        };
+        var disabledTypes = Array.isArray(this.props.disabledTypes)
+            ? this.props.disabledTypes
+            : [];
+        var types = this.defaultTypes.concat();
+        if (definitions) {
+            var keys = Object.keys(definitions);
+            keys.forEach(function (key) {
+                var definition = definitions[key];
+                if ((definition === null || definition === void 0 ? void 0 : definition.type) &&
+                    definition.title &&
+                    [
+                        'string',
+                        'number',
+                        'integer',
+                        'object',
+                        'array',
+                        'boolean',
+                        'null'
+                    ].includes(definition.type)) {
+                    types.push({
+                        value: key,
+                        label: translate(definition.title)
+                    });
+                }
+            });
+        }
+        if (disabledTypes.length) {
+            types = types.filter(function (item) { return !~disabledTypes.indexOf(item.value); });
+        }
+        return (React__default.createElement("div", { className: cx('SchemaEditor', className) },
+            React__default.createElement(SchemaEditorItem, { types: types, typeMutable: rootTypeMutable, showInfo: showRootInfo, value: value, onChange: onChange, renderExtraProps: renderExtraProps, renderModalProps: renderModalProps, locale: locale, translate: translate, classnames: cx, classPrefix: classPrefix, disabled: disabled, onTypeChange: this.handleTypeChange, enableAdvancedSetting: enableAdvancedSetting, popOverContainer: popOverContainer, placeholder: placeholder, mobileUI: mobileUI, mini: mini, addButtonText: addButtonText, expandMembers: true })));
+    };
+    SchemaEditor.defaultProps = {
+        defaultType: 'object',
+        rootTypeMutable: false,
+        showRootInfo: false,
+        disabledTypes: ['null'],
+        placeholder: schemaEditorItemPlaceholder
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], SchemaEditor.prototype, "handleTypeChange", null);
+    return SchemaEditor;
+}(React__default.Component));
+var JSONSchemaEditor = themeable(localeable(uncontrollable(SchemaEditor, {
+    value: 'onChange'
+})));
+
+export { SchemaEditor, JSONSchemaEditor as default };

package/esm/components/table/Cell.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file table/BodyCell
+ * @author fex
+ */
+import React from 'react';
+import { ThemeProps, ClassNamesFn } from 'amis-core';
+import { ColumnProps } from './index';
+import type { TestIdBuilder } from 'amis-core';
+export interface Props extends ThemeProps {
+    fixed?: string | boolean;
+    selfSticky?: boolean;
+    rowSpan?: number | any;
+    colSpan?: number | any;
+    key?: string | number;
+    className?: string;
+    children?: any;
+    tagName?: string;
+    style?: Object;
+    column?: ColumnProps;
+    wrapperComponent: any;
+    depth?: number;
+    col?: string;
+    index?: number;
+    classnames: ClassNamesFn;
+    testIdBuilder?: TestIdBuilder;
+}
+export default class BodyCell extends React.PureComponent<Props> {
+    static defaultProps: {
+        fixed: string;
+        selfSticky: boolean;
+        wrapperComponent: string;
+        rowSpan: null;
+        colSpan: null;
+    };
+    render(): React.JSX.Element;
+}

package/esm/components/table/Cell.js

@@ -0,0 +1,43 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import React__default from 'react';
+
+/**
+ * @file table/BodyCell
+ * @author fex
+ */
+var zIndex = 1;
+var BodyCell = /** @class */ (function (_super) {
+    __extends(BodyCell, _super);
+    function BodyCell() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BodyCell.prototype.render = function () {
+        var _a;
+        var _b = this.props, fixed = _b.fixed, selfSticky = _b.selfSticky, rowSpan = _b.rowSpan, colSpan = _b.colSpan, children = _b.children, className = _b.className, column = _b.column, style = _b.style, depth = _b.depth, col = _b.col, Component = _b.wrapperComponent, cx = _b.classnames, testIdBuilder = _b.testIdBuilder;
+        var _style = __assign({}, style);
+        if (fixed || selfSticky) {
+            _style = __assign({ position: 'sticky', zIndex: zIndex }, _style);
+        }
+        return (React__default.createElement(Component, __assign({ rowSpan: rowSpan && rowSpan > 1 ? rowSpan : null, colSpan: colSpan && colSpan > 1 ? colSpan : null, className: cx('Table-cell', className, (_a = {},
+                _a[cx("Table-cell-fix-".concat(fixed))] = fixed,
+                _a["Table-cell-self-sticky"] = selfSticky,
+                _a["text-".concat(column === null || column === void 0 ? void 0 : column.align)] = column === null || column === void 0 ? void 0 : column.align,
+                _a["align-".concat(column === null || column === void 0 ? void 0 : column.vAlign)] = column === null || column === void 0 ? void 0 : column.vAlign,
+                _a)), style: _style, "data-depth": depth || null, "data-col": col }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()), children));
+    };
+    BodyCell.defaultProps = {
+        fixed: '',
+        selfSticky: false,
+        wrapperComponent: 'td',
+        rowSpan: null,
+        colSpan: null
+    };
+    return BodyCell;
+}(React__default.PureComponent));
+
+export { BodyCell as default };

package/esm/components/table/ColGroup.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ColumnProps } from './index';
+export default function ColGroup({ columns, colWidths, isFixed, syncTableWidth, initTableWidth, selectable, expandable, draggable, rowSelectionColumnWidth, expandableColumnWidth, isRightExpandable, isLeftExpandable, showReal }: {
+    columns: Array<ColumnProps>;
+    colWidths: {
+        [key: string]: {
+            width: number;
+            realWidth: number;
+            minWidth: number;
+            originWidth: number;
+        };
+    };
+    isFixed: boolean;
+    syncTableWidth: Function;
+    initTableWidth: Function;
+    selectable: boolean;
+    expandable: boolean;
+    draggable: boolean;
+    rowSelectionColumnWidth: number;
+    expandableColumnWidth: number;
+    isRightExpandable?: boolean;
+    isLeftExpandable?: boolean;
+    showReal?: boolean;
+}): React.JSX.Element;

package/esm/components/table/ColGroup.js

@@ -0,0 +1,58 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import React__default from 'react';
+import { DefaultCellWidth } from './index.js';
+import { getBuildColumns } from './util.js';
+
+function ColGroup(_a) {
+    var columns = _a.columns, colWidths = _a.colWidths, isFixed = _a.isFixed, syncTableWidth = _a.syncTableWidth, initTableWidth = _a.initTableWidth, selectable = _a.selectable, expandable = _a.expandable, draggable = _a.draggable, rowSelectionColumnWidth = _a.rowSelectionColumnWidth, expandableColumnWidth = _a.expandableColumnWidth, isRightExpandable = _a.isRightExpandable, isLeftExpandable = _a.isLeftExpandable, showReal = _a.showReal;
+    var tdColumns = getBuildColumns(columns).tdColumns;
+    var domRef = React__default.createRef();
+    React__default.useEffect(function () {
+        if (domRef.current) {
+            initTableWidth();
+            syncTableWidth();
+        }
+    }, []);
+    React__default.useEffect(function () {
+        var table = domRef.current.parentElement;
+        var observer = new MutationObserver(function () {
+            syncTableWidth();
+        });
+        observer.observe(table, {
+            attributes: true,
+            childList: true,
+            subtree: true
+        });
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    return (React__default.createElement("colgroup", { ref: domRef },
+        draggable ? React__default.createElement("col", { style: { width: DefaultCellWidth + 'px' } }) : null,
+        selectable ? (React__default.createElement("col", { style: { width: rowSelectionColumnWidth + 'px' } })) : null,
+        expandable && isLeftExpandable ? (React__default.createElement("col", { style: { width: expandableColumnWidth + 'px' } })) : null,
+        tdColumns.map(function (col, index) {
+            var _a;
+            var style = {};
+            if ((_a = colWidths[col === null || col === void 0 ? void 0 : col.name]) === null || _a === void 0 ? void 0 : _a.width) {
+                style.width = colWidths[col === null || col === void 0 ? void 0 : col.name].width;
+            }
+            else if (col.width) {
+                style.width = col.width;
+            }
+            else if (showReal) {
+                style.width = col.realWidth;
+            }
+            if (!isFixed && style.width) {
+                style.minWidth = style.width;
+            }
+            return React__default.createElement("col", { style: style, key: index });
+        }),
+        expandable && isRightExpandable ? (React__default.createElement("col", { style: { width: expandableColumnWidth + 'px' } })) : null));
+}
+
+export { ColGroup as default };

package/esm/components/table/Head.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @file table/Head
+ * @author fex
+ */
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import { ColumnProps, ThProps, TdProps, RowSelectionOptionProps } from './index';
+import type { TestIdBuilder } from 'amis-core';
+export interface Props extends ThemeProps {
+    draggable: boolean;
+    selectable: boolean;
+    rowSelectionFixed: boolean;
+    rowSelectionType?: string;
+    selections?: Array<RowSelectionOptionProps>;
+    columns: Array<ColumnProps>;
+    rowSelectionKeyField: string;
+    maxSelectedLength?: number;
+    isRightExpandable?: boolean;
+    isLeftExpandable?: boolean;
+    selectedRowKeys: Array<string | number>;
+    dataSource: Array<any>;
+    resizable?: boolean;
+    expandable: boolean;
+    expandableFixed?: string | boolean;
+    childrenColumnName: string;
+    orderBy?: string;
+    popOverContainer?: () => HTMLElement;
+    isExpandable: boolean;
+    onSort: Function;
+    onSelectAll: Function;
+    onFilter?: Function;
+    onResizeMouseDown: Function;
+    testIdBuilder?: TestIdBuilder;
+    selfSticky?: boolean;
+}
+export default class Head extends React.PureComponent<Props> {
+    domRef: React.RefObject<HTMLTableSectionElement>;
+    thColumns: Array<Array<ThProps>>;
+    tdColumns: Array<TdProps>;
+    prependColumns(columns: Array<any>): void;
+    updateFixedRow(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.JSX.Element;
+}

package/esm/components/table/Head.js

@@ -0,0 +1,150 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __spreadArray, __read, __awaiter, __generator } from 'tslib';
+import React__default from 'react';
+import { updateStickyRow, hasFixedColumn, updateFixedRow, getBuildColumns, getAllSelectableRows } from './util.js';
+import Checkbox from '../Checkbox.js';
+import BodyCell from './Cell.js';
+import HeadCellSort from './HeadCellSort.js';
+import HeadCellFilter from './HeadCellFilter.js';
+import HeadCellSelect from './HeadCellSelect.js';
+
+/**
+ * @file table/Head
+ * @author fex
+ */
+var Head = /** @class */ (function (_super) {
+    __extends(Head, _super);
+    function Head() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.domRef = React__default.createRef();
+        return _this;
+    }
+    Head.prototype.prependColumns = function (columns) {
+        var _a = this.props, rowSelectionFixed = _a.rowSelectionFixed, expandableFixed = _a.expandableFixed, draggable = _a.draggable, selectable = _a.selectable, expandable = _a.expandable;
+        if (expandable) {
+            columns.unshift({});
+        }
+        if (draggable || selectable) {
+            columns.unshift({});
+        }
+        else {
+            if (expandableFixed) {
+                columns.unshift({ fixed: expandableFixed });
+            }
+            if (rowSelectionFixed) {
+                columns.unshift({ fixed: true });
+            }
+        }
+    };
+    Head.prototype.updateFixedRow = function () {
+        var _a = this.props, cx = _a.classnames, selfSticky = _a.selfSticky;
+        var thead = this.domRef.current;
+        var children = thead === null || thead === void 0 ? void 0 : thead.children;
+        for (var i = 0; i < ((children === null || children === void 0 ? void 0 : children.length) || 0); i++) {
+            var cols = __spreadArray([], __read(this.thColumns[i]), false);
+            if (i === 0) {
+                this.prependColumns(cols);
+            }
+            if (selfSticky) {
+                updateStickyRow(children, i);
+            }
+            if (hasFixedColumn(cols)) {
+                updateFixedRow(children === null || children === void 0 ? void 0 : children[i], cols, cx);
+            }
+        }
+    };
+    Head.prototype.componentDidMount = function () {
+        this.updateFixedRow();
+    };
+    Head.prototype.componentDidUpdate = function () {
+        this.updateFixedRow();
+    };
+    Head.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, dataSource = _a.dataSource, cx = _a.classnames, classPrefix = _a.classPrefix, expandable = _a.expandable, draggable = _a.draggable, resizable = _a.resizable, selectable = _a.selectable, rowSelectionKeyField = _a.rowSelectionKeyField, isExpandable = _a.isExpandable, childrenColumnName = _a.childrenColumnName, selectedRowKeys = _a.selectedRowKeys, maxSelectedLength = _a.maxSelectedLength, rowSelectionFixed = _a.rowSelectionFixed, rowSelectionType = _a.rowSelectionType, popOverContainer = _a.popOverContainer, isRightExpandable = _a.isRightExpandable, isLeftExpandable = _a.isLeftExpandable, orderBy = _a.orderBy, columns = _a.columns, selections = _a.selections, expandableFixed = _a.expandableFixed, onSort = _a.onSort, onSelectAll = _a.onSelectAll, onFilter = _a.onFilter, onResizeMouseDown = _a.onResizeMouseDown, testIdBuilder = _a.testIdBuilder, className = _a.className, selfSticky = _a.selfSticky;
+        var _b = getBuildColumns(columns), thColumns = _b.thColumns, tdColumns = _b.tdColumns;
+        this.thColumns = thColumns;
+        this.tdColumns = tdColumns;
+        // 获取一行最多th个数
+        var maxCount = 0;
+        this.thColumns.forEach(function (cols) {
+            if (cols.length > maxCount) {
+                maxCount = cols.length;
+            }
+        });
+        var expandableCell = !draggable && isExpandable ? (React__default.createElement(BodyCell, { key: "expandable", wrapperComponent: "th", rowSpan: columns.length, fixed: expandableFixed ? 'left' : '', className: cx('Table-row-expand-icon-cell'), classnames: cx, classPrefix: classPrefix })) : null;
+        var _c = getAllSelectableRows(dataSource, rowSelectionKeyField, childrenColumnName, expandable, selectedRowKeys, maxSelectedLength), rows = _c.rows, rowKeys = _c.rowKeys, restSelectedKeys = _c.restSelectedKeys;
+        // 从renderers的table传来的数据 可能不在当前页 因此需要过滤一下
+        var selectedKeys = selectedRowKeys.filter(function (key) {
+            return rowKeys.includes(key);
+        });
+        var thIndex = 0;
+        return (React__default.createElement("thead", { ref: this.domRef, className: cx('Table-thead', className) }, this.thColumns.map(function (data, index) {
+            return (React__default.createElement("tr", { key: 'th-cell-' + index },
+                draggable && index === 0 ? (React__default.createElement(BodyCell, { key: "drag-".concat(index), wrapperComponent: "th", rowSpan: _this.thColumns.length, className: cx('Table-dragCell'), selfSticky: selfSticky, col: "drag", classnames: cx, classPrefix: classPrefix, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("drag-".concat(index)) })) : null,
+                !draggable && selectable && index === 0 ? (React__default.createElement(BodyCell, { key: "select-".concat(index), wrapperComponent: "th", rowSpan: _this.thColumns.length, fixed: rowSelectionFixed ? 'left' : '', className: cx('Table-checkCell'), selfSticky: selfSticky, col: "select", classnames: cx, classPrefix: classPrefix, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("select-".concat(index)) }, rowSelectionType !== 'radio'
+                    ? [
+                        React__default.createElement(Checkbox, { key: "checkAll", partial: selectedKeys.length > 0 &&
+                                selectedKeys.length < rowKeys.length, checked: selectedKeys.length > 0, onChange: function (value) { return __awaiter(_this, void 0, void 0, function () {
+                                var selectedRows, selectedRowKeys;
+                                return __generator(this, function (_a) {
+                                    selectedRows = value ? rows : [];
+                                    selectedRowKeys = value ? rowKeys : [];
+                                    onSelectAll &&
+                                        onSelectAll(value, selectedRowKeys, selectedRows, restSelectedKeys);
+                                    return [2 /*return*/];
+                                });
+                            }); } }),
+                        selections && selections.length > 0 ? (React__default.createElement(HeadCellSelect, { key: "checkSelection", keys: rowKeys, selections: selections, popOverContainer: popOverContainer })) : null
+                    ]
+                    : null)) : null,
+                isLeftExpandable && index === 0 ? expandableCell : null,
+                data.map(function (item, colIndex) {
+                    var _a, _b;
+                    thIndex++;
+                    var sort = null;
+                    if (item.sorter) {
+                        sort = (React__default.createElement(HeadCellSort, { column: item, active: !!orderBy && orderBy === (item === null || item === void 0 ? void 0 : item.name), onSort: function (payload) {
+                                onSort && onSort(payload, item);
+                            }, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("sort-".concat(colIndex)) }));
+                    }
+                    var filter = null;
+                    if (item.filterDropdown) {
+                        filter = item.filterDropdown;
+                    }
+                    else if (item.filters && item.filters.length > 0) {
+                        filter = (React__default.createElement(HeadCellFilter, { column: item, popOverContainer: popOverContainer, onFilter: onFilter, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("filter-".concat(colIndex)) }));
+                    }
+                    // th的最后一行才可调整列宽
+                    // 分组情况下 最后一行才和列配置个数对应
+                    // 就可以根据index找到col 不依赖name
+                    var noChildren = !((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+                    var cIndex = -1;
+                    if (noChildren) {
+                        // 根据name去tdColumns匹配出index
+                        // 没设置name的 那一定不是要绑定数据的列 一般都是分组的上层 也不会出现调整列宽
+                        cIndex = _this.tdColumns.findIndex(function (c) { return c.name === item.name; });
+                    }
+                    var children = !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) ? (React__default.createElement(React__default.Fragment, null,
+                        sort,
+                        filter,
+                        resizable ? (React__default.createElement("i", { className: cx('Table-thead-resizable'), onMouseDown: function (e) {
+                                onResizeMouseDown === null || onResizeMouseDown === void 0 ? void 0 : onResizeMouseDown(e, cIndex);
+                            } })) : null)) : null;
+                    return (React__default.createElement(BodyCell, { key: "cell-".concat(colIndex), wrapperComponent: "th", rowSpan: item.rowSpan, colSpan: item.colSpan, classnames: cx, classPrefix: classPrefix, selfSticky: selfSticky, fixed: item.fixed === true ? 'left' : item.fixed, className: cx({
+                            'Table-cell-last': thIndex === maxCount
+                        }), depth: item.depth, col: String(colIndex), testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("cell-".concat(colIndex)) }, typeof item.title === 'function'
+                        ? item.title(children)
+                        : item.title));
+                }),
+                isRightExpandable && index === 0 ? expandableCell : null));
+        })));
+    };
+    return Head;
+}(React__default.PureComponent));
+
+export { Head as default };