calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-22 00:35:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ move from react.forwardref to normal ref prop

Browse Source
This commit is contained in:
Fred KISSIE
2026-03-31 21:13:23 +02:00
parent 152b452bee
commit a4d8789c20
1 changed files with 645 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/tags/tag-input.tsx
View File

@@ -1,8 +1,8 @@
"use client"; "use client";
import React from "react"; import * as React from "react";
import { Input } from "../ui/input"; import { Input } from "@app/components/ui/input";
import { Button } from "../ui/button"; import { Button } from "@app/components/ui/button";
import { type VariantProps } from "class-variance-authority"; import { type VariantProps } from "class-variance-authority";
// import { CommandInput } from '../ui/command'; // import { CommandInput } from '../ui/command';
import { TagPopover } from "./tag-popover"; import { TagPopover } from "./tag-popover";
@@ -103,10 +103,10 @@ export interface TagInputProps
addOnPaste?: boolean; addOnPaste?: boolean;
addTagsOnBlur?: boolean; addTagsOnBlur?: boolean;
generateTagId?: () => string; generateTagId?: () => string;
ref?: React.Ref<HTMLInputElement>;
} }
const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>( export function TagInput({ ref, ...props }: TagInputProps) {
(props, ref) => {
const { const {
id, id,
placeholder, placeholder,
@@ -161,9 +161,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
} = props; } = props;
const [inputValue, setInputValue] = React.useState(""); const [inputValue, setInputValue] = React.useState("");
const [tagCount, setTagCount] = React.useState( const [tagCount, setTagCount] = React.useState(Math.max(0, tags.length));
Math.max(0, tags.length)
);
const inputRef = React.useRef<HTMLInputElement>(null); const inputRef = React.useRef<HTMLInputElement>(null);
const t = useTranslations(); const t = useTranslations();
@@ -196,9 +194,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
(option) => option.text === newTagText (option) => option.text === newTagText
) )
) { ) {
console.warn( console.warn(t("tagsWarnNotAllowedAutocompleteOptions"));
t("tagsWarnNotAllowedAutocompleteOptions")
);
return; return;
} }
@@ -208,16 +204,12 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
} }
if (minLength && newTagText.length < minLength) { if (minLength && newTagText.length < minLength) {
console.warn( console.warn(t("tagWarnTooShort", { tagText: newTagText }));
t("tagWarnTooShort", { tagText: newTagText })
);
return; return;
} }
if (maxLength && newTagText.length > maxLength) { if (maxLength && newTagText.length > maxLength) {
console.warn( console.warn(t("tagWarnTooLong", { tagText: newTagText }));
t("tagWarnTooLong", { tagText: newTagText })
);
return; return;
} }
@@ -249,9 +241,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
onInputChange?.(newValue); onInputChange?.(newValue);
}; };
const handleInputFocus = ( const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
event: React.FocusEvent<HTMLInputElement>
) => {
setActiveTagIndex(null); // Reset active tag index when the input field gains focus setActiveTagIndex(null); // Reset active tag index when the input field gains focus
onFocus?.(event); onFocus?.(event);
}; };
@@ -406,9 +396,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
const removeTag = (idToRemove: string) => { const removeTag = (idToRemove: string) => {
setTags(tags.filter((tag) => tag.id !== idToRemove)); setTags(tags.filter((tag) => tag.id !== idToRemove));
onTagRemove?.( onTagRemove?.(tags.find((tag) => tag.id === idToRemove)?.text || "");
tags.find((tag) => tag.id === idToRemove)?.text || ""
);
setTagCount((prevTagCount) => prevTagCount - 1); setTagCount((prevTagCount) => prevTagCount - 1);
}; };
@@ -512,8 +500,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
activeTagIndex={activeTagIndex} activeTagIndex={activeTagIndex}
setActiveTagIndex={setActiveTagIndex} setActiveTagIndex={setActiveTagIndex}
classStyleProps={{ classStyleProps={{
tagListClasses: tagListClasses: styleClasses?.tagList,
styleClasses?.tagList,
tagClasses: styleClasses?.tag tagClasses: styleClasses?.tag
}} }}
disabled={disabled} disabled={disabled}
@@ -563,8 +550,9 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
tags={tags} tags={tags}
setTags={setTags} setTags={setTags}
setInputValue={setInputValue} setInputValue={setInputValue}
autocompleteOptions={(autocompleteOptions || autocompleteOptions={
[]) as Tag[]} (autocompleteOptions || []) as Tag[]
}
filterQuery={inputValue} filterQuery={inputValue}
setTagCount={setTagCount} setTagCount={setTagCount}
maxTags={maxTags} maxTags={maxTags}
@@ -583,8 +571,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
styleClasses?.autoComplete?.commandList, styleClasses?.autoComplete?.commandList,
commandGroup: commandGroup:
styleClasses?.autoComplete?.commandGroup, styleClasses?.autoComplete?.commandGroup,
commandItem: commandItem: styleClasses?.autoComplete?.commandItem
styleClasses?.autoComplete?.commandItem
}} }}
> >
{!usePopoverForTags ? ( {!usePopoverForTags ? (
@@ -648,9 +635,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
> >
<TagList <TagList
tags={truncatedTags} tags={truncatedTags}
customTagRenderer={ customTagRenderer={customTagRenderer}
customTagRenderer
}
variant={variant} variant={variant}
size={size} size={size}
shape={shape} shape={shape}
@@ -666,9 +651,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
direction={direction} direction={direction}
inlineTags={inlineTags} inlineTags={inlineTags}
activeTagIndex={activeTagIndex} activeTagIndex={activeTagIndex}
setActiveTagIndex={ setActiveTagIndex={setActiveTagIndex}
setActiveTagIndex
}
classStyleProps={{ classStyleProps={{
tagListClasses: tagListClasses:
styleClasses?.tagList, styleClasses?.tagList,
@@ -714,9 +697,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
styleClasses?.input styleClasses?.input
)} )}
autoComplete={ autoComplete={
enableAutocomplete enableAutocomplete ? "on" : "off"
? "on"
: "off"
} }
list={ list={
enableAutocomplete enableAutocomplete
@@ -751,8 +732,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
activeTagIndex={activeTagIndex} activeTagIndex={activeTagIndex}
setActiveTagIndex={setActiveTagIndex} setActiveTagIndex={setActiveTagIndex}
classStyleProps={{ classStyleProps={{
popoverClasses: popoverClasses: styleClasses?.tagPopover,
styleClasses?.tagPopover,
tagListClasses: styleClasses?.tagList, tagListClasses: styleClasses?.tagList,
tagClasses: styleClasses?.tag tagClasses: styleClasses?.tag
}} }}
@@ -837,9 +817,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
"shadow-none inset-shadow-none" "shadow-none inset-shadow-none"
// className // className
)} )}
autoComplete={ autoComplete={enableAutocomplete ? "on" : "off"}
enableAutocomplete ? "on" : "off"
}
list={ list={
enableAutocomplete enableAutocomplete
? "autocomplete-options" ? "autocomplete-options"
@@ -894,9 +872,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
onFocus={handleInputFocus} onFocus={handleInputFocus}
onBlur={handleInputBlur} onBlur={handleInputBlur}
{...inputProps} {...inputProps}
autoComplete={ autoComplete={enableAutocomplete ? "on" : "off"}
enableAutocomplete ? "on" : "off"
}
list={ list={
enableAutocomplete enableAutocomplete
? "autocomplete-options" ? "autocomplete-options"
@@ -936,13 +912,8 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
)} )}
</div> </div>
); );
} }
);
TagInput.displayName = "TagInput";
export function uuid() { export function uuid() {
return crypto.getRandomValues(new Uint32Array(1))[0].toString(); return crypto.getRandomValues(new Uint32Array(1))[0].toString();
} }
export { TagInput };