@azrico/reactgrid 1.1.7 → 1.1.8
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/src/views/DataGrid.js +25 -26
- package/package.json +1 -1
- package/src/views/DataGrid.tsx +35 -29
|
@@ -122,6 +122,30 @@ function DataGrid(props) {
|
|
|
122
122
|
const gridRef = _react.default.useRef(null);
|
|
123
123
|
const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
|
|
124
124
|
const [menuRow, set_menuRow] = _react.default.useState(null);
|
|
125
|
+
/* --------------------------------- events --------------------------------- */
|
|
126
|
+
const onRowContextMenu = (0, _react.useCallback)((rowProps, event) => {
|
|
127
|
+
if (_helpers.func_selection.has_selection()) return;
|
|
128
|
+
update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
|
|
129
|
+
update_menuRow(rowProps.data);
|
|
130
|
+
event.preventDefault();
|
|
131
|
+
}, []);
|
|
132
|
+
const onRowClick = (0, _react.useCallback)((rowProps, event) => {
|
|
133
|
+
props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
134
|
+
}, []);
|
|
135
|
+
const onRowDoubleClick = _react.default.useCallback((event, rowProps) => {
|
|
136
|
+
props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
|
|
137
|
+
}, []);
|
|
138
|
+
/* ------------------------------- ContextMenu ------------------------------ */
|
|
139
|
+
const update_menuAnchorEl = _react.default.useCallback(el => {
|
|
140
|
+
if (!el) {
|
|
141
|
+
set_menuAnchorEl(el);
|
|
142
|
+
} else if (menuAnchorEl) set_menuAnchorEl(null);
|
|
143
|
+
}, []);
|
|
144
|
+
const update_menuRow = _react.default.useCallback(r => {
|
|
145
|
+
if (!r) {
|
|
146
|
+
set_menuRow(r);
|
|
147
|
+
} else if (menuRow) set_menuRow(null);
|
|
148
|
+
}, []);
|
|
125
149
|
/* -------------------------------------------------------------------------- */
|
|
126
150
|
/* Create the grid */
|
|
127
151
|
/* -------------------------------------------------------------------------- */
|
|
@@ -147,7 +171,7 @@ function DataGrid(props) {
|
|
|
147
171
|
...events,
|
|
148
172
|
...extra_ops
|
|
149
173
|
};
|
|
150
|
-
}, [columns, props.allowChildRows, props.RowDetail]);
|
|
174
|
+
}, [columns, props.allowChildRows, props.RowDetail, onRowClick, onRowDoubleClick, onRowContextMenu]);
|
|
151
175
|
const static_gridOptions = _react.default.useMemo(() => {
|
|
152
176
|
return {
|
|
153
177
|
...base_gridOptions,
|
|
@@ -162,31 +186,6 @@ function DataGrid(props) {
|
|
|
162
186
|
});
|
|
163
187
|
return res;
|
|
164
188
|
}, dynamic_option_names.map(r => props[r]));
|
|
165
|
-
/* --------------------------------- events --------------------------------- */
|
|
166
|
-
const onRowContextMenu = (0, _react.useCallback)((rowProps, event) => {
|
|
167
|
-
if (_helpers.func_selection.has_selection()) return;
|
|
168
|
-
update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
|
|
169
|
-
update_menuRow(rowProps.data);
|
|
170
|
-
event.preventDefault();
|
|
171
|
-
}, []);
|
|
172
|
-
const onRowClick = (0, _react.useCallback)((rowProps, event) => {
|
|
173
|
-
props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
174
|
-
}, []);
|
|
175
|
-
const onRowDoubleClick = _react.default.useCallback((event, rowProps) => {
|
|
176
|
-
props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
|
|
177
|
-
}, []);
|
|
178
|
-
/* ------------------------------- ContextMenu ------------------------------ */
|
|
179
|
-
const update_menuAnchorEl = _react.default.useCallback(el => {
|
|
180
|
-
if (!el) {
|
|
181
|
-
set_menuAnchorEl(el);
|
|
182
|
-
} else if (menuAnchorEl) set_menuAnchorEl(null);
|
|
183
|
-
}, []);
|
|
184
|
-
const update_menuRow = _react.default.useCallback(r => {
|
|
185
|
-
if (!r) {
|
|
186
|
-
set_menuRow(r);
|
|
187
|
-
} else if (menuRow) set_menuRow(null);
|
|
188
|
-
}, []);
|
|
189
|
-
/* -------------------------------------------------------------------------- */
|
|
190
189
|
// const { width, height, ref: resize_ref } = useResizeDetector();
|
|
191
190
|
return _react.default.createElement("div", {
|
|
192
191
|
className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
|
package/package.json
CHANGED
package/src/views/DataGrid.tsx
CHANGED
|
@@ -224,6 +224,33 @@ function DataGrid(props: DataGridProps) {
|
|
|
224
224
|
const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
|
|
225
225
|
const [menuRow, set_menuRow] = React.useState<any>(null);
|
|
226
226
|
|
|
227
|
+
/* --------------------------------- events --------------------------------- */
|
|
228
|
+
|
|
229
|
+
const onRowContextMenu = useCallback((rowProps, event) => {
|
|
230
|
+
if (func_selection.has_selection()) return;
|
|
231
|
+
update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
|
|
232
|
+
update_menuRow(rowProps.data);
|
|
233
|
+
event.preventDefault();
|
|
234
|
+
}, []);
|
|
235
|
+
const onRowClick = useCallback((rowProps, event) => {
|
|
236
|
+
props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
237
|
+
}, []);
|
|
238
|
+
const onRowDoubleClick = React.useCallback((event, rowProps) => {
|
|
239
|
+
props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
|
|
240
|
+
}, []);
|
|
241
|
+
|
|
242
|
+
/* ------------------------------- ContextMenu ------------------------------ */
|
|
243
|
+
const update_menuAnchorEl = React.useCallback((el) => {
|
|
244
|
+
if (!el) {
|
|
245
|
+
set_menuAnchorEl(el);
|
|
246
|
+
} else if (menuAnchorEl) set_menuAnchorEl(null);
|
|
247
|
+
}, []);
|
|
248
|
+
const update_menuRow = React.useCallback((r) => {
|
|
249
|
+
if (!r) {
|
|
250
|
+
set_menuRow(r);
|
|
251
|
+
} else if (menuRow) set_menuRow(null);
|
|
252
|
+
}, []);
|
|
253
|
+
|
|
227
254
|
/* -------------------------------------------------------------------------- */
|
|
228
255
|
/* Create the grid */
|
|
229
256
|
/* -------------------------------------------------------------------------- */
|
|
@@ -246,7 +273,14 @@ function DataGrid(props: DataGridProps) {
|
|
|
246
273
|
theme: dark ? 'amber-dark' : 'default-light',
|
|
247
274
|
};
|
|
248
275
|
return { ...defaultOptions, ...events, ...extra_ops };
|
|
249
|
-
}, [
|
|
276
|
+
}, [
|
|
277
|
+
columns,
|
|
278
|
+
props.allowChildRows,
|
|
279
|
+
props.RowDetail,
|
|
280
|
+
onRowClick,
|
|
281
|
+
onRowDoubleClick,
|
|
282
|
+
onRowContextMenu,
|
|
283
|
+
]);
|
|
250
284
|
|
|
251
285
|
const static_gridOptions = React.useMemo<GridOptions>(() => {
|
|
252
286
|
return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
|
|
@@ -263,34 +297,6 @@ function DataGrid(props: DataGridProps) {
|
|
|
263
297
|
dynamic_option_names.map((r) => props[r])
|
|
264
298
|
);
|
|
265
299
|
|
|
266
|
-
/* --------------------------------- events --------------------------------- */
|
|
267
|
-
|
|
268
|
-
const onRowContextMenu = useCallback((rowProps, event) => {
|
|
269
|
-
if (func_selection.has_selection()) return;
|
|
270
|
-
update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
|
|
271
|
-
update_menuRow(rowProps.data);
|
|
272
|
-
event.preventDefault();
|
|
273
|
-
}, []);
|
|
274
|
-
const onRowClick = useCallback((rowProps, event) => {
|
|
275
|
-
props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
276
|
-
}, []);
|
|
277
|
-
const onRowDoubleClick = React.useCallback((event, rowProps) => {
|
|
278
|
-
props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
|
|
279
|
-
}, []);
|
|
280
|
-
|
|
281
|
-
/* ------------------------------- ContextMenu ------------------------------ */
|
|
282
|
-
const update_menuAnchorEl = React.useCallback((el) => {
|
|
283
|
-
if (!el) {
|
|
284
|
-
set_menuAnchorEl(el);
|
|
285
|
-
} else if (menuAnchorEl) set_menuAnchorEl(null);
|
|
286
|
-
}, []);
|
|
287
|
-
const update_menuRow = React.useCallback((r) => {
|
|
288
|
-
if (!r) {
|
|
289
|
-
set_menuRow(r);
|
|
290
|
-
} else if (menuRow) set_menuRow(null);
|
|
291
|
-
}, []);
|
|
292
|
-
|
|
293
|
-
/* -------------------------------------------------------------------------- */
|
|
294
300
|
// const { width, height, ref: resize_ref } = useResizeDetector();
|
|
295
301
|
|
|
296
302
|
return (
|