برنامه نویسی

Dropdown + SearchBar + Clearable (React & Shadcn) را انتخاب کنید

Shadcn مجموعه ای خارق العاده از اجزای زیبا UI را درست در خارج از جعبه ارائه می دهد. یکی از متداول ترین اجزای مورد استفاده ، انتخاب کننده است. با این حال ، مؤلفه از ShadCN (که مبتنی بر Radix UI است) فاقد ویژگی های خاصی مانند عملکرد جستجو و امکان پاک کردن گزینه های انتخاب شده است.

در این راهنما ، من یک مؤلفه کشویی را انتخاب می کنم که از گزینه های جستجو و پاکسازی پشتیبانی می کند.

کشویی را انتخاب کنید

بیایید با لیستی از گزینه ها شروع کنیم:

const options = [
  { value: "apple": label: "Apple" },
  { value: "banana": label: "Banana" },
  { value: "avocado": label: "Avocado" },
  // ...
];
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

ابتدا با استفاده از یک کشویی اساسی ایجاد می کنم وت که:

  • لیستی از گزینه ها را نشان می دهد
  • یک علامت چک برای گزینه انتخاب شده نشان می دهد
  • شامل یک دکمه نزدیک است
import * as React from "react";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export type SelectOption = {
  value: string;
  label: string;
};

export const InputSelect: React.FC<{
  options: SelectOption[];
  value?: string;
  onValueChange?: (v: string) => void;
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
}> = ({
  options,
  value = "",
  onValueChange,
  className,
  children,
}) => {
  const [selectedValue, setSelectedValue] = React.useState<string>(value);
  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);

  const onOptionSelect = (option: string) => {
    setSelectedValue(option);
    onValueChange?.(option);
    setIsPopoverOpen(false);
  };

  return (
    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
      <PopoverTrigger asChild>
        {children}
      </PopoverTrigger>
      <PopoverContent className={cn("w-auto p-0", className)} align="start">
        <Command>
          <CommandList className="max-h-[unset] overflow-y-hidden">
            <CommandGroup className="max-h-[20rem] min-h-[10rem] overflow-y-auto">
              {options.map((option) => {
                const isSelected = selectedValue === option.value;
                return (
                  <CommandItem
                    key={option.value}
                    onSelect={() => onOptionSelect(option.value)}
                    className="cursor-pointer"
                  >
                    <div
                      className={cn(
                        "mr-1 flex h-4 w-4 items-center justify-center",
                        isSelected ? "text-primary" : "invisible"
                      )}
                    >
                      <CheckIcon className="w-4 h-4" />
                    </div>
                    <span>{option.label}</span>
                  </CommandItem>
                );
              })}
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup>
              <div className="flex items-center justify-between">
                <CommandItem
                  onSelect={() => setIsPopoverOpen(false)}
                  className="justify-center flex-1 max-w-full cursor-pointer"
                >
                  Close
                </CommandItem>
              </div>
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};
InputSelect.displayName = "InputSelect";
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

عملکرد جستجو را اضافه کنید

برای افزایش قابلیت استفاده ، من ادغام می کنم برای قابلیت های جستجوی داخلی و برای نمایش پیام در هنگام یافتن نتیجه.

export const InputSelect = () => {
  // ...
  return (
    <Popover {...}>
      <PopoverTrigger {...} />
      <PopoverContent {...}>
        <Command>
          <CommandInput placeholder="Search..." />
          <CommandList {...}>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup {...}>
              // ...
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup>
              // ...
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

اضافه کردن یک گزینه روشن

من همچنین می خواهم برای پاک کردن مقدار انتخاب شده هنگام انتخاب ، یک دکمه ارائه دهم.

import { Separator } from "@/components/ui/separator";

export const InputSelect: React.FC<{ ... }> = ({ ... }) => {
  // ...

  const onClearAllOptions = () => {
    setSelectedValue("");
    onValueChange?.("");
    setIsPopoverOpen(false);
  };

  return (
    <Popover {...}>
      <PopoverTrigger {...} />
      <PopoverContent {...}>
        <Command>
          <CommandInput {...} />
          <CommandList {...}>
            <CommandEmpty {...} />
            <CommandGroup {...}>
              // ...
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup>
              <div className="flex items-center justify-between">
                {selectedValue && (
                  <>
                    <CommandItem
                      onSelect={onClearAllOptions}
                      className="justify-center flex-1 cursor-pointer"
                    >
                      Clear
                    </CommandItem>
                    <Separator
                      orientation="vertical"
                      className="flex h-full mx-2 min-h-6"
                    />
                  </>
                )}
                <CommandItem
                  onSelect={() => setIsPopoverOpen(false)}
                  className="justify-center flex-1 max-w-full cursor-pointer"
                >
                  Close
                </CommandItem>
              </div>
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

خیلی خوب ، اکنون من یک کشویی دارم که چنین است:

ورودی-انتخاب -1

ماشه کشویی را اضافه کنید

اکنون ، برای آخرین مرحله ، می توانم یک ماشه را اضافه کنم تا در کشویی باز/بسته شود. من فقط می توانم از

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا