280 lines
9.2 KiB
TypeScript
280 lines
9.2 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
import { X } from 'lucide-react'
|
|
import { useT } from '../i18n/useT'
|
|
import type { WebsiteStaticImageSlotKind } from '../types/websiteStaticImage'
|
|
import {
|
|
staticImagePageLabel,
|
|
staticImagePageOptions,
|
|
} from '../utils/staticImagePages'
|
|
import styles from './CategoryModal.module.css'
|
|
|
|
export interface WebsiteStaticImageSlotFormValues {
|
|
key: string
|
|
label: string
|
|
kind: WebsiteStaticImageSlotKind
|
|
aspectRatio: string
|
|
recommendedWidth: string
|
|
itemCount: string
|
|
pageKey: string
|
|
}
|
|
|
|
interface WebsiteStaticImageSlotModalProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
onSubmit: (values: WebsiteStaticImageSlotFormValues) => void
|
|
initial?: Partial<WebsiteStaticImageSlotFormValues>
|
|
title: string
|
|
submitLabel: string
|
|
isSubmitting?: boolean
|
|
lockKey?: boolean
|
|
}
|
|
|
|
const ANIMATION_MS = 220
|
|
const KEY_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]*$/
|
|
const ASPECT_OPTIONS = ['16:9', '16:5', '12:19', '9:4', '4:3', '3:2', '1:1', '21:9']
|
|
|
|
function slugifyKey(raw: string): string {
|
|
const slug = raw
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
if (!slug || !/^[a-z]/.test(slug)) return ''
|
|
return KEY_PATTERN.test(slug) ? slug : ''
|
|
}
|
|
|
|
export function WebsiteStaticImageSlotModal({
|
|
open,
|
|
onClose,
|
|
onSubmit,
|
|
initial,
|
|
title,
|
|
submitLabel,
|
|
isSubmitting = false,
|
|
lockKey = false,
|
|
}: WebsiteStaticImageSlotModalProps) {
|
|
const t = useT()
|
|
const formRef = useRef<HTMLFormElement>(null)
|
|
const [mounted, setMounted] = useState(open)
|
|
const [closing, setClosing] = useState(false)
|
|
const [key, setKey] = useState(initial?.key ?? '')
|
|
const [label, setLabel] = useState(initial?.label ?? '')
|
|
const [kind, setKind] = useState<WebsiteStaticImageSlotKind>(initial?.kind ?? 'single')
|
|
const [aspectRatio, setAspectRatio] = useState(initial?.aspectRatio ?? '16:9')
|
|
const [recommendedWidth, setRecommendedWidth] = useState(initial?.recommendedWidth ?? '1440')
|
|
const [itemCount, setItemCount] = useState(initial?.itemCount ?? '')
|
|
const [pageKey, setPageKey] = useState(initial?.pageKey ?? 'home')
|
|
const [keyTouched, setKeyTouched] = useState(Boolean(initial?.key))
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setMounted(true)
|
|
setClosing(false)
|
|
setKey(initial?.key ?? '')
|
|
setLabel(initial?.label ?? '')
|
|
setKind(initial?.kind ?? 'single')
|
|
setAspectRatio(initial?.aspectRatio ?? '16:9')
|
|
setRecommendedWidth(initial?.recommendedWidth ?? '1440')
|
|
setItemCount(initial?.itemCount ?? '')
|
|
setPageKey(initial?.pageKey ?? 'home')
|
|
setKeyTouched(Boolean(initial?.key) || lockKey)
|
|
} else if (mounted) {
|
|
setClosing(true)
|
|
const timer = setTimeout(() => {
|
|
setMounted(false)
|
|
setClosing(false)
|
|
}, ANIMATION_MS)
|
|
return () => clearTimeout(timer)
|
|
}
|
|
}, [open, mounted, initial, lockKey])
|
|
|
|
useEffect(() => {
|
|
if (!mounted || closing) return
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('keydown', onKey)
|
|
return () => document.removeEventListener('keydown', onKey)
|
|
}, [mounted, closing, onClose])
|
|
|
|
if (!mounted) return null
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
const nextLabel = label.trim()
|
|
const nextKey = slugifyKey(key) || slugifyKey(nextLabel)
|
|
if (!nextKey || !nextLabel) return
|
|
onSubmit({
|
|
key: nextKey,
|
|
label: nextLabel,
|
|
kind,
|
|
aspectRatio,
|
|
recommendedWidth: recommendedWidth.trim(),
|
|
itemCount: kind === 'single' ? '1' : itemCount.trim(),
|
|
pageKey,
|
|
})
|
|
}
|
|
|
|
return createPortal(
|
|
<div
|
|
className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
|
|
onClick={(e) => e.target === e.currentTarget && onClose()}
|
|
role="presentation"
|
|
>
|
|
<div
|
|
className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="static-image-slot-title"
|
|
>
|
|
<div className={styles.header}>
|
|
<h3 id="static-image-slot-title" className={styles.title}>
|
|
{title}
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
className={styles.closeBtn}
|
|
onClick={onClose}
|
|
aria-label={t('common.close')}
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<form ref={formRef} className={styles.form} onSubmit={handleSubmit}>
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-page">{t('website.staticImages.page')}</label>
|
|
<select
|
|
id="static-image-slot-page"
|
|
value={pageKey}
|
|
onChange={(e) => setPageKey(e.target.value)}
|
|
disabled={isSubmitting}
|
|
>
|
|
{staticImagePageOptions([pageKey]).map((option) => (
|
|
<option key={option} value={option}>
|
|
{staticImagePageLabel(option, t)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-label">{t('website.staticImages.slotLabel')}</label>
|
|
<input
|
|
id="static-image-slot-label"
|
|
type="text"
|
|
value={label}
|
|
onChange={(e) => {
|
|
const next = e.target.value
|
|
setLabel(next)
|
|
if (!keyTouched && !lockKey) setKey(slugifyKey(next))
|
|
}}
|
|
placeholder={t('website.staticImages.slotLabelPlaceholder')}
|
|
disabled={isSubmitting}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-key">{t('website.staticImages.slotKey')}</label>
|
|
<input
|
|
id="static-image-slot-key"
|
|
type="text"
|
|
dir="ltr"
|
|
value={key}
|
|
onChange={(e) => {
|
|
setKeyTouched(true)
|
|
setKey(e.target.value)
|
|
}}
|
|
placeholder="home-hero"
|
|
disabled={isSubmitting || lockKey}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-kind">{t('website.staticImages.kind')}</label>
|
|
<select
|
|
id="static-image-slot-kind"
|
|
value={kind}
|
|
onChange={(e) => setKind(e.target.value as WebsiteStaticImageSlotKind)}
|
|
disabled={isSubmitting}
|
|
>
|
|
<option value="single">{t('website.staticImages.kindSingle')}</option>
|
|
<option value="list">{t('website.staticImages.kindList')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
{kind === 'list' ? (
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-count">{t('website.staticImages.itemCount')}</label>
|
|
<input
|
|
id="static-image-slot-count"
|
|
type="text"
|
|
inputMode="numeric"
|
|
dir="ltr"
|
|
value={itemCount}
|
|
onChange={(e) => setItemCount(e.target.value.replace(/[^\d]/g, ''))}
|
|
placeholder={t('website.staticImages.itemCountPlaceholder')}
|
|
disabled={isSubmitting}
|
|
/>
|
|
<p className={styles.hint}>{t('website.staticImages.itemCountHint')}</p>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-aspect">{t('website.staticImages.aspectRatio')}</label>
|
|
<select
|
|
id="static-image-slot-aspect"
|
|
value={aspectRatio}
|
|
onChange={(e) => setAspectRatio(e.target.value)}
|
|
disabled={isSubmitting}
|
|
>
|
|
{ASPECT_OPTIONS.map((option) => (
|
|
<option key={option} value={option}>
|
|
{option}
|
|
</option>
|
|
))}
|
|
{aspectRatio && !ASPECT_OPTIONS.includes(aspectRatio) ? (
|
|
<option value={aspectRatio}>{aspectRatio}</option>
|
|
) : null}
|
|
</select>
|
|
</div>
|
|
|
|
<div className={styles.field}>
|
|
<label htmlFor="static-image-slot-width">
|
|
{t('website.staticImages.recommendedWidth')}
|
|
</label>
|
|
<input
|
|
id="static-image-slot-width"
|
|
type="text"
|
|
inputMode="numeric"
|
|
dir="ltr"
|
|
value={recommendedWidth}
|
|
onChange={(e) => setRecommendedWidth(e.target.value.replace(/[^\d]/g, ''))}
|
|
placeholder="1440"
|
|
disabled={isSubmitting}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.actions}>
|
|
<button
|
|
type="button"
|
|
className={styles.cancelBtn}
|
|
onClick={onClose}
|
|
disabled={isSubmitting}
|
|
>
|
|
{t('products.form.cancel')}
|
|
</button>
|
|
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
|
|
{isSubmitting ? t('website.saving') : submitLabel}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
)
|
|
}
|