@xfilecom/xframe 0.1.31 → 0.1.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/defaults.json
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { useCallback, useId, useRef, useState, type ReactNode } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
Badge,
|
|
4
|
+
BottomSheet,
|
|
4
5
|
Box,
|
|
5
6
|
Button,
|
|
6
7
|
Card,
|
|
8
|
+
ConfirmDialog,
|
|
9
|
+
Dialog,
|
|
7
10
|
Input,
|
|
8
11
|
InlineErrorList,
|
|
9
12
|
LoadingOverlay,
|
|
@@ -32,6 +35,11 @@ export function FrontCoreShowcase() {
|
|
|
32
35
|
const [toasts, setToasts] = useState<ToastEntry[]>([]);
|
|
33
36
|
const [errors, setErrors] = useState<InlineErrorEntry[]>([]);
|
|
34
37
|
const [loading, setLoading] = useState(false);
|
|
38
|
+
const [dialogOpen, setDialogOpen] = useState(false);
|
|
39
|
+
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
40
|
+
const [confirmDestructiveOpen, setConfirmDestructiveOpen] = useState(false);
|
|
41
|
+
const [confirmLoadingDemo, setConfirmLoadingDemo] = useState(false);
|
|
42
|
+
const [sheetOpen, setSheetOpen] = useState(false);
|
|
35
43
|
|
|
36
44
|
const pushToast = useCallback(
|
|
37
45
|
(severity: ToastSeverity) => {
|
|
@@ -54,6 +62,59 @@ export function FrontCoreShowcase() {
|
|
|
54
62
|
<ToastList toasts={toasts} onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))} />
|
|
55
63
|
<LoadingOverlay active={loading} message="로딩 중…" />
|
|
56
64
|
|
|
65
|
+
<Dialog
|
|
66
|
+
open={dialogOpen}
|
|
67
|
+
onOpenChange={setDialogOpen}
|
|
68
|
+
title="Dialog"
|
|
69
|
+
description="title / description / children 조합. 배경 클릭·Escape 로 닫을 수 있습니다."
|
|
70
|
+
>
|
|
71
|
+
<Text variant="body">children 에 폼·리스트 등 자유롭게 넣을 수 있습니다.</Text>
|
|
72
|
+
<div className="xfc-dialog-footer">
|
|
73
|
+
<Button type="button" variant="muted" onClick={() => setDialogOpen(false)}>
|
|
74
|
+
취소
|
|
75
|
+
</Button>
|
|
76
|
+
<Button type="button" variant="primary" onClick={() => setDialogOpen(false)}>
|
|
77
|
+
확인
|
|
78
|
+
</Button>
|
|
79
|
+
</div>
|
|
80
|
+
</Dialog>
|
|
81
|
+
|
|
82
|
+
<ConfirmDialog
|
|
83
|
+
open={confirmOpen}
|
|
84
|
+
onOpenChange={setConfirmOpen}
|
|
85
|
+
title="ConfirmDialog"
|
|
86
|
+
message="일반 확인창입니다. 취소 시 onCancel 후 닫힙니다."
|
|
87
|
+
onConfirm={() => setConfirmOpen(false)}
|
|
88
|
+
/>
|
|
89
|
+
|
|
90
|
+
<ConfirmDialog
|
|
91
|
+
open={confirmDestructiveOpen}
|
|
92
|
+
onOpenChange={setConfirmDestructiveOpen}
|
|
93
|
+
title="위험 작업"
|
|
94
|
+
message="destructive + 빨간 확인 버튼 예시입니다."
|
|
95
|
+
destructive
|
|
96
|
+
confirmLabel="삭제"
|
|
97
|
+
onConfirm={() => setConfirmDestructiveOpen(false)}
|
|
98
|
+
/>
|
|
99
|
+
|
|
100
|
+
<ConfirmDialog
|
|
101
|
+
open={confirmLoadingDemo}
|
|
102
|
+
onOpenChange={setConfirmLoadingDemo}
|
|
103
|
+
title="로딩 중 확인"
|
|
104
|
+
message="confirmLoading 시 버튼이 잠깁니다."
|
|
105
|
+
confirmLoading
|
|
106
|
+
onConfirm={() => {}}
|
|
107
|
+
/>
|
|
108
|
+
|
|
109
|
+
<BottomSheet open={sheetOpen} onOpenChange={setSheetOpen} title="BottomSheet" showHandle>
|
|
110
|
+
<Text variant="body">화면 하단에서 올라오는 패널입니다.</Text>
|
|
111
|
+
<Stack direction="row" gap="sm" align="center" style={{ marginTop: 'var(--xfc-space-md)', flexWrap: 'wrap' }}>
|
|
112
|
+
<Button type="button" variant="primary" onClick={() => setSheetOpen(false)}>
|
|
113
|
+
닫기
|
|
114
|
+
</Button>
|
|
115
|
+
</Stack>
|
|
116
|
+
</BottomSheet>
|
|
117
|
+
|
|
57
118
|
<Stack direction="column" gap="lg" align="stretch">
|
|
58
119
|
<Card>
|
|
59
120
|
<Stack direction="column" gap="md" align="stretch">
|
|
@@ -141,6 +202,33 @@ export function FrontCoreShowcase() {
|
|
|
141
202
|
</Stack>
|
|
142
203
|
</Card>
|
|
143
204
|
|
|
205
|
+
<Card>
|
|
206
|
+
<Stack direction="column" gap="md" align="stretch">
|
|
207
|
+
<SectionTitle>Dialog · ConfirmDialog · BottomSheet</SectionTitle>
|
|
208
|
+
<Text variant="small" style={{ color: 'var(--xfc-fg-muted)' }}>
|
|
209
|
+
document.body 포털 · z-index 10050 (토스트·로딩보다 위). base.css 의 .xfc-dialog-* /
|
|
210
|
+
.xfc-bottom-sheet-* 로 테마 조정.
|
|
211
|
+
</Text>
|
|
212
|
+
<Stack direction="row" gap="sm" align="center" style={{ flexWrap: 'wrap' }}>
|
|
213
|
+
<Button type="button" variant="secondary" onClick={() => setDialogOpen(true)}>
|
|
214
|
+
Dialog 열기
|
|
215
|
+
</Button>
|
|
216
|
+
<Button type="button" variant="secondary" onClick={() => setConfirmOpen(true)}>
|
|
217
|
+
Confirm
|
|
218
|
+
</Button>
|
|
219
|
+
<Button type="button" variant="secondary" onClick={() => setConfirmDestructiveOpen(true)}>
|
|
220
|
+
Confirm (destructive)
|
|
221
|
+
</Button>
|
|
222
|
+
<Button type="button" variant="secondary" onClick={() => setConfirmLoadingDemo(true)}>
|
|
223
|
+
Confirm (loading)
|
|
224
|
+
</Button>
|
|
225
|
+
<Button type="button" variant="secondary" onClick={() => setSheetOpen(true)}>
|
|
226
|
+
BottomSheet
|
|
227
|
+
</Button>
|
|
228
|
+
</Stack>
|
|
229
|
+
</Stack>
|
|
230
|
+
</Card>
|
|
231
|
+
|
|
144
232
|
<Card>
|
|
145
233
|
<Stack direction="column" gap="md" align="stretch">
|
|
146
234
|
<SectionTitle>ToastList · InlineErrorList · LoadingOverlay</SectionTitle>
|