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

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

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