Skip to content

Commit 86c8d9c

Browse files
spicydonutsspicydonuts
authored
Merge pull request #24 from lumihq/michael/event-utilities
Add Event Utilities
2 parents b02cae8 + 3df9147 commit 86c8d9c

File tree

17 files changed

+552
-149
lines changed

17 files changed

+552
-149
lines changed

‎bower.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
"dependencies": {
1414
"purescript-functions": "^3.0.0",
1515
"purescript-eff": "^3.1.0",
16-
"purescript-unsafe-coerce": "^3.0.0"
16+
"purescript-unsafe-coerce": "^3.0.0",
17+
"purescript-nullable": "^3.0.0",
18+
"purescript-typelevel-prelude": "^2.6.0",
19+
"purescript-record": "^0.2.6"
1720
}
1821
}

‎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: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module ControlledInput where
2+
3+
import Prelude
4+
5+
import Data.Maybe (Maybe(..), fromMaybe, maybe)
6+
import Data.Nullable (toMaybe)
7+
import React.Basic (ReactComponent, react)
8+
import React.Basic.DOM as R
9+
import React.Basic.DOM.Events (targetValue, timeStamp)
10+
import React.Basic.DOM.Events as Events
11+
12+
component :: ReactComponent {}
13+
component = react
14+
{ displayName: "Counter"
15+
, initialState: { value: "hello world", timeStamp: Nothing }
16+
, receiveProps: \_ _ _ -> pure unit
17+
, render: \_ state setState ->
18+
R.div_
19+
[ R.p_ [ R.input { onChange: Events.handler (Events.preventDefault >>> Events.merge { targetValue, timeStamp }) \{ timeStamp, targetValue } ->
20+
setState \_ -> { value: fromMaybe "" (toMaybe targetValue)
21+
, timeStamp: Just timeStamp
22+
}
23+
, value: state.value
24+
}
25+
]
26+
, R.p_ [ R.text ("Current value = " <> show state.value) ]
27+
, R.p_ (maybe [] (\ts -> [R.text ("Changed at: " <> show ts)]) state.timeStamp)
28+
]
29+
}

‎generated-docs/React/Basic.md‎

Lines changed: 9 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
#### `react`
44

55
``` purescript
6-
react :: forall props state fx. { displayName :: String, initialState :: { | state }, receiveProps :: props -> { | state } -> (SetState state fx) -> Eff (react :: ReactFX | fx) Unit, render :: props -> { | state } -> (SetState state fx) -> JSX } -> ReactComponent props
6+
react :: forall props state fx. { displayName :: String, initialState :: { | state }, receiveProps :: { | props } -> { | state } -> (SetState state fx) -> Eff (react :: ReactFX | fx) Unit, render :: { | props } -> { | state } -> (SetState state fx) -> JSX } -> ReactComponent { | props }
77
```
88

99
Create a React component from a _specification_ of that component.
@@ -19,7 +19,7 @@ module (and re-exported here).
1919
#### `stateless`
2020

2121
``` purescript
22-
stateless :: forall props. { displayName :: String, render :: props -> JSX } -> ReactComponent props
22+
stateless :: forall props. { displayName :: String, render :: { | props } -> JSX } -> ReactComponent { | props }
2323
```
2424

2525
Create a stateless React component.
@@ -30,7 +30,7 @@ components which don't use state.
3030
#### `createElement`
3131

3232
``` purescript
33-
createElement :: forall props. ReactComponent props -> props -> JSX
33+
createElement :: forall props. ReactComponent { | props } -> { | props } -> JSX
3434
```
3535

3636
Create a `JSX` node from a React component, by providing the props.
@@ -63,33 +63,6 @@ Render an Array of children without a wrapping component.
6363
Provide a key when dynamically rendering multiple fragments along side
6464
each other.
6565

66-
67-
### Re-exported from React.Basic.Types:
68-
69-
#### `SyntheticEvent`
70-
71-
``` purescript
72-
type SyntheticEvent = { bubbles :: Boolean, cancelable :: Boolean, currentTarget :: DOMNode, defaultPrevented :: Boolean, eventPhase :: Number, isTrusted :: Boolean, target :: DOMNode, timeStamp :: Number, "type" :: String }
73-
```
74-
75-
Event data that we receive from React.
76-
77-
#### `ReactFX`
78-
79-
``` purescript
80-
data ReactFX :: Effect
81-
```
82-
83-
A placeholder effect for all React FFI.
84-
85-
#### `ReactComponent`
86-
87-
``` purescript
88-
data ReactComponent :: Type -> Type
89-
```
90-
91-
A React component which can be used from JavaScript.
92-
9366
#### `JSX`
9467

9568
``` purescript
@@ -98,28 +71,20 @@ data JSX :: Type
9871

9972
A virtual DOM element.
10073

101-
#### `EventHandler`
74+
#### `ReactComponent`
10275

10376
``` purescript
104-
type EventHandler = EffFn1 (react :: ReactFX) SyntheticEvent Unit
77+
data ReactComponent :: Type -> Type
10578
```
10679

107-
An event handler, which receives a `SyntheticEvent` and performs some
108-
effects in return.
80+
A React component which can be used from JavaScript.
10981

110-
#### `DOMNode`
82+
#### `ReactFX`
11183

11284
``` purescript
113-
data DOMNode :: Type
85+
data ReactFX :: Effect
11486
```
11587

116-
An _actual_ DOM node (not a virtual DOM element!)
117-
118-
#### `CSS`
119-
120-
``` purescript
121-
data CSS :: Type
122-
```
88+
A placeholder effect for all React FFI.
12389

124-
An abstract type representing records of CSS attributes.
12590

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ text :: String -> JSX
1515

1616
Create a text node.
1717

18+
#### `CSS`
19+
20+
``` purescript
21+
data CSS :: Type
22+
```
23+
24+
An abstract type representing records of CSS attributes.
25+
1826
#### `css`
1927

2028
``` purescript

0 commit comments

Comments
 (0)