Browse Source
feat: implement sheet scroll locking and keyboard-aware input focus management for mobile responsiveness
Dev
feat: implement sheet scroll locking and keyboard-aware input focus management for mobile responsiveness
Dev
49 changed files with 2798 additions and 840 deletions
-
36.zcode/plans/plan-sess_b396caff-afc5-4bc2-93b4-abe26fb2b685.md
-
42src/app/globals.css
-
92src/app/questions-list/[slug]/question-detail-client.test.tsx
-
64src/app/questions-list/[slug]/question-detail-client.tsx
-
113src/app/questions-list/page.tsx
-
53src/app/questions-list/section-prefetch.test.ts
-
24src/app/questions-list/section-prefetch.ts
-
23src/components/Componentes/question-answer-storage.tsx
-
391src/components/Componentes/question-birthplace.tsx
-
348src/components/Componentes/question-date-sheet.tsx
-
60src/components/Componentes/question-date.test.tsx
-
247src/components/Componentes/question-date.tsx
-
214src/components/Componentes/question-phone.tsx
-
4src/components/Componentes/question-renderer.tsx
-
182src/components/Componentes/question-sheet.test.tsx
-
416src/components/Componentes/question-sheet.tsx
-
345src/components/Componentes/question-snap-list.tsx
-
4src/components/Componentes/schema-question-flow.integration.test.tsx
-
158src/components/Componentes/ui-config.test.tsx
-
125src/components/Componentes/use-sheet-scroll-lock.ts
-
2src/hooks/marriage/types.ts
-
4src/hooks/marriage/use-form-schema.ts
-
1src/hooks/marriage/use-section-data.test.ts
-
29src/hooks/marriage/use-section-data.ts
-
1src/lib/schema-adapter-overview.test.ts
-
6src/translations/locales/ar.json
-
6src/translations/locales/az.json
-
6src/translations/locales/bn.json
-
6src/translations/locales/da.json
-
6src/translations/locales/de.json
-
6src/translations/locales/en.json
-
6src/translations/locales/es.json
-
6src/translations/locales/fa.json
-
6src/translations/locales/fr.json
-
6src/translations/locales/gu.json
-
6src/translations/locales/ha.json
-
8src/translations/locales/he.json
-
6src/translations/locales/hi.json
-
8src/translations/locales/id.json
-
8src/translations/locales/ks.json
-
8src/translations/locales/pt.json
-
6src/translations/locales/ru.json
-
8src/translations/locales/sw.json
-
8src/translations/locales/tg.json
-
8src/translations/locales/tr.json
-
8src/translations/locales/ul.json
-
8src/translations/locales/ur.json
-
8src/translations/locales/uz.json
-
6src/translations/locales/zh.json
@ -0,0 +1,36 @@ |
|||
## هدف |
|||
اسلاید بین سوالات مثل ریلز اینستاگرام / شورتز یوتیوب: محتوا 1:1 با انگشت حرکت کند، رها کردن بر اساس سرعت (flick) یا مسافت یا commit به بعدی/قبلی یا برگشت، rubber-band در دو انتها، و انیمیشن قابل مقطوعسازی (grab mid-animation). |
|||
|
|||
## تغییرات — فقط `src/components/Componentes/question-snap-list.tsx` |
|||
|
|||
### 1. لایهی درگ با دنبال کردن انگشت (بدون re-render در هر فریم) |
|||
- در `touchstart`: ثبت نقطه/زمان شروع + ارتفاع کانتینر. اگر لمس روی کنترلهای تعاملی شروع شود (`input, textarea, select, [contenteditable], [data-snap-drag-ignore]`) درگ فعال نمیشود تا با تایپ/اسلایدر تداخل نکند. |
|||
- در `touchmove` بعد از عبور از آستانه ~۱۰px: اعمال مستقیم `transform` روی سه پنل (فعال، بعدی، قبلی) از طریق ref (بدون state ریاکت) → 60fps: |
|||
- فعال: `translateY(-offset)` — بالا میرود با انگشت |
|||
- بعدی: `translateY(height - offset)` — از پایین بهصورت پنل کامل وارد میشود |
|||
- قبلی: `translateY(-height - offset)` — از بالا وارد میشود |
|||
- **Rubber-band**: در سوال اول/آخر، آفست با ضریب مقاومت 0.4 فشرده میشود. |
|||
- محاسبهی velocity با میانگین متحرک نمایی روی نمونههای حرکت. |
|||
|
|||
### 2. تصمیم رها کردن (touchend) |
|||
- commit به بعدی/قبلی اگر: مسافت > 30% ارتفاع **یا** |velocity| > 0.55 px/ms (flick). |
|||
- وگرنه spring-back با انیمیشن `cubic-bezier(0.22,1,0.36,1)` ~340ms. |
|||
- هنگام commit: همان callback های فعلی (`onQuestionExit`, `onQuestionTransition`) + `setActiveIndex` فراخوانی میشود؛ انیمیشن inline ادامه پیدا میکند و بعد از پایان، style های inline پاک میشوند تا state کلاسی بدون پرش تحویل داده شود. |
|||
|
|||
### 3. قابل مقطوعسازی |
|||
- اگر وسط انیمیشن snap دوباره انگشت بگذارد: موقعیت فعلی با `getComputedStyle + DOMMatrix` خوانده و فریز میشود و درگ از همان نقطه ادامه مییابد (مثل ریلز). |
|||
|
|||
### 4. حذف پیشنمایشهای ۱۱۰px (peek) |
|||
- برای اسلاید پنل کامل ریلز-مانند، پنلهای قبل/بعد در حالت سکون کاملاً خارج از دید (`translate-y-full` / `-translate-y-full`) قرار میگیرند و wrapper های `max-h-[110px] overflow-hidden` حذف میشوند. خودِ درگ جای affinity بصری را میگیرد. |
|||
- wheel دسکتاپ سرجایش میماند و حالا بهصورت اسلاید کامل انیمیت میشود (transition کلاس موجود). |
|||
|
|||
### 5. حفظ تمام رفتارهای فعلی |
|||
حفاظ `dropdown-open` (شیت باز = بدون درگ)، فوکوس خودکار input سوال فعال، init روی اولین سوال بیپاسخ، `alignTop`، اسپیسر 20%، `inert`/`aria`، `touchcancel` → برگشت، چند-لمسی → نادیده. |
|||
|
|||
## خارج از scope |
|||
- تغییر رفتار wheel/کیبورد دسکتاپ، مرورسازی horizontal، تغییر auto-focus. |
|||
- شیت کد کشور phone (همان 68svh) — طبق خواسته فقط QuestionSheet تغییر کرد. |
|||
|
|||
## راستیآزمایی |
|||
- `npx vitest run` + `npx tsc --noEmit` (یا biome). |
|||
- تست دستی در مرورگر با viewport موبایل: درگ با ماوس (شبیهسازی touch)، wheel، اسکرینشات قبل/بعد رها کردن، بررسی مرز rubber-band در اولین/آخرین سوال، باز کردن شیت nationality (تغییر 82svh قبلی) و فوکوس input متنی (حرکت به بالا با کیبورد). |
|||
@ -0,0 +1,53 @@ |
|||
import { describe, expect, it, vi } from "vitest"; |
|||
import type { QuestionListItem } from "@/lib/schema-adapter"; |
|||
import { prefetchSectionsWithBoundedConcurrency } from "./section-prefetch"; |
|||
|
|||
function section(slug: string): QuestionListItem { |
|||
return { slug } as QuestionListItem; |
|||
} |
|||
|
|||
describe("prefetchSectionsWithBoundedConcurrency", () => { |
|||
it("starts promptly and runs at most two section requests at once", async () => { |
|||
const sections = [section("one"), section("two"), section("three")]; |
|||
const releases: Array<() => void> = []; |
|||
let activeRequests = 0; |
|||
let maximumActiveRequests = 0; |
|||
const prefetch = vi.fn(async () => { |
|||
activeRequests += 1; |
|||
maximumActiveRequests = Math.max(maximumActiveRequests, activeRequests); |
|||
await new Promise<void>((resolve) => releases.push(resolve)); |
|||
activeRequests -= 1; |
|||
}); |
|||
|
|||
const queue = prefetchSectionsWithBoundedConcurrency( |
|||
sections, |
|||
prefetch, |
|||
() => false, |
|||
); |
|||
|
|||
expect(prefetch).toHaveBeenCalledTimes(2); |
|||
expect(maximumActiveRequests).toBe(2); |
|||
|
|||
releases.shift()?.(); |
|||
await vi.waitFor(() => expect(prefetch).toHaveBeenCalledTimes(3)); |
|||
expect(maximumActiveRequests).toBe(2); |
|||
|
|||
releases.splice(0).forEach((release) => release()); |
|||
await queue; |
|||
}); |
|||
|
|||
it("continues after a background request fails", async () => { |
|||
const prefetch = vi |
|||
.fn<(item: QuestionListItem) => Promise<void>>() |
|||
.mockRejectedValueOnce(new Error("offline")) |
|||
.mockResolvedValue(undefined); |
|||
|
|||
await prefetchSectionsWithBoundedConcurrency( |
|||
[section("one"), section("two"), section("three")], |
|||
prefetch, |
|||
() => false, |
|||
); |
|||
|
|||
expect(prefetch).toHaveBeenCalledTimes(3); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,24 @@ |
|||
import type { QuestionListItem } from "@/lib/schema-adapter"; |
|||
|
|||
export async function prefetchSectionsWithBoundedConcurrency( |
|||
sections: readonly QuestionListItem[], |
|||
prefetch: (section: QuestionListItem) => Promise<unknown>, |
|||
isCancelled: () => boolean, |
|||
) { |
|||
let nextSectionIndex = 0; |
|||
|
|||
const runWorker = async () => { |
|||
while (!isCancelled()) { |
|||
const section = sections[nextSectionIndex++]; |
|||
if (!section) return; |
|||
|
|||
try { |
|||
await prefetch(section); |
|||
} catch { |
|||
// Interaction or navigation can retry a failed background prefetch.
|
|||
} |
|||
} |
|||
}; |
|||
|
|||
await Promise.all([runWorker(), runWorker()]); |
|||
} |
|||
@ -0,0 +1,348 @@ |
|||
"use client"; |
|||
|
|||
import { |
|||
type ReactNode, |
|||
useCallback, |
|||
useEffect, |
|||
useMemo, |
|||
useRef, |
|||
useState, |
|||
} from "react"; |
|||
import { createPortal } from "react-dom"; |
|||
import type { QuestionField } from "@/lib/schema-adapter"; |
|||
import { useI18n } from "@/translations/provider"; |
|||
import { useSheetScrollLock } from "./use-sheet-scroll-lock"; |
|||
|
|||
const EXIT_ANIMATION_MS = 300; |
|||
const WHEEL_ITEM_HEIGHT = 48; |
|||
const WHEEL_EDGE_PADDING = 108; |
|||
const SCROLL_SETTLE_MS = 90; |
|||
|
|||
const MONTH_VALUES = [ |
|||
"01", |
|||
"02", |
|||
"03", |
|||
"04", |
|||
"05", |
|||
"06", |
|||
"07", |
|||
"08", |
|||
"09", |
|||
"10", |
|||
"11", |
|||
"12", |
|||
]; |
|||
|
|||
const MIN_AGE = 18; |
|||
const currentYear = new Date().getFullYear(); |
|||
const maxBirthYear = currentYear - MIN_AGE; |
|||
const YEARS = Array.from({ length: 80 }, (_, i) => |
|||
(maxBirthYear - i).toString(), |
|||
); |
|||
|
|||
function daysInMonth(year: string, month: string): number { |
|||
const y = Number.parseInt(year, 10); |
|||
const m = Number.parseInt(month, 10); |
|||
if (!y || !m) return 31; |
|||
return new Date(y, m, 0).getDate(); |
|||
} |
|||
|
|||
type DatePart = "day" | "month" | "year"; |
|||
|
|||
type QuestionDateSheetProps = { |
|||
question: QuestionField; |
|||
value: string; |
|||
onApply: (formattedDate: string) => void; |
|||
onClose: () => void; |
|||
}; |
|||
|
|||
function WheelColumn({ |
|||
ariaLabel, |
|||
items, |
|||
selectedIndex, |
|||
onSelect, |
|||
}: { |
|||
ariaLabel: string; |
|||
items: Array<{ value: string; label: ReactNode }>; |
|||
selectedIndex: number; |
|||
onSelect: (index: number) => void; |
|||
}) { |
|||
const listRef = useRef<HTMLDivElement>(null); |
|||
const settleTimeoutRef = useRef<number | null>(null); |
|||
const initialScrollDoneRef = useRef(false); |
|||
|
|||
useEffect(() => { |
|||
const frame = window.requestAnimationFrame(() => { |
|||
const list = listRef.current; |
|||
if (!list || initialScrollDoneRef.current) return; |
|||
initialScrollDoneRef.current = true; |
|||
list.scrollTop = selectedIndex * WHEEL_ITEM_HEIGHT; |
|||
}); |
|||
return () => window.cancelAnimationFrame(frame); |
|||
}, []); |
|||
|
|||
useEffect(() => { |
|||
return () => { |
|||
if (settleTimeoutRef.current !== null) { |
|||
window.clearTimeout(settleTimeoutRef.current); |
|||
} |
|||
}; |
|||
}, []); |
|||
|
|||
const handleScroll = useCallback(() => { |
|||
const list = listRef.current; |
|||
if (!list) return; |
|||
if (settleTimeoutRef.current !== null) { |
|||
window.clearTimeout(settleTimeoutRef.current); |
|||
} |
|||
settleTimeoutRef.current = window.setTimeout(() => { |
|||
settleTimeoutRef.current = null; |
|||
const index = Math.max( |
|||
0, |
|||
Math.min( |
|||
items.length - 1, |
|||
Math.round(list.scrollTop / WHEEL_ITEM_HEIGHT), |
|||
), |
|||
); |
|||
if (index !== selectedIndex) { |
|||
onSelect(index); |
|||
} |
|||
}, SCROLL_SETTLE_MS); |
|||
}, [items.length, onSelect, selectedIndex]); |
|||
|
|||
return ( |
|||
<div |
|||
ref={listRef} |
|||
aria-label={ariaLabel} |
|||
onScroll={handleScroll} |
|||
onTouchStart={(event) => event.stopPropagation()} |
|||
onTouchMove={(event) => event.stopPropagation()} |
|||
onTouchEnd={(event) => event.stopPropagation()} |
|||
className="h-[264px] flex-1 snap-y snap-mandatory overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" |
|||
> |
|||
<div style={{ height: WHEEL_EDGE_PADDING }} aria-hidden="true" /> |
|||
{items.map((item, index) => { |
|||
const isSelected = index === selectedIndex; |
|||
return ( |
|||
<div |
|||
key={item.value} |
|||
aria-selected={isSelected} |
|||
className="flex h-12 snap-center items-center justify-center" |
|||
> |
|||
<span |
|||
className={[ |
|||
"text-[15px] transition-colors", |
|||
isSelected |
|||
? "font-bold text-[#181818]" |
|||
: "font-medium text-[#667085]", |
|||
].join(" ")} |
|||
> |
|||
{item.label} |
|||
</span> |
|||
</div> |
|||
); |
|||
})} |
|||
<div style={{ height: WHEEL_EDGE_PADDING }} aria-hidden="true" /> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export function QuestionDateSheet({ |
|||
question, |
|||
value, |
|||
onApply, |
|||
onClose, |
|||
}: QuestionDateSheetProps) { |
|||
const { dictionary: t, locale } = useI18n(); |
|||
const [isClosing, setIsClosing] = useState(false); |
|||
|
|||
const parts = value ? value.split("-") : []; |
|||
const [selectedYear, setSelectedYear] = useState(parts[0] || YEARS[0]); |
|||
const [selectedMonth, setSelectedMonth] = useState( |
|||
parts[1] || MONTH_VALUES[0], |
|||
); |
|||
const [selectedDay, setSelectedDay] = useState(parts[2] || "01"); |
|||
const dirtyRef = useRef(false); |
|||
|
|||
useSheetScrollLock(true); |
|||
|
|||
const closeSheet = useCallback(() => { |
|||
setIsClosing(true); |
|||
window.setTimeout(onClose, EXIT_ANIMATION_MS); |
|||
}, [onClose]); |
|||
|
|||
useEffect(() => { |
|||
const handleKeyDown = (e: KeyboardEvent) => { |
|||
if (e.key === "Escape") { |
|||
closeSheet(); |
|||
} |
|||
}; |
|||
window.addEventListener("keydown", handleKeyDown); |
|||
return () => window.removeEventListener("keydown", handleKeyDown); |
|||
}, [closeSheet]); |
|||
|
|||
const months = useMemo(() => { |
|||
return MONTH_VALUES.map((val, idx) => { |
|||
const date = new Date(2000, idx, 15); |
|||
const label = new Intl.DateTimeFormat(`${locale}-u-ca-gregory`, { |
|||
month: "long", |
|||
}).format(date); |
|||
return { value: val, label }; |
|||
}); |
|||
}, [locale]); |
|||
|
|||
const days = useMemo(() => { |
|||
return Array.from({ length: 31 }, (_, i) => { |
|||
const num = i + 1; |
|||
const val = num < 10 ? `0${num}` : `${num}`; |
|||
return { |
|||
value: val, |
|||
label: new Intl.NumberFormat(locale).format(num), |
|||
}; |
|||
}); |
|||
}, [locale]); |
|||
|
|||
const years = useMemo(() => { |
|||
return YEARS.map((y) => ({ |
|||
value: y, |
|||
label: new Intl.NumberFormat(locale, { useGrouping: false }).format( |
|||
Number.parseInt(y, 10), |
|||
), |
|||
})); |
|||
}, [locale]); |
|||
|
|||
const dayIndex = Math.max( |
|||
0, |
|||
days.findIndex((d) => d.value === selectedDay), |
|||
); |
|||
const monthIndex = Math.max( |
|||
0, |
|||
months.findIndex((m) => m.value === selectedMonth), |
|||
); |
|||
const yearIndex = Math.max( |
|||
0, |
|||
years.findIndex((y) => y.value === selectedYear), |
|||
); |
|||
|
|||
// Keep the day valid for the selected month/year (Feb, leap years, ...).
|
|||
useEffect(() => { |
|||
const maxDay = daysInMonth(selectedYear, selectedMonth); |
|||
const dayNum = Number.parseInt(selectedDay, 10); |
|||
if (dayNum > maxDay) { |
|||
setSelectedDay(String(maxDay).padStart(2, "0")); |
|||
} |
|||
}, [selectedYear, selectedMonth, selectedDay]); |
|||
|
|||
// Apply the picked date immediately while spinning the wheels, so the
|
|||
// field above the sheet always reflects the current selection.
|
|||
useEffect(() => { |
|||
if (!dirtyRef.current) return; |
|||
const maxDay = daysInMonth(selectedYear, selectedMonth); |
|||
const dayNum = Math.min(Number.parseInt(selectedDay, 10), maxDay); |
|||
const formattedDay = String(dayNum).padStart(2, "0"); |
|||
onApply( |
|||
`${selectedYear}-${selectedMonth.padStart(2, "0")}-${formattedDay}`, |
|||
); |
|||
}, [selectedYear, selectedMonth, selectedDay, onApply]); |
|||
|
|||
const handleSelect = useCallback((part: DatePart, index: number) => { |
|||
dirtyRef.current = true; |
|||
if (part === "day") { |
|||
setSelectedDay(String(index + 1).padStart(2, "0")); |
|||
} else if (part === "month") { |
|||
setSelectedMonth(MONTH_VALUES[index]); |
|||
} else { |
|||
setSelectedYear(YEARS[index]); |
|||
} |
|||
}, []); |
|||
|
|||
const dayLabel = t.Day || "Day"; |
|||
const monthLabel = t.Month || "Month"; |
|||
const yearLabel = t.Year || "Year"; |
|||
|
|||
return createPortal( |
|||
<div |
|||
className="fixed inset-0 z-50 flex items-end justify-center bg-transparent" |
|||
role="dialog" |
|||
aria-modal="true" |
|||
aria-label={question.title} |
|||
onKeyDown={(event) => { |
|||
if (event.key === "Escape") closeSheet(); |
|||
}} |
|||
onClick={(event) => { |
|||
if (event.target === event.currentTarget) closeSheet(); |
|||
}} |
|||
> |
|||
<section |
|||
className={[ |
|||
"flex w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[calc(16px+env(safe-area-inset-bottom))] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[300ms] ease-out sm:max-w-[375px] animate-in slide-in-from-bottom", |
|||
isClosing ? "translate-y-full" : "translate-y-0", |
|||
].join(" ")} |
|||
> |
|||
<div className="flex items-center justify-between border-b border-[#F2F4F7] px-5 pb-3 pt-2"> |
|||
<h3 className="truncate pr-2 text-[17px] font-bold text-[#181818]"> |
|||
{question.title} |
|||
</h3> |
|||
<button |
|||
type="button" |
|||
onClick={closeSheet} |
|||
className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-[#667085] transition-colors hover:bg-[#F2F4F7] hover:text-[#181818]" |
|||
aria-label="Close" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
width="18" |
|||
height="18" |
|||
viewBox="0 0 24 24" |
|||
fill="none" |
|||
stroke="currentColor" |
|||
strokeWidth="2.2" |
|||
strokeLinecap="round" |
|||
strokeLinejoin="round" |
|||
> |
|||
<line x1="18" y1="6" x2="6" y2="18" /> |
|||
<line x1="6" y1="6" x2="18" y2="18" /> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
|
|||
<div className="px-5 pt-4"> |
|||
<div className="grid grid-cols-3 gap-2 pb-2 text-center text-[11px] font-semibold text-[#667085]"> |
|||
<span>{dayLabel}</span> |
|||
<span>{monthLabel}</span> |
|||
<span>{yearLabel}</span> |
|||
</div> |
|||
<div className="relative"> |
|||
<div |
|||
aria-hidden="true" |
|||
className="pointer-events-none absolute inset-x-0 top-1/2 h-12 -translate-y-1/2 rounded-[8px] bg-[#F2F4F7]" |
|||
/> |
|||
<div className="relative flex gap-2"> |
|||
<WheelColumn |
|||
ariaLabel={dayLabel} |
|||
items={days} |
|||
selectedIndex={dayIndex} |
|||
onSelect={(index) => handleSelect("day", index)} |
|||
/> |
|||
<WheelColumn |
|||
ariaLabel={monthLabel} |
|||
items={months} |
|||
selectedIndex={monthIndex} |
|||
onSelect={(index) => handleSelect("month", index)} |
|||
/> |
|||
<WheelColumn |
|||
ariaLabel={yearLabel} |
|||
items={years} |
|||
selectedIndex={yearIndex} |
|||
onSelect={(index) => handleSelect("year", index)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div>, |
|||
document.body, |
|||
); |
|||
} |
|||
|
|||
export default QuestionDateSheet; |
|||
@ -0,0 +1,60 @@ |
|||
import { fireEvent, render, screen } from "@testing-library/react"; |
|||
import { beforeEach, describe, expect, it, vi } from "vitest"; |
|||
import type { QuestionField } from "@/lib/schema-adapter"; |
|||
import { QuestionDate } from "./question-date"; |
|||
|
|||
let answerValue: string | null = null; |
|||
|
|||
vi.mock("@/translations/provider", () => ({ |
|||
useI18n: () => ({ |
|||
locale: "en", |
|||
dictionary: { Age: "Age", Day: "Day", Month: "Month", Year: "Year" }, |
|||
}), |
|||
})); |
|||
|
|||
vi.mock("./question-answer-storage", () => ({ |
|||
useQuestionAnswers: () => ({ |
|||
getAnswerValue: () => answerValue, |
|||
setAnswerValue: vi.fn(), |
|||
}), |
|||
})); |
|||
|
|||
const question = { |
|||
id: "personal_identity.date_of_birth", |
|||
title: "Date of Birth", |
|||
type: "date", |
|||
order: 1, |
|||
required: true, |
|||
baseRequired: true, |
|||
isVisible: true, |
|||
description: "", |
|||
tooltip: "", |
|||
extras: { placeHolder: "YYYY-MM-DD", range: [0, 0], options: [] }, |
|||
options: [], |
|||
ui_config: { isDob: true }, |
|||
} as QuestionField; |
|||
|
|||
describe("QuestionDate", () => { |
|||
beforeEach(() => { |
|||
answerValue = null; |
|||
}); |
|||
|
|||
it("hides the derived age until a birth date exists", () => { |
|||
const { rerender } = render(<QuestionDate question={question} />); |
|||
expect(screen.queryByText("Age")).toBeNull(); |
|||
|
|||
answerValue = "1979-05-15"; |
|||
rerender(<QuestionDate question={question} />); |
|||
|
|||
expect(screen.getByText("Age")).toBeDefined(); |
|||
expect(screen.getByDisplayValue(/^\d+$/)).toBeDefined(); |
|||
}); |
|||
|
|||
it("renders calendar years without thousands separators", () => { |
|||
render(<QuestionDate question={question} />); |
|||
fireEvent.click(screen.getByRole("button", { name: /select date/i })); |
|||
|
|||
const yearWheel = screen.getByLabelText("Year"); |
|||
expect(yearWheel.textContent).not.toMatch(/[,٬]/); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,182 @@ |
|||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; |
|||
import { |
|||
cleanup, |
|||
fireEvent, |
|||
render, |
|||
screen, |
|||
waitFor, |
|||
} from "@testing-library/react"; |
|||
import { afterEach, describe, expect, it, vi } from "vitest"; |
|||
import type { QuestionField } from "@/lib/schema-adapter"; |
|||
import { QuestionAnswersProvider } from "./question-answer-storage"; |
|||
import { QuestionSheet } from "./question-sheet"; |
|||
|
|||
vi.mock("@/translations/provider", () => ({ |
|||
useI18n: vi.fn(() => ({ locale: "fa", dictionary: { Confirm: "تایید" } })), |
|||
})); |
|||
|
|||
vi.mock("@/hooks/marriage/use-section-data", () => ({ |
|||
applyProfilePatchResultToCache: vi.fn(), |
|||
useMarriageSectionDataQuery: vi.fn(() => ({ |
|||
data: undefined, |
|||
isLoading: false, |
|||
})), |
|||
useUpdateMarriageSectionDataMutation: vi.fn(() => ({ |
|||
mutateAsync: vi.fn().mockResolvedValue({}), |
|||
isPending: false, |
|||
})), |
|||
})); |
|||
|
|||
describe("QuestionSheet component", () => { |
|||
afterEach(() => { |
|||
cleanup(); |
|||
document.body.classList.remove("dropdown-open"); |
|||
document.body.classList.remove("question-input-open"); |
|||
}); |
|||
|
|||
const queryClient = new QueryClient({ |
|||
defaultOptions: { queries: { retry: false } }, |
|||
}); |
|||
|
|||
it("renders trigger and opens bottom sheet on click", async () => { |
|||
const qDropdown = { |
|||
id: "q_nat", |
|||
title: "تابعیت و شهروندی", |
|||
type: "dropdown", |
|||
order: 1, |
|||
required: true, |
|||
isVisible: true, |
|||
description: "", |
|||
tooltip: "", |
|||
extras: { placeHolder: "انتخاب کشور" }, |
|||
options: [ |
|||
{ id: "iran", value: "Iran", label: "ایران", order: 1 }, |
|||
{ id: "germany", value: "Germany", label: "آلمان", order: 2 }, |
|||
{ id: "canada", value: "Canada", label: "کانادا", order: 3 }, |
|||
], |
|||
ui_config: {}, |
|||
} as QuestionField; |
|||
|
|||
render( |
|||
<div className="app-shell"> |
|||
<QueryClientProvider client={queryClient}> |
|||
<QuestionAnswersProvider slug="test" questions={[qDropdown]}> |
|||
<QuestionSheet question={qDropdown} /> |
|||
</QuestionAnswersProvider> |
|||
</QueryClientProvider> |
|||
</div>, |
|||
); |
|||
|
|||
// Initial placeholder displayed in trigger
|
|||
expect(screen.getByText("انتخاب کشور")).toBeDefined(); |
|||
|
|||
// Click trigger to open bottom sheet
|
|||
const trigger = screen.getByRole("button", { name: /انتخاب کشور/i }); |
|||
fireEvent.click(trigger); |
|||
|
|||
// Bottom sheet dialog should be visible
|
|||
expect(screen.getByRole("dialog")).toBeDefined(); |
|||
expect(document.body.classList.contains("dropdown-open")).toBe(true); |
|||
expect(document.body.classList.contains("question-input-open")).toBe(true); |
|||
expect( |
|||
(document.querySelector(".app-shell") as HTMLElement).style.overflowY, |
|||
).toBe("hidden"); |
|||
expect(screen.getByRole("button", { name: "ایران" })).toBeDefined(); |
|||
expect(screen.getByRole("button", { name: "آلمان" })).toBeDefined(); |
|||
|
|||
// Select Iran
|
|||
const iranBtn = screen.getByRole("button", { name: "ایران" }); |
|||
fireEvent.click(iranBtn); |
|||
|
|||
// Trigger should now show Iran
|
|||
await waitFor(() => { |
|||
expect(screen.getByText("ایران")).toBeDefined(); |
|||
expect(document.body.classList.contains("dropdown-open")).toBe(false); |
|||
expect(document.body.classList.contains("question-input-open")).toBe( |
|||
false, |
|||
); |
|||
expect( |
|||
(document.querySelector(".app-shell") as HTMLElement).style.overflowY, |
|||
).toBe(""); |
|||
}); |
|||
}); |
|||
|
|||
it("supports multi-selection with confirm button", async () => { |
|||
const qMulti = { |
|||
id: "q_lang", |
|||
title: "سایر زبانها", |
|||
type: "dropdown", |
|||
order: 2, |
|||
required: false, |
|||
isVisible: true, |
|||
description: "", |
|||
tooltip: "", |
|||
extras: { placeHolder: "انتخاب زبانها", range: [0, 5] }, |
|||
options: [ |
|||
{ id: "en", value: "English", label: "انگلیسی", order: 1 }, |
|||
{ id: "ar", value: "Arabic", label: "عربی", order: 2 }, |
|||
{ id: "fr", value: "French", label: "فرانسوی", order: 3 }, |
|||
], |
|||
ui_config: {}, |
|||
} as QuestionField; |
|||
|
|||
render( |
|||
<QueryClientProvider client={queryClient}> |
|||
<QuestionAnswersProvider slug="test" questions={[qMulti]}> |
|||
<QuestionSheet question={qMulti} /> |
|||
</QuestionAnswersProvider> |
|||
</QueryClientProvider>, |
|||
); |
|||
|
|||
// Click trigger
|
|||
const trigger = screen.getByRole("button", { name: /انتخاب زبانها/i }); |
|||
fireEvent.click(trigger); |
|||
|
|||
// Select English and French
|
|||
const enBtn = screen.getByRole("button", { name: "انگلیسی" }); |
|||
const frBtn = screen.getByRole("button", { name: "فرانسوی" }); |
|||
fireEvent.click(enBtn); |
|||
fireEvent.click(frBtn); |
|||
|
|||
// Confirm button should show count
|
|||
const confirmBtn = screen.getByRole("button", { name: /تایید \(2\)/i }); |
|||
expect(confirmBtn).toBeDefined(); |
|||
fireEvent.click(confirmBtn); |
|||
|
|||
// Trigger displays selected items
|
|||
await waitFor(() => { |
|||
expect(screen.getByText("انگلیسی, فرانسوی")).toBeDefined(); |
|||
}); |
|||
}); |
|||
|
|||
it("closes the inline selector with Escape", async () => { |
|||
const question = { |
|||
id: "q_drag", |
|||
title: "کشور محل اقامت", |
|||
type: "dropdown", |
|||
required: true, |
|||
extras: { placeHolder: "انتخاب کشور" }, |
|||
options: [{ id: "iran", value: "Iran", label: "ایران", order: 1 }], |
|||
ui_config: {}, |
|||
} as QuestionField; |
|||
|
|||
render( |
|||
<QueryClientProvider client={queryClient}> |
|||
<QuestionAnswersProvider slug="test" questions={[question]}> |
|||
<QuestionSheet question={question} /> |
|||
</QuestionAnswersProvider> |
|||
</QueryClientProvider>, |
|||
); |
|||
|
|||
fireEvent.click(screen.getByRole("button", { name: /انتخاب کشور/i })); |
|||
fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" }); |
|||
|
|||
await waitFor(() => { |
|||
expect(screen.queryByRole("dialog")).toBeNull(); |
|||
expect(document.body.classList.contains("dropdown-open")).toBe(false); |
|||
expect(document.body.classList.contains("question-input-open")).toBe( |
|||
false, |
|||
); |
|||
}); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,416 @@ |
|||
"use client"; |
|||
|
|||
import { useCallback, useEffect, useRef, useState } from "react"; |
|||
import { createPortal } from "react-dom"; |
|||
import type { QuestionField } from "@/lib/schema-adapter"; |
|||
import { useI18n } from "@/translations/provider"; |
|||
import { Button } from "./button"; |
|||
import { ExplanationUiFont } from "./explanation-ui-font"; |
|||
import { useQuestionAnswers } from "./question-answer-storage"; |
|||
import QuestionTitle from "./question-title"; |
|||
import { useSheetScrollLock } from "./use-sheet-scroll-lock"; |
|||
|
|||
const EXIT_ANIMATION_MS = 300; |
|||
|
|||
export type QuestionSheetProps = { |
|||
question: QuestionField; |
|||
disabled?: boolean; |
|||
}; |
|||
|
|||
export function QuestionSheet({ question, disabled }: QuestionSheetProps) { |
|||
const { dictionary: t, locale } = useI18n(); |
|||
const { getAnswerValue, setAnswerValue } = useQuestionAnswers(); |
|||
const rawValue = getAnswerValue(question); |
|||
|
|||
const isMulti = |
|||
Array.isArray(rawValue) || |
|||
question.type === "checkbox" || |
|||
(question.extras?.range && question.extras.range[1] > 1); |
|||
|
|||
const selectedList = Array.isArray(rawValue) |
|||
? rawValue |
|||
: typeof rawValue === "string" && rawValue |
|||
? [rawValue] |
|||
: []; |
|||
const singleValue = typeof rawValue === "string" ? rawValue : ""; |
|||
|
|||
const [isOpen, setIsOpen] = useState(false); |
|||
const [isClosing, setIsClosing] = useState(false); |
|||
const [searchQuery, setSearchQuery] = useState(""); |
|||
const searchInputRef = useRef<HTMLInputElement>(null); |
|||
const listRef = useRef<HTMLDivElement>(null); |
|||
const closeSheet = useCallback(() => { |
|||
setIsClosing(true); |
|||
window.setTimeout(() => { |
|||
setIsOpen(false); |
|||
setIsClosing(false); |
|||
setSearchQuery(""); |
|||
}, EXIT_ANIMATION_MS); |
|||
}, []); |
|||
|
|||
const openSheet = useCallback(() => { |
|||
if (disabled) return; |
|||
setIsOpen(true); |
|||
setIsClosing(false); |
|||
}, [disabled]); |
|||
|
|||
useSheetScrollLock(isOpen); |
|||
|
|||
// Handle escape key
|
|||
useEffect(() => { |
|||
if (!isOpen) return; |
|||
|
|||
const handleKeyDown = (e: KeyboardEvent) => { |
|||
if (e.key === "Escape") { |
|||
closeSheet(); |
|||
} |
|||
}; |
|||
|
|||
window.addEventListener("keydown", handleKeyDown); |
|||
return () => window.removeEventListener("keydown", handleKeyDown); |
|||
}, [isOpen, closeSheet]); |
|||
|
|||
const options = question.options || []; |
|||
|
|||
const showSearch = (() => { |
|||
if (question.extras?.noSearch) return false; |
|||
return options.length > 5; |
|||
})(); |
|||
|
|||
const filteredOptions = options.filter((option) => |
|||
option.label.toLowerCase().includes(searchQuery.toLowerCase()), |
|||
); |
|||
|
|||
const getCleanLabel = (optId: string) => { |
|||
const opt = options.find((o) => o.id === optId); |
|||
if (!opt) return optId; |
|||
return opt.label.split(" - ")[0]; |
|||
}; |
|||
|
|||
const isRtl = locale === "fa" || locale === "ar" || locale === "ur"; |
|||
const defaultPlaceholder = isRtl ? "انتخاب کنید" : "Select"; |
|||
|
|||
const displayLabel = isMulti |
|||
? selectedList.length > 0 |
|||
? selectedList.map(getCleanLabel).join(", ") |
|||
: question.extras?.placeHolder || defaultPlaceholder |
|||
: singleValue |
|||
? getCleanLabel(singleValue) |
|||
: question.extras?.placeHolder || defaultPlaceholder; |
|||
|
|||
const hasSelectedValue = isMulti |
|||
? selectedList.length > 0 |
|||
: Boolean(singleValue); |
|||
|
|||
const toggleMultiOption = (optionId: string) => { |
|||
let nextValue: string[]; |
|||
if (selectedList.includes(optionId)) { |
|||
nextValue = selectedList.filter((v) => v !== optionId); |
|||
} else { |
|||
nextValue = [...selectedList, optionId]; |
|||
} |
|||
setAnswerValue(question, nextValue.length > 0 ? nextValue : null); |
|||
}; |
|||
|
|||
const handleSelectSingle = (optionId: string) => { |
|||
setAnswerValue(question, optionId); |
|||
closeSheet(); |
|||
}; |
|||
|
|||
const searchPlaceholder = |
|||
locale === "fa" |
|||
? "جستجو..." |
|||
: locale === "ar" |
|||
? "بحث..." |
|||
: locale === "tr" |
|||
? "Ara..." |
|||
: "Search..."; |
|||
|
|||
const noResultsText = |
|||
locale === "fa" |
|||
? "موردی یافت نشد" |
|||
: locale === "ar" |
|||
? "لم يتم العثور على نتائج" |
|||
: "No options found"; |
|||
|
|||
const confirmText = t.Confirm || (isRtl ? "تایید" : "Confirm"); |
|||
|
|||
return ( |
|||
<div |
|||
className={[ |
|||
"relative flex w-full flex-col gap-2.5 transition-opacity duration-200", |
|||
disabled ? "pointer-events-none opacity-30" : "", |
|||
].join(" ")} |
|||
> |
|||
<QuestionTitle question={question} /> |
|||
|
|||
{/* Select Trigger Button (Input style) */} |
|||
<button |
|||
type="button" |
|||
disabled={disabled} |
|||
onClick={openSheet} |
|||
className={[ |
|||
"flex h-[54px] w-full items-center justify-between rounded-[16px] border bg-white px-4.5 text-start transition-all cursor-pointer outline-none", |
|||
isOpen |
|||
? "border-[#6F6F6F] ring-1 ring-[#6F6F6F]" |
|||
: "border-[#D0D5DD] hover:border-[#98A2B3]", |
|||
].join(" ")} |
|||
> |
|||
<span |
|||
className={[ |
|||
"text-[15px] font-medium truncate", |
|||
hasSelectedValue ? "text-[#181818]" : "text-[#667085]", |
|||
].join(" ")} |
|||
> |
|||
{displayLabel} |
|||
</span> |
|||
<svg |
|||
aria-hidden="true" |
|||
width="16" |
|||
height="10" |
|||
viewBox="0 0 16 10" |
|||
fill="none" |
|||
className={[ |
|||
"shrink-0 transition-transform duration-200", |
|||
isOpen ? "rotate-180" : "", |
|||
].join(" ")} |
|||
> |
|||
<path |
|||
d="M14.75 1.25L7.75 8.25L0.75 1.25" |
|||
stroke="#344054" |
|||
strokeWidth="1.75" |
|||
strokeLinecap="round" |
|||
strokeLinejoin="round" |
|||
/> |
|||
</svg> |
|||
</button> |
|||
|
|||
{/* The active field moves up while the options sheet enters from below. */} |
|||
{isOpen && |
|||
createPortal( |
|||
<div |
|||
className="fixed inset-0 z-50 flex items-end justify-center bg-transparent" |
|||
role="dialog" |
|||
aria-label={question.title} |
|||
onKeyDown={(e) => { |
|||
if (e.key === "Escape") closeSheet(); |
|||
}} |
|||
onClick={(event) => { |
|||
if (event.target === event.currentTarget) closeSheet(); |
|||
}} |
|||
> |
|||
<section |
|||
className={[ |
|||
"flex h-[82svh] w-full flex-col overflow-hidden rounded-t-[22px] bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-10px_32px_rgba(0,0,0,0.12)] transition-transform duration-[300ms] ease-out sm:max-w-[375px] animate-in slide-in-from-bottom", |
|||
isClosing ? "translate-y-full" : "translate-y-0", |
|||
].join(" ")} |
|||
> |
|||
<div className="flex items-center justify-between px-5 pt-2 pb-3 border-b border-[#F2F4F7]"> |
|||
<h3 className="text-[17px] font-bold text-[#181818] truncate pr-2"> |
|||
{question.title} |
|||
</h3> |
|||
<button |
|||
type="button" |
|||
onClick={closeSheet} |
|||
className="flex size-8 shrink-0 items-center justify-center rounded-full text-[#667085] hover:bg-[#F2F4F7] hover:text-[#181818] transition-colors cursor-pointer" |
|||
aria-label="Close" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
width="18" |
|||
height="18" |
|||
viewBox="0 0 24 24" |
|||
fill="none" |
|||
stroke="currentColor" |
|||
strokeWidth="2.2" |
|||
strokeLinecap="round" |
|||
strokeLinejoin="round" |
|||
> |
|||
<line x1="18" y1="6" x2="6" y2="18" /> |
|||
<line x1="6" y1="6" x2="18" y2="18" /> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
|
|||
{/* Search Bar */} |
|||
{showSearch && ( |
|||
<div className="px-5 pt-3.5 pb-2"> |
|||
<div className="flex h-[46px] w-full items-center gap-2.5 rounded-[14px] bg-[#F2F4F7] px-3.5 transition-colors focus-within:bg-[#EAECF0]"> |
|||
<svg |
|||
aria-hidden="true" |
|||
width="18" |
|||
height="18" |
|||
viewBox="0 0 18 18" |
|||
fill="none" |
|||
className="shrink-0 text-[#667085]" |
|||
> |
|||
<path |
|||
d="M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z" |
|||
stroke="#667085" |
|||
strokeWidth="1.75" |
|||
strokeLinecap="round" |
|||
strokeLinejoin="round" |
|||
/> |
|||
<path |
|||
d="M15.75 15.75L12.5 12.5" |
|||
stroke="#667085" |
|||
strokeWidth="1.75" |
|||
strokeLinecap="round" |
|||
strokeLinejoin="round" |
|||
/> |
|||
</svg> |
|||
<input |
|||
ref={searchInputRef} |
|||
type="text" |
|||
value={searchQuery} |
|||
onChange={(e) => setSearchQuery(e.target.value)} |
|||
placeholder={searchPlaceholder} |
|||
className="flex-1 bg-transparent text-[14px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3]" |
|||
/> |
|||
{searchQuery ? ( |
|||
<button |
|||
type="button" |
|||
onClick={() => setSearchQuery("")} |
|||
className="text-[#667085] hover:text-[#181818] text-xs font-semibold p-1 cursor-pointer" |
|||
> |
|||
✕ |
|||
</button> |
|||
) : null} |
|||
</div> |
|||
</div> |
|||
)} |
|||
|
|||
{/* Options List */} |
|||
<div |
|||
ref={listRef} |
|||
onTouchStart={(event) => event.stopPropagation()} |
|||
onTouchMove={(event) => event.stopPropagation()} |
|||
onTouchEnd={(event) => event.stopPropagation()} |
|||
className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overscroll-contain px-5 py-3" |
|||
> |
|||
{filteredOptions.length > 0 ? ( |
|||
filteredOptions.map((option) => { |
|||
const isSelected = isMulti |
|||
? selectedList.includes(option.id) |
|||
: singleValue === option.id; |
|||
|
|||
return ( |
|||
<button |
|||
key={option.id} |
|||
type="button" |
|||
onClick={() => { |
|||
if (isMulti) { |
|||
toggleMultiOption(option.id); |
|||
} else { |
|||
handleSelectSingle(option.id); |
|||
} |
|||
}} |
|||
className={[ |
|||
"flex min-h-12 w-full items-start gap-3 rounded-lg border px-3 py-3 text-start transition-colors cursor-pointer", |
|||
isSelected |
|||
? "bg-[#FFF4F5] border-[#F0445B]/30 text-[#181818]" |
|||
: "bg-white hover:bg-[#F2F4F7] border-[#EAECF0] text-[#181818]", |
|||
].join(" ")} |
|||
> |
|||
{/* Indicator Icon */} |
|||
{isMulti ? ( |
|||
<div |
|||
className={[ |
|||
"size-[22px] shrink-0 rounded-[6px] transition-all duration-150 mt-0.5 flex items-center justify-center", |
|||
isSelected |
|||
? "bg-[#F0445B] text-white shadow-xs" |
|||
: "border-[2px] border-[#98A2B3] bg-white", |
|||
].join(" ")} |
|||
> |
|||
{isSelected && ( |
|||
<svg |
|||
aria-hidden="true" |
|||
width="12" |
|||
height="10" |
|||
viewBox="0 0 12 10" |
|||
fill="none" |
|||
> |
|||
<path |
|||
d="M1.5 5L4.5 8L10.5 2" |
|||
stroke="currentColor" |
|||
strokeWidth="2" |
|||
strokeLinecap="round" |
|||
strokeLinejoin="round" |
|||
/> |
|||
</svg> |
|||
)} |
|||
</div> |
|||
) : ( |
|||
<div |
|||
className={[ |
|||
"size-[22px] shrink-0 rounded-full transition-all duration-150 mt-0.5 flex items-center justify-center", |
|||
isSelected |
|||
? "border-[6px] border-[#F0445B] bg-white" |
|||
: "border-[2px] border-[#98A2B3] bg-white", |
|||
].join(" ")} |
|||
/> |
|||
)} |
|||
|
|||
<span className="text-[15px] leading-snug flex-1"> |
|||
{option.label.includes(" - ") ? ( |
|||
(() => { |
|||
const parts = option.label.split(" - "); |
|||
const title = parts[0]; |
|||
const description = parts.slice(1).join(" - "); |
|||
return ( |
|||
<span className="flex flex-col gap-1 text-start"> |
|||
<span className="font-bold text-[#181818]"> |
|||
{title} |
|||
</span> |
|||
<ExplanationUiFont> |
|||
{description} |
|||
</ExplanationUiFont> |
|||
</span> |
|||
); |
|||
})() |
|||
) : ( |
|||
<span |
|||
className={ |
|||
isSelected |
|||
? "font-bold text-[#181818]" |
|||
: "font-semibold text-[#344054]" |
|||
} |
|||
> |
|||
{option.label} |
|||
</span> |
|||
)} |
|||
</span> |
|||
</button> |
|||
); |
|||
}) |
|||
) : ( |
|||
<div className="py-8 text-center text-[14px] text-[#667085]"> |
|||
{noResultsText} |
|||
</div> |
|||
)} |
|||
</div> |
|||
|
|||
{/* Bottom Actions for Multi-Select */} |
|||
{isMulti && ( |
|||
<div className="border-t border-[#F2F4F7] bg-white p-4 pt-3 pb-[calc(14px+env(safe-area-inset-bottom))]"> |
|||
<Button |
|||
type="button" |
|||
variant="default" |
|||
onClick={closeSheet} |
|||
className="w-full h-[50px] rounded-[14px] text-[15px] font-bold shadow-[0_8px_20px_rgba(240,68,91,0.25)]" |
|||
> |
|||
{selectedList.length > 0 |
|||
? `${confirmText} (${selectedList.length})` |
|||
: confirmText} |
|||
</Button> |
|||
</div> |
|||
)} |
|||
</section> |
|||
</div>, |
|||
document.body, |
|||
)} |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default QuestionSheet; |
|||
@ -0,0 +1,125 @@ |
|||
"use client"; |
|||
|
|||
import { useEffect } from "react"; |
|||
|
|||
let activeSheetCount = 0; |
|||
let activeKeyboardInputCount = 0; |
|||
let bodyHadDropdownClass = false; |
|||
let initialBodyOverflow = ""; |
|||
let initialHtmlOverflow = ""; |
|||
let initialAppShellOverflow = ""; |
|||
let initialAppShellTouchAction = ""; |
|||
let lockedAppShell: HTMLElement | null = null; |
|||
|
|||
export function useSheetScrollLock(isOpen: boolean) { |
|||
useEffect(() => { |
|||
if (!isOpen) return; |
|||
|
|||
if (activeSheetCount === 0) { |
|||
bodyHadDropdownClass = document.body.classList.contains("dropdown-open"); |
|||
initialBodyOverflow = document.body.style.overflow; |
|||
initialHtmlOverflow = document.documentElement.style.overflow; |
|||
lockedAppShell = document.querySelector<HTMLElement>(".app-shell"); |
|||
initialAppShellOverflow = lockedAppShell?.style.overflowY ?? ""; |
|||
initialAppShellTouchAction = lockedAppShell?.style.touchAction ?? ""; |
|||
} |
|||
activeSheetCount += 1; |
|||
|
|||
document.body.classList.add("dropdown-open"); |
|||
document.body.classList.add("question-input-open"); |
|||
document.body.style.overflow = "hidden"; |
|||
document.documentElement.style.overflow = "hidden"; |
|||
if (lockedAppShell) { |
|||
lockedAppShell.style.overflowY = "hidden"; |
|||
lockedAppShell.style.touchAction = "none"; |
|||
} |
|||
|
|||
return () => { |
|||
activeSheetCount = Math.max(0, activeSheetCount - 1); |
|||
if (activeSheetCount === 0) { |
|||
document.body.style.overflow = initialBodyOverflow; |
|||
document.documentElement.style.overflow = initialHtmlOverflow; |
|||
if (lockedAppShell) { |
|||
lockedAppShell.style.overflowY = initialAppShellOverflow; |
|||
lockedAppShell.style.touchAction = initialAppShellTouchAction; |
|||
lockedAppShell = null; |
|||
} |
|||
if (!bodyHadDropdownClass) { |
|||
document.body.classList.remove("dropdown-open"); |
|||
} |
|||
if (activeKeyboardInputCount === 0) { |
|||
document.body.classList.remove("question-input-open"); |
|||
} |
|||
} |
|||
}; |
|||
}, [isOpen]); |
|||
} |
|||
|
|||
const NON_KEYBOARD_INPUT_TYPES = new Set([ |
|||
"button", |
|||
"checkbox", |
|||
"color", |
|||
"file", |
|||
"hidden", |
|||
"image", |
|||
"radio", |
|||
"range", |
|||
"reset", |
|||
"submit", |
|||
]); |
|||
|
|||
function isKeyboardInputTarget(target: EventTarget | null): boolean { |
|||
if (target instanceof HTMLTextAreaElement) { |
|||
return !target.disabled && !target.readOnly; |
|||
} |
|||
if (target instanceof HTMLInputElement) { |
|||
const type = (target.getAttribute("type") ?? "text").toLowerCase(); |
|||
return ( |
|||
!NON_KEYBOARD_INPUT_TYPES.has(type) && |
|||
!target.disabled && |
|||
!target.readOnly |
|||
); |
|||
} |
|||
if (target instanceof HTMLElement) { |
|||
return target.isContentEditable; |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
function syncQuestionInputOpenClass() { |
|||
if (activeSheetCount > 0 || activeKeyboardInputCount > 0) { |
|||
document.body.classList.add("question-input-open"); |
|||
} else { |
|||
document.body.classList.remove("question-input-open"); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Moves the active question up (same animation the dropdown sheet uses) while |
|||
* a keyboard input is focused, so the mobile keyboard cannot cover it. |
|||
*/ |
|||
export function useQuestionInputFocusSync() { |
|||
useEffect(() => { |
|||
const handleFocusIn = (event: FocusEvent) => { |
|||
if (!isKeyboardInputTarget(event.target)) return; |
|||
activeKeyboardInputCount += 1; |
|||
syncQuestionInputOpenClass(); |
|||
}; |
|||
const handleFocusOut = (event: FocusEvent) => { |
|||
if (!isKeyboardInputTarget(event.target)) return; |
|||
activeKeyboardInputCount = Math.max(0, activeKeyboardInputCount - 1); |
|||
syncQuestionInputOpenClass(); |
|||
}; |
|||
|
|||
document.addEventListener("focusin", handleFocusIn); |
|||
document.addEventListener("focusout", handleFocusOut); |
|||
return () => { |
|||
document.removeEventListener("focusin", handleFocusIn); |
|||
document.removeEventListener("focusout", handleFocusOut); |
|||
activeKeyboardInputCount = 0; |
|||
if (activeSheetCount === 0) { |
|||
document.body.classList.remove("question-input-open"); |
|||
} |
|||
}; |
|||
}, []); |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue