@canlooks/can-ui 0.0.142 → 0.0.143

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/cjs/components/curd/curd.d.ts +1 -0
  2. package/dist/cjs/components/curd/curd.js +30 -26
  3. package/dist/cjs/components/curd/curdColumnConfig.js +1 -1
  4. package/dist/cjs/components/curd/curdColumnConfig.style.d.ts +2 -0
  5. package/dist/cjs/components/curd/curdColumnConfig.style.js +14 -2
  6. package/dist/cjs/components/dataGrid/dataGrid.d.ts +2 -0
  7. package/dist/cjs/components/dataGrid/dataGrid.js +20 -17
  8. package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts +1 -1
  9. package/dist/cjs/components/dataGrid/filterBubbleContent.js +8 -18
  10. package/dist/cjs/components/dataGrid/filterBubbleContent.style.d.ts +1 -1
  11. package/dist/cjs/components/dataGrid/filterBubbleContent.style.js +7 -5
  12. package/dist/cjs/components/form/formItem.js +2 -2
  13. package/dist/cjs/components/stepper/step.style.d.ts +1 -1
  14. package/dist/esm/components/curd/curd.d.ts +1 -0
  15. package/dist/esm/components/curd/curd.js +30 -26
  16. package/dist/esm/components/curd/curdColumnConfig.js +1 -1
  17. package/dist/esm/components/curd/curdColumnConfig.style.d.ts +2 -0
  18. package/dist/esm/components/curd/curdColumnConfig.style.js +14 -2
  19. package/dist/esm/components/dataGrid/dataGrid.d.ts +2 -0
  20. package/dist/esm/components/dataGrid/dataGrid.js +20 -17
  21. package/dist/esm/components/dataGrid/filterBubbleContent.d.ts +1 -1
  22. package/dist/esm/components/dataGrid/filterBubbleContent.js +10 -20
  23. package/dist/esm/components/dataGrid/filterBubbleContent.style.d.ts +1 -1
  24. package/dist/esm/components/dataGrid/filterBubbleContent.style.js +6 -4
  25. package/dist/esm/components/form/formItem.js +2 -2
  26. package/dist/esm/components/stepper/step.style.d.ts +1 -1
  27. package/package.json +1 -1
@@ -29,6 +29,7 @@ export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue
29
29
  reload(): Promise<void>;
30
30
  setPage(page: number): void;
31
31
  setPageSize(size: number): void;
32
+ setFilterValue(filterValue: FormValue): void;
32
33
  openCreateDialog(defaultValue?: F): Promise<F> | undefined;
33
34
  openUpdateDialog(row: R, defaultValue?: F): Promise<F> | undefined;
34
35
  selectSingle(): Promise<R> | undefined;
