drf-react-by-schema 0.7.4 → 0.7.5

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

@@ -1,7 +1,7 @@
-import React from "react";
-import { SxProps } from "@mui/material";
-import { GridEnrichedBySchemaColDef } from "../../utils";
-import { OptionsACType, OnEditModelType } from "../../context/APIWrapperContext";
+import React from 'react';
+import { SxProps } from '@mui/material';
+import { GridEnrichedBySchemaColDef } from '../../utils';
+import { OptionsACType, OnEditModelType } from '../../context/APIWrapperContext';
 interface SelectEditInputCellProps {
     field: string;
     id: number | string;

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js

@@ -67,25 +67,20 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
         yield 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";
+    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) {
     if (column.creatable) {
         creatableProps = {
-            freesolo: "true",
+            freesolo: 'true',
             filterOptions: (options, params) => {
                 const filtered = filter(options, params);
-                const inputValue = params.inputValue ? params.inputValue : "";
-                const inputValueLower = inputValue.trim().toLowerCase();
+                const inputValue = params.inputValue ? params.inputValue : '';
+                const inputValueLower = (0, utils_1.slugify)(inputValue);
                 // Suggest the creation of a new value
-                const isExisting = options.some((option) => inputValueLower ===
-                    option[labelKey].trim().toLowerCase());
-                if (inputValue !== "" && !isExisting) {
+                const isExisting = options.some((option) => inputValueLower === (0, utils_1.slugify)(option[labelKey]));
+                if (inputValue !== '' && !isExisting) {
                     filtered.push({
                         inputValue,
                         [labelKey]: `Criar "${inputValue}"`,
@@ -96,7 +91,7 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
             handleHomeEndKeys: true,
             getOptionLabel: (option) => {
                 // Value selected with enter, right from the input
-                if (typeof option === "string") {
+                if (typeof option === 'string') {
                     return option;
                 }
                 // Criar "xxx" option created dynamically
@@ -111,9 +106,7 @@ 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.current && optionsAC.current[field]
-            ? optionsAC.current[field]
-            : [], selectOnFocus: true, autoHighlight: true, multiple: multiple, isOptionEqualToValue: (option, value) => {
+    return (react_1.default.createElement(Autocomplete_1.default, Object.assign({ key: field, id: field, value: value, options: optionsAC.current && optionsAC.current[field] ? optionsAC.current[field] : [], selectOnFocus: true, autoHighlight: true, multiple: multiple, isOptionEqualToValue: (option, value) => {
             return option[labelKey] === value[labelKey];
         }, getOptionLabel: (option) => {
             return option[labelKey];
@@ -124,7 +117,7 @@ function SelectEditInputCell({ field, id, value, column, type, optionsAC, isInde
                 return;
             }
             let newValue = value;
-            if (typeof newValue === "string") {
+            if (typeof newValue === 'string') {
                 const tmpId = (0, utils_1.getTmpId)();
                 newValue = {
                     [valueKey]: tmpId,

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

@@ -152,8 +152,9 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
                             params.InputProps.endAdornment)) }) }, other))), freeSolo: true, filterOptions: (options, params) => {
                     const filtered = filter(options, params);
                     const { inputValue } = params;
+                    const inputValueSlug = (0, utils_1.slugify)(inputValue);
                     // Suggest the creation of a new value
-                    const isExisting = options.some((option) => inputValue === option.label);
+                    const isExisting = options.some((option) => inputValueSlug === (0, utils_1.slugify)(option.label));
                     if (inputValue !== '' && !isExisting) {
                         filtered.push({
                             inputValue,

package/dist/utils.d.ts

@@ -137,4 +137,5 @@ export declare const getPatternFormat: (type: string) => string;
 export type AddParametersToEnd<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...Parameters<TFunction>, ...TParameters]) => ReturnType<TFunction>;
 export declare function buildDateFormatBySchema(dateViews: string[] | null | undefined): "DD/MM/yyyy" | "MM/yyyy" | "yyyy" | "MM" | "DD";
 export declare const slugToCamelCase: (str: string) => string;
+export declare const slugify: (text: string) => string;
 export {};

package/dist/utils.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.slugToCamelCase = exports.buildDateFormatBySchema = exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
+exports.slugify = exports.slugToCamelCase = exports.buildDateFormatBySchema = exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
 const Yup = __importStar(require("yup"));
 const emptyByType = (field, forDatabase = false) => {
     if (field.model_default) {
@@ -318,3 +318,13 @@ const slugToCamelCase = (str) => {
     return ret;
 };
 exports.slugToCamelCase = slugToCamelCase;
+const slugify = (text) => text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-');
+exports.slugify = slugify;

package/package.json

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