drf-react-by-schema 0.19.0 → 0.19.1

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 (5) hide show
  1. package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.d.ts +3 -3
  2. package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js +17 -13
  3. package/dist/components/DataGridBySchemaEditable.js +24 -18
  4. package/dist/components/GenericRelatedModelList.js +1 -1
  5. package/package.json +2 -2
package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SxProps } from '@mui/material';
2
- import { FormFieldLayout, GenericValue, OptionsACWithLoaders } from '../../utils';
2
+ import { FormFieldLayout, GenericValue, Item } from '../../utils';
3
3
  import { GridEnrichedBySchemaColDef } from '../../utils';
4
4
  import { DialogType, OnEditModelType } from '../../context/APIWrapperContext';
5
5
  interface SelectEditInputCellProps {
@@ -8,7 +8,7 @@ interface SelectEditInputCellProps {
8
8
  value?: GenericValue;
9
9
  column: GridEnrichedBySchemaColDef;
10
10
  type: string;
11
- optionsAC: OptionsACWithLoaders | null;
11
+ options?: Item[] | (() => Promise<Item[]>) | null;
12
12
  isIndexField: boolean;
13
13
  multiple?: boolean;
14
14
  onEditModel?: (x: OnEditModelType) => void;
@@ -16,5 +16,5 @@ interface SelectEditInputCellProps {
16
16
  sx?: SxProps;
17
17
  setDialog: (x: Partial<DialogType>) => void;
18
18
  }
19
- export declare function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple, onEditModel, fieldsLayout, sx, setDialog, }: SelectEditInputCellProps): JSX.Element;
19
+ export declare function SelectEditInputCell({ field, id, value, column, type, options, isIndexField, multiple, onEditModel, fieldsLayout, sx, setDialog, }: SelectEditInputCellProps): JSX.Element;
20
20
  export {};
package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js CHANGED
@@ -55,8 +55,8 @@ const Autocomplete_1 = __importStar(require("@mui/material/Autocomplete"));
55
55
  const utils_1 = require("../../utils");
56
56
  const DialogActions_1 = __importDefault(require("../DialogActions"));
57
57
  const filter = (0, Autocomplete_1.createFilterOptions)();
