drf-react-by-schema 0.17.6 → 0.17.8

package/dist/components/DataGridBySchemaEditable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GridRowId, GridRenderCellParams } from '@mui/x-data-grid';
 import { SxProps } from '@mui/material';
-import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel, ActionType, OnSelectActions, OptionsAC, FormFieldLayout } from '../utils';
+import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel, ActionType, OnSelectActions, OptionsAC, FormFieldLayout, CustomAction } from '../utils';
 import { OnEditModelType } from '../context/APIWrapperContext';
 interface DataGridBySchemaEditableProps {
     schema: SchemaType;
@@ -44,6 +44,7 @@ interface DataGridBySchemaEditableProps {
     hideToolbarComponent?: boolean;
     tableAutoHeight?: boolean;
     actions?: Partial<ActionType>[];
+    customActions?: CustomAction[];
     optionsAC?: OptionsAC;
 }
 declare const DataGridBySchemaEditable: React.ForwardRefExoticComponent<DataGridBySchemaEditableProps & React.RefAttributes<unknown>>;

package/dist/components/DataGridBySchemaEditable.js

@@ -63,7 +63,7 @@ const BooleanInputCell_1 = require("./DataGridBySchemaEditable/BooleanInputCell"
 const FooterToolbar_1 = require("./DataGridBySchemaEditable/FooterToolbar");
 const ConfirmDialog_1 = require("./DataGridBySchemaEditable/ConfirmDialog");
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
-const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCount = 0, columns, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customFieldFormLayouts, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], optionsAC: optionsACExternal, }, ref) => {
+const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCount = 0, columns, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customFieldFormLayouts, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], customActions, optionsAC: optionsACExternal, }, ref) => {
     const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const apiContext = (0, APIWrapperContext_1.useAPIWrapper)();
     const initialSnackBar = {
@@ -205,6 +205,13 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
                                 break;
                         }
                     });
+                    // React.ReactElement<any, string | React.JSXElementConstructor<any>>
+                    // React.ReactElement<any, string | React.JSXElementConstructor<any>>
+                    if (customActions) {
+                        customActions.map((customAction) => {
+                            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: '' }));
+                        });
+                    }
                     return actionItems;
                 },
             });
