Skip to content

Commit d730d58

Browse files
author
Michael Trotter
committed
Add handler function and controlled input example
1 parent e319358 commit d730d58

File tree

8 files changed

+89
-3
lines changed

8 files changed

+89
-3
lines changed

‎examples/controlled-input/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
output
2+
html/index.js
3+
package-lock.json
4+
node_modules

‎examples/controlled-input/Makefile‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
all:
2+
purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
3+
purs bundle --module ControlledInput output/*/*.js > output/bundle.js
4+
echo 'module.exports = PS.ControlledInput;' >> output/bundle.js
5+
node_modules/browserify/bin/cmd.js output/bundle.js index.js -o html/index.js

‎examples/controlled-input/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Controlled Input Example
2+
3+
## Building
4+
5+
```
6+
npm install
7+
make all
8+
```
9+
10+
This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
11+
12+
Then open `html/index.html` in your browser.

‎examples/controlled-input/html/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>react-basic example</title>
5+
</head>
6+
<body>
7+
<div id="container"></div>
8+
<script src="index.js"></script>
9+
</body>
10+
</html>

‎examples/controlled-input/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
3+
var React = require("react");
4+
var ReactDOM = require("react-dom");
5+
var ControlledInput = require("./output/bundle.js");
6+
7+
ReactDOM.render(
8+
React.createElement(ControlledInput.component),
9+
document.getElementById("container")
10+
);

‎examples/controlled-input/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "counter",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"author": "",
7+
"dependencies": {
8+
"create-react-class": "^15.6.2",
9+
"react": "^16.2.0",
10+
"react-dom": "^16.2.0"
11+
},
12+
"devDependencies": {
13+
"browserify": "^16.1.0"
14+
}
15+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module ControlledInput where
2+
3+
import Prelude
4+
5+
import Data.Maybe (fromMaybe)
6+
import Data.Nullable (toMaybe)
7+
import React.Basic (ReactComponent, react)
8+
import React.Basic.DOM as R
9+
import React.Basic.DOM.Events (handler, targetValue)
10+
11+
component :: ReactComponent {}
12+
component = react
13+
{ displayName: "Counter"
14+
, initialState: { value: "hello world" }
15+
, receiveProps: \_ _ _ -> pure unit
16+
, render: \_ state setState ->
17+
R.div_
18+
[ R.input { onChange: handler targetValue \value ->
19+
setState \_ -> { value: fromMaybe "" (toMaybe value) }
20+
, value: state.value
21+
}
22+
]
23+
}

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module React.Basic.DOM.Events
66
, DOMNode
77
, DOMEvent
88
, EventFn
9+
, handler
910
-- , smoosh
1011
, bubbles
1112
, cancelable
@@ -23,13 +24,16 @@ module React.Basic.DOM.Events
2324
, stopPropagation
2425
, isPropagationStopped
2526
, target
27+
, targetChecked
28+
, targetValue
2629
, timeStamp
2730
, type_
2831
) where
2932

3033
import Prelude
3134

32-
import Control.Monad.Eff.Uncurried (EffFn1)
35+
import Control.Monad.Eff (Eff)
36+
import Control.Monad.Eff.Uncurried (EffFn1, mkEffFn1)
3337
import Data.Nullable (Nullable)
3438
import React.Basic (ReactFX)
3539
import Unsafe.Coerce (unsafeCoerce)
@@ -52,6 +56,9 @@ newtype EventFn a b = EventFn (a -> b)
5256
derive newtype instance semigroupoidBuilder :: Semigroupoid EventFn
5357
derive newtype instance categoryBuilder :: Category EventFn
5458

59+
handler :: forall a. EventFn SyntheticEvent a -> (a -> Eff (react :: ReactFX) Unit) -> EventHandler
60+
handler (EventFn fn) cb = mkEffFn1 $ fn >>> cb
61+
5562
-- smoosh
5663
-- :: { b :: EventFn a b } -> { c :: EventFn a c } -> EventFn a { b :: b, c :: c }
5764
-- smoosh = ?smoosh
@@ -113,10 +120,10 @@ target :: EventFn SyntheticEvent DOMNode
113120
target = EventFn \e -> (unsafeCoerce e).target
114121

115122
targetChecked :: EventFn SyntheticEvent (Nullable Boolean)
116-
targetChecked = EventFn \e -> (unsafeCoerce e).targetChecked
123+
targetChecked = EventFn \e -> (unsafeCoerce e).target.checked
117124

118125
targetValue :: EventFn SyntheticEvent (Nullable String)
119-
targetValue = EventFn \e -> (unsafeCoerce e).targetValue
126+
targetValue = EventFn \e -> (unsafeCoerce e).target.value
120127

121128
timeStamp :: EventFn SyntheticEvent Number
122129
timeStamp = EventFn \e -> (unsafeCoerce e).timeStamp

0 commit comments

Comments
 (0)