drf-react-by-schema 0.1.0 → 0.2.1

package/src/components/DataGridBySchemaEditable.tsx

@@ -1,48 +1,21 @@
-import React, { useEffect, useState, useReducer, useRef } from 'react';
-import moment from 'moment';
+import React, { useEffect, useState, useRef, forwardRef } from 'react';
+// import moment from 'moment';
 // import Mask from 'string-mask';
 import {
-    GridApi,
     DataGrid,
     GridEditInputCell,
     GridRowModes,
-    GridToolbarContainer,
-    GridToolbarColumnsButton,
-    GridToolbarFilterButton,
-    GridToolbarDensitySelector,
-    GridToolbarExport,
-    GridToolbarQuickFilter,
-    GridFooter,
-    GridFooterContainer,
     GridActionsCellItem,
     gridVisibleSortedRowIdsSelector,
-    useGridApiContext,
-    gridStringOrNumberComparator,
-    getGridNumericOperators,
-    getGridDateOperators,
-    GridFilterOperator
+    gridStringOrNumberComparator
 } from '@mui/x-data-grid';
 import * as Yup from 'yup';
-import { Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
-import TextField from '@mui/material/TextField';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import SyncIcon from '@mui/icons-material/Sync';
-import ExpandIcon from '@mui/icons-material/Expand';
-import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
 import ClearIcon from '@mui/icons-material/Clear';
 import CheckIcon from '@mui/icons-material/Check';
 import UndoIcon from '@mui/icons-material/Undo';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import { NumericFormat, PatternFormat } from 'react-number-format';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
 
@@ -50,700 +23,59 @@ import { Layout } from '../styles';
 import { getAutoComplete } from '../api';
 import {
     Item,
-    Schema,
+    SchemaType,
     Choice,
     Id,
     GridEnrichedBySchemaColDef,
-    reducer,
-    getTmpId,
     isTmpId,
     emptyByType,
     buildGenericYupValidationSchema
 } from '../utils';
 import { SxProps } from '@mui/material';
 import { ObjectShape } from 'yup/lib/object';
+import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+import { quantityOnlyOperators } from './DataGridBySchemaEditable/utils';
+import { CustomToolbar } from './DataGridBySchemaEditable/CustomToolbar';
+import { SelectEditInputCell } from './DataGridBySchemaEditable/SelectEditInputCell';
+import { GridDecimalInput } from './DataGridBySchemaEditable/GridDecimalInput';
+import { GridPatternInput } from './DataGridBySchemaEditable/GridPatternInput';
+import { FooterToolbar } from './DataGridBySchemaEditable/FooterToolbar';
+import { ConfirmDialog } from './DataGridBySchemaEditable/ConfirmDialog';
 
-const filter = createFilterOptions();
 const stringMask = require('string-mask');
-
-// returns width of the biggest row inside a column
-function maxOfCol (colIndex: number) {
-    const invisibleContainer = document.createElement('div');
-
-    invisibleContainer.style.visibility = 'hidden';
-    invisibleContainer.style.zIndex = '-9999999999';
-    invisibleContainer.style.position = 'absolute';
-    invisibleContainer.style.fontSize = '14px';
-    invisibleContainer.style.top = '0';
-    invisibleContainer.style.left = '0';
-    document.body.append(invisibleContainer);
-    const widths: any[] = [];
-    document.querySelectorAll(
-        `[aria-colindex='${colIndex}']`
-    ).forEach(cell => {
-        const invisibleCell = document.createElement('div');
-        invisibleCell.innerHTML = cell.innerHTML;
-        invisibleCell.style.width = 'max-content';
-        invisibleCell.style.maxWidth = 'none';
-        invisibleCell.style.minWidth = 'none';
-        invisibleContainer.append(invisibleCell);
-        widths.push(Math.ceil(invisibleCell.clientWidth));
-    });
-    let max = Math.max(...widths);
-    if (max !== 0 && max < 50) {
-        max = 50;
-    }
-    invisibleContainer.remove();
-    return max;
-}
-
-type ResizeType = 'condense' | 'maxContent' | 'fitScreen';
-
-function resizeColumns (
-    columns: GridEnrichedBySchemaColDef[],
-    resizeType: ResizeType,
-    apiRef: React.MutableRefObject<GridApi>
-) {
-    const cols = [...columns];
-    cols.forEach((col, index: number) => {
-        if (resizeType === 'fitScreen') {
-            delete col.width;
-            col.minWidth = 80;
-            if (col.isIndexField) {
-                col.flex = 1;
-            }
-        } else if (resizeType === 'maxContent') {
-            const maxColWidth = maxOfCol(index);
-            delete col.flex;
-            delete col.minWidth;
-            col.width = maxColWidth + 22;
-        } else {
-            col.width = 0;
-        }
-    });
-    return cols;
-}
-
-type CustomToolbarProps = {
-    preparedColumns: GridEnrichedBySchemaColDef[],
-    setPreparedColumns: (p:null | GridEnrichedBySchemaColDef[]) => void
-};
-const CustomToolbar = ({
-    preparedColumns,
-    setPreparedColumns
-}:CustomToolbarProps) => {
-    const apiRef = useGridApiContext();
-    const [resizeMenuAnchorEl, setResizeMenuAnchorEl] = useState<any>(null);
-    const isResizeMenuOpen = Boolean(resizeMenuAnchorEl);
-    const openResizeMenu = (event:React.MouseEvent) => {
-        setResizeMenuAnchorEl(event.currentTarget);
-    };
-    const closeResizeMenu = () => {
-        setResizeMenuAnchorEl(null);
-    };
-    return (
-        <GridToolbarContainer sx={{ justifyContent: 'space-between' }}>
-            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-                <GridToolbarColumnsButton sx={{ ml: '10px', fontSize: '13px' }} />
-                <GridToolbarFilterButton sx={{ ml: '10px', fontSize: '13px' }} />
-                <GridToolbarDensitySelector sx={{ ml: '10px', fontSize: '13px' }} />
-                <Button onClick={openResizeMenu} sx={{ ml: '0px', fontSize: '13px' }}>
-                    <ExpandIcon sx={{ transform: 'rotate(90deg)', mr: '6px' }} />
-                    Ajustar
-                </Button>
-                <Menu
-                    anchorEl={resizeMenuAnchorEl}
-                    open={isResizeMenuOpen}
-                    onClose={closeResizeMenu}
-                >
-                    <MenuItem
-                        onClick={() => {
-                            closeResizeMenu();
-                            setPreparedColumns(resizeColumns(
-                                preparedColumns,
-                                'fitScreen',
-                                apiRef
-                            ));
-                        }}
-                    >
-                        Ajustar à tela
-                    </MenuItem>
-                    <MenuItem
-                        onClick={() => {
-                            closeResizeMenu();
-                            setPreparedColumns(resizeColumns(
-                                preparedColumns,
-                                'maxContent',
-                                apiRef
-                            ));
-                        }}
-                    >
-                        Ajustar ao conteúdo
-                    </MenuItem>
-                </Menu>
-                <GridToolbarExport sx={{ ml: '0px', fontSize: '13px' }} />
-            </div>
-            <div>
-                <GridToolbarQuickFilter />
-            </div>
-        </GridToolbarContainer>
-    );
-};
-
-type SelectEditInputCellProps = {
-    field: string,
-    id: number | string,
-    value?: any,
-    column: GridEnrichedBySchemaColDef,
-    type: string,
-    optionsAC: { current: Record<string, Item[]> | null },
-    isIndexField: boolean,
-    multiple?: boolean,
-    sx?: SxProps
-};
-function SelectEditInputCell ({
-    id,
-    value,
-    field,
-    column,
-    type,
-    optionsAC,
-    isIndexField,
-    multiple = false,
-    sx = {}
-}: SelectEditInputCellProps) {
-    // TODO: allow edit option label, as in formautocomplete!
-    const apiRef = useGridApiContext();
-
-    const handleChange = async (newValue:any) => {
-        await apiRef.current.setEditCellValue({ id, field, value: newValue });
-        apiRef.current.stopCellEditMode({ id, field });
-    };
-
-    const labelKey = (['field', 'nested object'].includes(type) || isIndexField)
-        ? 'label'
-        : 'display_name';
-    const valueKey = (['field', 'nested object'].includes(type) || isIndexField)
-        ? 'id'
-        : 'value';
-
-    let creatableProps = {};
-    if (column.creatable || isIndexField) {
-        creatableProps = {
-            freesolo: 'true',
-            filterOptions: (options:Record<string, any>[], params:any) => {
-                const filtered = filter(options, params);
-                const inputValue = (params.inputValue)
-                    ? params.inputValue
-                    : '';
-                const inputValueLower = inputValue.trim().toLowerCase();
-                // Suggest the creation of a new value
-                const isExisting = options.some(option => inputValueLower === option[labelKey].trim().toLowerCase());
-                if (inputValue !== '' && !isExisting) {
-                    filtered.push({
-                        inputValue,
-                        [labelKey]: `Criar "${inputValue}"`
-                    });
-                }
-                return filtered;
-            },
-            handleHomeEndKeys: true,
-            getOptionLabel: (option:string | Record<string, any>) => {
-                // Value selected with enter, right from the input
-                if (typeof option === 'string') {
-                    return option;
-                }
-                // Criar "xxx" option created dynamically
-                if (option.inputValue) {
-                    return option.inputValue;
-                }
-                // Regular option
-                return option[labelKey];
-            },
-            renderOption: (props:any, option:Record<string, any>) => {
-                return (<li key={option[valueKey]} {...props}>{option[labelKey]}</li>);
-            }
-        };
-    };
-
-    return (
-        <Autocomplete
-            key={field}
-            id={field}
-            value={value}
-            options={optionsAC.current && optionsAC.current[field] ? optionsAC.current[field] : []}
-            selectOnFocus
-            autoHighlight
-            multiple={multiple}
-            isOptionEqualToValue={(option, value) => {
-                return (option[labelKey] === value[labelKey]);
-            }}
-            getOptionLabel={(option) => {
-                return option[labelKey];
-            }}
-            onChange={(e, value) => {
-                if (!column.creatable && !isIndexField) {
-                    handleChange(value);
-                    return;
-                }
-                let newValue = value;
-                if (typeof newValue === 'string') {
-                    const tmpId = getTmpId();
-                    newValue = {
-                        [valueKey]: tmpId,
-                        [labelKey]: newValue
-                    };
-                }
-                if (newValue && newValue.inputValue) {
-                    const tmpId = getTmpId();
-                    newValue = {
-                        [valueKey]: tmpId,
-                        [labelKey]: newValue.inputValue
-                    };
-                }
-                handleChange(newValue);
-            }}
-            fullWidth
-            renderInput={params => (
-                <TextField
-                    {...params}
-                    sx={sx}
-                />
-            )}
-
-            {...creatableProps}
-        />
-    );
-}
-
-type GridDecimalInputProps = {
-    field: string,
-    id: number | string,
-    value?: any,
-    column: object
-};
-function GridDecimalInput ({
-    id,
-    value,
-    field
-}:GridDecimalInputProps) {
-    const apiRef = useGridApiContext();
-    const decimalScale = 2;
-    const disableCurrency = true;
-    const handleChange = async (newValue:any) => {
-        await apiRef.current.setEditCellValue({ id, field, value: newValue });
-        apiRef.current.stopCellEditMode({ id, field });
-    };
-    return (
-        <NumericFormat
-            key={field}
-            id={field}
-            onValueChange={(values, sourceInfo) => {
-                handleChange(values.value);
-            }}
-            value={value}
-            thousandSeparator='.'
-            decimalSeparator=','
-            decimalScale={decimalScale}
-            fixedDecimalScale={true}
-            valueIsNumericString
-            prefix={disableCurrency ? '' : 'R$ '}
-            customInput={TextField}
-        />
-    );
-}
-
-type GridPatternInputProps = {
-    field: string,
-    id: number | string,
-    value?: any,
-    patternFormat?: string
+const moment = require('moment');
+
+interface DataGridBySchemaEditableProps {
+    schema: SchemaType;
+    data: Item[];
+    columns: GridEnrichedBySchemaColDef[];
+    model: string;
+    fieldKey?: string;
+    labelKey?: string;
+    index?: number;
+    name?: string;
+    indexField?: string;
+    addExistingModel?: string;
+    indexFieldMinWidth?: number;
+    indexFieldBasePath?: string;
+    stateToLink?: object;
+    minWidth?: number;
+    onEditRelatedModelSave?: (p: any) => Id | { data: Item } | { errors: Item };
+    onDeleteRelatedModel?: (p: any) => any;
+    customColumnOperations?: (p: any) => GridEnrichedBySchemaColDef;
+    customLinkDestination?: (p: any) => string;
+    LinkComponent?: any;
+    onProcessRow?: (p: any) => void;
+    onDataChange?: (p: any) => void;
+    isEditable?: boolean;
+    sx?: SxProps;
+    isAutoHeight?: boolean;
+    defaultValues?: Item;
+    hideFooterPagination?: boolean;
+    setVisibleRows?: (p: any) => void;
 };
-function GridPatternInput ({
-    id,
-    value,
-    field,
-    patternFormat = 'cpf'
-}:GridPatternInputProps) {
-    const apiRef = useGridApiContext();
-    const handleChange = async (newValue:any) => {
-        await apiRef.current.setEditCellValue({ id, field, value: newValue });
-        apiRef.current.stopCellEditMode({ id, field });
-    };
-    return (
-        <PatternFormat
-            key={field}
-            id={field}
-            onValueChange={(values, sourceInfo) => {
-                handleChange(values.value);
-            }}
-            value={value}
-            valueIsNumericString
-            format={patternFormat}
-            mask="_"
-            customInput={TextField}
-        />
-    );
-}
 
-type FooterToolbarProps = {
-    name: string,
-    setRowModesModel: (p:any) => any,
-    dataGrid: { data:Record<string, any>[] },
-    setDataGrid: (p:any) => any,
-    emptyItem: { current:Record<string, any> },
-    indexField: string,
-    isEditable: boolean
-};
-function FooterToolbar ({
-    name,
-    setRowModesModel,
-    dataGrid,
-    setDataGrid,
-    emptyItem,
-    indexField,
-    isEditable
-}:FooterToolbarProps) {
-    const handleClick = () => {
-        const id = getTmpId();
-        emptyItem.current.id = id;
-        const newData = [
-            { ...emptyItem.current },
-            ...dataGrid.data
-        ];
-        setDataGrid({
-            data: newData
-        });
-        setRowModesModel((oldModel:any) => ({
-            ...oldModel,
-            [id]: { mode: GridRowModes.Edit, fieldToFocus: indexField }
-        }));
-        // Ugly hack to scroll to top, since scroll to cell is only available in Pro
-        const el = document.querySelector(`.dataGrid_${name} .MuiDataGrid-virtualScroller`);
-        // console.log(el, name);
-        if (el) {
-            el.scrollTop = 0;
-            setTimeout(() => {
-                el.scrollTop = 0;
-            }, 10);
-        }
-    };
-
-    return (
-        <GridFooterContainer>
-            {isEditable &&
-                <Button
-                    color="primary"
-                    startIcon={<AddIcon />}
-                    onClick={handleClick}
-                    sx={{ ml: 2 }}
-                >
-                    Adicionar
-                </Button>
-            }
-            <GridFooter
-                sx={
-                    (isEditable)
-                        ? { border: 'none' }
-                        : { width: '100%' }
-                }
-            />
-        </GridFooterContainer>
-    );
-}
-
-
-// FILTROS "ENTRE":
-
-const SUBMIT_FILTER_STROKE_TIME = 500;
-type InputIntervalProps = {
-    applyValue: (p: any) => void,
-    focusElementRef?: null | ((p: any) => void) | {
-        current: any
-    },
-    item: {
-        columnField: string,
-        id: number | string,
-        operatorValue: string,
-        value: any
-    },
-    type: string
-};
-function InputInterval ({
-    item,
-    applyValue,
-    focusElementRef = null,
-    type
-}:InputIntervalProps) {
-    const filterTimeout = useRef<any>();
-    const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
-
-    const [applying, setIsApplying] = React.useState(false);
-
-    React.useEffect(() => {
-        return () => {
-            clearTimeout(filterTimeout.current);
-        };
-    }, []);
-
-    React.useEffect(() => {
-        const itemValue = item.value ?? [undefined, undefined];
-        setFilterValueState(itemValue);
-    }, [item.value]);
-
-    const updateFilterValue = (lowerBound:any, upperBound:any) => {
-        clearTimeout(filterTimeout.current);
-        setFilterValueState([lowerBound, upperBound]);
-
-        setIsApplying(true);
-        filterTimeout.current = setTimeout(() => {
-            setIsApplying(false);
-            applyValue({ ...item, value: [lowerBound, upperBound] });
-        }, SUBMIT_FILTER_STROKE_TIME);
-    };
-
-    const handleUpperFilterChange = (event:React.ChangeEvent<HTMLInputElement> | { target: { value: string }}) => {
-        const newUpperBound = event.target?.value;
-        updateFilterValue(filterValueState[0], newUpperBound);
-    };
-    const handleLowerFilterChange = (event:React.ChangeEvent<HTMLInputElement> | { target: { value: string }}) => {
-        const newLowerBound = event.target?.value;
-        updateFilterValue(newLowerBound, filterValueState[1]);
-    };
-
-    return (
-        <Box
-            sx={{
-                display: 'inline-flex',
-                flexDirection: 'row',
-                alignItems: 'end',
-                height: 48,
-                pl: '20px'
-            }}
-        >
-            {type === 'number' &&
-                <>
-                    <TextField
-                        name="lower-bound-input"
-                        placeholder="De"
-                        label="De"
-                        variant="standard"
-                        value={Number(filterValueState[0])}
-                        onChange={handleLowerFilterChange}
-                        type="number"
-                        inputRef={focusElementRef}
-                        sx={{ mr: 2, minWidth: 130 }}
-                    />
-                    <TextField
-                        name="upper-bound-input"
-                        placeholder="Até"
-                        label="Até"
-                        variant="standard"
-                        value={Number(filterValueState[1])}
-                        onChange={handleUpperFilterChange}
-                        type="number"
-                        sx={{ minWidth: 130 }}
-                        InputProps={applying ? { endAdornment: <SyncIcon /> } : {}}
-                    />
-                </>
-            }
-            {type === 'float' &&
-                <>
-                    <NumericFormat
-                        name="lower-bound-input"
-                        placeholder="De"
-                        label="De"
-                        variant="standard"
-                        value={Number(filterValueState[0])}
-                        onValueChange={(values, sourceInfo) => {
-                            handleLowerFilterChange({ target: { value: values.value } });
-                        }}
-                        thousandSeparator='.'
-                        decimalSeparator=','
-                        decimalScale={2}
-                        fixedDecimalScale={true}
-                        valueIsNumericString
-                        inputRef={focusElementRef}
-                        sx={{ mr: 2, minWidth: 130 }}
-                        customInput={TextField}
-                    />
-                    <NumericFormat
-                        name="upper-bound-input"
-                        placeholder="Até"
-                        label="Até"
-                        variant="standard"
-                        value={Number(filterValueState[1])}
-                        onValueChange={(values, sourceInfo) => {
-                            handleUpperFilterChange({ target: { value: values.value } });
-                        }}
-                        thousandSeparator='.'
-                        decimalSeparator=','
-                        decimalScale={2}
-                        fixedDecimalScale={true}
-                        valueIsNumericString
-                        InputProps={applying ? { endAdornment: <SyncIcon /> } : {}}
-                        sx={{ minWidth: 130 }}
-                        customInput={TextField}
-                    />
-                </>
-            }
-            {type === 'date' &&
-                <>
-                    <TextField
-                        name="lower-bound-input"
-                        label="De"
-                        variant="standard"
-                        value={filterValueState[0] || ''}
-                        onChange={handleLowerFilterChange}
-                        type="date"
-                        inputRef={focusElementRef}
-                        InputLabelProps={{ shrink: true }}
-                        sx={{ mr: 2, minWidth: 130 }}
-                    />
-                    <TextField
-                        name="upper-bound-input"
-                        label="Até"
-                        variant="standard"
-                        value={filterValueState[1] || ''}
-                        onChange={handleUpperFilterChange}
-                        type="date"
-                        InputProps={applying ? { endAdornment: <SyncIcon /> } : {}}
-                        InputLabelProps={{ shrink: true }}
-                        sx={{ minWidth: 130 }}
-                    />
-                </>
-            }
-        </Box>
-    );
-}
-
-function InputNumberInterval (props: any) {
-    return (
-        <InputInterval
-            {...props}
-            type="number"
-        />
-    );
-}
-function InputDateInterval (props: any) {
-    return (
-        <InputInterval
-            {...props}
-            type="date"
-        />
-    );
-}
-function InputFloatInterval (props: any) {
-    return (
-        <InputInterval
-            {...props}
-            type="float"
-        />
-    );
-}
-
-const quantityOnlyOperators = ({ type }:{ type: string }) => {
-    const builtInFilters = (type === 'date')
-        ? getGridDateOperators()
-        : getGridNumericOperators();
-    let InputComponent = InputNumberInterval;
-    if (type === 'date') {
-        InputComponent = InputDateInterval;
-    }
-    if (type === 'float') {
-        InputComponent = InputFloatInterval;
-    }
-    return [
-        ...builtInFilters,
-        {
-            label: 'entre',
-            value: 'entre',
-            getApplyFilterFn: (filterItem: any) => {
-                if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
-                    return null;
-                }
-                if (filterItem.value[0] === null || filterItem.value[1] === null) {
-                    return null;
-                }
-
-                return ({ value }: { value: any }) => {
-                    return (
-                        value !== null &&
-                        filterItem.value[0] <= value &&
-                        value <= filterItem.value[1]
-                    );
-                };
-            },
-            InputComponent
-        }
-    ] as GridFilterOperator[];
-};
-
-type FConfirmDialogProps = {
-    open: boolean,
-    onClose: (p: any) => void,
-    onConfirm: (p: any) => void
-};
-const FConfirmDialog = ({
-    open,
-    onClose,
-    onConfirm
-}: FConfirmDialogProps) => {
-    return (
-        <Dialog open={open} onClose={onClose}>
-            <DialogTitle>
-                Confirmar
-            </DialogTitle>
-            <DialogContent>
-                Tem certeza de que você quer remover este item?
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    onClick={onClose}
-                >
-                        Cancelar
-                </Button>
-                <Button
-                    onClick={onConfirm}
-                >
-                    Remover
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}
-const ConfirmDialog = React.memo(FConfirmDialog);
-
-type DataGridBySchemaEditableProps = {
-    schema: Schema,
-    data: Item[],
-    columns: GridEnrichedBySchemaColDef[],
-    model: string,
-    fieldKey?: string,
-    labelKey?: string,
-    index?: number,
-    name?: string,
-    updateUrl: string,
-    indexField?: string,
-    addExistingModel?: string,
-    indexFieldMinWidth?: number,
-    indexFieldBasePath?: string,
-    stateToLink?: object,
-    minWidth?: number,
-    onEditRelatedModelSave?: (p: any) => Id | { data: Item } | { errors: Item },
-    onDeleteRelatedModel?: (p: any) => any,
-    customColumnOperations?: (p: any) => GridEnrichedBySchemaColDef,
-    customLinkDestination?: (p: any) => string,
-    onProcessRow?: (p: any) => void,
-    onDataChange?: (p: any) => void,
-    isEditable?: boolean,
-    sx?: SxProps,
-    isAutoHeight?: boolean,
-    defaultValues?: Item,
-    hideFooterPagination?: boolean,
-    setVisibleRows?: (p: any) => void
-};
-const DataGridBySchemaEditable = React.forwardRef((
+const DataGridBySchemaEditable = forwardRef((
     {
         schema,
         data,
@@ -753,7 +85,6 @@ const DataGridBySchemaEditable = React.forwardRef((
         labelKey = 'nome',
         index,
         name = Math.floor(Math.random() * 1000000).toString(),
-        updateUrl,
         indexField = 'nome',
         addExistingModel,
         indexFieldMinWidth = 350,
@@ -764,6 +95,7 @@ const DataGridBySchemaEditable = React.forwardRef((
         onDeleteRelatedModel,
         customColumnOperations,
         customLinkDestination,
+        LinkComponent,
         onProcessRow,
         onDataChange,
         isEditable = false,
@@ -776,13 +108,16 @@ const DataGridBySchemaEditable = React.forwardRef((
     }: DataGridBySchemaEditableProps,
     ref
 ) => {
-    const initialSnackBar = {
+    const { serverEndPoint } = DRFReactBySchemaContext
+        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
+        : { serverEndPoint: null };
+    const initialSnackBar:Record<string, any> = {
         open: false,
         msg: '',
         severity: 'info'
     };
-    const [snackBar, setSnackBar] = useReducer(reducer, initialSnackBar);
-    const [dataGrid, setDataGrid] = useState<{ data: Item[] }>({ data: [] });
+    const [snackBar, setSnackBar] = useState(initialSnackBar);
+    const [dataGrid, setDataGrid] = useState<{ data:Item[] }>({ data: [] });
     const [preparedColumns, setPreparedColumns] = useState<null | GridEnrichedBySchemaColDef[]>(null);
     const [dataGridLoading, setDataGridLoading] = useState(false);
     const [rowModesModel, setRowModesModel] = useState<Record<string, any>>({});
@@ -800,8 +135,12 @@ const DataGridBySchemaEditable = React.forwardRef((
                 continue;
             }
             if (['field', 'nested object'].includes(schema[col.field].type) && !(col.field in optionsAC.current)) {
-                const options = await getAutoComplete(col.field);
-                optionsAC.current[col.field] = options;
+                const options = await getAutoComplete({ model: col.field, serverEndPoint });
+                if (options) {
+                    optionsAC.current[col.field] = options;
+                    continue;
+                }
+                console.log(`Couldn't load autocomplete options from '${col.field}'`);
                 continue;
             }
             if (schema[col.field].type === 'choice' && !(col.field in optionsAC.current)) {
@@ -809,8 +148,14 @@ const DataGridBySchemaEditable = React.forwardRef((
                 continue;
             }
             if (col.field === indexField && addExistingModel && !optionsAC.current[col.field]) {
-                const options = await getAutoComplete(addExistingModel);
-                optionsAC.current[col.field] = options;
+                const options = await getAutoComplete({ model: addExistingModel, serverEndPoint });
+                if (options) {
+                    optionsAC.current[col.field] = options;
+                    continue;
+                }
+                if (!(col.field in optionsAC.current)) {
+                    delete optionsAC.current[col.field];
+                }
             }
         }
     };
@@ -999,15 +344,16 @@ const DataGridBySchemaEditable = React.forwardRef((
                 if (col.field === indexField) {
                     column.flex = 1;
                     column.renderCell = params => {
-                        if (customLinkDestination) {
+                        if (LinkComponent && customLinkDestination) {
                             return (
-                                <Link to={`${customLinkDestination(params)}`} state={stateToLink}>
+                                <LinkComponent to={`${customLinkDestination(params)}`} state={stateToLink}>
                                     {params.formattedValue}
-                                </Link>
+                                </LinkComponent>
                             );
                         }
 
                         if (
+                            !LinkComponent ||
                             !indexFieldBasePath ||
                             (
                                 ['field', 'nested object'].includes(schema[col.field].type) &&
@@ -1022,9 +368,9 @@ const DataGridBySchemaEditable = React.forwardRef((
                             : params.row.id.toString();
 
                         return (
-                            <Link to={`${indexFieldBasePath}${targetId}`} state={stateToLink}>
+                            <LinkComponent to={`${indexFieldBasePath}${targetId}`} state={stateToLink}>
                                 {params.formattedValue}
-                            </Link>
+                            </LinkComponent>
                         );
                     };
                     if (
@@ -1385,7 +731,7 @@ const DataGridBySchemaEditable = React.forwardRef((
             <Snackbar
                 open={snackBar.open}
                 autoHideDuration={5000}
-                onClose={() => { setSnackBar({ open: false }); }}
+                onClose={() => { setSnackBar({ ...initialSnackBar, open: false }); }}
                 anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
             >
                 <Alert severity={snackBar.severity}>
@@ -1398,4 +744,4 @@ const DataGridBySchemaEditable = React.forwardRef((
 
 DataGridBySchemaEditable.displayName = 'DataGridBySchemaEditable';
 
-export default DataGridBySchemaEditable;
+export default DataGridBySchemaEditable;