Merge pull request #89 from niklashempel/custom-id-func

Add a custom function to generate tag id
JaleelB · Aug 29, 2024 · 07071f9 · 07071f9
2 parents 6f8866c + d65d9b7
commit 07071f9
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -287,6 +287,9 @@ type TagInputProps = {
 
   // Use a popover to display tags instead of inline.
   usePopoverForTags?: boolean; // default: false
+
+  // A callback function that generates an id for a newly created tag.
+  generateTagId?: () => string; // default: crypto.getRandomValues(new Uint32Array(1))[0].toString
 };
 ```
 

diff --git a/packages/emblor/README.md b/packages/emblor/README.md
@@ -240,6 +240,9 @@ type TagInputProps = {
 
   // Use a popover to display tags instead of inline.
   usePopoverForTags?: boolean; // default: false
+
+  // A callback function to generate an id for a newly created tag
+  generateTagId?: () => string; // default: utils/uuid
 };
 ```
 

diff --git a/packages/emblor/src/tag/tag-input.tsx b/packages/emblor/src/tag/tag-input.tsx
@@ -93,6 +93,7 @@ export interface TagInputProps extends OmittedInputProps, VariantProps<typeof ta
   usePortal?: boolean;
   addOnPaste?: boolean;
   addTagsOnBlur?: boolean;
+  generateTagId?: () => string;
 }
 
 const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
@@ -146,6 +147,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
     disabled = false,
     usePortal = false,
     addOnPaste = false,
+    generateTagId = uuid,
   } = props;
 
   const [inputValue, setInputValue] = React.useState('');
@@ -191,7 +193,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
           return;
         }
 
-        const newTagId = uuid();
+        const newTagId = generateTagId();
 
         // Add tag if duplicates are allowed or tag does not already exist
         if (allowDuplicates || !tags.some((tag) => tag.text === newTagText)) {
@@ -241,7 +243,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
         (allowDuplicates || !tags.some((tag) => tag.text === newTagText)) &&
         (maxTags === undefined || tags.length < maxTags)
       ) {
-        const newTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString();
+        const newTagId = generateTagId();
         setTags([...tags, { id: newTagId, text: newTagText }]);
         onTagAdd?.(newTagText);
         setTagCount((prevTagCount) => prevTagCount + 1);
@@ -280,7 +282,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
         return;
       }
 
-      const newTagId = uuid();
+      const newTagId = generateTagId();
 
       if (
         newTagText &&

diff --git a/website/components/tag/tag-input.tsx b/website/components/tag/tag-input.tsx
@@ -60,6 +60,7 @@ export interface TagInputProps extends OmittedInputProps, VariantProps<typeof ta
   onClearAll?: () => void;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   restrictTagsToAutocompleteOptions?: boolean;
+  generateTagId?: () => string;
 }
 
 const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
@@ -106,6 +107,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
     usePopoverForTags = false,
     inputProps = {},
     restrictTagsToAutocompleteOptions,
+    generateTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString,
   } = props;
 
   const [inputValue, setInputValue] = React.useState('');
@@ -168,7 +170,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
         return;
       }
 
-      const newTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString();
+      const newTagId = generateTagId();
 
       if (
         newTagText &&

diff --git a/website/content/docs/api-reference.mdx b/website/content/docs/api-reference.mdx
@@ -508,6 +508,13 @@ return (
       <TableCell className="border-r">Customizes the rendering of tags.</TableCell>
       <TableCell>No</TableCell>
     </TableRow>
+    <TableRow>
+      <TableCell className="border-r">generateTagId</TableCell>
+      <TableCell className="border-r">null</TableCell>
+      <TableCell className="border-r">Function</TableCell>
+      <TableCell className="border-r">Generates an id for a newly created tag.</TableCell>
+      <TableCell>No</TableCell>
+    </TableRow>
   </TableBody>
 </Table>
 import {custom} from "zod"
diff --git a/website/legacy/content/snippets/tag-input.mdx b/website/legacy/content/snippets/tag-input.mdx
@@ -66,6 +66,7 @@ export interface TagInputProps extends OmittedInputProps, VariantProps<typeof ta
   onClearAll?: () => void;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   restrictTagsToAutocompleteOptions?: boolean;
+  generateTagId?: () => string;
 }
 
 const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref) => {
@@ -112,6 +113,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
     usePopoverForTags = false,
     inputProps = {},
     restrictTagsToAutocompleteOptions,
+    generateTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString;
   } = props;
 
   const [inputValue, setInputValue] = React.useState('');
@@ -174,7 +176,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
         return;
       }
 
-      const newTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString();
+      const newTagId = generateTagId();
 
       if (
         newTagText &&