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

canva 2
Plaintext | 148 | 3 weeks ago
link
Plaintext | 177 | 3 weeks ago
canva
Plaintext | 179 | 3 weeks ago
link
Plaintext | 156 | 3 weeks ago