Skip to content

Commit a6a710e

Browse files
maddie927maddie927
committed
Move shared Events stuff out of React.Basic.DOM
1 parent 5fc1f5b commit a6a710e

File tree

6 files changed

+192
-184
lines changed

6 files changed

+192
-184
lines changed

‎examples/controlled-input/src/ControlledInput.purs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import Prelude
55
import Data.Maybe (Maybe(..), fromMaybe)
66
import React.Basic (ReactComponent, react)
77
import React.Basic.DOM as R
8-
import React.Basic.DOM.Events (targetValue, timeStamp)
9-
import React.Basic.DOM.Events as Events
8+
import React.Basic.DOM.Events (preventDefault, targetValue, timeStamp)
9+
import React.Basic.Events as Events
1010

1111
component :: ReactComponent {}
1212
component = react
@@ -15,7 +15,7 @@ component = react
1515
, receiveProps: \_ _ _ -> pure unit
1616
, render: \_ state setState ->
1717
R.div_
18-
[ R.p_ [ R.input { onChange: Events.handler (Events.preventDefault >>> Events.merge { targetValue, timeStamp })
18+
[ R.p_ [ R.input { onChange: Events.handler (preventDefault >>> Events.merge { targetValue, timeStamp })
1919
\{ timeStamp, targetValue } -> setState \_ ->
2020
{ value: fromMaybe "" targetValue
2121
, timeStamp: Just timeStamp

‎generated-docs/React/Basic/DOM/Events.md

Lines changed: 3 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,6 @@
11
## Module React.Basic.DOM.Events
22

3-
This module defines safe event function and property accessors.
4-
5-
#### `EventHandler`
6-
7-
``` purescript
8-
type EventHandler = EffFn1 (react :: ReactFX) SyntheticEvent Unit
9-
```
10-
11-
An event handler, which receives a `SyntheticEvent` and performs some
12-
effects in return.
13-
14-
#### `SyntheticEvent`
15-
16-
``` purescript
17-
data SyntheticEvent :: Type
18-
```
19-
20-
Event data that we receive from React.
3+
This module defines safe DOM event function and property accessors.
214

225
#### `DOMNode`
236

@@ -35,62 +18,6 @@ data DOMEvent :: Type
3518

3619
The underlying browser Event.
3720

38-
#### `EventFn`
39-
40-
``` purescript
41-
newtype EventFn a b
42-
```
43-
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-
55-
##### Instances
56-
``` purescript
57-
Semigroupoid EventFn
58-
Category EventFn
59-
(IsSymbol l, RowCons l (EventFn a b) fns_rest fns, RowCons l b r_rest r, RowLacks l fns_rest, RowLacks l r_rest, Merge rest fns_rest a r_rest) => Merge (Cons l (EventFn a b) rest) fns a r
60-
```
61-
62-
#### `handler`
63-
64-
``` purescript
65-
handler :: forall a. EventFn SyntheticEvent a -> (a -> Eff (react :: ReactFX) Unit) -> EventHandler
66-
```
67-
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-
78-
#### `merge`
79-
80-
``` purescript
81-
merge :: forall a fns fns_list r. RowToList fns fns_list => Merge fns_list fns a r => { | fns } -> EventFn a ({ | r })
82-
```
83-
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-
9421
#### `bubbles`
9522

9623
``` purescript
@@ -184,13 +111,13 @@ target :: EventFn SyntheticEvent DOMNode
184111
#### `targetChecked`
185112

186113
``` purescript
187-
targetChecked :: EventFn SyntheticEvent (Nullable Boolean)
114+
targetChecked :: EventFn SyntheticEvent (Maybe Boolean)
188115
```
189116

190117
#### `targetValue`
191118

192119
``` purescript
193-
targetValue :: EventFn SyntheticEvent (Nullable String)
120+
targetValue :: EventFn SyntheticEvent (Maybe String)
194121
```
195122

196123
#### `timeStamp`
@@ -205,17 +132,4 @@ timeStamp :: EventFn SyntheticEvent Number
205132
type_ :: EventFn SyntheticEvent String
206133
```
207134

208-
#### `Merge`
209-
210-
``` purescript
211-
class Merge (rl :: RowList) fns a r | rl -> fns, rl a -> r where
212-
mergeImpl :: RLProxy rl -> { | fns } -> EventFn a ({ | r })
213-
```
214-
215-
##### Instances
216-
``` purescript
217-
Merge Nil () a ()
218-
(IsSymbol l, RowCons l (EventFn a b) fns_rest fns, RowCons l b r_rest r, RowLacks l fns_rest, RowLacks l r_rest, Merge rest fns_rest a r_rest) => Merge (Cons l (EventFn a b) rest) fns a r
219-
```
220-
221135

‎generated-docs/React/Basic/Events.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
## Module React.Basic.Events
2+
3+
#### `EventHandler`
4+
5+
``` purescript
6+
type EventHandler = EffFn1 (react :: ReactFX) SyntheticEvent Unit
7+
```
8+
9+
An event handler, which receives a `SyntheticEvent` and performs some
10+
effects in return.
11+
12+
#### `SyntheticEvent`
13+
14+
``` purescript
15+
data SyntheticEvent :: Type
16+
```
17+
18+
Event data that we receive from React.
19+
20+
#### `EventFn`
21+
22+
``` purescript
23+
newtype EventFn a b
24+
= EventFn (a -> b)
25+
```
26+
27+
Encapsulates a safe event operation. `EventFn`s can be composed
28+
to perform multiple operations.
29+
30+
For example:
31+
32+
```purs
33+
input { onChange: handler (preventDefault >>> targetValue)
34+
\value -> setState \_ -> { value }
35+
}
36+
```
37+
38+
##### Instances
39+
``` purescript
40+
Semigroupoid EventFn
41+
Category EventFn
42+
(IsSymbol l, RowCons l (EventFn a b) fns_rest fns, RowCons l b r_rest r, RowLacks l fns_rest, RowLacks l r_rest, Merge rest fns_rest a r_rest) => Merge (Cons l (EventFn a b) rest) fns a r
43+
```
44+
45+
#### `handler`
46+
47+
``` purescript
48+
handler :: forall a. EventFn SyntheticEvent a -> (a -> Eff (react :: ReactFX) Unit) -> EventHandler
49+
```
50+
51+
Create an `EventHandler`, given an `EventFn` and a callback.
52+
53+
For example:
54+
55+
```purs
56+
input { onChange: handler targetValue
57+
\value -> setState \_ -> { value }
58+
}
59+
```
60+
61+
#### `merge`
62+
63+
``` purescript
64+
merge :: forall a fns fns_list r. RowToList fns fns_list => Merge fns_list fns a r => { | fns } -> EventFn a ({ | r })
65+
```
66+
67+
Merge multiple `EventFn` operations and collect their results.
68+
69+
For example:
70+
71+
```purs
72+
input { onChange: handler (merge { targetValue, timeStamp })
73+
\{ targetValue, timeStamp } -> setState \_ -> { ... }
74+
}
75+
```
76+
77+
#### `Merge`
78+
79+
``` purescript
80+
class Merge (rl :: RowList) fns a r | rl -> fns, rl a -> r where
81+
mergeImpl :: RLProxy rl -> { | fns } -> EventFn a ({ | r })
82+
```
83+
84+
##### Instances
85+
``` purescript
86+
Merge Nil () a ()
87+
(IsSymbol l, RowCons l (EventFn a b) fns_rest fns, RowCons l b r_rest r, RowLacks l fns_rest, RowLacks l r_rest, Merge rest fns_rest a r_rest) => Merge (Cons l (EventFn a b) rest) fns a r
88+
```
89+
90+

‎src/React/Basic/DOM.purs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
module React.Basic.DOM where
99

1010
import React.Basic (JSX, ReactComponent, createElement)
11-
import React.Basic.DOM.Events (EventHandler)
11+
import React.Basic.Events (EventHandler)
1212
import Unsafe.Coerce (unsafeCoerce)
1313

1414
-- | Create a text node.

‎src/React/Basic/DOM/Events.purs

Lines changed: 3 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
-- | This module defines safe event function and property accessors.
1+
-- | This module defines safe DOM event function and property accessors.
22

33
module React.Basic.DOM.Events
4-
( EventHandler
5-
, SyntheticEvent
6-
, DOMNode
4+
( DOMNode
75
, DOMEvent
8-
, EventFn
9-
, handler
10-
, merge
116
, bubbles
127
, cancelable
138
, currentTarget
@@ -27,102 +22,19 @@ module React.Basic.DOM.Events
2722
, targetValue
2823
, timeStamp
2924
, type_
30-
, class Merge
31-
, mergeImpl
3225
) where
3326

34-
import Prelude
35-
36-
import Control.Monad.Eff (Eff)
37-
import Control.Monad.Eff.Uncurried (EffFn1, mkEffFn1)
3827
import Data.Maybe (Maybe)
3928
import Data.Nullable (toMaybe)
40-
import Data.Record (delete, get, insert)
41-
import Data.Symbol (class IsSymbol, SProxy(SProxy))
42-
import React.Basic (ReactFX)
43-
import Type.Row (kind RowList, class RowToList, class RowLacks, RLProxy(..), Cons, Nil)
29+
import React.Basic.Events (EventFn(..), SyntheticEvent)
4430
import Unsafe.Coerce (unsafeCoerce)
4531

46-
-- | An event handler, which receives a `SyntheticEvent` and performs some
47-
-- | effects in return.
48-
type EventHandler = EffFn1 (react :: ReactFX) SyntheticEvent Unit
49-
50-
-- | Event data that we receive from React.
51-
foreign import data SyntheticEvent :: Type
52-
5332
-- | An _actual_ DOM node (not a virtual DOM element!)
5433
foreign import data DOMNode :: Type
5534

5635
-- | The underlying browser Event.
5736
foreign import data DOMEvent :: Type
5837

59-
-- | Encapsulates a safe event operation. `EventFn`s can be composed
60-
-- | to perform multiple operations.
61-
-- |
62-
-- | For example:
63-
-- |
64-
-- | ```purs
65-
-- | input { onChange: handler (preventDefault >>> targetValue)
66-
-- | \value -> setState \_ -> { value }
67-
-- | }
68-
-- | ```
69-
newtype EventFn a b = EventFn (a -> b)
70-
71-
derive newtype instance semigroupoidBuilder :: Semigroupoid EventFn
72-
derive newtype instance categoryBuilder :: Category EventFn
73-
74-
-- | Create an `EventHandler`, given an `EventFn` and a callback.
75-
-- |
76-
-- | For example:
77-
-- |
78-
-- | ```purs
79-
-- | input { onChange: handler targetValue
80-
-- | \value -> setState \_ -> { value }
81-
-- | }
82-
-- | ```
83-
handler :: forall a. EventFn SyntheticEvent a -> (a -> Eff (react :: ReactFX) Unit) -> EventHandler
84-
handler (EventFn fn) cb = mkEffFn1 $ fn >>> cb
85-
86-
class Merge (rl :: RowList) fns a r | rl -> fns, rl a -> r where
87-
mergeImpl :: RLProxy rl -> Record fns -> EventFn a (Record r)
88-
89-
instance mergeNil :: Merge Nil () a () where
90-
mergeImpl _ _ = EventFn \_ -> {}
91-
92-
instance mergeCons
93-
:: ( IsSymbol l
94-
, RowCons l (EventFn a b) fns_rest fns
95-
, RowCons l b r_rest r
96-
, RowLacks l fns_rest
97-
, RowLacks l r_rest
98-
, Merge rest fns_rest a r_rest
99-
)
100-
=> Merge (Cons l (EventFn a b) rest) fns a r
101-
where
102-
mergeImpl _ fns = EventFn \a ->
103-
let EventFn inner = mergeImpl (RLProxy :: RLProxy rest) (delete l fns)
104-
EventFn f = get l fns
105-
in insert l (f a) (inner a)
106-
where
107-
l = SProxy :: SProxy l
108-
109-
-- | Merge multiple `EventFn` operations and collect their results.
110-
-- |
111-
-- | For example:
112-
-- |
113-
-- | ```purs
114-
-- | input { onChange: handler (merge { targetValue, timeStamp })
115-
-- | \{ targetValue, timeStamp } -> setState \_ -> { ... }
116-
-- | }
117-
-- | ```
118-
merge
119-
:: forall a fns fns_list r
120-
. RowToList fns fns_list
121-
=> Merge fns_list fns a r
122-
=> Record fns
123-
-> EventFn a (Record r)
124-
merge = mergeImpl (RLProxy :: RLProxy fns_list)
125-
12638
bubbles :: EventFn SyntheticEvent Boolean
12739
bubbles = EventFn \e -> (unsafeCoerce e).bubbles
12840

0 commit comments

Comments
 (0)