drf-react-by-schema 0.3.0 → 0.3.1

package/src/components/DataGridBySchemaEditable/ConfirmDialog.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-
-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>
-    );
-};
-export const ConfirmDialog = React.memo(FConfirmDialog);

package/src/components/DataGridBySchemaEditable/CustomToolbar.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react';
-import {
-    useGridApiContext,
-    GridToolbarContainer,
-    GridToolbarColumnsButton,
-    GridToolbarFilterButton,
-    GridToolbarDensitySelector,
-    GridToolbarExport,
-    GridToolbarQuickFilter
-} from '@mui/x-data-grid';
-import Button from '@mui/material/Button';
-import ExpandIcon from '@mui/icons-material/Expand';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-
-import { GridEnrichedBySchemaColDef } from '../../utils';
-import { resizeColumns } from './utils';
-
-type CustomToolbarProps = {
-    preparedColumns: GridEnrichedBySchemaColDef[],
-    setPreparedColumns: (p:null | GridEnrichedBySchemaColDef[]) => void
-};
-
-/**
- *
- *
- * @param {CustomToolbarProps} {
- *     preparedColumns,
- *     setPreparedColumns
- * }
- * @returns Custom Toolbar for the grid
- */
-export 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>
-    );
-};

package/src/components/DataGridBySchemaEditable/FooterToolbar.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import {
-    GridRowModes,
-    GridFooterContainer,
-    GridFooter
-} from '@mui/x-data-grid';
-import Button from '@mui/material/Button';
-import AddIcon from '@mui/icons-material/Add';
-
-import { getTmpId, Item } from '../../utils';
-
-type FooterToolbarProps = {
-    name: string,
-    setRowModesModel: (p:any) => any,
-    dataGrid: { data:Item[] },
-    setDataGrid: (p:any) => any,
-    emptyItem: { current:Record<string, any> },
-    indexField: string,
-    isEditable: boolean
-};
-
-export const 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>
-    );
-};

package/src/components/DataGridBySchemaEditable/GridDecimalInput.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid';
-import { NumericFormat } from 'react-number-format';
-import TextField from '@mui/material/TextField';
-
-type GridDecimalInputProps = {
-    field: string,
-    id: number | string,
-    value?: any,
-    column: object
-};
-export const 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}
-        />
-    );
-};

package/src/components/DataGridBySchemaEditable/GridPatternInput.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid';
-import { PatternFormat } from 'react-number-format';
-import TextField from '@mui/material/TextField';
-
-type GridPatternInputProps = {
-    field: string,
-    id: number | string,
-    value?: any,
-    patternFormat?: string
-};
-export const 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}
-        />
-    );
-};

package/src/components/DataGridBySchemaEditable/InputInterval.tsx

@@ -1,194 +0,0 @@
-import React, { useRef } from 'react';
-import Box from '@mui/system/Box';
-import TextField from '@mui/material/TextField';
-import { NumericFormat } from 'react-number-format';
-import SyncIcon from '@mui/icons-material/Sync';
-
-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
-};
-const 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>
-    );
-};
-
-export const InputNumberInterval = (props: any) => {
-    return (
-        <InputInterval
-            {...props}
-            type="number"
-        />
-    );
-};
-
-export const InputDateInterval = (props: any) => {
-    return (
-        <InputInterval
-            {...props}
-            type="date"
-        />
-    );
-}
-
-export const InputFloatInterval = (props: any) => {
-    return (
-        <InputInterval
-            {...props}
-            type="float"
-        />
-    );
-};

package/src/components/DataGridBySchemaEditable/SelectEditInputCell.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { useGridApiContext } from '@mui/x-data-grid';
-import { SxProps } from '@mui/material';
-import TextField from '@mui/material/TextField';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-
-import { getTmpId } from '../../utils';
-import { GridEnrichedBySchemaColDef, Item } from '../../utils';
-import { OptionsACType } from '../../context/APIWrapperContext';
-
-const filter = createFilterOptions();
-
-interface SelectEditInputCellProps {
-    field: string;
-    id: number | string;
-    value?: any;
-    column: GridEnrichedBySchemaColDef;
-    type: string;
-    optionsAC: React.MutableRefObject<OptionsACType | null>;
-    isIndexField: boolean;
-    multiple?: boolean;
-    sx?: SxProps;
-}
-
-/**
- *
- *
- * @param {SelectEditInputCellProps} {
- *     field,
- *     id,
- *     value,
- *     column,
- *     type,
- *     optionsAC,
- *     isIndexField,
- *     multiple = false,
- *     sx = {}
- * }
- * @returns {*}  {JSX.Element}
- */
-export function SelectEditInputCell ({
-    field,
-    id,
-    value,
-    column,
-    type,
-    optionsAC,
-    isIndexField,
-    multiple = false,
-    sx = {}
-}: SelectEditInputCellProps): JSX.Element {
-    // 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}
-        />
-    );
-}

package/src/components/DataGridBySchemaEditable.md

@@ -1,50 +0,0 @@
-```js
-/*
-import DRFReactBySchemaProvider from '../context/DRFReactBySchemaProvider';
-const data = {
-    data: [],
-    columns: [],
-    schema: {}
-};
-const model = 'example';
-const indexField = null;
-const indexFieldBasePath = null;
-const isAutoHeight = true;
-const hideFooterPagination = false;
-const finalCustomColumnOperations = null;
-const customLinkDestination = null;
-const setVisibleRows = null;
-const setData = (newData) => {
-    return '';
-};
-const Link = null;
-<DRFReactBySchemaProvider
-    serverEndPoint={{
-        url: 'https://icv.eita.org.br/api',
-        apiTokenUrl: 'https://icv.eita.org.br/api-auth/token'
-    }}
->
-    <DataGridBySchemaEditable
-        data={data.data}
-        columns={data.columns}
-        schema={data.schema}
-        model={model}
-        indexField={indexField}
-        indexFieldBasePath={indexFieldBasePath}
-        isEditable={false}
-        isAutoHeight={isAutoHeight}
-        hideFooterPagination={hideFooterPagination}
-        customColumnOperations={finalCustomColumnOperations}
-        customLinkDestination={customLinkDestination}
-        setVisibleRows={setVisibleRows}
-        onDataChange={newData => {
-            setData({
-                ...data,
-                data: newData
-            });
-        }}
-        LinkComponent={Link}
-    />
-</DRFReactBySchemaProvider>
-*/
-```