@canlooks/can-ui 0.0.147 → 0.0.149
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.
- package/dist/cjs/components/curd/curd.js +22 -22
- package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts +2 -0
- package/dist/cjs/components/dataGrid/filterBubbleContent.js +9 -2
- package/dist/esm/components/curd/curd.js +22 -22
- package/dist/esm/components/dataGrid/filterBubbleContent.d.ts +2 -0
- package/dist/esm/components/dataGrid/filterBubbleContent.js +10 -3
- package/package.json +1 -1
|
@@ -210,28 +210,28 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
210
210
|
innerLoadRows().then();
|
|
211
211
|
message.success(deleteName + '成功').then();
|
|
212
212
|
};
|
|
213
|
-
return ((0, jsx_runtime_1.
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
213
|
+
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.jsxs)(form_1.Form, { ...(0, utils_1.mergeComponentProps)({
|
|
214
|
+
ref: innerFilterRef,
|
|
215
|
+
className: curd_style_1.classes.filterForm,
|
|
216
|
+
variant: 'plain',
|
|
217
|
+
initialValue: initialFilterValue
|
|
218
|
+
}, filterProps, {
|
|
219
|
+
...filterableProps?.showButton === false
|
|
220
|
+
? { onChange: filterHandler }
|
|
221
|
+
: { onFinish: filterHandler }
|
|
222
|
+
}), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
|
|
223
|
+
(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 &&
|
|
224
|
+
(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 &&
|
|
225
|
+
(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 &&
|
|
226
|
+
(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 &&
|
|
227
|
+
(0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
228
|
+
(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: {
|
|
229
|
+
...props.tableProps,
|
|
230
|
+
...resizable && { size: innerSize.current }
|
|
231
|
+
}, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
|
|
232
|
+
? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
|
|
233
|
+
: props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
|
|
234
|
+
(0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
|
|
235
235
|
});
|
|
236
236
|
exports.Curd.Filter = curdFilterable_1.CurdFilterable;
|
|
237
237
|
exports.Curd.CONTROL_COLUMN = Symbol('control-column');
|
|
@@ -13,6 +13,8 @@ export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<
|
|
|
13
13
|
}
|
|
14
14
|
export interface FilterControlProps extends FilterSharedProps {
|
|
15
15
|
control: FormItemChildren;
|
|
16
|
+
/** 关闭弹框时触发筛选，默认为`false` */
|
|
17
|
+
triggerFilterOnClose?: boolean;
|
|
16
18
|
}
|
|
17
19
|
export declare const FilterBubbleContent: import("react").MemoExoticComponent<({ columnKey, columnFilterProps }: {
|
|
18
20
|
columnKey: Id;
|
|
@@ -16,15 +16,22 @@ const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
|
16
16
|
exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps }) => {
|
|
17
17
|
const { formRef } = (0, form_1.useFormContext)();
|
|
18
18
|
const { open, setOpen } = (0, popper_1.usePopperContext)();
|
|
19
|
+
const hasChanged = (0, react_1.useRef)(false);
|
|
19
20
|
(0, react_1.useEffect)(() => {
|
|
20
|
-
if (
|
|
21
|
-
|
|
21
|
+
if (open) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
// 关闭弹框时，如果已经onChange，或使用control自定义渲染+triggerFilterOnClose，则触发筛选
|
|
25
|
+
if (hasChanged.current
|
|
26
|
+
|| ('control' in columnFilterProps && columnFilterProps.triggerFilterOnClose)) {
|
|
22
27
|
formRef.current.submit().then();
|
|
28
|
+
hasChanged.current = false;
|
|
23
29
|
}
|
|
24
30
|
}, [open]);
|
|
25
31
|
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
|
|
26
32
|
? columnFilterProps.control
|
|
27
33
|
: (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps, onChange: () => {
|
|
34
|
+
hasChanged.current = true;
|
|
28
35
|
columnFilterProps.multiple === false && setOpen(false);
|
|
29
36
|
} }) }), columnFilterProps.showResetButton !== false &&
|
|
30
37
|
(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: () => {
|
|
@@ -207,28 +207,28 @@ export const Curd = memo((props) => {
|
|
|
207
207
|
innerLoadRows().then();
|
|
208
208
|
message.success(deleteName + '成功').then();
|
|
209
209
|
};
|
|
210
|
-
return (
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
210
|
+
return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsxs(Form, { ...mergeComponentProps({
|
|
211
|
+
ref: innerFilterRef,
|
|
212
|
+
className: classes.filterForm,
|
|
213
|
+
variant: 'plain',
|
|
214
|
+
initialValue: initialFilterValue
|
|
215
|
+
}, filterProps, {
|
|
216
|
+
...filterableProps?.showButton === false
|
|
217
|
+
? { onChange: filterHandler }
|
|
218
|
+
: { onFinish: filterHandler }
|
|
219
|
+
}), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
|
|
220
|
+
_jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
|
|
221
|
+
_jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
|
|
222
|
+
_jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
|
|
223
|
+
_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 &&
|
|
224
|
+
_jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
225
|
+
_jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
|
|
226
|
+
...props.tableProps,
|
|
227
|
+
...resizable && { size: innerSize.current }
|
|
228
|
+
}, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
|
|
229
|
+
? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
|
|
230
|
+
: props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
|
|
231
|
+
_jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
|
|
232
232
|
});
|
|
233
233
|
Curd.Filter = CurdFilterable;
|
|
234
234
|
Curd.CONTROL_COLUMN = Symbol('control-column');
|
|
@@ -13,6 +13,8 @@ export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<
|
|
|
13
13
|
}
|
|
14
14
|
export interface FilterControlProps extends FilterSharedProps {
|
|
15
15
|
control: FormItemChildren;
|
|
16
|
+
/** 关闭弹框时触发筛选，默认为`false` */
|
|
17
|
+
triggerFilterOnClose?: boolean;
|
|
16
18
|
}
|
|
17
19
|
export declare const FilterBubbleContent: import("react").MemoExoticComponent<({ columnKey, columnFilterProps }: {
|
|
18
20
|
columnKey: Id;
|
|
@@ -4,7 +4,7 @@ import { useFlatSelection } from '../selectionContext';
|
|
|
4
4
|
import { Flex } from '../flex';
|
|
5
5
|
import { Button } from '../button';
|
|
6
6
|
import { usePopperContext } from '../popper';
|
|
7
|
-
import { memo, useDeferredValue, useEffect, useState } from 'react';
|
|
7
|
+
import { memo, useDeferredValue, useEffect, useRef, useState } from 'react';
|
|
8
8
|
import { FormItem, useFormContext } from '../form';
|
|
9
9
|
import { filterOptionsStyle } from './filterBubbleContent.style';
|
|
10
10
|
import { Input } from '../input';
|
|
@@ -13,15 +13,22 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons';
|
|
|
13
13
|
export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
|
|
14
14
|
const { formRef } = useFormContext();
|
|
15
15
|
const { open, setOpen } = usePopperContext();
|
|
16
|
+
const hasChanged = useRef(false);
|
|
16
17
|
useEffect(() => {
|
|
17
|
-
if (
|
|
18
|
-
|
|
18
|
+
if (open) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
// 关闭弹框时，如果已经onChange，或使用control自定义渲染+triggerFilterOnClose，则触发筛选
|
|
22
|
+
if (hasChanged.current
|
|
23
|
+
|| ('control' in columnFilterProps && columnFilterProps.triggerFilterOnClose)) {
|
|
19
24
|
formRef.current.submit().then();
|
|
25
|
+
hasChanged.current = false;
|
|
20
26
|
}
|
|
21
27
|
}, [open]);
|
|
22
28
|
return (_jsxs(_Fragment, { children: [_jsx(FormItem, { field: columnKey, children: 'control' in columnFilterProps
|
|
23
29
|
? columnFilterProps.control
|
|
24
30
|
: _jsx(FilterOptions, { ...columnFilterProps, onChange: () => {
|
|
31
|
+
hasChanged.current = true;
|
|
25
32
|
columnFilterProps.multiple === false && setOpen(false);
|
|
26
33
|
} }) }), columnFilterProps.showResetButton !== false &&
|
|
27
34
|
_jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
|