5304790ed5
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Added SessionGuard component to manage session expiration and online status. - Updated AuthProvider to streamline session fetching and handling. - Introduced IdentityProvidersSection for managing OAuth, SAML, and LDAP identity providers. - Implemented identity provider guides for easier configuration. - Enhanced mail settings with infinite scroll option for improved user experience. - Updated global styles and layout components for better consistency across the application.
111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef, useState } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function OfficeEditorInlineTitle({
|
|
value,
|
|
onRename,
|
|
disabled = false,
|
|
className,
|
|
}: {
|
|
value: string
|
|
onRename: (next: string) => Promise<void>
|
|
disabled?: boolean
|
|
className?: string
|
|
}) {
|
|
const [editing, setEditing] = useState(false)
|
|
const [draft, setDraft] = useState(value)
|
|
const [busy, setBusy] = useState(false)
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const skipBlurCommitRef = useRef(false)
|
|
|
|
useEffect(() => {
|
|
if (!editing) setDraft(value)
|
|
}, [value, editing])
|
|
|
|
useEffect(() => {
|
|
if (!editing) return
|
|
const timer = window.setTimeout(() => {
|
|
const el = inputRef.current
|
|
if (!el) return
|
|
el.focus()
|
|
el.select()
|
|
}, 0)
|
|
return () => window.clearTimeout(timer)
|
|
}, [editing])
|
|
|
|
const cancelEdit = () => {
|
|
skipBlurCommitRef.current = true
|
|
setDraft(value)
|
|
setEditing(false)
|
|
}
|
|
|
|
const commitEdit = async () => {
|
|
if (skipBlurCommitRef.current) {
|
|
skipBlurCommitRef.current = false
|
|
return
|
|
}
|
|
const trimmed = draft.trim()
|
|
if (!trimmed || trimmed === value) {
|
|
setDraft(value)
|
|
setEditing(false)
|
|
return
|
|
}
|
|
setBusy(true)
|
|
try {
|
|
await onRename(trimmed)
|
|
setEditing(false)
|
|
} catch {
|
|
setDraft(value)
|
|
setEditing(false)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
if (editing && !disabled) {
|
|
return (
|
|
<input
|
|
ref={inputRef}
|
|
value={draft}
|
|
disabled={busy}
|
|
aria-label="Nom du fichier"
|
|
className={cn(
|
|
"h-8 min-w-0 max-w-[min(420px,50vw)] rounded-md border border-border bg-background px-2 text-sm font-medium text-foreground outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring",
|
|
className
|
|
)}
|
|
onChange={(event) => setDraft(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault()
|
|
void commitEdit()
|
|
}
|
|
if (event.key === "Escape") {
|
|
event.preventDefault()
|
|
cancelEdit()
|
|
}
|
|
}}
|
|
onBlur={() => void commitEdit()}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
disabled={disabled || busy}
|
|
title={disabled ? undefined : "Renommer"}
|
|
className={cn(
|
|
"min-w-0 truncate rounded-md px-1.5 py-1 text-left text-sm font-medium text-foreground transition-colors hover:bg-muted/70 disabled:cursor-default disabled:hover:bg-transparent",
|
|
className
|
|
)}
|
|
onClick={() => {
|
|
if (!disabled && !busy) setEditing(true)
|
|
}}
|
|
>
|
|
{value}
|
|
</button>
|
|
)
|
|
}
|