@next-bricks/advanced 0.0.3

package/dist-types/table/index.d.ts

@@ -0,0 +1,500 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import { ColumnProps, TablePaginationConfig, TableProps } from "antd/es/table";
+import { BrickEventsMap, UseSingleBrickConf } from "@next-core/types";
+import { TableRowSelection, RowSelectionType } from "antd/lib/table/interface.js";
+import type { DataIndex } from "rc-table/lib/interface.js";
+import type { SizeType } from "antd/lib/config-provider/SizeContext.js";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+import "@next-core/theme";
+export interface RowDisabledProps {
+    field: string;
+    value: any;
+    operator: "$eq" | "$ne" | "$lt" | "$lte" | "$gt" | "$gte" | "$isEqual" | "$notEqual" | "$in" | "$nin" | "$exists";
+}
+export interface CellStatusProps {
+    dataIndex?: string;
+    mapping: Array<{
+        leftBorderColor: string;
+        value: any;
+    }>;
+}
+export interface CustomColumnComponent {
+    /** 构件名称 */
+    brick: string | any;
+    /** 字段值、列表项和 index 对应所用构件的属性的 key */
+    fields?: {
+        value?: string;
+        item?: string;
+        index?: string;
+    };
+    /** 构件属性 */
+    properties?: Record<string, any>;
+    /** 事件 */
+    events?: BrickEventsMap;
+}
+export interface CustomColumn extends ColumnProps<Record<string, any>> {
+    /**
+     * 支持为某列自定义展示构件
+     */
+    useBrick?: UseSingleBrickConf;
+    /**
+     * 字段的值展示时的后缀
+     */
+    valueSuffix?: string;
+    /**
+     * 支持为某列的表头自定义展示构件，可通过 DATA.title 获取标题文本
+     */
+    headerBrick?: {
+        useBrick: UseSingleBrickConf;
+    };
+    /**
+     * 在渲染自定义构件的场景下额外设置单元格的状态样式， `dataIndex` 表示取哪一列的字段值作为判断数据，不填的话默认取当前列的字段，`mapping` 表示判断的条件，条件被成功匹配时用当前的样式。目前仅支持单元格 `leftBorderColor` 属性的设置
+     */
+    cellStatus?: CellStatusProps;
+    /**
+     * 设置列的每个单元格样式
+     */
+    cellStyle?: React.CSSProperties;
+    /**
+     * 单元格内元素的垂直对齐方式
+     */
+    verticalAlign?: "top" | "bottom";
+    /**
+     * 每条记录的控制列合并的值的 key
+     */
+    colSpanKey?: string;
+    /**
+     * 每条记录的控制行合并的值的 key
+     */
+    rowSpanKey?: string;
+    /**
+     * 自定义筛选菜单
+     */
+    filterDropdownBrick?: {
+        useBrick: UseSingleBrickConf;
+    };
+}
+/**
+ * @id advanced.general-table
+ * @name advanced.general-table
+ * @docKind brick
+ * @description 通用表格构件
+ * @author sailor
+ * @noInheritDoc
+ */
+declare class TableComponent extends ReactNextElement {
+    #private;
+    /**
+     * @kind CustomColumn[]
+     * @required false
+     * @default -
+     * @description 扩展自 ant-design 的 Column 相关配置项,具体查阅：[Column](https://ant.design/components/table-cn/#Column)
+     * @group basic
+     */
+    set columns(value: CustomColumn[]);
+    get columns(): CustomColumn[];
+    /**
+     * @kind any[]
+     * @required false
+     * @default -
+     * @description 数据源，通过 useResolves 从后台接口获取或者直接在 storyboard 中配置
+     * @group basic
+     */
+    set dataSource(value: Record<string, any>[]);
+    /**
+     * @required false
+     * @default true
+     * @description 是否显示外层卡片
+     * @group basic
+     */
+    accessor showCard: boolean;
+    /**
+     * @required false
+     * @default -
+     * @description 表格行是否可选择，具体查阅：[rowSelection](https://ant.design/components/table-cn/#rowSelection)
+     * @group basic
+     */
+    accessor rowSelection: false | TableRowSelection<any> | undefined;
+    /**
+     * @required false
+     * @default "key"
+     * @description 指定每一行的 key，不指定则默认为索引 index。强烈建议设置该属性，否则在某些情况下可能行为不如预期。
+     * @group basic
+     */
+    accessor rowKey: string | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 隐藏相应列（输入对应的 dataIndex 或者 key 即可）
+     * @group basic
+     */
+    accessor hiddenColumns: Array<string | number> | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 是否显示已选择信息和清除按钮。仅在设置了`rowSelection`时有效。默认不显示
+     * @group rowSelection
+     */
+    accessor showSelectInfo: boolean;
+    /**
+     * @required false
+     * @default -
+     * @description 表头过滤的过滤项，key 为 column 的 dataIndex，value 为过滤值集合。
+     * @group paginationAndFilter
+     */
+    accessor filters: Record<string, string[]> | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description ant-design 的 Table 相关配置项,具体查阅：[Table](https://ant.design/components/table-cn/#Table)，其中分页配置和行选择配值在构件中设置了常用的默认配置，也可自行覆盖，具体描述见下表
+     * @group other
+     */
+    accessor configProps: any;
+    /**
+     * @required false
+     * @default -
+     * @description 被排序列的 dataIndex。通常来自于 url 参数，可以设置成 ${QUERY.sort}。
+     * @group paginationAndFilter
+     */
+    accessor sort: string | undefined | null;
+    /**
+     * @required false
+     * @default -
+     * @description 升序/降序，可以设置成 ${QUERY.order}。
+     * @group paginationAndFilter
+     */
+    accessor order: string | number | undefined | null;
+    /**
+     * @required false
+     * @default -
+     * @description 配置每一行是否禁用，其中 `field` 表示数据源中的字段路径， `value` 表示与其字段比较的值， `operator` 表示两者比较的方法，结果为 `true` 时会禁用当前行, 需要注意的是该配置需要在 `rowSelection: true` 的前提下使用，并且设置 `rowKey` 属性赋予每行唯一的 key，防止顺序变化时造成的错误勾选（如上 demo 所示）
+     * @group rowSelection
+     */
+    accessor rowDisabledConfig: RowDisabledProps | RowDisabledProps[] | undefined;
+    /**
+     * @kind {useBrick:UseBrickConf}
+     * @required false
+     * @default -
+     * @description 自定义行展开的构件 [UseBrickConf](/next-docs/docs/api-reference/brick-types.usesinglebrickconf)
+     * @group expand
+     */
+    accessor expandedRowBrick: {
+        useBrick?: UseSingleBrickConf;
+    } | undefined;
+    /**
+     * @kind { collapsedIcon: MenuIcon,expandedIcon: MenuIcon}
+     * @required false
+     * @default {collapsedIcon:{lib:'antd',icon:'down',theme:'outlined'},expandedIcon:{lib:'antd',icon:'right',theme:'outlined'}}
+     * @description 自定义展开图标。
+     * @group expand
+     */
+    accessor expandIcon: {
+        collapsedIcon: GeneralIconProps;
+        expandedIcon: GeneralIconProps;
+    } | undefined;
+    /**
+     * @required false
+     * @default true
+     * @description 展开的图标是否为一个单元格，默认显示在第一列；设置为 false 的时候，可以通过`expandIconColumnIndex`属性设置展开的图标在哪一列
+     * @group expand
+     */
+    accessor expandIconAsCell: boolean;
+    /**
+     * @required false
+     * @default -
+     * @description 展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面。当`expandIconAsCell`为 false 时，该属性生效。
+     * @group expand
+     */
+    accessor expandIconColumnIndex: number | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 通过点击行来展开子行
+     * @group expand
+     */
+    accessor expandRowByClick: boolean | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 优化渲染的列（输入对应的 dataIndex），针对配置了 useBrick 的列。当前 antd 在更新 state 的时候，会全量渲染单元格，如果确定某一列在后续操作中不需要重新渲染，例如仅作为展示的单元格，可通过该属性设置以优化性能。注意，在树形表格中，当某一列内包含展开/收起按钮，则不应该设置该列。
+     * @group advanced
+     */
+    accessor optimizedColumns: Array<string | number> | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 树形数据展示时是否需要去除空数组
+     * @group expand
+     */
+    accessor stripEmptyExpandableChildren: boolean;
+    /**
+     * @required false
+     * @default false
+     * @description 初始时，是否展开所有行
+     * @group expand
+     */
+    accessor defaultExpandAllRows: boolean | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 是否显示省略信息
+     * @group basic
+     */
+    accessor ellipsisInfo: boolean | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 展开的行的 rowKey
+     * @group expand
+     */
+    accessor expandedRowKeys: string[] | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 表格树形数据展示的时候，行选择父节点的时候是否同步勾选/取消勾选所有子节点，并且被同步勾选的子节点不能单独取消。注意，该属性必须设置 `rowKey` 属性。
+     * @group expand
+     */
+    accessor selectAllChildren: boolean | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 是否默认选择所有行。注意，该属性必须设置 `rowKey` 属性。
+     * @group expand
+     */
+    accessor defaultSelectAll: boolean | undefined;
+    private _disabledChildrenKeys;
+    /**
+     * @required false
+     * @default children
+     * @description 指定树形结构的列名
+     * @group expand
+     */
+    accessor childrenColumnName: string;
+    /**
+     * @required false
+     * @default true
+     * @description 是否支持排序。默认开启，当对应列的sorter设置成true时则可排序。sortable为false时则排序都不生效。
+     * @group paginationAndFilter
+     */
+    accessor sortable: boolean;
+    /**
+     * @kind object
+     * @required false
+     * @default -
+     * @description 设置相关字段取自哪里，具体描述见下表
+     * @group advanced
+     */
+    set fields(value: any);
+    /**
+     * @required false
+     * @default false
+     * @description 是否前端进行搜索，配合`presentational-bricks.brick-input`使用
+     * @group paginationAndFilter
+     */
+    accessor frontSearch: boolean | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 前端搜索参数
+     * @group paginationAndFilter
+     */
+    accessor frontSearchQuery: string;
+    /**
+     * @required false
+     * @default false
+     * @description 是否精确搜索
+     * @group paginationAndFilter
+     */
+    accessor exactSearch: boolean | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 进行前端搜索的字段，支持嵌套的写法如["name","value.a"]，不配置的时候默认为对所有 columns 的 dataIndex[]进行前端搜索
+     * @group paginationAndFilter
+     */
+    accessor frontSearchFilterKeys: string[] | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 页码。后台搜索的时候一般不需要配置，列表接口返回格式通常为{list:[],page:1,pageSize:10,total:20}，即默认取自 page；前台搜索的时候，一般配置成 "${query.page=1|number}"
+     * @group paginationAndFilter
+     */
+    accessor page: number | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 页码条数。后台搜索的时候一般不需要配置，列表接口返回格式通常为{list:[],page:1,pageSize:10,total:20}，即默认取自 pageSize/page_size；前台搜索的时候，一般配置成 "${query.pageSize=10|number}"
+     * @group paginationAndFilter
+     */
+    accessor pageSize: number | undefined;
+    /**
+     * @kind {
+     *   x?: string | number | true;
+     *   y?: number | string;
+     * } & {
+     *   scrollToFirstRowOnChange?: boolean;
+     * }
+     * @required false
+     * @default { x: true }
+     * @description 表格是否可滚动，也可以指定滚动区域的宽、高，配置项。详见 [scroll](https://ant.design/components/table-cn/#scroll)
+     * @group other
+     */
+    accessor scrollConfigs: TableProps<unknown>["scroll"];
+    /**
+     * @required false
+     * @default "q"
+     * @description 把过滤条件更新到 url 时的字段名
+     * @group paginationAndFilter
+     */
+    accessor qField: string;
+    /**
+     * @required false
+     * @default false
+     * @description 表格行是否可拖拽，注意，树形数据的表格不支持该功能
+     * @group basic
+     */
+    accessor tableDraggable: boolean | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 是否展示斑马纹
+     * @group ui
+     */
+    accessor zebraPattern: boolean | undefined;
+    /**
+     * @required false
+     * @default false
+     * @description 翻页时是否记住之前选中的项。注意，选中项的rowKey将保存在url中，如果不设置rowKey，该设置不生效。如果选择太多可能会造成url过长，请谨慎使用
+     * @group other
+     */
+    accessor storeCheckedByUrl: boolean | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 额外的行，通常为跨页勾选时，不在当前页的行
+     * @group other
+     */
+    accessor extraRows: Record<string, unknown>[];
+    /**
+     * @required false
+     * @default false
+     * @description 当所有子节点选中时，自动选中父节点
+     * @group expand
+     */
+    accessor autoSelectParentWhenAllChildrenSelected: boolean | undefined;
+    /**
+     * @required -
+     * @default -
+     * @description 表格表头是否透明
+     * @group ui
+     */
+    accessor thTransparent: boolean | undefined;
+    /**
+     * @required false
+     * @default true
+     * @description 是否显示表头
+     * @group ui
+     */
+    accessor showHeader: boolean;
+    /**
+     * @required false
+     * @default -
+     * @description 是否显示分页
+     * @group paginationAndFilter
+     */
+    accessor pagination: false | TablePaginationConfig | undefined;
+    /**
+     * @required false
+     * @default -
+     * @description 表格大小（antd原生size）
+     * @group ui
+     */
+    accessor size: SizeType;
+    /**
+     * @required false
+     * @default -
+     * @description 选框类型（单选/多选）
+     * @group rowSelection
+     */
+    accessor type: RowSelectionType | undefined;
+    /**
+     * @required false
+     * @default true
+     * @description 是否更新 url 参数。设置为否之后，如果是后台进行分页/排序等功能，则需要结合事件进行编排。如果是前台进行分页/排序，则不需要。
+     * @group other
+     */
+    accessor shouldUpdateUrlParams: boolean;
+    /**
+     * @required false
+     * @default true
+     * @description 更新 url 参数时是否触发页面重新渲染。仅在`shouldUpdateUrlParams`为true时有效。
+     * @group other
+     */
+    accessor shouldRenderWhenUrlParamsUpdate: boolean;
+    get processedDataSource(): Record<string, any>[];
+    get processConfigProps(): any;
+    get processedColumns(): CustomColumn[];
+    private _originalDataSource;
+    private _dataSource;
+    private _pureSource;
+    private _columns;
+    private _finalConfigProps;
+    private _error;
+    private _selectUpdateEventName;
+    private _selectUpdateEventDetailKeys;
+    private _selectUpdateEventDetailField;
+    private _selectUpdateEventDetailExtra;
+    private _fields;
+    /**
+     * @default []
+     * @required false
+     * @description 指定选中项的 key 数组
+     * @group rowSelection
+     */
+    accessor selectedRowKeys: React.Key[];
+    private _selected;
+    private _selectedRow;
+    private _selectedRows;
+    private _allChildren;
+    private _isInSelect;
+    /**
+     * @description 搜索过滤
+     */
+    filterSourceData(event: CustomEvent): void;
+    handleFrontendDataChange(data?: Record<string, any>[], columns?: CustomColumn[]): Record<string, any>[];
+    handleFrontendFilterSource(data: Record<string, any>[], q: string, columns: CustomColumn[], filterKeys?: DataIndex[]): Record<string, any>[];
+    private _getRowKey;
+    private _findParentByChildKeyValue;
+    private _handleRowSelectChange;
+    private _getSelectedRowsWithChildren;
+    private _handleOnSelect;
+    private _handleSelectAll;
+    private _getCheckedFromUrl;
+    private _updateUrlChecked;
+    private _handleOnChange;
+    private renderSelectInfo;
+    private handleFrontendSorter;
+    private handleFrontendFilters;
+    private frontendSearch;
+    private _handleOnExpand;
+    private _handleOnExpandedRowsChange;
+    private _handleOnDrag;
+    /**
+     * @description 展开所有行
+     */
+    expandAll(): void;
+    getModifyColumns(): CustomColumn[];
+    render(): JSX.Element;
+    private _getAllRows;
+    private _handleDefaultSelectAll;
+    private _initConfigProps;
+    _test_only_getOriginalDataSource(): Record<string, any>[];
+    updateData(event: CustomEvent): void;
+    updateError(event: CustomEvent): void;
+    set selectUpdateEventName(value: string);
+    set selectUpdateEventDetailKeys(value: string[]);
+    set selectUpdateEventDetailField(value: string);
+    set selectUpdateEventDetailExtra(value: any);
+}
+export { TableComponent };

package/dist-types/table/index.spec.d.ts

@@ -0,0 +1 @@
+import "./index.jsx";

package/dist-types/table/utils.d.ts

@@ -0,0 +1,6 @@
+import { type CellStatusProps } from "./index.js";
+export declare const compareFunMap: Record<string, any>;
+export declare function getCellStyle(cellStatus: CellStatusProps, item: Record<string, any>, value?: any): Record<string, string>;
+export declare const getKeysOfData: (data: Record<string, any>[], rowKey: string, childrenColumnName: string, keys: string[]) => void;
+export declare const getRowsOfData: (data: Record<string, any>[], childrenColumnName: string, rows: Record<string, any>[]) => void;
+export declare function stripEmptyExpandableChildrenByName(name: string, data?: Record<string, any>[]): Record<string, any>[];

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@next-bricks/advanced",
+  "version": "0.0.3",
+  "homepage": "https://github.com/easyops-cn/next-core/tree/master/bricks/basic",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:easyops-cn/next-core.git"
+  },
+  "license": "GPL-3.0",
+  "type": "module",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "dist-types"
+  ],
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/dist",
+          "{projectRoot}/dist-types"
+        ]
+      }
+    }
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist-types/*/index.d.ts"
+    }
+  },
+  "scripts": {
+    "start": "cross-env NODE_ENV=development build-next-bricks --watch",
+    "build": "npm run build:main && npm run build:types",
+    "build:main": "cross-env NODE_ENV=production build-next-bricks",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist-types --project tsconfig.json",
+    "test": "cross-env NODE_ENV='test' test-next",
+    "test:ci": "cross-env NODE_ENV='test' CI=true test-next"
+  },
+  "dependencies": {
+    "@next-bricks/icons": "^0.0.3",
+    "@next-core/element": "^1.0.2",
+    "@next-core/http": "^1.0.2",
+    "@next-core/react-element": "^1.0.2",
+    "@next-core/react-runtime": "^1.0.5",
+    "@next-core/runtime": "^1.0.5",
+    "@next-core/theme": "^1.0.2",
+    "@next-core/types": "^1.0.3",
+    "antd": "^5.2.3",
+    "classnames": "^2.3.2",
+    "immutability-helper": "^3.1.1",
+    "lodash": "^4.17.21",
+    "react": "0.0.0-experimental-ee8509801-20230117",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
+  },
+  "devDependencies": {
+    "@next-core/build-next-bricks": "^1.1.0",
+    "@next-core/test-next": "^1.0.2"
+  },
+  "gitHead": "2234d08a3409a41b7cacea7b4dedbee308c26997"
+}