shade cn select field | DigitalBlinkit

New Paste Browse

import { useMemo } from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import FieldErrorMessage from "@/components/common/FieldErrorMessage"
import FormLabel from "@/components/common/FormLabel"
import { cn } from "@/lib/utils"
import type { FormSelectFieldProps } from "@/type/commonType"
import { getFormSelectFieldState } from "@/utils/formFieldValidation"
import { dedupeSelectOptions } from "@/utils/search"

export function FormSelectField({
  label,
  name,
  value,
  onChange,
  options,
  placeholder,
  error,
  touched,
  isRequired = false,
  className,
  disabled = false,
  isLoading = false,
  loadingText = "Loading...",
  noValueFoundText = "No options found",
  valueType = "string",
}: FormSelectFieldProps) {
  const uniqueOptions = useMemo(() => dedupeSelectOptions(options), [options])
  const selectValue = value == null ? "" : String(value)

const handleValueChange = (val: string) => {
    if (valueType === "number") {
      ;(onChange as (value: number) => void)(Number(val))
      return
    }

;(onChange as (value: string) => void)(val)
  }
  const fieldState = getFormSelectFieldState({
    name,
    touched,
    error,
    disabled,
    isLoading,
  })

return (
    <div className={cn("mb-5 space-y-2", className)}>
      <FormLabel
        name={name}
        label={label}
        isRequired={isRequired}
        className="text-micurato-steelGray"
      />

<SelectContent>
          {fieldState.isLoading ? (
            <p className="px-2 py-1.5 text-sm text-muted-foreground" role="status">
              {loadingText}
            </p>
          ) : uniqueOptions.length === 0 ? (
            <p className="px-2 py-1.5 text-sm text-muted-foreground" role="status">
              {noValueFoundText}
            </p>
          ) : (
            uniqueOptions.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label}
              </SelectItem>
            ))
          )}
        </SelectContent>
      </Select>

<FieldErrorMessage
        id={fieldState.errorId}
        touched={touched}
        errors={error}
        className="min-h-[20px]"
      />
    </div>
  )
}

Paste Settings

Paste Title :

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Recent Pastes

shade cn select field
Plaintext | 4 | 2 hours ago
CC
Plaintext | 5 | 1 day ago
Death Note
Plaintext | 10 | 1 day ago
rg
Plaintext | 4 | 1 day ago