125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import type { ComponentType, ReactNode } from "react"
|
|
import { Check, Minus, Plus } from "lucide-react"
|
|
import { Input } from "@/components/ui/input"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type CatalogLabelPresence = "none" | "some" | "all"
|
|
|
|
export type LabelPickerItemComponent = ComponentType<{
|
|
children: ReactNode
|
|
onSelect?: (event: Event) => void
|
|
className?: string
|
|
}>
|
|
|
|
function LabelPickerCheckboxVisual({
|
|
checked,
|
|
}: {
|
|
checked: boolean | "indeterminate"
|
|
}) {
|
|
return (
|
|
<span
|
|
aria-hidden
|
|
className={cn(
|
|
"pointer-events-none inline-flex size-4 shrink-0 items-center justify-center rounded-[2.5px] border-[1.5px] border-[#c2c2c2] bg-transparent",
|
|
checked === true && "border-[#0b57d0] bg-[#0b57d0] text-white",
|
|
checked === "indeterminate" && "border-[#0b57d0] bg-[#0b57d0] text-white"
|
|
)}
|
|
>
|
|
{checked === true ? (
|
|
<Check className="size-3 stroke-[2.5] text-white" />
|
|
) : checked === "indeterminate" ? (
|
|
<Minus className="size-3 stroke-[2.5] text-white" />
|
|
) : null}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function EmailLabelPickerBlock({
|
|
query,
|
|
onQueryChange,
|
|
catalogLabels,
|
|
Item,
|
|
getLabelPresence,
|
|
onToggleCatalogLabel,
|
|
onCreateLabel,
|
|
listClassName,
|
|
}: {
|
|
query: string
|
|
onQueryChange: (v: string) => void
|
|
catalogLabels: string[]
|
|
Item: LabelPickerItemComponent
|
|
getLabelPresence: (label: string) => CatalogLabelPresence
|
|
onToggleCatalogLabel: (label: string) => void
|
|
onCreateLabel: (label: string) => void
|
|
listClassName?: string
|
|
}) {
|
|
const q = query.trim().toLowerCase()
|
|
const filtered = catalogLabels.filter(
|
|
(l) => q.length === 0 || l.toLowerCase().includes(q)
|
|
)
|
|
const trimmed = query.trim()
|
|
const hasExact = catalogLabels.some(
|
|
(l) => l.toLowerCase() === trimmed.toLowerCase()
|
|
)
|
|
const canCreate = trimmed.length > 0 && !hasExact
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="shrink-0 border-b border-[#eceff1] p-2"
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
>
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => onQueryChange(e.target.value)}
|
|
placeholder="Rechercher ou créer un libellé…"
|
|
className="h-8 border-[#dadce0] text-sm shadow-none"
|
|
autoComplete="off"
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
<div className={cn("min-h-0 overflow-y-auto py-1", listClassName ?? "max-h-52")}>
|
|
{canCreate ? (
|
|
<Item
|
|
onSelect={(e) => {
|
|
e.preventDefault()
|
|
onCreateLabel(trimmed)
|
|
}}
|
|
>
|
|
<Plus className="size-[18px] shrink-0 text-[#0b57d0]" strokeWidth={1.5} />
|
|
<span className="min-w-0 text-[#0b57d0]">
|
|
Créer le libellé « {trimmed} »
|
|
</span>
|
|
</Item>
|
|
) : null}
|
|
{filtered.map((label) => {
|
|
const presence = getLabelPresence(label)
|
|
const boxChecked: boolean | "indeterminate" =
|
|
presence === "all" ? true : presence === "some" ? "indeterminate" : false
|
|
return (
|
|
<Item
|
|
key={label}
|
|
onSelect={(e) => {
|
|
e.preventDefault()
|
|
onToggleCatalogLabel(label)
|
|
}}
|
|
>
|
|
<LabelPickerCheckboxVisual checked={boxChecked} />
|
|
<span className="min-w-0 truncate">{label}</span>
|
|
</Item>
|
|
)
|
|
})}
|
|
{filtered.length === 0 && !canCreate ? (
|
|
<div className="px-3 py-2 text-sm text-[#5f6368]">
|
|
Aucun libellé correspondant
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|