drf-react-by-schema 0.18.2 → 0.18.4

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.d.ts

@@ -1,5 +1,5 @@
 import { SxProps } from '@mui/material';
-import { FormFieldLayout, GenericValue, OptionsAC } from '../../utils';
+import { FormFieldLayout, GenericValue, OptionsACWithLoaders } from '../../utils';
 import { GridEnrichedBySchemaColDef } from '../../utils';
 import { DialogType, OnEditModelType } from '../../context/APIWrapperContext';
 interface SelectEditInputCellProps {
@@ -8,7 +8,7 @@ interface SelectEditInputCellProps {
     value?: GenericValue;
     column: GridEnrichedBySchemaColDef;
     type: string;
-    optionsAC: OptionsAC | null;
+    optionsAC: OptionsACWithLoaders | null;
     isIndexField: boolean;
     multiple?: boolean;
     onEditModel?: (x: OnEditModelType) => void;

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js

@@ -46,7 +46,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectEditInputCell = SelectEditInputCell;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
@@ -56,6 +56,7 @@ const utils_1 = require("../../utils");
 const DialogActions_1 = __importDefault(require("../DialogActions"));
 const filter = (0, Autocomplete_1.createFilterOptions)();
 function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple = false, onEditModel, fieldsLayout, sx = {}, setDialog, }) {
+    const [loadedOptionsAC, setLoadedOptionsAC] = (0, react_1.useState)(null);
     // TODO: allow edit option label, as in formautocomplete!
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
     const handleChange = (newValue) => __awaiter(this, void 0, void 0, function* () {
@@ -119,7 +120,21 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
             },
         };
     }
-    return (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: field, id: field, value: value, options: optionsAC && optionsAC[field] ? optionsAC[field] : [], selectOnFocus: true, autoHighlight: true, multiple: multiple, isOptionEqualToValue: (option, value) => {
+    (0, react_1.useEffect)(() => {
+        if (!optionsAC || !(field in optionsAC)) {
+            return;
+        }
+        const thisOptions = optionsAC[field];
+        if (Array.isArray(thisOptions)) {
+            setLoadedOptionsAC(Object.assign(Object.assign({}, loadedOptionsAC), { [field]: thisOptions }));
+            return;
+        }
+        thisOptions().then((newOptions) => setLoadedOptionsAC(Object.assign(Object.assign({}, loadedOptionsAC), { [field]: newOptions })));
+    }, [optionsAC, field]);
+    if (loadedOptionsAC === null) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    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) => {
             return option[labelKey] === value[labelKey];
         }, getOptionLabel: (option) => {
             return option ? option[labelKey] : '';

package/dist/utils.d.ts

@@ -10,6 +10,7 @@ export type Id = string | number | null;
 export type GenericValue = any;
 export type Item = Record<string, GenericValue>;
 export type OptionsAC = Record<string, Item[]>;
+export type OptionsACWithLoaders = Record<string, Item[] | (() => Promise<Item[]>)>;
 export type PaginatedResult = {
     count: number;
     next: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",