@linzjs/step-ag-grid 1.4.9 → 1.5.0
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/index.d.ts +2 -1
- package/dist/index.js +2268 -2238
- package/dist/index.js.map +1 -1
- package/dist/src/components/gridForm/GridFormDropDown.d.ts +1 -0
- package/dist/src/react-menu3/components/MenuHeader.d.ts +3 -3
- package/dist/src/react-menu3/positionUtils/positionMenu.d.ts +1 -1
- package/dist/src/react-menu3/types.d.ts +8 -1
- package/dist/step-ag-grid.esm.js +2271 -2241
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -2
- package/src/components/gridForm/GridFormDropDown.tsx +18 -1
- package/src/react-menu3/components/ControlledMenu.tsx +1 -1
- package/src/react-menu3/components/MenuHeader.tsx +5 -2
- package/src/react-menu3/positionUtils/positionMenu.ts +1 -1
- package/src/react-menu3/types.ts +9 -1
- package/src/stories/components/GridPopoutEditDropDown.stories.tsx +24 -0
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@linzjs/step-ag-grid",
|
|
3
3
|
"repository": "github:linz/step-ag-grid.git",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.5.0",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"typings": "dist/index.d.ts",
|
|
8
8
|
"module": "dist/step-ag-grid.esm.js",
|
|
@@ -29,7 +29,6 @@
|
|
|
29
29
|
"ag-grid-react": ">=27",
|
|
30
30
|
"debounce-promise": "^3.1.2",
|
|
31
31
|
"lodash-es": "^4.17.21",
|
|
32
|
-
"prop-types": "^15.8.1",
|
|
33
32
|
"react": ">=17",
|
|
34
33
|
"react-dom": ">=17",
|
|
35
34
|
"react-transition-state": "^1.1.5",
|
|
@@ -31,6 +31,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
|
|
|
31
31
|
filtered?: "local" | "reload";
|
|
32
32
|
filterPlaceholder?: string;
|
|
33
33
|
onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
|
|
34
|
+
onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType, string>) => Promise<void>;
|
|
34
35
|
options:
|
|
35
36
|
| SelectOption<ValueType>[]
|
|
36
37
|
| ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
|
|
@@ -66,6 +67,19 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
|
|
|
66
67
|
[formProps, props.field, props.selectedRows, updatingCells],
|
|
67
68
|
);
|
|
68
69
|
|
|
70
|
+
const selectFilterHandler = useCallback(
|
|
71
|
+
async (value: string): Promise<boolean> => {
|
|
72
|
+
const field = props.field;
|
|
73
|
+
return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
|
|
74
|
+
if (formProps.onSelectFilter) {
|
|
75
|
+
await formProps.onSelectFilter({ selectedRows, value });
|
|
76
|
+
}
|
|
77
|
+
return true;
|
|
78
|
+
});
|
|
79
|
+
},
|
|
80
|
+
[formProps, props.field, props.selectedRows, updatingCells],
|
|
81
|
+
);
|
|
82
|
+
|
|
69
83
|
// Load up options list if it's async function
|
|
70
84
|
useEffect(() => {
|
|
71
85
|
if (options || optionsInitialising.current) return;
|
|
@@ -140,13 +154,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
|
|
|
140
154
|
if (activeOptions.length == 1) {
|
|
141
155
|
await selectItemHandler(activeOptions[0].value);
|
|
142
156
|
stopEditing();
|
|
157
|
+
} else if (formProps.onSelectFilter) {
|
|
158
|
+
await selectFilterHandler(filter);
|
|
159
|
+
stopEditing();
|
|
143
160
|
} else {
|
|
144
161
|
e.preventDefault();
|
|
145
162
|
e.stopPropagation();
|
|
146
163
|
}
|
|
147
164
|
}
|
|
148
165
|
},
|
|
149
|
-
[filteredValues, options, selectItemHandler, stopEditing],
|
|
166
|
+
[filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, formProps],
|
|
150
167
|
);
|
|
151
168
|
|
|
152
169
|
return popoverWrapper(
|
|
@@ -236,7 +236,7 @@ export const ControlledMenuFr = (
|
|
|
236
236
|
</div>
|
|
237
237
|
);
|
|
238
238
|
|
|
239
|
-
if (portal === true && anchorRef?.current
|
|
239
|
+
if (portal === true && anchorRef?.current != null) {
|
|
240
240
|
portal = { target: anchorRef.current.ownerDocument.body } as PortalFieldType;
|
|
241
241
|
}
|
|
242
242
|
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { memo, forwardRef, ForwardedRef } from "react";
|
|
2
2
|
import { useBEM } from "../hooks";
|
|
3
3
|
import { menuClass, menuHeaderClass } from "../utils";
|
|
4
|
-
import {
|
|
4
|
+
import { BasePropsWithChildren } from "../types";
|
|
5
5
|
|
|
6
|
-
export const MenuHeaderFr = (
|
|
6
|
+
export const MenuHeaderFr = (
|
|
7
|
+
{ className, ...restProps }: BasePropsWithChildren,
|
|
8
|
+
externalRef: ForwardedRef<HTMLLIElement>,
|
|
9
|
+
) => {
|
|
7
10
|
return (
|
|
8
11
|
<li
|
|
9
12
|
role="presentation"
|
|
@@ -8,7 +8,7 @@ interface positionMenuProps {
|
|
|
8
8
|
offsetX: number;
|
|
9
9
|
offsetY: number;
|
|
10
10
|
arrowRef: MutableRefObject<HTMLDivElement | null>;
|
|
11
|
-
anchorRef: MutableRefObject<
|
|
11
|
+
anchorRef: MutableRefObject<Element | null>;
|
|
12
12
|
arrow?: boolean;
|
|
13
13
|
direction: MenuDirection;
|
|
14
14
|
position: "auto" | "anchor" | "initial";
|
package/src/react-menu3/types.ts
CHANGED
|
@@ -31,6 +31,14 @@ export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTML
|
|
|
31
31
|
className?: ClassNameProp<M>;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
|
|
35
|
+
ref?: React.Ref<any>;
|
|
36
|
+
/**
|
|
37
|
+
* Can be a string or a function which receives a modifier object and returns a CSS `class` string.
|
|
38
|
+
*/
|
|
39
|
+
className?: ClassNameProp<M>;
|
|
40
|
+
}
|
|
41
|
+
|
|
34
42
|
export interface Event {
|
|
35
43
|
/**
|
|
36
44
|
* The `value` prop passed to the `MenuItem` being clicked.
|
|
@@ -397,7 +405,7 @@ export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
|
|
|
397
405
|
*
|
|
398
406
|
* *Don't set this prop for context menu*
|
|
399
407
|
*/
|
|
400
|
-
anchorRef?: React.
|
|
408
|
+
anchorRef?: React.RefObject<Element>;
|
|
401
409
|
skipOpen?: React.MutableRefObject<boolean>;
|
|
402
410
|
/**
|
|
403
411
|
* If `true`, the menu list element will gain focus after menu is open.
|
|
@@ -44,6 +44,7 @@ interface ITestRow {
|
|
|
44
44
|
position2: string | null;
|
|
45
45
|
position3: string | null;
|
|
46
46
|
position4: ICode | null;
|
|
47
|
+
code: string | null;
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
interface ICode {
|
|
@@ -177,6 +178,27 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
|
|
|
177
178
|
}),
|
|
178
179
|
},
|
|
179
180
|
}),
|
|
181
|
+
GridPopoverEditDropDown<ITestRow, ICode>({
|
|
182
|
+
field: "code",
|
|
183
|
+
initialWidth: 65,
|
|
184
|
+
maxWidth: 150,
|
|
185
|
+
headerName: "Filter Selectable",
|
|
186
|
+
valueGetter: (params) => params.data.code,
|
|
187
|
+
cellEditorParams: {
|
|
188
|
+
multiEdit: true,
|
|
189
|
+
filtered: "local",
|
|
190
|
+
filterPlaceholder: "Filter this",
|
|
191
|
+
options: optionsObjects.map((o) => {
|
|
192
|
+
return { value: o, label: o.desc, disabled: false };
|
|
193
|
+
}),
|
|
194
|
+
onSelectedItem: async (selected) => {
|
|
195
|
+
selected.selectedRows.forEach((row) => (row.code = selected.value.code));
|
|
196
|
+
},
|
|
197
|
+
onSelectFilter: async (selected) => {
|
|
198
|
+
selected.selectedRows.forEach((row) => (row.code = selected.value));
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
}),
|
|
180
202
|
] as ColDef[],
|
|
181
203
|
[optionsFn, optionsObjects],
|
|
182
204
|
);
|
|
@@ -190,6 +212,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
|
|
|
190
212
|
position2: "1",
|
|
191
213
|
position3: "Tester",
|
|
192
214
|
position4: { code: "O1", desc: "Object One" },
|
|
215
|
+
code: "O1",
|
|
193
216
|
},
|
|
194
217
|
{
|
|
195
218
|
id: 1001,
|
|
@@ -197,6 +220,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
|
|
|
197
220
|
position2: "2",
|
|
198
221
|
position3: "Developer",
|
|
199
222
|
position4: { code: "O2", desc: "Object Two" },
|
|
223
|
+
code: "O2",
|
|
200
224
|
},
|
|
201
225
|
] as ITestRow[],
|
|
202
226
|
[],
|