git.iko.soy/rowtype-yoga/purescript-radix-ui
on main help sign in
Add Dialog
commit40ddb27290f4fbdf8b65005fd59ed6520adc05b9 authorMark Eibes <mark.eibes@gmail.com> dateSat 22 Jul 2023, 13:02 (3 years ago) parent0344040
2 files changed+199−16
src/RadixUI/Dialog.js+9−7 src/RadixUI/Dialog.purs+190−9
src/RadixUI/Dialog.js+9−7
@@ -1,9 +1,11 @@
11import * as Dialog from '@radix-ui/react-dialog';
22
3−export const dialogOverlay = Dialog.Overlay;
4−export const dialogContent = Dialog.Content;
5−export const dialogTitle = Dialog.Title;
6−export const dialogDescription = Dialog.Description;
7−export const dialogTrigger = Dialog.Trigger;
8−export const dialogClose = Dialog.Close;
9−export const dialogRoot = Dialog.Root;
3+export const overlayImpl = Dialog.Overlay;
4+export const contentImpl = Dialog.Content;
5+export const titleImpl = Dialog.Title;
6+export const descriptionImpl = Dialog.Description;
7+export const triggerImpl = Dialog.Trigger;
8+export const closeImpl = Dialog.Close;
9+export const rootImpl = Dialog.Root;
10+export const actionImpl = Dialog.Action;
11+export const portalImpl = Dialog.Portal;
src/RadixUI/Dialog.purs+190−9
@@ -1,13 +1,194 @@
11module RadixUI.Dialog where
22
33import Prelude
4−import React.Basic (ReactComponent)
5−
6−foreign import dialogOverlay :: forall r. ReactComponent {|r}
7−foreign import dialogContent :: forall r. ReactComponent {|r}
8−foreign import dialogTitle :: forall r. ReactComponent {|r}
9−foreign import dialogDescription :: forall r. ReactComponent {|r}
10−foreign import dialogTrigger :: forall r. ReactComponent {|r}
11−foreign import dialogClose :: forall r. ReactComponent {|r}
12−foreign import dialogRoot :: forall r. ReactComponent {|r}
4+import React.Basic (JSX, ReactComponent)
5+import Effect.Uncurried (EffectFn1, mkEffectFn1)
6+import Prim.Row (class Union)
7+import React.Basic (element) as React
8+import Effect (Effect)
9+import Type.Proxy (Proxy(Proxy))
10+import Data.Undefined.NoProblem (Opt, pseudoMap)
11+import Data.Undefined.NoProblem.Closed (class Coerce, coerce)
12+import Record.Builder (build, insert, modify) as RB
13+import React.Basic.Events (SyntheticEvent)
14+import Web.HTML.HTMLElement (HTMLElement)
15+import Beta.DOM.Internal (CSS)
16+import Beta.DOM (class IsJSX)
17+
18+-- | The type of the Dialog component props
19+type RootProps =
20+ { open ∷ Opt Boolean -- ^ Whether the alert dialog is open or not
21+ , onOpenChange ∷
22+ Opt (Boolean → Effect Unit) -- ^ A callback function that is called when the alert dialog open state changes
23+ , className ∷ Opt String -- ^ The CSS class name of the alert dialog
24+ , style ∷ Opt CSS -- ^ The CSS style of the alert dialog
25+ }
26+
27+x = React.element
28+-- | The foreign component for the Dialog
29+foreign import rootImpl ∷ ∀ a. ReactComponent { | a }
30+
31+-- | A PureScript wrapper for the Dialog component
32+root ∷
33+ ∀ p.
34+ Coerce p RootProps ⇒
35+ p →
36+ Array JSX →
37+ JSX
38+root props kids = React.element rootImpl $
39+ (coerce props ∷ RootProps) # RB.build
40+ ( RB.modify (Proxy ∷ _ "onOpenChange") (pseudoMap mkEffectFn1)
41+ <<< RB.insert (Proxy ∷ _ "children") kids
42+ )
43+
44+-- | The type of the DialogTrigger component props
45+type DialogTriggerProps =
46+ { asChild ∷
47+ Opt Boolean -- ^ Whether to render the alert dialog trigger as a child of the dialog content
48+ }
49+
50+-- | The foreign component for the DialogTrigger
51+foreign import triggerImpl ∷ ∀ a. ReactComponent { | a }
52+
53+-- | A PureScript wrapper for the DialogTrigger component
54+trigger ∷
55+ ∀ p kids. Coerce p DialogTriggerProps ⇒ IsJSX kids ⇒ p → kids → JSX
56+trigger props kids = React.element triggerImpl $
57+ (coerce props ∷ DialogTriggerProps) # RB.build
58+ ( RB.insert (Proxy ∷ _ "children") kids
59+ )
60+
61+-- | The type of the DialogPortal component props
62+type DialogPortalProps =
63+ { forceMount ∷
64+ Opt Boolean -- ^ Whether to force mount the alert dialog portal in the DOM even when it is not open
65+ , container ∷
66+ Opt HTMLElement -- ^ The container element to mount the alert dialog portal into
67+ }
68+
69+-- | The foreign component for the DialogPortal
70+foreign import portalImpl ∷ ∀ a. ReactComponent { | a }
71+
72+-- | A PureScript wrapper for the DialogPortal component
73+portal ∷
74+ ∀ p kids. Coerce p DialogPortalProps ⇒ IsJSX kids ⇒ p → kids → JSX
75+portal props kids = React.element portalImpl $
76+ (coerce props ∷ DialogPortalProps) # RB.build
77+ ( RB.insert (Proxy ∷ _ "children") kids
78+ )
79+
80+-- | The type of the DialogOverlay component props
81+type DialogOverlayProps =
82+ { asChild ∷
83+ Opt Boolean -- ^ Whether to render the alert dialog overlay as a child of the dialog content
84+ , forceMount ∷
85+ Opt Boolean -- ^ Whether to force mount the alert dialog overlay in the DOM even when it is not open
86+ , className ∷ Opt String -- ^ The CSS class name of the alert dialog overlay
87+ , style ∷ Opt CSS -- ^ The CSS style of the alert dialog overlay
88+ }
89+
90+-- | The foreign component for the DialogOverlay
91+foreign import overlayImpl ∷ ∀ a. ReactComponent { | a }
92+
93+-- | A PureScript wrapper for the DialogOverlay component
94+overlay ∷
95+ ∀ p kids. Coerce p DialogOverlayProps ⇒ IsJSX kids ⇒ p → kids → JSX
96+overlay props kids = React.element overlayImpl $
97+ (coerce props ∷ DialogOverlayProps) # RB.build
98+ ( RB.insert (Proxy ∷ _ "children") kids
99+ )
100+
101+-- | The type of the DialogContent component props
102+type DialogContentProps =
103+ { asChild ∷
104+ Opt Boolean -- ^ Whether to render the alert dialog content as a child of the dialog root
105+ , forceMount ∷
106+ Opt Boolean -- ^ Whether to force mount the alert dialog content in the DOM even when it is not open
107+ , onOpenAutoFocus ∷
108+ Opt (Effect Unit) -- ^ A callback function that is called when the alert dialog content is opened and should receive focus
109+ , onCloseAutoFocus ∷
110+ Opt (Effect Unit) -- ^ A callback function that is called when the alert dialog content is closed and should receive focus
111+ , onEscapeKeyDown ∷
112+ Opt (Effect Unit) -- ^ A callback function that is called when the escape key is pressed while the alert dialog content is focused
113+ , className ∷ Opt String -- ^ The CSS class name of the alert dialog content
114+ , style ∷ Opt CSS -- ^ The CSS style of the alert dialog content
115+ }
116+
117+-- | The foreign component for the DialogContent
118+foreign import contentImpl ∷ ∀ a. ReactComponent { | a }
119+
120+-- | A PureScript wrapper for the DialogContent component
121+content ∷
122+ ∀ p kids. Coerce p DialogContentProps ⇒ IsJSX kids ⇒ p → kids → JSX
123+content props kids = React.element contentImpl $
124+ (coerce props ∷ DialogContentProps) # RB.build
125+ (
126+ -- RB.modify (Proxy :: _ "onOpenAutoFocus") (pseudoMap mkEffectFn1)
127+ -- <<< RB.modify (Proxy :: _ "onCloseAutoFocus") (pseudoMap mkEffectFn1)
128+ -- <<< RB.modify (Proxy :: _ "onEscapeKeyDown") (pseudoMap mkEffectFn1)
129+ -- <<<
130+ RB.insert (Proxy ∷ _ "children") kids
131+ )
132+
133+-- | The type of the DialogCancel component props
134+type DialogCancelProps =
135+ { asChild ∷
136+ Opt Boolean -- ^ Whether to render the alert dialog cancel button as a child of the dialog content
137+ }
138+
139+-- | The type of the DialogAction component props
140+type DialogActionProps =
141+ { asChild ∷
142+ Opt Boolean -- ^ Whether to render the alert dialog action button as a child of the dialog content
143+ }
144+
145+-- | The foreign component for the DialogAction
146+foreign import actionImpl ∷ ∀ a. ReactComponent { | a }
147+
148+-- | A PureScript wrapper for the DialogAction component
149+action ∷
150+ ∀ p kids. Coerce p DialogActionProps ⇒ IsJSX kids ⇒ p → kids → JSX
151+action props kids = React.element actionImpl $
152+ (coerce props ∷ DialogActionProps) # RB.build
153+ ( RB.insert (Proxy ∷ _ "children") kids
154+ )
155+
156+-- | The type of the DialogTitle component props
157+type DialogTitleProps =
158+ { asChild ∷
159+ Opt Boolean -- ^ Whether to render the alert dialog title as a child of the dialog content
160+ , className ∷ Opt String -- ^ The CSS class name of the alert dialog title
161+ , style ∷ Opt CSS -- ^ The CSS style of the alert dialog title
162+ }
163+
164+-- | The foreign component for the DialogTitle
165+foreign import titleImpl ∷ ∀ a. ReactComponent { | a }
166+
167+-- | A PureScript wrapper for the DialogTitle component
168+title ∷
169+ ∀ p kids. Coerce p DialogTitleProps ⇒ IsJSX kids ⇒ p → kids → JSX
170+title props kids = React.element titleImpl $
171+ (coerce props ∷ DialogTitleProps) # RB.build
172+ ( RB.insert (Proxy ∷ _ "children") kids
173+ )
174+
175+-- | The type of the DialogDescription component props
176+type DialogDescriptionProps =
177+ { asChild ∷
178+ Opt Boolean -- ^ Whether to render the alert dialog description as a child of the dialog content
179+ , className ∷
180+ Opt String -- ^ The CSS class name of the alert dialog description
181+ , style ∷ Opt CSS -- ^ The CSS style of the alert dialog description
182+ }
183+
184+-- | The foreign component for the DialogDescription
185+foreign import descriptionImpl ∷ ∀ a. ReactComponent { | a }
186+
187+-- | A PureScript wrapper for the DialogDescription component
188+description ∷
189+ ∀ p kids. Coerce p DialogDescriptionProps ⇒ IsJSX kids ⇒ p → kids → JSX
190+description props kids = React.element descriptionImpl $
191+ (coerce props ∷ DialogDescriptionProps) # RB.build
192+ ( RB.insert (Proxy ∷ _ "children") kids
193+ )
13194