@omit/react-confirm-dialog
Version:
A simple confirm dialog for React
2 lines • 6.44 kB
JavaScript
;var _=Object.create;var D=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var oe=(e,t)=>{for(var o in t)D(e,o,{get:t[o],enumerable:!0})},W=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of j(t))!te.call(e,r)&&r!==o&&D(e,r,{get:()=>t[r],enumerable:!(n=$(t,r))||n.enumerable});return e};var R=(e,t,o)=>(o=e!=null?_(ee(e)):{},W(t||!e||!e.__esModule?D(o,"default",{value:e,enumerable:!0}):o,e)),ie=e=>W(D({},"__esModule",{value:!0}),e);var se={};oe(se,{ConfirmContext:()=>H,ConfirmDialogProvider:()=>ae,useConfirm:()=>le});module.exports=ie(se);var a=require("react");var d=R(require("react")),i=R(require("@radix-ui/react-alert-dialog"));var E=require("clsx"),F=require("tailwind-merge");function f(...e){return(0,F.twMerge)((0,E.clsx)(e))}var L=R(require("react")),V=require("@radix-ui/react-slot"),k=require("class-variance-authority");var M=require("react/jsx-runtime"),v=(0,k.cva)("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),ne=L.forwardRef(({className:e,variant:t,size:o,asChild:n=!1,...r},m)=>(0,M.jsx)(n?V.Slot:"button",{className:f(v({variant:t,size:o,className:e})),ref:m,...r}));ne.displayName="Button";var p=require("react/jsx-runtime"),z=i.Root;var S=i.Portal,x=d.forwardRef(({className:e,...t},o)=>(0,p.jsx)(i.Overlay,{className:f("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t,ref:o}));x.displayName=i.Overlay.displayName;var h=d.forwardRef(({className:e,...t},o)=>(0,p.jsx)(i.Content,{ref:o,className:f("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",e),...t}));h.displayName=i.Content.displayName;var O=({className:e,...t})=>(0,p.jsx)("div",{className:f("flex flex-col space-y-2 text-center sm:text-left",e),...t});O.displayName="AlertDialogHeader";var b=({className:e,...t})=>(0,p.jsx)("div",{className:f("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});b.displayName="AlertDialogFooter";var N=d.forwardRef(({className:e,...t},o)=>(0,p.jsx)(i.Title,{ref:o,className:f("text-lg font-semibold",e),...t}));N.displayName=i.Title.displayName;var T=d.forwardRef(({className:e,...t},o)=>(0,p.jsx)(i.Description,{ref:o,className:f("text-sm text-muted-foreground",e),...t}));T.displayName=i.Description.displayName;var w=d.forwardRef(({className:e,variant:t,size:o,...n},r)=>(0,p.jsx)(i.Action,{ref:r,className:f(v({variant:t,size:o}),e),...n}));w.displayName=i.Action.displayName;var B=d.forwardRef(({className:e,variant:t,size:o,...n},r)=>(0,p.jsx)(i.Cancel,{ref:r,className:f(v({variant:t,size:o}),e),...n}));B.displayName=i.Cancel.displayName;var l=require("react/jsx-runtime"),H=(0,a.createContext)(void 0),U={title:"",description:"",confirmText:"Confirm",cancelText:"Cancel",confirmButton:{},cancelButton:{},alertDialogContent:{},alertDialogHeader:{},alertDialogTitle:{},alertDialogDescription:{},alertDialogFooter:{}};function re(e){return e.length===2}var q=(0,a.memo)(({config:e,onConfirm:t,onCancel:o,setConfig:n})=>{let{title:r,description:m,cancelButton:g,confirmButton:A,confirmText:u,cancelText:y,icon:C,contentSlot:s,customActions:c,alertDialogOverlay:P,alertDialogContent:I,alertDialogHeader:J,alertDialogTitle:K,alertDialogDescription:Q,alertDialogFooter:X}=e,Y=()=>c?re(c)?c(t,o):c({confirm:t,cancel:o,config:e,setConfig:n}):(0,l.jsxs)(l.Fragment,{children:[g!==null&&(0,l.jsx)(B,{onClick:o,...g,children:y}),(0,l.jsx)(w,{onClick:t,...A,children:u})]}),Z=()=>!r&&!C?null:(0,l.jsxs)(N,{...K,children:[C,r]});return(0,l.jsxs)(S,{children:[(0,l.jsx)(x,{...P}),(0,l.jsxs)(h,{...I,children:[(0,l.jsxs)(O,{...J,children:[Z(),m&&(0,l.jsx)(T,{...Q,children:m}),s]}),(0,l.jsx)(b,{...X,children:Y()})]})]})});q.displayName="ConfirmDialogContent";var G=(0,a.memo)(({isOpen:e,onOpenChange:t,config:o,onConfirm:n,onCancel:r,setConfig:m})=>(0,l.jsx)(z,{open:e,onOpenChange:t,children:(0,l.jsx)(q,{config:o,onConfirm:n,onCancel:r,setConfig:m})}));G.displayName="ConfirmDialog";var ae=({defaultOptions:e={},children:t})=>{let[o,n]=(0,a.useState)({isOpen:!1,config:U,resolver:null}),r=(0,a.useMemo)(()=>({...U,...e}),[e]),m=(0,a.useCallback)(s=>{n(c=>({...c,config:typeof s=="function"?s(c.config):{...c.config,...s}}))},[]),g=(0,a.useCallback)(s=>(n(c=>({isOpen:!0,config:{...r,...s},resolver:c.resolver})),new Promise(c=>{n(P=>({...P,resolver:c}))})),[r]),A=(0,a.useCallback)(()=>{n(s=>(s.resolver&&s.resolver(!0),{...s,isOpen:!1,resolver:null}))},[]),u=(0,a.useCallback)(()=>{n(s=>(s.resolver&&s.resolver(!1),{...s,isOpen:!1,resolver:null}))},[]),y=(0,a.useCallback)(s=>{s||u()},[u]),C=(0,a.useMemo)(()=>({confirm:g,updateConfig:m}),[g,m]);return(0,l.jsxs)(H.Provider,{value:C,children:[t,(0,l.jsx)(G,{isOpen:o.isOpen,onOpenChange:y,config:o.config,onConfirm:A,onCancel:u,setConfig:m})]})},le=()=>{let e=(0,a.useContext)(H);if(!e)throw new Error("useConfirm must be used within a ConfirmDialogProvider");let{confirm:t,updateConfig:o}=e,n=t;return n.updateConfig=o,n};0&&(module.exports={ConfirmContext,ConfirmDialogProvider,useConfirm});
//# sourceMappingURL=index.js.map