@@ -39,6 +39,14 @@ exports.Curd = (0, react_1.memo)((props) => {
39
39
  setPageSize(size) {
40
40
  setInnerPageSize(size);
41
41
  },
42
+ setFilterValue(filterValue) {
43
+ innerFilterRef.current.setFormValue(filterValue);
44
+ innerLoadRows().then();
45
+ },
46
+ resetFilter() {
47
+ innerFilterRef.current.resetForm();
48
+ innerLoadRows().then();
49
+ },
42
50
  openCreateDialog(defaultValue) {
43
51
  activeRow.current = void 0;
44
52
  return curdDialogRef.current?.open(void 0, defaultValue);
@@ -58,12 +66,8 @@ exports.Curd = (0, react_1.memo)((props) => {
58
66
  * -------------------------------------------------------------
59
67
  * 筛选部分
60
68
  */
61
- const inlineFilterRef = (0, react_1.useRef)(null);
62
69
  const innerFilterRef = (0, react_1.useRef)(null);
63
- const getFilterValue = () => ({
64
- ...inlineFilterRef.current.getFormValue(),
65
- ...innerFilterRef.current.getFormValue()
66
- });
70
+ const getFilterValue = () => innerFilterRef.current.getFormValue();
67
71
  const filterHandler = () => {
68
72
  onFilter?.(getFilterValue());
69
73
  innerLoadRows().then();
@@ -206,27 +210,27 @@ exports.Curd = (0, react_1.memo)((props) => {
206
210
  innerLoadRows().then();
207
211
  message.success(deleteName + '成功').then();
208
212
  };
209
- return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
210
- variant: 'plain',
211
- initialValue: initialFilterValue
212
- }, filterProps, {
213
- ref: innerFilterRef,
214
- ...filterableProps?.showButton === false
215
- ? { onChange: filterHandler }
216
- : { onFinish: filterHandler }
217
- }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
218
- (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
219
- (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
220
- (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
221
- (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
222
- (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
223
- (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
224
- ...props.tableProps,
225
- ...resizable && { size: innerSize.current }
226
- }, loading: innerLoading.current, rows: innerRows.current, filterProps: { ref: inlineFilterRef }, onFilter: filterHandler, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
227
- ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
228
- : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
229
- (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
213
+ return ((0, jsx_runtime_1.jsx)("div", { ...wrapperProps, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: (0, jsx_runtime_1.jsxs)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
214
+ variant: 'plain',
215
+ initialValue: initialFilterValue
216
+ }, filterProps, {
217
+ ref: innerFilterRef,
218
+ ...filterableProps?.showButton === false
219
+ ? { onChange: filterHandler }
220
+ : { onFinish: filterHandler }
221
+ }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
222
+ (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
223
+ (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
224
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
225
+ (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
226
+ (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
227
+ (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
228
+ ...props.tableProps,
229
+ ...resizable && { size: innerSize.current }
230
+ }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
231
+ ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
232
+ : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) }), (creatable || updatable) &&
233
+ (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }) }));
230
234
  });
231
235
  exports.Curd.Filter = curdFilterable_1.CurdFilterable;
232
236
  exports.Curd.CONTROL_COLUMN = Symbol('control-column');
@@ -28,5 +28,5 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerV
28
28
  ? [...o, key]
29
29
  : o.filter(k => k !== key));
30
30
  };
31
- return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
31
+ return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
32
32
  });
@@ -2,7 +2,9 @@ export declare const classes: {
2
2
  title: string;
3
3
  content: string;
4
4
  checkbox: string;
5
+ description: string;
5
6
  item: string;
7
+ titleText: string;
6
8
  } & {
7
9
  root: string;
8
10
  };
@@ -6,17 +6,29 @@ const utils_1 = require("../../utils");
6
6
  exports.classes = (0, utils_1.defineInnerClasses)('curd-column-config', [
7
7
  'content',
8
8
  'title',
9
+ 'titleText',
10
+ 'description',
9
11
  'item',
10
12
  'checkbox'
11
13
  ]);
12
- exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
14
+ exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
13
15
  @layer reset {
14
16
  .${exports.classes.content} {
15
17
  min-width: 160px;
16
18
 
17
19
  .${exports.classes.title} {
18
- font-weight: bold;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: space-between;
19
23
  padding: ${spacing[3]}px;
24
+
25
+ .${exports.classes.titleText} {
26
+ font-weight: bold;
27
+ }
28
+
29
+ .${exports.classes.description} {
30
+ color: ${text.disabled};
31
+ }
20
32
  }
21
33
 
22
34
  .${exports.classes.item} {
@@ -112,6 +112,8 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
112
112
  bordered?: TableProps['bordered'];
113
113
  striped?: TableProps['striped'];
114
114
  tableProps?: TableProps;
115
+ /** @private 内部使用,在<Curd/>内渲染时,禁用Form标签 */
116
+ _noRenderFormTag?: boolean;
115
117
  }
116
118
  export interface DataGridSingleProps<R extends RowType = RowType, V extends Id = Id> extends DataGridBaseProps<R> {
117
119
  multiple?: false;
@@ -19,7 +19,7 @@ const DataGridContext = (0, react_1.createContext)({});
19
19
  function useDataGridContext() {
20
20
  return (0, react_1.useContext)(DataGridContext);
21
21
  }
22
- exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
22
+ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, _noRenderFormTag = false, multiple, defaultValue, value, onChange, ...props }) => {
23
23
  /**
24
24
  * ---------------------------------------------------------------
25
25
  * 选择行
@@ -130,22 +130,25 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
130
130
  const { page, pageSize } = _paginationProps;
131
131
  return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
132
132
  }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
133
- return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { fill: false, ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
134
- className: dataGrid_style_1.classes.filterForm,
135
- variant: 'plain',
136
- initialValue: innerFilterValue
137
- }, filterProps, {
138
- onFinish: filterHandler
139
- }), children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
140
- slots, slotProps,
141
- rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
142
- expandedSet, flattedColumns, toggleExpanded
143
- }), [
144
- slots, slotProps,
145
- rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
146
- expandedSet, flattedColumns
147
- ]), children: !!paginatedRows?.length &&
148
- (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }) }), renderPaginationFn()] }));
133
+ const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
134
+ slots, slotProps,
135
+ rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
136
+ expandedSet, flattedColumns, toggleExpanded
137
+ }), [
138
+ slots, slotProps,
139
+ rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
140
+ expandedSet, flattedColumns
141
+ ]), children: !!paginatedRows?.length &&
142
+ (0, jsx_runtime_1.jsx)(dataGridRows_1.DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { className: dataGrid_style_1.classes.empty }))] }) }));
143
+ return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { fill: false, ...props, css: dataGrid_style_1.style, className: (0, utils_1.clsx)(dataGrid_style_1.classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_noRenderFormTag
144
+ ? renderedContent
145
+ : (0, jsx_runtime_1.jsx)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
146
+ className: dataGrid_style_1.classes.filterForm,
147
+ variant: 'plain',
148
+ initialValue: innerFilterValue
149
+ }, filterProps, {
150
+ onFinish: filterHandler
151
+ }), children: renderedContent }), renderPaginationFn()] }));
149
152
  });
150
153
  exports.DataGrid.EXPAND_COLUMN = Symbol('expand-column');
151
154
  exports.DataGrid.SELECT_COLUMN = Symbol('select-column');
@@ -3,7 +3,7 @@ import { Id } from '../../types';
3
3
  import { FormItemChildren } from '../form';
4
4
  type FilterSharedProps = {
5
5
  /** 是否显示`重置`按钮,默认为`true` */
6
- showButton?: boolean;
6
+ showResetButton?: boolean;
7
7
  };
8
8
  export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
9
9
  /** 默认为`true` */
@@ -13,39 +13,29 @@ const filterBubbleContent_style_1 = require("./filterBubbleContent.style");
13
13
  const input_1 = require("../input");
14
14
  const icon_1 = require("../icon");
15
15
  const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
16
- const utils_1 = require("../../utils");
17
16
  exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps }) => {
18
17
  const { formRef } = (0, form_1.useFormContext)();
19
18
  const { open, setOpen } = (0, popper_1.usePopperContext)();
20
19
  (0, react_1.useEffect)(() => {
21
- if (!open && 'multiple' in columnFilterProps && columnFilterProps.multiple) {
22
- // 多选模式下,关闭弹框触发筛选
20
+ if (!open) {
21
+ // 关闭弹框触发筛选
23
22
  formRef.current.submit().then();
24
23
  }
25
24
  }, [open]);
26
25
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.FormItem, { field: columnKey, children: 'control' in columnFilterProps
27
26
  ? columnFilterProps.control
28
- : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false &&
27
+ : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps, onChange: () => {
28
+ !columnFilterProps.multiple && setOpen(false);
29
+ } }) }), columnFilterProps.showResetButton !== false &&
29
30
  (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
30
- formRef.current.setFieldValue(columnKey, null);
31
+ formRef.current.resetField(columnKey);
31
32
  setOpen(false);
32
- }, children: "\u91CD\u7F6E" }) }), 'multiple' in columnFilterProps && !columnFilterProps.multiple &&
33
- // 单选模式,变化即触发筛选
34
- (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, { onSubmit: () => setOpen(false) })] }));
33
+ }, children: "\u91CD\u7F6E" }) })] }));
35
34
  });
