jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Feat: make input dropdown filter with text

Browse source
This commit is contained in:
igorrCarvalho 2024-02-05 14:53:47 -03:00
commit f30c1df9bf
1 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/frontend/src/components/inputComponent/index.tsx
View file

@ -7,6 +7,7 @@ import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
export default function InputComponent({ export default function InputComponent({
autoFocus = false, autoFocus = false,
onBlur, onBlur,
@ -26,6 +27,9 @@ export default function InputComponent({
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
const refInput = useRef<HTMLInputElement>(null); const refInput = useRef<HTMLInputElement>(null);
const [showOptions, setShowOptions] = useState<boolean>(false); const [showOptions, setShowOptions] = useState<boolean>(false);
const [filteredOpts, setFilteredValue] = useState<string[]>(["key", "key2", "key3", "key4", "key5"]);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
if (disabled && value !== "") { if (disabled && value !== "") {
@ -33,11 +37,16 @@ export default function InputComponent({
} }
}, [disabled]); }, [disabled]);
const filteredOptions = filteredOpts.filter((option) => option.toLowerCase().includes(value.toLowerCase()))
function onInputLostFocus(event): void { function onInputLostFocus(event): void {
if (onBlur) onBlur(event); if (onBlur) onBlur(event);
setShowOptions(false); setShowOptions(false);
} }
return ( return (
<div className="relative w-full"> <div className="relative w-full">
{isForm ? ( {isForm ? (
@ -79,7 +88,7 @@ export default function InputComponent({
id={id} id={id}
ref={refInput} ref={refInput}
type="text" type="text"
onBlur={(e) => setShowOptions(false)} onBlur={onInputLostFocus}
value={value} value={value}
autoFocus={autoFocus} autoFocus={autoFocus}
disabled={disabled} disabled={disabled}
@ -96,7 +105,6 @@ export default function InputComponent({
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => { onChange={(e) => {
onChange(e.target.value); onChange(e.target.value);
setShowOptions(false);
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
handleKeyDown(e, value, ""); handleKeyDown(e, value, "");
@ -105,7 +113,7 @@ export default function InputComponent({
onFocus={() => setShowOptions(true)} onFocus={() => setShowOptions(true)}
/> />
{ {
/* options.length > 0 */ true ? ( /* options.length > 0 && filteredOptions.length > 0 */ true ? (
<Listbox <Listbox
onChange={(val) => { onChange={(val) => {
onChange(val); onChange(val);
@ -128,7 +136,7 @@ export default function InputComponent({
false ? "mb-2 w-[250px]" : "absolute w-full" false ? "mb-2 w-[250px]" : "absolute w-full"
)} )}
> >
{["key", "key2", "key3", "key4", "key5"].map( {filteredOptions.map(
(option, id) => ( (option, id) => (
<Listbox.Option <Listbox.Option
key={id} key={id}
@ -157,6 +165,7 @@ export default function InputComponent({
{option} {option}
</span> </span>
{selected ? ( {selected ? (
<span <span
className={classNames( className={classNames(
@ -190,6 +199,7 @@ export default function InputComponent({
</> </>
)} )}
<span <span
className={ className={
password password
@ -204,6 +214,7 @@ export default function InputComponent({
/> />
</span> </span>
{password && ( {password && (
<button <button
type="button" type="button"