@canlooks/can-ui 0.0.146 → 0.0.148
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/dataGrid/dataGridHead.js +2 -1
- package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts +2 -0
- package/dist/cjs/components/dataGrid/filterBubbleContent.js +10 -3
- package/dist/esm/components/dataGrid/dataGridHead.js +2 -1
- package/dist/esm/components/dataGrid/filterBubbleContent.d.ts +2 -0
- package/dist/esm/components/dataGrid/filterBubbleContent.js +11 -4
- package/package.json +15 -15
|
@@ -86,7 +86,8 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
|
|
|
86
86
|
const sortable = sorter && !children?.length;
|
|
87
87
|
const isOrderingColumn = orderColumn === _key;
|
|
88
88
|
const currentOrderType = isOrderingColumn ? orderType : 'descend';
|
|
89
|
-
const
|
|
89
|
+
const filteredValue = formValue?.[_key];
|
|
90
|
+
const isFilteredColumn = !(0, utils_1.isUnset)(filteredValue) && !(Array.isArray(filteredValue) && !filteredValue.length);
|
|
90
91
|
const filterButton = ((0, jsx_runtime_1.jsx)(button_1.Button, { className: dataGrid_style_1.classes.filterButton, variant: "plain", color: isFilteredColumn ? 'primary' : 'text.placeholder', onClick: e => {
|
|
91
92
|
e.stopPropagation();
|
|
92
93
|
onFilterClick?.(_key, e);
|
|
@@ -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,16 +16,23 @@ 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: () => {
|
|
28
|
-
|
|
34
|
+
hasChanged.current = true;
|
|
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: () => {
|
|
31
38
|
formRef.current.resetField(columnKey);
|
|
@@ -83,7 +83,8 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
|
|
|
83
83
|
const sortable = sorter && !children?.length;
|
|
84
84
|
const isOrderingColumn = orderColumn === _key;
|
|
85
85
|
const currentOrderType = isOrderingColumn ? orderType : 'descend';
|
|
86
|
-
const
|
|
86
|
+
const filteredValue = formValue?.[_key];
|
|
87
|
+
const isFilteredColumn = !isUnset(filteredValue) && !(Array.isArray(filteredValue) && !filteredValue.length);
|
|
87
88
|
const filterButton = (_jsx(Button, { className: classes.filterButton, variant: "plain", color: isFilteredColumn ? 'primary' : 'text.placeholder', onClick: e => {
|
|
88
89
|
e.stopPropagation();
|
|
89
90
|
onFilterClick?.(_key, e);
|
|
@@ -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,16 +13,23 @@ 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: () => {
|
|
25
|
-
|
|
31
|
+
hasChanged.current = true;
|
|
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: () => {
|
|
28
35
|
formRef.current.resetField(columnKey);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canlooks/can-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.148",
|
|
4
4
|
"author": "C.CanLiang <canlooks@gmail.com>",
|
|
5
5
|
"description": "My ui framework",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"clean": "npx shx rm -rf dist documentation/bootstrap.mjs documentation/vite.config.mjs",
|
|
40
40
|
"build:core": "tsc -m esnext --outDir dist/esm & tsc -m commonjs --outDir dist/cjs",
|
|
41
41
|
"build:documentation": "vite build -c documentation/vite.config.mts && tsc -p documentation/tsconfig.bootstrap.json",
|
|
42
|
-
"rebuild": "npm run clean && npm run build:core
|
|
42
|
+
"rebuild": "npm run clean && npm run build:core",
|
|
43
43
|
"dev": "vite -c test/vite.config.mts",
|
|
44
44
|
"dev:ssr": "next dev test",
|
|
45
45
|
"dev:documentation": "vite -c documentation/vite.config.mts --host",
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
"@dnd-kit/core": "^6.3.1",
|
|
50
50
|
"@dnd-kit/sortable": "^10.0.0",
|
|
51
51
|
"@emotion/react": "^11.14.0",
|
|
52
|
-
"@fortawesome/free-brands-svg-icons": "^7.
|
|
53
|
-
"@fortawesome/free-regular-svg-icons": "^7.
|
|
54
|
-
"@fortawesome/free-solid-svg-icons": "^7.
|
|
55
|
-
"@fortawesome/react-fontawesome": "^3.
|
|
52
|
+
"@fortawesome/free-brands-svg-icons": "^7.2.0",
|
|
53
|
+
"@fortawesome/free-regular-svg-icons": "^7.2.0",
|
|
54
|
+
"@fortawesome/free-solid-svg-icons": "^7.2.0",
|
|
55
|
+
"@fortawesome/react-fontawesome": "^3.2.0",
|
|
56
56
|
"color": "^5.0.3",
|
|
57
57
|
"dayjs": "^1.11.19",
|
|
58
58
|
"react-transition-group": "^4.4.5",
|
|
@@ -61,24 +61,24 @@
|
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@ant-design/icons": "^6.1.0",
|
|
63
63
|
"@canlooks/react-router": "^1.1.0",
|
|
64
|
-
"@canlooks/reactive": "^4.7.
|
|
64
|
+
"@canlooks/reactive": "^4.7.15",
|
|
65
65
|
"@emotion/styled": "^11.14.1",
|
|
66
66
|
"@mdi/js": "^7.4.47",
|
|
67
67
|
"@mdi/react": "^1.6.1",
|
|
68
|
-
"@mui/icons-material": "^7.3.
|
|
69
|
-
"@types/node": "^25.
|
|
70
|
-
"@types/react": "^19.2.
|
|
68
|
+
"@mui/icons-material": "^7.3.8",
|
|
69
|
+
"@types/node": "^25.3.2",
|
|
70
|
+
"@types/react": "^19.2.14",
|
|
71
71
|
"@types/react-dom": "^19.2.3",
|
|
72
72
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
73
73
|
"@types/react-transition-group": "^4.4.12",
|
|
74
74
|
"mime": "^4.1.0",
|
|
75
|
-
"next": "^16.
|
|
76
|
-
"react": "^19.2.
|
|
77
|
-
"react-dom": "^19.2.
|
|
75
|
+
"next": "^16.1.6",
|
|
76
|
+
"react": "^19.2.4",
|
|
77
|
+
"react-dom": "^19.2.4",
|
|
78
78
|
"react-markdown": "^10.1.0",
|
|
79
|
-
"react-syntax-highlighter": "^16.1.
|
|
79
|
+
"react-syntax-highlighter": "^16.1.1",
|
|
80
80
|
"remark-gfm": "^4.0.1",
|
|
81
81
|
"typescript": "^5.9.3",
|
|
82
|
-
"vite": "^7.3.
|
|
82
|
+
"vite": "^7.3.1"
|
|
83
83
|
}
|
|
84
84
|
}
|