36
35
  const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, searchable = false, value, onChange, ...props }) => {
37
36
  const [selectedValue, toggleSelect] = (0, selectionContext_1.useFlatSelection)({ multiple, value, onChange });
38
37
  const [searchValue, setSearchValue] = (0, react_1.useState)('');
39
38
  const deferredSearchValue = (0, react_1.useDeferredValue)(searchValue);
40
- return ((0, jsx_runtime_1.jsxs)("div", { css: filterBubbleContent_style_1.style, children: [searchable &&
39
+ return ((0, jsx_runtime_1.jsxs)("div", { css: filterBubbleContent_style_1.filterOptionsStyle, children: [searchable &&
41
40
  (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faSearch }), placeholder: "\u641C\u7D22", value: searchValue, onChange: e => setSearchValue(e.target.value) }), (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { showCheckbox: multiple, ...props, searchValue: deferredSearchValue, selectedValue: selectedValue, onToggleSelected: toggleSelect })] }));
42
41
  });
43
- function TriggerFilterOnChange(props) {
44
- const { formRef } = (0, form_1.useFormContext)();
45
- const { formValue } = (0, form_1.useFormValueContext)();
46
- (0, utils_1.useUpdateEffect)(() => {
47
- formRef.current.submit().then();
48
- props.onSubmit?.();
49
- }, [formValue]);
50
- return null;
51
- }
@@ -1 +1 @@
1
- export declare const style: import("@emotion/react").SerializedStyles;
1
+ export declare const filterOptionsStyle: import("@emotion/react").SerializedStyles;
@@ -1,9 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.style = void 0;
3
+ exports.filterOptionsStyle = void 0;
4
4
  const react_1 = require("@emotion/react");