@@ -576,10 +583,11 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCou
         });
     }, [data]);
     (0, react_1.useEffect)(() => {
-        if (optionsAC.current) {
-            initColumns();
-            return;
-        }
+        // I don't undedrstand why I had this. I'm commenting out....
+        // if (optionsAC.current) {
+        //     initColumns();
+        //     return;
+        // }
         updateOptionsAC().then(() => {
             initColumns();
         });

package/dist/components/GenericModelList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GridFilterModel, GridRenderCellParams } from '@mui/x-data-grid';
-import { GridEnrichedBySchemaColDef, ActionType, Item, OnSelectActions, OptionsAC, FormFieldLayout } from '../utils';
+import { GridEnrichedBySchemaColDef, ActionType, Item, OnSelectActions, OptionsAC, FormFieldLayout, CustomAction } from '../utils';
 import { SumRowsType } from '../api';
 interface GenericModelListProps {
     model: string;
@@ -33,9 +33,10 @@ interface GenericModelListProps {
     hideToolbarComponent?: boolean;
     tableAutoHeight?: boolean;
     actions?: Partial<ActionType>[];
+    customActions?: CustomAction[];
     optionsAC?: OptionsAC;
     defaultValues?: Item;
     disableScreenLoading?: boolean;
 }
-declare const GenericModelList: ({ model, columnFields, hiddenFields, creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, reloadAfterRowUpdate, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect, onSelectActions, sumRows, isAutoHeight, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, defaultValues, disableScreenLoading, }: GenericModelListProps) => React.JSX.Element;
+declare const GenericModelList: ({ model, columnFields, hiddenFields, creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, reloadAfterRowUpdate, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect, onSelectActions, sumRows, isAutoHeight, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, customActions, optionsAC, defaultValues, disableScreenLoading, }: GenericModelListProps) => React.JSX.Element;
 export default GenericModelList;

package/dist/components/GenericModelList.js

@@ -50,7 +50,7 @@ const utils_1 = require("../utils");
 const api_1 = require("../api");
 const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
-const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, reloadAfterRowUpdate, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect = false, onSelectActions, sumRows, isAutoHeight = true, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, defaultValues, disableScreenLoading, }) => {
+const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, reloadAfterRowUpdate, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect = false, onSelectActions, sumRows, isAutoHeight = true, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, customActions, optionsAC, defaultValues, disableScreenLoading, }) => {
     const { serverEndPoint, isInBatches, firstBatchLength } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
     const { onEditModel } = (0, APIWrapperContext_1.useAPIWrapper)();
     const [data, setData] = (0, react_1.useState)(false);
@@ -151,7 +151,7 @@ const GenericModelList = ({ model, columnFields, hiddenFields = [], creatableFie
                 react_1.default.createElement(LinkComponent, { to: `novo` },
                     react_1.default.createElement(Button_1.default, { variant: "contained", size: "medium", sx: { alignSelf: 'stretch' }, startIcon: react_1.default.createElement(AddCircleOutline_1.default, null) }, "Adicionar")))))),
         react_1.default.createElement(Box_1.default, { sx: tableAutoHeight ? {} : styles_1.Layout.dataGridWithTabs },
-            react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema || {}, model: model, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, customFieldFormLayouts: customFieldFormLayouts, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, customLinkDestination: customLinkDestination, actions: actions, optionsAC: optionsAC, defaultValues: defaultValues, onProcessRow: onProcessRow, onDataChange: (newData) => {
+            react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema || {}, model: model, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, customFieldFormLayouts: customFieldFormLayouts, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, customLinkDestination: customLinkDestination, actions: actions, customActions: customActions, optionsAC: optionsAC, defaultValues: defaultValues, onProcessRow: onProcessRow, onDataChange: (newData) => {
                     if (reloadAfterRowUpdate) {
                         loadObjectList();
                         return;

package/dist/components/GenericRelatedModelList.js

@@ -49,9 +49,9 @@ const APIWrapperContext_1 = require("../context/APIWrapperContext");
 const utils_1 = require("../utils");
 const api_1 = require("../api");
 const styles_1 = require("../styles");
-const ContentTable = ({ data, relatedModel, model, loading, id, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, isEditable, onEditModel, finalCustomColumnOperations, setVisibleRows, isAutoHeight, hideFooterPagination, hideFooterComponent, hideToolbarComponent, onProcessRow, onDataChange, sumRows, visibleRows, paginationMode = 'client', paginationModel, setPaginationModel, hasBulkSelect, onSelectActions, tableAutoHeight, actions, optionsAC, defaultValues, LinkComponent, }) => (react_1.default.createElement(react_1.default.Fragment, null,
+const ContentTable = ({ data, relatedModel, model, loading, id, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, isEditable, onEditModel, finalCustomColumnOperations, setVisibleRows, isAutoHeight, hideFooterPagination, hideFooterComponent, hideToolbarComponent, onProcessRow, onDataChange, sumRows, visibleRows, paginationMode = 'client', paginationModel, setPaginationModel, hasBulkSelect, onSelectActions, tableAutoHeight, actions, customActions, optionsAC, defaultValues, LinkComponent, }) => (react_1.default.createElement(react_1.default.Fragment, null,
     data.columns ? (react_1.default.createElement(Box_1.default, { sx: tableAutoHeight ? {} : styles_1.Layout.dataGridFixedHeight },
-        react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema, model: relatedModel, modelParent: model, modelParentId: id, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, actions: actions, optionsAC: optionsAC, defaultValues: defaultValues, onProcessRow: onProcessRow, onDataChange: onDataChange, paginationModel: paginationMode === 'server' ? paginationModel : undefined, setPaginationModel: paginationMode === 'server' ? setPaginationModel : undefined, rowCount: paginationMode === 'client'
+        react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema, model: relatedModel, modelParent: model, modelParentId: id, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, actions: actions, customActions: customActions, optionsAC: optionsAC, defaultValues: defaultValues, onProcessRow: onProcessRow, onDataChange: onDataChange, paginationModel: paginationMode === 'server' ? paginationModel : undefined, setPaginationModel: paginationMode === 'server' ? setPaginationModel : undefined, rowCount: paginationMode === 'client'
                 ? undefined
                 : typeof data.rowCount !== undefined
                     ? data.rowCount

package/dist/components/forms/inputs/EditableAutocompleteFieldBySchema.js

@@ -165,17 +165,35 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                     if (filteredOptions.length === 0) {
                         return [];
                     }
-                    const filtered = filter(filteredOptions, params);
+                    let filtered = filter(filteredOptions, params);
                     const { inputValue } = params;
                     const inputValueSlug = (0, utils_1.slugify)(inputValue);
+                    const inputValueLength = inputValueSlug.length;
                     // Suggest the creation of a new value
-                    const isExisting = filteredOptions.some((option) => inputValueSlug === (0, utils_1.slugify)(option.label));
+                    const isExisting = filteredOptions.find((option) => inputValueSlug === (0, utils_1.slugify)(option.label));
                     if (inputValue !== '' && !isExisting) {
                         filtered.push({
                             inputValue,
                             label: `Criar "${inputValue}"`,
                         });
                     }
+                    // Show first the exact match:
+                    if (isExisting) {
+                        filtered = [
+                            isExisting,
+                            ...filtered.filter((option) => isExisting.id !== option.id),
+                        ];
+                    }
+                    // Show first the options that start with inputValue:
+                    const startsWith = filtered.filter((option) => inputValueSlug ===
+                        (0, utils_1.slugify)(option.label).substring(0, inputValueLength));
+                    if (startsWith.length > 0) {
+                        const startsWithIds = startsWith.map((option) => option.id);
+                        filtered = [
+                            ...startsWith,
+                            ...filtered.filter((option) => !startsWithIds.includes(option.id)),
+                        ];
+                    }
                     return filtered;
                 }, handleHomeEndKeys: true, getOptionLabel: getOptionLabel
                     ? getOptionLabel

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import * as Yup from 'yup';
+import { ReactElement } from 'react';
 import { GridActionsColDef, GridColDef, GridFilterModel, GridSortModel } from '@mui/x-data-grid';
 import { Control, FieldValues, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 import { AutocompleteRenderOptionState, SxProps } from '@mui/material';
@@ -183,6 +183,12 @@ export declare const slugToCamelCase: (str: string) => string;
 export declare const slugify: (text: string | null) => string;
 export declare function mergeFilterItems(defaultFilter: GridFilterModel | undefined, filter: GridFilterModel | undefined): GridFilterModel | undefined;
 export type ActionType = 'editInline' | 'remove' | 'edit' | 'view';
+export interface CustomAction {
+    key: string;
+    icon: ReactElement;
+    label: string;
+    handleClick: (item: Item | undefined) => undefined;
+}
 export type BulkUpdateData = (newData: Item[]) => Promise<{
     id: Id;
     success: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.17.6",
+  "version": "0.17.8",
   "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",