UncontrolledResponsiveDialog
Dialog ဖွင့်ခြင်းကြောင့် parent ကို re-render မဖြစ်စေလိုပါက UncontrolledResponsiveDialog ကို ဦးစားပေးအသုံးပြုပါ။ ထိန်းချုပ်မှုကို ref.open() / ref.close() ဖြင့် လုပ်ဆောင်ရပါသည်။
TSXuncontrolled
1import { useRef } from "react";
2import {
3 Button,
4 ResponsiveContent,
5 UncontrolledResponsiveDialog,
6 type ResponsiveDialogRefType,
7} from "@quan-erp/shared-ui";
8
9export function MyPage() {
10 const dialogRef = useRef<ResponsiveDialogRefType>(null);
11
12 return (
13 <>
14 <Button onClick={() => dialogRef.current?.open()}>Open</Button>
15 <UncontrolledResponsiveDialog ref={dialogRef}>
16 <ResponsiveContent>
17 <h2>Dialog content</h2>
18 <Button onClick={() => dialogRef.current?.close()}>Close</Button>
19 </ResponsiveContent>
20 </UncontrolledResponsiveDialog>
21 </>
22 );
23}Controlled sheet
TSXcontrolled-sheet
1import {
2 DesktopDialogType,
3 ResponsiveContent,
4 ResponsiveDialog,
5} from "@quan-erp/shared-ui";
6
7<ResponsiveDialog open={open} onOpenChange={setOpen} desktopDialogType={DesktopDialogType.SHEET}>
8 <ResponsiveContent>{/* ... */}</ResponsiveContent>
9</ResponsiveDialog>