5
- exports.style = (0, react_1.css) `
6
- display: flex;
7
- flex-direction: column;
8
- gap: 4px
5
+ exports.filterOptionsStyle = (0, react_1.css) `
6
+ @layer reset {
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 4px;
10
+ }
9
11
  `;
@@ -24,7 +24,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
24
24
  * --------------------------------------------------------------------
25
25
  * 重置与初始化
26
26
  */
27
- const reset = (currentFormValue = formValue, initialFormValue) => {
27
+ const reset = (currentFormValue = formValue, initialFormValue = {}) => {
28
28
  // formRef的resetForm()方法会传入新的formValue,其他情况使用当前的formValue
29
29
  shouldValidate.current = isTouched.current = false;
30
30
  if (!(0, utils_1.isUnset)(field) && currentFormValue) {
@@ -33,7 +33,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
33
33
  }
34
34
  else if (typeof initialFormValue !== 'undefined') {
35
35
  const initialFieldValue = (0, utils_1.queryDeep)(initialFormValue, field);
36
- (0, utils_1.queryDeep)(currentFormValue, field, initialFieldValue);
36
+ (0, utils_1.queryDeep)(currentFormValue, field, () => initialFieldValue);
37
37
  }
38
38
  }
39
39
  setInnerError(false);
@@ -4,8 +4,8 @@ export declare const classes: {
4
4
  title: string;
5
5
  indicator: string;
6
6
  description: string;
7
- indicatorWrap: string;
8
7
  titleText: string;
8
+ indicatorWrap: string;
9
9
  } & {
10
10
  root: string;
11
11
  };
@@ -29,6 +29,7 @@ export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue
29
29
  reload(): Promise<void>;
30
30
  setPage(page: number): void;
31
31
  setPageSize(size: number): void;
32
+ setFilterValue(filterValue: FormValue): void;
32
33
  openCreateDialog(defaultValue?: F): Promise<F> | undefined;
33
34
  openUpdateDialog(row: R, defaultValue?: F): Promise<F> | undefined;
34
35
  selectSingle(): Promise<R> | undefined;
@@ -36,6 +36,14 @@ export const Curd = memo((props) => {
36
36
  setPageSize(size) {
37
37
  setInnerPageSize(size);
38
38
  },
39
+ setFilterValue(filterValue) {
40
+ innerFilterRef.current.setFormValue(filterValue);
41
+ innerLoadRows().then();
42
+ },
43
+ resetFilter() {
44
+ innerFilterRef.current.resetForm();
45
+ innerLoadRows().then();
46
+ },
39
47
  openCreateDialog(defaultValue) {
40
48
  activeRow.current = void 0;
41
49
  return curdDialogRef.current?.open(void 0, defaultValue);
@@ -55,12 +63,8 @@ export const Curd = memo((props) => {
55
63
  * -------------------------------------------------------------
56
64
  * 筛选部分
57
65
  */
58
- const inlineFilterRef = useRef(null);
59
66
  const innerFilterRef = useRef(null);
60
- const getFilterValue = () => ({
61
- ...inlineFilterRef.current.getFormValue(),
62
- ...innerFilterRef.current.getFormValue()
63
- });
67
+ const getFilterValue = () => innerFilterRef.current.getFormValue();
64
68
  const filterHandler = () => {
65
69
  onFilter?.(getFilterValue());
66
70
  innerLoadRows().then();
@@ -203,27 +207,27 @@ export const Curd = memo((props) => {
203
207
  innerLoadRows().then();
204
208
  message.success(deleteName + '成功').then();
205
209
  };
206
- return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsx(Form, { ...mergeComponentProps({
207
- variant: 'plain',
208
- initialValue: initialFilterValue
209
- }, filterProps, {
210
- ref: innerFilterRef,
211
- ...filterableProps?.showButton === false
212
- ? { onChange: filterHandler }
213
- : { onFinish: filterHandler }
214
- }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
215
- _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
216
- _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
217
- _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
218
- _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
219
- _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
220
- _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
221
- ...props.tableProps,
222
- ...resizable && { size: innerSize.current }
223
- }, loading: innerLoading.current, rows: innerRows.current, filterProps: { ref: inlineFilterRef }, onFilter: filterHandler, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
224
- ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
225
- : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
226
- _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
210
+ return (_jsx("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: _jsxs(Form, { ...mergeComponentProps({
211
+ variant: 'plain',
212
+ initialValue: initialFilterValue
213
+ }, filterProps, {
214
+ ref: innerFilterRef,
215
+ ...filterableProps?.showButton === false
216
+ ? { onChange: filterHandler }
217
+ : { onFinish: filterHandler }
218
+ }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
219
+ _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
220
+ _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
221
+ _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
222
+ _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
223
+ _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
224
+ _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
225
+ ...props.tableProps,
226
+ ...resizable && { size: innerSize.current }
227
+ }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
228
+ ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
229
+ : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) }), (creatable || updatable) &&
230
+ _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }) }));
227
231
  });
228
232
  Curd.Filter = CurdFilterable;
229
233
  Curd.CONTROL_COLUMN = Symbol('control-column');
@@ -25,5 +25,5 @@ export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible,
25
25
  ? [...o, key]
26
26
  : o.filter(k => k !== key));
27
27
  };
28
- return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
28
+ return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
29
29
  });
@@ -2,7 +2,9 @@ export declare const classes: {
2
2
  title: string;
3
3
  content: string;
4
4
  checkbox: string;
5
+ description: string;
5
6
  item: string;
7
+ titleText: string;
6
8
  } & {
7
9
  root: string;
8
10
  };
@@ -3,17 +3,29 @@ import { defineInnerClasses, defineCss } from '../../utils';
3
3
  export const classes = defineInnerClasses('curd-column-config', [
4
4
  'content',
5
5
  'title',
6
+ 'titleText',
7
+ 'description',
6
8
  'item',
7
9
  'checkbox'
8
10
  ]);
9
- export const style = defineCss(({ spacing }) => css `
11
+ export const style = defineCss(({ spacing, text }) => css `
10
12
  @layer reset {
11
13
  .${classes.content} {
12
14
  min-width: 160px;
13
15
 
14
16
  .${classes.title} {
15
- font-weight: bold;
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: space-between;
16
20
  padding: ${spacing[3]}px;
21
+
22
+ .${classes.titleText} {
23
+ font-weight: bold;
24
+ }
25
+
26
+ .${classes.description} {
27
+ color: ${text.disabled};
28
+ }
17
29
  }
18
30
 
19
31
  .${classes.item} {
@@ -112,6 +112,8 @@ export interface DataGridBaseProps<R extends RowType = RowType> extends DataGrid
112
112
  bordered?: TableProps['bordered'];
113
113
  striped?: TableProps['striped'];
114
114
  tableProps?: TableProps;
115
+ /** @private 内部使用,在<Curd/>内渲染时,禁用Form标签 */
116
+ _noRenderFormTag?: boolean;
115
117
  }
116
118
  export interface DataGridSingleProps<R extends RowType = RowType, V extends Id = Id> extends DataGridBaseProps<R> {
117
119
  multiple?: false;
@@ -15,7 +15,7 @@ const DataGridContext = createContext({});
15
15
  export function useDataGridContext() {
16
16
  return useContext(DataGridContext);
17
17
  }
18
- export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
18
+ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, filterBubbleProps, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, _noRenderFormTag = false, multiple, defaultValue, value, onChange, ...props }) => {
19
19
  /**
20
20
  * ---------------------------------------------------------------
21
21
  * 选择行
@@ -126,22 +126,25 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
126
126
  const { page, pageSize } = _paginationProps;
127
127
  return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
128
128
  }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
129
- return (_jsxs(Loading, { fill: false, ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_jsx(Form, { ...mergeComponentProps({
130
- className: classes.filterForm,
131
- variant: 'plain',
132
- initialValue: innerFilterValue
133
- }, filterProps, {
134
- onFinish: filterHandler
135
- }), children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
136
- slots, slotProps,
137
- rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
138
- expandedSet, flattedColumns, toggleExpanded
139
- }), [
140
- slots, slotProps,
141
- rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
142
- expandedSet, flattedColumns
143
- ]), children: !!paginatedRows?.length &&
144
- _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }) }), renderPaginationFn()] }));
129
+ const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
130
+ slots, slotProps,
131
+ rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
132
+ expandedSet, flattedColumns, toggleExpanded
133
+ }), [
134
+ slots, slotProps,
135
+ rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
136
+ expandedSet, flattedColumns
137
+ ]), children: !!paginatedRows?.length &&
138
+ _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }));
139
+ return (_jsxs(Loading, { fill: false, ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_noRenderFormTag
140
+ ? renderedContent
141
+ : _jsx(Form, { ...mergeComponentProps({
142
+ className: classes.filterForm,
143
+ variant: 'plain',
144
+ initialValue: innerFilterValue
145
+ }, filterProps, {
146
+ onFinish: filterHandler
147
+ }), children: renderedContent }), renderPaginationFn()] }));
145
148
  });
146
149
  DataGrid.EXPAND_COLUMN = Symbol('expand-column');
147
150
  DataGrid.SELECT_COLUMN = Symbol('select-column');
@@ -3,7 +3,7 @@ import { Id } from '../../types';
3
3
  import { FormItemChildren } from '../form';
4
4
  type FilterSharedProps = {
5
5
  /** 是否显示`重置`按钮,默认为`true` */
6
- showButton?: boolean;
6
+ showResetButton?: boolean;
7
7
  };
8
8
  export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
9
9
  /** 默认为`true` */
@@ -5,44 +5,34 @@ import { Flex } from '../flex';
5
5
  import { Button } from '../button';
6
6
  import { usePopperContext } from '../popper';
7
7
  import { memo, useDeferredValue, useEffect, useState } from 'react';
8
- import { FormItem, useFormContext, useFormValueContext } from '../form';
9
- import { style } from './filterBubbleContent.style';
8
+ import { FormItem, useFormContext } from '../form';
9
+ import { filterOptionsStyle } from './filterBubbleContent.style';
10
10
  import { Input } from '../input';
11
11
  import { Icon } from '../icon';
12
12
  import { faSearch } from '@fortawesome/free-solid-svg-icons';
13
- import { useUpdateEffect } from '../../utils';
14
13
  export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
15
14
  const { formRef } = useFormContext();
16
15
  const { open, setOpen } = usePopperContext();
17
16
  useEffect(() => {
18
- if (!open && 'multiple' in columnFilterProps && columnFilterProps.multiple) {
19
- // 多选模式下,关闭弹框触发筛选
17
+ if (!open) {
18
+ // 关闭弹框触发筛选
20
19
  formRef.current.submit().then();
21
20
  }
22
21
  }, [open]);
23
22
  return (_jsxs(_Fragment, { children: [_jsx(FormItem, { field: columnKey, children: 'control' in columnFilterProps
24
23
  ? columnFilterProps.control
25
- : _jsx(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false &&
24
+ : _jsx(FilterOptions, { ...columnFilterProps, onChange: () => {
25
+ !columnFilterProps.multiple && setOpen(false);
26
+ } }) }), columnFilterProps.showResetButton !== false &&
26
27
  _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
27
- formRef.current.setFieldValue(columnKey, null);
28
+ formRef.current.resetField(columnKey);
28
29
  setOpen(false);
29
- }, children: "\u91CD\u7F6E" }) }), 'multiple' in columnFilterProps && !columnFilterProps.multiple &&
30
- // 单选模式,变化即触发筛选
31
- _jsx(TriggerFilterOnChange, { onSubmit: () => setOpen(false) })] }));
30
+ }, children: "\u91CD\u7F6E" }) })] }));
32
31
  });
33
32
  const FilterOptions = memo(({ multiple = true, showButton = true, searchable = false, value, onChange, ...props }) => {
34
33
  const [selectedValue, toggleSelect] = useFlatSelection({ multiple, value, onChange });
35
34
  const [searchValue, setSearchValue] = useState('');
36
35
  const deferredSearchValue = useDeferredValue(searchValue);
37
- return (_jsxs("div", { css: style, children: [searchable &&
36
+ return (_jsxs("div", { css: filterOptionsStyle, children: [searchable &&
38
37
  _jsx(Input, { prefix: _jsx(Icon, { icon: faSearch }), placeholder: "\u641C\u7D22", value: searchValue, onChange: e => setSearchValue(e.target.value) }), _jsx(OptionsBase, { showCheckbox: multiple, ...props, searchValue: deferredSearchValue, selectedValue: selectedValue, onToggleSelected: toggleSelect })] }));
39
38
  });
40
- function TriggerFilterOnChange(props) {
41
- const { formRef } = useFormContext();
42
- const { formValue } = useFormValueContext();
43
- useUpdateEffect(() => {
44
- formRef.current.submit().then();
45
- props.onSubmit?.();
46
- }, [formValue]);
47
- return null;
48
- }
@@ -1 +1 @@
1
- export declare const style: import("@emotion/react").SerializedStyles;
1
+ export declare const filterOptionsStyle: import("@emotion/react").SerializedStyles;
@@ -1,6 +1,8 @@
1
1
  import { css } from '@emotion/react';
2
- export const style = css `
3
- display: flex;
4
- flex-direction: column;
5
- gap: 4px
2
+ export const filterOptionsStyle = css `
3
+ @layer reset {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: 4px;
7
+ }
6
8
  `;
@@ -21,7 +21,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
21
21
  * --------------------------------------------------------------------
22
22
  * 重置与初始化
23
23
  */
24
- const reset = (currentFormValue = formValue, initialFormValue) => {
24
+ const reset = (currentFormValue = formValue, initialFormValue = {}) => {
25
25
  // formRef的resetForm()方法会传入新的formValue,其他情况使用当前的formValue
26
26
  shouldValidate.current = isTouched.current = false;
27
27
  if (!isUnset(field) && currentFormValue) {
@@ -30,7 +30,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
30
30
  }
31
31
  else if (typeof initialFormValue !== 'undefined') {
32
32
  const initialFieldValue = queryDeep(initialFormValue, field);
33
- queryDeep(currentFormValue, field, initialFieldValue);
33
+ queryDeep(currentFormValue, field, () => initialFieldValue);
34
34
  }
35
35
  }
36
36
  setInnerError(false);
@@ -4,8 +4,8 @@ export declare const classes: {
4
4
  title: string;
5
5
  indicator: string;
6
6
  description: string;
7
- indicatorWrap: string;
8
7
  titleText: string;
8
+ indicatorWrap: string;
9
9
  } & {
10
10
  root: string;
11
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.142",
3
+ "version": "0.0.143",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",