58
- function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple = false, onEditModel, fieldsLayout, sx = {}, setDialog, }) {
59
- const [loadedOptionsAC, setLoadedOptionsAC] = (0, react_1.useState)(null);
58
+ function SelectEditInputCell({ field, id, value, column, type, options, isIndexField, multiple = false, onEditModel, fieldsLayout, sx = {}, setDialog, }) {
59
+ const [loadedOptions, setLoadedOptions] = (0, react_1.useState)(null);
60
60
  // TODO: allow edit option label, as in formautocomplete!
61
61
  const apiRef = (0, x_data_grid_1.useGridApiContext)();
62
62
  const handleChange = (newValue) => __awaiter(this, void 0, void 0, function* () {
@@ -70,13 +70,13 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
70
70
  if (column.creatable) {
71
71
  creatableProps = {
72
72
  freesolo: 'true',
73
- filterOptions: (options, params) => {
74
- let filtered = filter(options, params);
73
+ filterOptions: (thisOptions, params) => {
74
+ let filtered = filter(thisOptions, params);
75
75
  const inputValue = params.inputValue ? params.inputValue : '';
76
76
  const inputValueSlug = (0, utils_1.slugify)(inputValue);
77
77
  const inputValueLength = inputValueSlug.length;
78
78
  // Suggest the creation of a new value
79
- const isExisting = options.find((option) => inputValueSlug === (0, utils_1.slugify)(option[labelKey]));
79
+ const isExisting = thisOptions.find((option) => inputValueSlug === (0, utils_1.slugify)(option[labelKey]));
80
80
  if (inputValue !== '' && !isExisting) {
81
81
  filtered.push({
82
82
  inputValue,
@@ -121,20 +121,24 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
121
121
  };
122
122
  }
123
123
  (0, react_1.useEffect)(() => {
124
- if (!optionsAC || !(field in optionsAC)) {
124
+ if (!options) {
125
125
  return;
126
126
  }
127
- const thisOptions = optionsAC[field];
128
- if (Array.isArray(thisOptions)) {
129
- setLoadedOptionsAC(Object.assign(Object.assign({}, loadedOptionsAC), { [field]: thisOptions }));
127
+ if (Array.isArray(options)) {
128
+ setLoadedOptions(options);
130
129
  return;
131
130
  }
132
- thisOptions().then((newOptions) => setLoadedOptionsAC(Object.assign(Object.assign({}, loadedOptionsAC), { [field]: newOptions })));
133
- }, [optionsAC, field]);
134
- if (loadedOptionsAC === null) {
131
+ if (!loadedOptions) {
132
+ options().then((newOptions) => setLoadedOptions(newOptions));
133
+ }
134
+ }, [field, options]);
135
+ if (!options ||
136
+ (Array.isArray(options) && options.length === 0) ||
137
+ loadedOptions === null ||
138
+ loadedOptions.length === 0) {
135
139
  return react_1.default.createElement(react_1.default.Fragment, null);
136
140
  }
137
- return (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: field, id: field, value: value, options: loadedOptionsAC[field], selectOnFocus: true, autoHighlight: true, multiple: multiple, isOptionEqualToValue: (option, value) => {
141
+ return (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: field, id: field, value: value, options: loadedOptions, selectOnFocus: true, autoHighlight: true, multiple: multiple, isOptionEqualToValue: (option, value) => {
138
142
  return option[labelKey] === value[labelKey];
139
143
  }, getOptionLabel: (option) => {
140
144
  return option ? option[labelKey] : '';
package/dist/components/DataGridBySchemaEditable.js CHANGED
@@ -103,7 +103,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
103
103
  const updateOptionsAC = () => __awaiter(void 0, void 0, void 0, function* () {
104
104
  optionsAC.current = {};
105
105
  for (const col of columns) {
106
- if (optionsACExternal && optionsACExternal[col.field]) {
106
+ if (optionsACExternal && col.field in optionsACExternal) {
107
107
  optionsAC.current[col.field] = optionsACExternal[col.field];
108
108
  continue;
109
109
  }
@@ -172,26 +172,25 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
172
172
  headerName: '',
173
173
  type: 'actions',
174
174
  getActions: ({ id }) => {
175
+ var _a;
175
176
  if (!id) {
176
177
  return [];
177
178
  }
178
- const isInEditMode = rowModesModel &&
179
- rowModesModel[id] &&
180
- rowModesModel[id].mode === x_data_grid_1.GridRowModes.Edit;
179
+ const isInEditMode = ((_a = rowModesModel === null || rowModesModel === void 0 ? void 0 : rowModesModel[id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit;
181
180
  if (isInEditMode) {
182
181
  return [
183
- react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `save_${id}`, icon: react_1.default.createElement(Check_1.default, null), label: "Salvar", onClick: handleSaveClick(id), color: "success", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }),
184
- react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `cancel_${id}`, icon: react_1.default.createElement(Undo_1.default, null), label: "Cancelar", onClick: handleCancelClick(id), color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }),
182
+ react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `save_${id}`, icon: react_1.default.createElement(Check_1.default, null), label: "Salvar", onClick: handleSaveClick(id), color: "success" }),
183
+ react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `cancel_${id}`, icon: react_1.default.createElement(Undo_1.default, null), label: "Cancelar", onClick: handleCancelClick(id), color: "inherit" }),
185
184
  ];
186
185
  }
187
186
  const actionItems = [];
188
- actions.map((action) => {
187
+ actions.forEach((action) => {
189
188
  switch (action) {
190
189
  case 'editInline':
191
- actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `editInline_${id}`, icon: actions.includes('edit') ? (react_1.default.createElement(Bolt_1.default, null)) : (react_1.default.createElement(Edit_1.default, null)), label: "Edit inline", onClick: handleEditInlineClick(id), color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }));
190
+ actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `editInline_${id}`, icon: actions.includes('edit') ? (react_1.default.createElement(Bolt_1.default, null)) : (react_1.default.createElement(Edit_1.default, null)), label: "Edit inline", onClick: handleEditInlineClick(id), color: "inherit" }));
192
191
  break;
193
192
  case 'remove':
194
- actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }));
193
+ actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error" }));
195
194
  break;
196
195
  case 'edit':
197
196
  if (!LinkComponent) {
@@ -199,7 +198,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
199
198
  break;
200
199
  }
201
200
  actionItems.push(react_1.default.createElement(LinkComponent, { key: `edit_${id}`, to: `${indexFieldBasePath}${id}`, state: stateToLink },
202
- react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Edit_1.default, null), label: "Edit", color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' })));
201
+ react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Edit_1.default, null), label: "Edit", color: "inherit", showInMenu: false })));
203
202
  break;
204
203
  case 'view':
205
204
  if (!LinkComponent) {
@@ -211,15 +210,15 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
211
210
  break;
212
211
  }
213
212
  actionItems.push(react_1.default.createElement(LinkComponent, { key: `view_${id}`, to: `${indexFieldViewBasePath}${id}`, state: stateToLink },
214
- react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Visibility_1.default, null), label: "View", color: "inherit", onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' })));
213
+ react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { icon: react_1.default.createElement(Visibility_1.default, null), label: "View", color: "inherit", showInMenu: false })));
215
214
  break;
216
215
  }
217
216
  });
218
217
  // React.ReactElement<any, string | React.JSXElementConstructor<any>>
219
218
  // React.ReactElement<any, string | React.JSXElementConstructor<any>>
220
219
  if (customActions) {
221
- customActions.map((customAction) => {
222
- actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `${customAction.key}_${id}`, icon: customAction.icon, label: customAction.label, onClick: () => customAction.handleClick(dataGrid.data.find((row) => row.id === id)), onResize: () => null, onResizeCapture: () => null, showInMenu: false, placeholder: '' }));
220
+ customActions.forEach((customAction) => {
221
+ actionItems.push(react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `${customAction.key}_${id}`, icon: customAction.icon, label: customAction.label, onClick: () => customAction.handleClick(dataGrid.data.find((row) => row.id === id)) }));
223
222
  });
