Skip to content

Commit 39b1119

Browse files
committed
Add event util examples
1 parent 46bd5e3 commit 39b1119

File tree

2 files changed

+61
-9
lines changed

2 files changed

+61
-9
lines changed

Diff for: generated-docs/React/Basic/DOM/Events.md

+32-7
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,25 @@ An _actual_ DOM node (not a virtual DOM element!)
3333
data DOMEvent :: Type
3434
```
3535

36-
The underlying browser Event
36+
The underlying browser Event.
3737

3838
#### `EventFn`
3939

4040
``` purescript
4141
newtype EventFn a b
4242
```
4343

44+
Encapsulates a safe event operation. `EventFn`s can be composed
45+
to perform multiple operations.
46+
47+
For example:
48+
49+
```purs
50+
input { onChange: handler (preventDefault >>> targetValue)
51+
\value -> setState \_ -> { value }
52+
}
53+
```
54+
4455
##### Instances
4556
``` purescript
4657
Semigroupoid EventFn
@@ -54,12 +65,32 @@ Category EventFn
5465
handler :: forall a. EventFn SyntheticEvent a -> (a -> Eff (react :: ReactFX) Unit) -> EventHandler
5566
```
5667

68+
Create an `EventHandler`, given an `EventFn` and a callback.
69+
70+
For example:
71+
72+
```purs
73+
input { onChange: handler targetValue
74+
\value -> setState \_ -> { value }
75+
}
76+
```
77+
5778
#### `merge`
5879

5980
``` purescript
6081
merge :: forall a fns fns_list r. RowToList fns fns_list => Merge fns_list fns a r => { | fns } -> EventFn a ({ | r })
6182
```
6283

84+
Merge multiple `EventFn` operations and collect their results.
85+
86+
For example:
87+
88+
```purs
89+
input { onChange: handler (merge { targetValue, timeStamp })
90+
\{ targetValue, timeStamp } -> setState \_ -> { ... }
91+
}
92+
```
93+
6394
#### `bubbles`
6495

6596
``` purescript
@@ -78,12 +109,6 @@ cancelable :: EventFn SyntheticEvent Boolean
78109
currentTarget :: EventFn SyntheticEvent DOMNode
79110
```
80111

81-
#### `defaultPrevented`
82-
83-
``` purescript
84-
defaultPrevented :: EventFn SyntheticEvent Boolean
85-
```
86-
87112
#### `eventPhase`
88113

89114
``` purescript

Diff for: src/React/Basic/DOM/Events.purs

+29-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ module React.Basic.DOM.Events
1111
, bubbles
1212
, cancelable
1313
, currentTarget
14-
, defaultPrevented
1514
, eventPhase
1615
, eventPhaseNone
1716
, eventPhaseCapturing
@@ -53,14 +52,33 @@ foreign import data SyntheticEvent :: Type
5352
-- | An _actual_ DOM node (not a virtual DOM element!)
5453
foreign import data DOMNode :: Type
5554

56-
-- | The underlying browser Event
55+
-- | The underlying browser Event.
5756
foreign import data DOMEvent :: Type
5857

58+
-- | Encapsulates a safe event operation. `EventFn`s can be composed
59+
-- | to perform multiple operations.
60+
-- |
61+
-- | For example:
62+
-- |
63+
-- | ```purs
64+
-- | input { onChange: handler (preventDefault >>> targetValue)
65+
-- | \value -> setState \_ -> { value }
66+
-- | }
67+
-- | ```
5968
newtype EventFn a b = EventFn (a -> b)
6069

6170
derive newtype instance semigroupoidBuilder :: Semigroupoid EventFn
6271
derive newtype instance categoryBuilder :: Category EventFn
6372

73+
-- | Create an `EventHandler`, given an `EventFn` and a callback.
74+
-- |
75+
-- | For example:
76+
-- |
77+
-- | ```purs
78+
-- | input { onChange: handler targetValue
79+
-- | \value -> setState \_ -> { value }
80+
-- | }
81+
-- | ```
6482
handler :: forall a. EventFn SyntheticEvent a -> (a -> Eff (react :: ReactFX) Unit) -> EventHandler
6583
handler (EventFn fn) cb = mkEffFn1 $ fn >>> cb
6684

@@ -87,6 +105,15 @@ instance mergeCons
87105
where
88106
l = SProxy :: SProxy l
89107

108+
-- | Merge multiple `EventFn` operations and collect their results.
109+
-- |
110+
-- | For example:
111+
-- |
112+
-- | ```purs
113+
-- | input { onChange: handler (merge { targetValue, timeStamp })
114+
-- | \{ targetValue, timeStamp } -> setState \_ -> { ... }
115+
-- | }
116+
-- | ```
90117
merge
91118
:: forall a fns fns_list r
92119
. RowToList fns fns_list

0 commit comments

Comments
 (0)