amis 2.1.1-beta.2 → 2.2.0

package/esm/renderers/Table2/HeadCellSearchDropdown.js

@@ -0,0 +1,204 @@
+/**
+ * amis v2.2.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __awaiter, __generator } from 'tslib';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import { setVariable, createObject } from 'amis-core';
+import { HeadCellDropDown, Icon } from 'amis-ui';
+
+var HeadCellSearchDropDown = /** @class */ (function (_super) {
+    __extends(HeadCellSearchDropDown, _super);
+    function HeadCellSearchDropDown(props) {
+        var _this = _super.call(this, props) || this;
+        _this.formItems = [];
+        _this.handleSubmit = _this.handleSubmit.bind(_this);
+        _this.handleAction = _this.handleAction.bind(_this);
+        return _this;
+    }
+    HeadCellSearchDropDown.prototype.buildSchema = function () {
+        var _a;
+        var _b = this.props, searchable = _b.searchable, sortable = _b.sortable, name = _b.name, label = _b.label, __ = _b.translate;
+        var schema;
+        if (searchable === true) {
+            schema = {
+                title: '',
+                controls: [
+                    {
+                        type: 'text',
+                        name: name,
+                        placeholder: label,
+                        clearable: true
+                    }
+                ]
+            };
+        }
+        else if (searchable) {
+            if (searchable.controls || searchable.tabs || searchable.fieldSet) {
+                schema = __assign(__assign({ title: '' }, searchable), { controls: Array.isArray(searchable.controls)
+                        ? searchable.controls.concat()
+                        : undefined });
+            }
+            else {
+                schema = {
+                    title: '',
+                    className: searchable.formClassName,
+                    controls: [
+                        __assign({ type: searchable.type || 'text', name: searchable.name || name, placeholder: label }, searchable)
+                    ]
+                };
+            }
+        }
+        if (schema && schema.controls && sortable) {
+            schema.controls.unshift({
+                type: 'hidden',
+                name: 'orderBy',
+                value: name
+            }, {
+                type: 'button-group',
+                name: 'order',
+                label: __('sort'),
+                options: [
+                    {
+                        label: __('asc'),
+                        value: 'asc'
+                    },
+                    {
+                        label: __('desc'),
+                        value: 'desc'
+                    }
+                ]
+            });
+        }
+        if (schema) {
+            var formItems_1 = [];
+            (_a = schema.controls) === null || _a === void 0 ? void 0 : _a.forEach(function (item) {
+                return item.name &&
+                    item.name !== 'orderBy' &&
+                    item.name !== 'order' &&
+                    formItems_1.push(item.name);
+            });
+            this.formItems = formItems_1;
+            schema = __assign(__assign({}, schema), { type: 'form', wrapperComponent: 'div', actions: [
+                    {
+                        type: 'button',
+                        label: __('reset'),
+                        actionType: 'clear-and-submit'
+                    },
+                    {
+                        type: 'button',
+                        label: __('cancel'),
+                        actionType: 'cancel'
+                    },
+                    {
+                        label: __('search'),
+                        type: 'submit',
+                        primary: true
+                    }
+                ] });
+        }
+        return schema || 'error';
+    };
+    HeadCellSearchDropDown.prototype.handleAction = function (e, action, ctx, confirm) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onAction, data, dispatchEvent, name, values, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, onAction = _a.onAction, data = _a.data, dispatchEvent = _a.dispatchEvent, name = _a.name;
+                        if (action.actionType === 'cancel' || action.actionType === 'close') {
+                            confirm();
+                            return [2 /*return*/];
+                        }
+                        if (action.actionType === 'reset') {
+                            confirm();
+                            this.handleReset();
+                            return [2 /*return*/];
+                        }
+                        values = __assign({}, data);
+                        this.formItems.forEach(function (key) { return setVariable(values, key, undefined); });
+                        return [4 /*yield*/, dispatchEvent('columnSearch', createObject(data, {
+                                searchName: name,
+                                searchValue: values
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onAction && onAction(e, action, ctx);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    HeadCellSearchDropDown.prototype.handleReset = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onSearch, data, name, store, values;
+            return __generator(this, function (_b) {
+                _a = this.props, onSearch = _a.onSearch, data = _a.data, name = _a.name, store = _a.store;
+                values = __assign({}, data);
+                this.formItems.forEach(function (key) { return setVariable(values, key, undefined); });
+                if (values.orderBy === name) {
+                    values.orderBy = '';
+                    values.order = 'asc';
+                }
+                store.updateQuery(values);
+                onSearch && onSearch(values);
+                return [2 /*return*/];
+            });
+        });
+    };
+    HeadCellSearchDropDown.prototype.handleSubmit = function (values, confirm) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onSearch, name, store, dispatchEvent, data, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, onSearch = _a.onSearch, name = _a.name, store = _a.store, dispatchEvent = _a.dispatchEvent, data = _a.data;
+                        if (values.order) {
+                            values = __assign(__assign({}, values), { orderBy: name });
+                        }
+                        return [4 /*yield*/, dispatchEvent('columnSearch', createObject(data, {
+                                searchName: name,
+                                searchValue: values
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        store.updateQuery(values);
+                        onSearch && onSearch(values);
+                        confirm();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    HeadCellSearchDropDown.prototype.isActive = function () {
+        var _a = this.props, data = _a.data, name = _a.name, orderBy = _a.orderBy;
+        return ((orderBy && orderBy === name) || this.formItems.some(function (key) { return data === null || data === void 0 ? void 0 : data[key]; }));
+    };
+    HeadCellSearchDropDown.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, render = _a.render, name = _a.name, data = _a.data, searchable = _a.searchable, store = _a.store, orderBy = _a.orderBy, popOverContainer = _a.popOverContainer, ns = _a.classPrefix, cx = _a.classnames;
+        var formSchema = this.buildSchema();
+        var isActive = this.isActive();
+        return (React.createElement(HeadCellDropDown, { className: "".concat(ns, "TableCell-searchBtn"), layerClassName: cx("".concat(ns, "TableCell-searchPopOver"), searchable.className), active: isActive, filterIcon: React.createElement(Icon, { icon: "search", className: "icon" }), popOverContainer: popOverContainer ? popOverContainer : function () { return findDOMNode(_this); }, filterDropdown: function (_a) {
+                _a.setSelectedKeys; _a.selectedKeys; var confirm = _a.confirm; _a.clearFilters;
+                return render('quick-search-form', formSchema, {
+                    data: __assign(__assign({}, data), { orderBy: orderBy, order: orderBy && orderBy === name ? store.order : '' }),
+                    onSubmit: function (values) { return _this.handleSubmit(values, confirm); },
+                    onAction: function (e, action, ctx) {
+                        _this.handleAction(e, action, ctx, confirm);
+                    }
+                });
+            } }));
+    };
+    return HeadCellSearchDropDown;
+}(React.Component));
+
+export { HeadCellSearchDropDown };

package/esm/renderers/Table2/TableCell.js

@@ -0,0 +1,30 @@
+/**
+ * amis v2.2.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import { Renderer } from 'amis-core';
+import '../Table/index.js';
+import { HocQuickEdit } from '../QuickEdit.js';
+import { HocCopyable } from '../Copyable.js';
+import { HocPopOver } from '../PopOver.js';
+import { TableCell } from '../Table/TableCell.js';
+
+/** @class */ ((function (_super) {
+    __extends(CellFieldRenderer, _super);
+    function CellFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CellFieldRenderer.defaultProps = __assign(__assign({}, TableCell.defaultProps), { wrapperComponent: 'div' });
+    CellFieldRenderer = __decorate([
+        Renderer({
+            type: 'cell-field',
+            name: 'cell-field'
+        }),
+        HocPopOver(),
+        HocCopyable(),
+        HocQuickEdit()
+    ], CellFieldRenderer);
+    return CellFieldRenderer;
+})(TableCell));

package/{lib/renderers/Table-v2 → esm/renderers/Table2}/index.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-import { IScopedContext } from 'amis-core';
-import { RendererProps } from 'amis-core';
-import { ActionObject } from 'amis-core';
-import { BaseSchema, SchemaObject, SchemaTokenizeableString } from '../../Schema';
+import { IScopedContext, RendererProps, ActionObject, ITableStore2, IRow2, ClassNamesFn } from 'amis-core';
 import { BadgeObject } from 'amis-ui';
-import { ITableStoreV2, IRowV2 } from 'amis-core';
+import type { SortProps, ColumnProps, OnRowProps, SummaryProps } from 'amis-ui/lib/components/table';
+import { BaseSchema, SchemaObject, SchemaTokenizeableString, SchemaApi, SchemaMessage } from '../../Schema';
+import { ActionSchema } from '../Action';
 import './TableCell';
 import './ColumnToggler';
-import type { SortProps } from 'amis-ui/lib/components/table';
 import { Action } from '../../types';
 /**
- * Table 表格v2渲染器。
- * 文档：https://baidu.gitee.io/amis/docs/components/table-v2
+ * Table 表格2渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/table2
  */
 export interface CellSpan {
     colIndex: number;
@@ -27,7 +25,7 @@ export interface ColumnSchema {
     /**
      * 指定列唯一标识
      */
-    key: string;
+    name: string;
     /**
      * 指定列标题
      */
@@ -159,11 +157,11 @@ export interface ExpandableSchema {
      */
     expandedRowKeysExpr: string;
 }
-export interface TableSchemaV2 extends BaseSchema {
+export interface TableSchema2 extends BaseSchema {
     /**
      * 指定为表格类型
      */
-    type: 'table-v2';
+    type: 'table2';
     /**
      * 表格标题
      */
@@ -175,7 +173,7 @@ export interface TableSchemaV2 extends BaseSchema {
     /**
      * 表格可自定义列
      */
-    columnsTogglable?: boolean | string | SchemaObject;
+    columnsTogglable?: 'auto' | boolean | SchemaObject;
     /**
      * 表格列配置
      */
@@ -197,9 +195,13 @@ export interface TableSchemaV2 extends BaseSchema {
      */
     loading?: boolean | string | SchemaObject;
     /**
-     * 行角标
+     * 行角标内容
      */
     itemBadge?: BadgeObject;
+    /**
+     * 是否展示行角标
+     */
+    showBadge?: boolean;
     /**
      * 指定挂载dom
      */
@@ -228,41 +230,84 @@ export interface TableSchemaV2 extends BaseSchema {
      * 是否展示表头
      */
     showHeader?: boolean;
-    /**
-     * 自定义表格样式
-     */
-    className?: string;
     /**
      * 指定表尾
      */
     footer?: string | SchemaObject | Array<SchemaObject>;
+    /**
+     * 快速编辑后用来批量保存的 API
+     */
+    quickSaveApi?: SchemaApi;
+    /**
+     * 快速编辑配置成及时保存时使用的 API
+     */
+    quickSaveItemApi?: SchemaApi;
+    /**
+     * 快速编辑关键字段
+     */
+    primaryField?: string;
+    /**
+     * 接口报错信息配置
+     */
+    messages?: SchemaMessage;
+    /**
+     * 重新加载的组件名称
+     */
+    reload?: string;
+    /**
+     * 操作列配置
+     */
+    actions?: Array<ActionSchema>;
 }
-export declare type TableV2RendererEvent = 'selected' | 'columnSort' | 'columnFilter' | 'columnSearch' | 'columnToggled' | 'dragOver';
-export declare type TableV2RendererAction = 'selectAll' | 'clearAll' | 'select';
-export interface TableV2Props extends RendererProps {
+export declare type Table2RendererEvent = 'selected' | 'columnSort' | 'columnFilter' | 'columnSearch' | 'columnToggled' | 'dragOver';
+export declare type Table2RendererAction = 'selectAll' | 'clearAll' | 'select';
+export interface Table2Props extends RendererProps {
     title?: string;
-    source?: string;
-    store: ITableStoreV2;
-    togglable: boolean;
+    columns: Array<ColumnSchema | ColumnProps>;
+    onSelect?: Function;
+    reUseRow?: boolean;
+    getEntryId?: (entry: any, index: number) => string;
+    store: ITableStore2;
+    rowSelection?: RowSelectionSchema;
+    expandable?: ExpandableSchema;
+    classnames: ClassNamesFn;
+    onSave?: Function;
+    onSaveOrder?: Function;
+    onPristineChange?: Function;
+    onAction?: Function;
+    onSort?: Function;
+    onFilter?: Function;
+    onRow?: OnRowProps;
+    placeholder?: string | SchemaObject;
+    itemActions?: Array<ActionObject>;
+    headSummary?: Array<SummaryProps | Array<SummaryProps>>;
+    footSummary?: Array<SummaryProps | Array<SummaryProps>>;
+    headingClassName?: string;
 }
-export default class TableV2 extends React.Component<TableV2Props, object> {
+export default class Table2 extends React.Component<Table2Props, object> {
     static contextType: React.Context<IScopedContext>;
     renderedToolbars: Array<string>;
     control: any;
-    constructor(props: TableV2Props, context: IScopedContext);
+    constructor(props: Table2Props, context: IScopedContext);
     componentWillUnmount(): void;
     controlRef(control: any): void;
     syncSelected(): void;
-    static syncRows(store: ITableStoreV2, props: TableV2Props, prevProps?: TableV2Props): boolean;
-    componentDidUpdate(prevProps: TableV2Props): void;
+    static syncRows(store: ITableStore2, props: Table2Props, prevProps?: Table2Props): boolean;
+    componentDidUpdate(prevProps: Table2Props): void;
     getPopOverContainer(): Element | Text | null;
     renderCellSchema(schema: any, props: any): any;
     renderSchema(key: string, schema: any, props?: any): any;
     buildColumns(columns: Array<any>): any[];
-    buildSummary(key: string, summary: Array<any>): any[] | null;
+    buildSummary(key: string, summary?: Array<any>): any[] | null;
     reloadTarget(target: string, data: any): void;
-    handleSave(rows: Array<object> | object, diff: Array<object> | object, indexes: Array<string>, unModifiedItems?: Array<any>, rowsOrigin?: Array<object> | object, resetOnFailed?: boolean): void;
-    handleQuickChange(item: IRowV2, values: object, saveImmediately?: boolean | any, savePristine?: boolean, resetOnFailed?: boolean): void;
+    handleSave(rows: Array<object> | object, diff: Array<object> | object, indexes: Array<string>, unModifiedItems?: Array<any>, rowsOrigin?: Array<object> | object, options?: {
+        resetOnFailed?: boolean;
+        reload?: string;
+    }): void;
+    handleQuickChange(item: IRow2, values: object, saveImmediately?: boolean | any, savePristine?: boolean, options?: {
+        resetOnFailed?: boolean;
+        reload?: string;
+    }): void;
     handleAction(e: React.UIEvent<any>, action: Action, ctx: object): void;
     renderActions(region: string): JSX.Element | null;
     handleSelected(selectedRows: Array<any>, selectedRowKeys: Array<string | number>, unSelectedRows: Array<string | number>): Promise<any>;
@@ -280,6 +325,6 @@ export default class TableV2 extends React.Component<TableV2Props, object> {
     renderHeading(): JSX.Element | null;
     render(): JSX.Element;
 }
-export declare class TableRenderer extends TableV2 {
+export declare class TableRenderer extends Table2 {
     receive(values: any, subPath?: string): void;
 }