224
223
  }
225
224
  return actionItems;
@@ -278,7 +277,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
278
277
  column.sortComparator = (v1, v2, param1, param2) => {
279
278
  return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2);
280
279
  };
281
- column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC.current, isIndexField: isIndexField, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts &&
280
+ column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, options: optionsAC.current && col.field in optionsAC.current
281
+ ? optionsAC.current[col.field]
282
+ : [], isIndexField: isIndexField, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts &&
282
283
  col.field in customFieldFormLayouts
283
284
  ? customFieldFormLayouts[col.field]
284
285
  : undefined, setDialog: apiContext.setDialog })));
@@ -298,7 +299,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
298
299
  : params.value.map((val) => val.label).join(', ');
299
300
  };
300
301
  column.filterable = false;
301
- column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC.current, isIndexField: isIndexField, multiple: schema[col.field].many || false, setDialog: apiContext.setDialog })));
302
+ column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, options: optionsAC.current && col.field in optionsAC.current
303
+ ? optionsAC.current[col.field]
304
+ : [], isIndexField: isIndexField, multiple: schema[col.field].many || false, setDialog: apiContext.setDialog })));
302
305
  break;
303
306
  }
304
307
  column.valueGetter = (params) => {
@@ -317,7 +320,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
317
320
  column.sortComparator = (v1, v2, param1, param2) => {
318
321
  return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.display_name, v2.display_name, param1, param2);
319
322
  };
320
- column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC.current, isIndexField: isIndexField, setDialog: apiContext.setDialog })));
323
+ column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, options: optionsAC.current && col.field in optionsAC.current
324
+ ? optionsAC.current[col.field]
325
+ : [], isIndexField: isIndexField, setDialog: apiContext.setDialog })));
321
326
  break;
322
327
  }
323
328
  column.valueGetter = (params) => {
@@ -399,7 +404,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
399
404
  if (!(0, utils_1.isTmpId)(params.id)) {
400
405
  return react_1.default.createElement(x_data_grid_1.GridEditInputCell, Object.assign({}, params));
401
406
  }
402
- return (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC.current, isIndexField: true, setDialog: apiContext.setDialog })));
407
+ return (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, options: optionsAC.current && col.field in optionsAC.current
408
+ ? optionsAC.current[col.field]
409
+ : [], isIndexField: true, setDialog: apiContext.setDialog })));
403
410
  };
404
411
  }
405
412
  }
@@ -449,7 +456,6 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
449
456
  if (!tableAutoHeight) {
450
457
  // Ugly hack to scroll to top, since scroll to cell is only available in Pro
451
458
  const el = document.querySelector(`.dataGrid_${name} .MuiDataGrid-virtualScroller`);
452
- // console.log(el, name);
453
459
  if (el) {
454
460
  el.scrollTop = 0;
455
461
  setTimeout(() => {
package/dist/components/GenericRelatedModelList.js CHANGED
@@ -78,7 +78,7 @@ function GenericRelatedModelList({ model, id, relatedModel, columnFields, hidden
78
78
  const { onEditModel, onDeleteRelatedModel, serverEndPoint } = (0, APIWrapperContext_1.useAPIWrapper)();
79
79
  const finalCustomColumnOperations = (column) => __awaiter(this, void 0, void 0, function* () {
80
80
  if (minWidthFields) {
81
- if (Object.prototype.hasOwnProperty.call(minWidthFields, column.field)) {
81
+ if (column.field in minWidthFields) {
82
82
  column.minWidth = minWidthFields[column.field];
83
83
  }
84
84
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drf-react-by-schema",
3
- "version": "0.19.0",
3
+ "version": "0.19.1",
4
4
  "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -66,7 +66,7 @@
66
66
  "@hookform/resolvers": "^2.9.10",
67
67
  "@mui/icons-material": "^5.11.0",
68
68
  "@mui/lab": "^5.0.0-alpha.112",
69
- "@mui/material": "^5.11.0",
69
+ "@mui/material": "^5.13.7",
70
70
  "@mui/x-data-grid": "^5.17.26",
71
71
  "@mui/x-date-pickers": "^6.18.1",
72
72
  "axios": "^0.27.2",