78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useLayoutEffect, useState, type CSSProperties } from "react"
|
|
|
|
export type ContactsTableColumn =
|
|
| "checkbox"
|
|
| "name"
|
|
| "email"
|
|
| "phone"
|
|
| "job"
|
|
| "labels"
|
|
|
|
const COLUMN_WIDTHS: Record<ContactsTableColumn, string> = {
|
|
checkbox: "40px",
|
|
name: "minmax(0, 2fr)",
|
|
email: "minmax(0, 2fr)",
|
|
phone: "minmax(0, 1.5fr)",
|
|
job: "minmax(0, 1.5fr)",
|
|
labels: "minmax(0, 1fr)",
|
|
}
|
|
|
|
const COLUMN_LABELS: Record<Exclude<ContactsTableColumn, "checkbox">, string> = {
|
|
name: "Nom",
|
|
email: "E-mail",
|
|
phone: "Numéro de téléphone",
|
|
job: "Fonction et entreprise",
|
|
labels: "Libellés",
|
|
}
|
|
|
|
function columnsForWidth(width: number): ContactsTableColumn[] {
|
|
const cols: ContactsTableColumn[] = ["checkbox", "name"]
|
|
if (width >= 640) cols.push("email")
|
|
if (width >= 768) cols.push("phone")
|
|
if (width >= 1024) cols.push("job", "labels")
|
|
return cols
|
|
}
|
|
|
|
export function useContactsTableColumns() {
|
|
const [visibleColumns, setVisibleColumns] = useState<ContactsTableColumn[]>(() =>
|
|
typeof window === "undefined"
|
|
? ["checkbox", "name", "email", "phone", "job", "labels"]
|
|
: columnsForWidth(window.innerWidth)
|
|
)
|
|
|
|
useLayoutEffect(() => {
|
|
const update = () => setVisibleColumns(columnsForWidth(window.innerWidth))
|
|
update()
|
|
|
|
const mqlSm = window.matchMedia("(min-width: 640px)")
|
|
const mqlMd = window.matchMedia("(min-width: 768px)")
|
|
const mqlLg = window.matchMedia("(min-width: 1024px)")
|
|
|
|
mqlSm.addEventListener("change", update)
|
|
mqlMd.addEventListener("change", update)
|
|
mqlLg.addEventListener("change", update)
|
|
return () => {
|
|
mqlSm.removeEventListener("change", update)
|
|
mqlMd.removeEventListener("change", update)
|
|
mqlLg.removeEventListener("change", update)
|
|
}
|
|
}, [])
|
|
|
|
return { visibleColumns, columnLabels: COLUMN_LABELS }
|
|
}
|
|
|
|
export function contactsTableGridStyle(columns: ContactsTableColumn[]): CSSProperties {
|
|
return {
|
|
gridTemplateColumns: columns.map((c) => COLUMN_WIDTHS[c]).join(" "),
|
|
}
|
|
}
|
|
|
|
export function isContactsColumnVisible(
|
|
columns: ContactsTableColumn[],
|
|
column: ContactsTableColumn
|
|
): boolean {
|
|
return columns.includes(column)
|
|
}
|