@xyhp915/slack-base-ui 0.0.5 → 0.0.6
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/libs/Dialog.d.ts +1 -1
- package/libs/Dialog.d.ts.map +1 -1
- package/libs/index.js +5 -2
- package/package.json +1 -1
- package/src/components/Dialog.tsx +63 -60
package/libs/Dialog.d.ts
CHANGED
package/libs/Dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/components/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/components/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM;8FAShB,WAAW;;CA+Db,CAAA;AAKD,eAAO,MAAM,YAAY,GAAI,yBAAyB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAEtG,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,yBAAyB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAEpG,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,yBAAyB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAItG,CAAA;AAGD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,8FAYzB,CAAA;AAKD,eAAO,MAAM,WAAW,kIAAmB,CAAA;AAI3C,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACpD;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,iEAAiE;IACjE,IAAI,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnD,qFAAqF;IACrF,OAAO,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,6EAA6E;IAC7E,KAAK,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACtD;AAmBD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAmDlE,CAAA;AAqFD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAK,eAAe,CAI5C"}
|
package/libs/index.js
CHANGED
|
@@ -14064,7 +14064,7 @@ const Pv = ({ icon: e, children: t, shortcut: n, className: o, disabled: r, onSe
|
|
|
14064
14064
|
title: n,
|
|
14065
14065
|
description: o,
|
|
14066
14066
|
children: r,
|
|
14067
|
-
size: s = "
|
|
14067
|
+
size: s = "xl",
|
|
14068
14068
|
showCloseButton: a = !0,
|
|
14069
14069
|
className: i
|
|
14070
14070
|
}) => /* @__PURE__ */ C(cu, { open: e, onOpenChange: t, children: /* @__PURE__ */ ee(ii, { children: [
|
|
@@ -14084,7 +14084,10 @@ const Pv = ({ icon: e, children: t, shortcut: n, className: o, disabled: r, onSe
|
|
|
14084
14084
|
sm: "max-w-sm",
|
|
14085
14085
|
md: "max-w-md",
|
|
14086
14086
|
lg: "max-w-lg",
|
|
14087
|
-
xl: "max-w-xl"
|
|
14087
|
+
xl: "max-w-xl",
|
|
14088
|
+
"2xl": "max-w-2xl",
|
|
14089
|
+
"3xl": "max-w-3xl",
|
|
14090
|
+
"4xl": "max-w-4xl"
|
|
14088
14091
|
}[s],
|
|
14089
14092
|
"bg-(--bg-primary) rounded-xl border border-(--border-gray)",
|
|
14090
14093
|
"transition-all duration-200",
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ import React, {
|
|
|
10
10
|
import { X } from 'lucide-react'
|
|
11
11
|
import { Button } from './Button'
|
|
12
12
|
|
|
13
|
-
export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
13
|
+
export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
14
14
|
|
|
15
15
|
export interface DialogProps {
|
|
16
16
|
open?: boolean;
|
|
@@ -29,7 +29,7 @@ export const Dialog = ({
|
|
|
29
29
|
title,
|
|
30
30
|
description,
|
|
31
31
|
children,
|
|
32
|
-
size = '
|
|
32
|
+
size = 'xl',
|
|
33
33
|
showCloseButton = true,
|
|
34
34
|
className,
|
|
35
35
|
}: DialogProps) => {
|
|
@@ -38,6 +38,9 @@ export const Dialog = ({
|
|
|
38
38
|
md: 'max-w-md',
|
|
39
39
|
lg: 'max-w-lg',
|
|
40
40
|
xl: 'max-w-xl',
|
|
41
|
+
'2xl': 'max-w-2xl',
|
|
42
|
+
'3xl': 'max-w-3xl',
|
|
43
|
+
'4xl': 'max-w-4xl',
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
return (
|
|
@@ -242,27 +245,27 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ childr
|
|
|
242
245
|
}, [])
|
|
243
246
|
|
|
244
247
|
const value = useMemo<UseDialogReturn>(
|
|
245
|
-
|
|
246
|
-
|
|
248
|
+
() => ({ show, confirm, alert }),
|
|
249
|
+
[show, confirm, alert],
|
|
247
250
|
)
|
|
248
251
|
|
|
249
252
|
return (
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
253
|
+
<DialogImperativeContext.Provider value={value}>
|
|
254
|
+
{children}
|
|
255
|
+
{dialogs.map(dialog => (
|
|
256
|
+
<ImperativeDialogItem
|
|
257
|
+
key={dialog.id}
|
|
258
|
+
dialog={dialog}
|
|
259
|
+
onRemove={() => removeDialog(dialog.id)}
|
|
260
|
+
/>
|
|
261
|
+
))}
|
|
262
|
+
</DialogImperativeContext.Provider>
|
|
260
263
|
)
|
|
261
264
|
}
|
|
262
265
|
|
|
263
266
|
DialogProvider.displayName = 'DialogProvider'
|
|
264
267
|
|
|
265
|
-
function ImperativeDialogItem({
|
|
268
|
+
function ImperativeDialogItem ({
|
|
266
269
|
dialog,
|
|
267
270
|
onRemove,
|
|
268
271
|
}: {
|
|
@@ -272,13 +275,13 @@ function ImperativeDialogItem({
|
|
|
272
275
|
const [open, setOpen] = useState(true)
|
|
273
276
|
|
|
274
277
|
const handleClose = useCallback(
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
278
|
+
(result: boolean) => {
|
|
279
|
+
setOpen(false)
|
|
280
|
+
dialog.resolve(result)
|
|
281
|
+
// Allow close animation to finish before unmounting
|
|
282
|
+
setTimeout(onRemove, 300)
|
|
283
|
+
},
|
|
284
|
+
[dialog, onRemove],
|
|
282
285
|
)
|
|
283
286
|
|
|
284
287
|
const commonProps = {
|
|
@@ -291,55 +294,55 @@ function ImperativeDialogItem({
|
|
|
291
294
|
|
|
292
295
|
if (dialog.type === 'show') {
|
|
293
296
|
return (
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
297
|
+
<Dialog
|
|
298
|
+
{...commonProps}
|
|
299
|
+
showCloseButton={dialog.showCloseButton ?? true}
|
|
300
|
+
onOpenChange={o => !o && handleClose(false)}
|
|
301
|
+
>
|
|
302
|
+
{dialog.content}
|
|
303
|
+
</Dialog>
|
|
301
304
|
)
|
|
302
305
|
}
|
|
303
306
|
|
|
304
307
|
if (dialog.type === 'confirm') {
|
|
305
308
|
return (
|
|
309
|
+
<Dialog
|
|
310
|
+
{...commonProps}
|
|
311
|
+
size={dialog.size ?? 'sm'}
|
|
312
|
+
showCloseButton={false}
|
|
313
|
+
onOpenChange={o => !o && handleClose(false)}
|
|
314
|
+
>
|
|
315
|
+
{dialog.content}
|
|
316
|
+
<DialogFooter>
|
|
317
|
+
<Button variant="secondary" onClick={() => handleClose(false)}>
|
|
318
|
+
{dialog.cancelLabel ?? 'Cancel'}
|
|
319
|
+
</Button>
|
|
320
|
+
<Button
|
|
321
|
+
variant={dialog.confirmVariant ?? 'primary'}
|
|
322
|
+
onClick={() => handleClose(true)}
|
|
323
|
+
>
|
|
324
|
+
{dialog.confirmLabel ?? 'Confirm'}
|
|
325
|
+
</Button>
|
|
326
|
+
</DialogFooter>
|
|
327
|
+
</Dialog>
|
|
328
|
+
)
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// alert
|
|
332
|
+
return (
|
|
306
333
|
<Dialog
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
334
|
+
{...commonProps}
|
|
335
|
+
size={dialog.size ?? 'sm'}
|
|
336
|
+
showCloseButton={false}
|
|
337
|
+
onOpenChange={o => !o && handleClose(true)}
|
|
311
338
|
>
|
|
312
339
|
{dialog.content}
|
|
313
340
|
<DialogFooter>
|
|
314
|
-
<Button variant="
|
|
315
|
-
{dialog.
|
|
316
|
-
</Button>
|
|
317
|
-
<Button
|
|
318
|
-
variant={dialog.confirmVariant ?? 'primary'}
|
|
319
|
-
onClick={() => handleClose(true)}
|
|
320
|
-
>
|
|
321
|
-
{dialog.confirmLabel ?? 'Confirm'}
|
|
341
|
+
<Button variant="primary" onClick={() => handleClose(true)}>
|
|
342
|
+
{dialog.confirmLabel ?? 'OK'}
|
|
322
343
|
</Button>
|
|
323
344
|
</DialogFooter>
|
|
324
345
|
</Dialog>
|
|
325
|
-
)
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
// alert
|
|
329
|
-
return (
|
|
330
|
-
<Dialog
|
|
331
|
-
{...commonProps}
|
|
332
|
-
size={dialog.size ?? 'sm'}
|
|
333
|
-
showCloseButton={false}
|
|
334
|
-
onOpenChange={o => !o && handleClose(true)}
|
|
335
|
-
>
|
|
336
|
-
{dialog.content}
|
|
337
|
-
<DialogFooter>
|
|
338
|
-
<Button variant="primary" onClick={() => handleClose(true)}>
|
|
339
|
-
{dialog.confirmLabel ?? 'OK'}
|
|
340
|
-
</Button>
|
|
341
|
-
</DialogFooter>
|
|
342
|
-
</Dialog>
|
|
343
346
|
)
|
|
344
347
|
}
|
|
345
348
|
|
|
@@ -363,7 +366,7 @@ function ImperativeDialogItem({
|
|
|
363
366
|
* await alert({ title: 'Error', description: 'Something went wrong.' })
|
|
364
367
|
* ```
|
|
365
368
|
*/
|
|
366
|
-
export function useDialog(): UseDialogReturn {
|
|
369
|
+
export function useDialog (): UseDialogReturn {
|
|
367
370
|
const ctx = useContext(DialogImperativeContext)
|
|
368
371
|
if (!ctx) throw new Error('useDialog must be used within <DialogProvider>')
|
|
369
372
|
return ctx
|