Skip to content

Add Event Utilities #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 27, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
"dependencies": {
"purescript-functions": "^3.0.0",
"purescript-eff": "^3.1.0",
"purescript-unsafe-coerce": "^3.0.0"
"purescript-unsafe-coerce": "^3.0.0",
"purescript-nullable": "^3.0.0",
"purescript-typelevel-prelude": "^2.6.0",
"purescript-record": "^0.2.6"
}
}
4 changes: 4 additions & 0 deletions examples/controlled-input/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
output
html/index.js
package-lock.json
node_modules
5 changes: 5 additions & 0 deletions examples/controlled-input/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
all:
purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
purs bundle --module ControlledInput output/*/*.js > output/bundle.js
echo 'module.exports = PS.ControlledInput;' >> output/bundle.js
node_modules/browserify/bin/cmd.js output/bundle.js index.js -o html/index.js
12 changes: 12 additions & 0 deletions examples/controlled-input/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Controlled Input Example

## Building

```
npm install
make all
```

This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.

Then open `html/index.html` in your browser.
10 changes: 10 additions & 0 deletions examples/controlled-input/html/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>react-basic example</title>
</head>
<body>
<div id="container"></div>
<script src="index.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions examples/controlled-input/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
"use strict";

var React = require("react");
var ReactDOM = require("react-dom");
var ControlledInput = require("./output/bundle.js");

ReactDOM.render(
React.createElement(ControlledInput.component),
document.getElementById("container")
);
15 changes: 15 additions & 0 deletions examples/controlled-input/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "counter",
"version": "1.0.0",
"description": "",
"keywords": [],
"author": "",
"dependencies": {
"create-react-class": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"browserify": "^16.1.0"
}
}
29 changes: 29 additions & 0 deletions examples/controlled-input/src/ControlledInput.purs
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
module ControlledInput where

import Prelude

import Data.Maybe (Maybe(..), fromMaybe, maybe)
import Data.Nullable (toMaybe)
import React.Basic (ReactComponent, react)
import React.Basic.DOM as R
import React.Basic.DOM.Events (targetValue, timeStamp)
import React.Basic.DOM.Events as Events

component :: ReactComponent {}
component = react
{ displayName: "Counter"
, initialState: { value: "hello world", timeStamp: Nothing }
, receiveProps: \_ _ _ -> pure unit
, render: \_ state setState ->
R.div_
[ R.p_ [ R.input { onChange: Events.handler (Events.preventDefault >>> Events.merge { targetValue, timeStamp }) \{ timeStamp, targetValue } ->
setState \_ -> { value: fromMaybe "" (toMaybe targetValue)
, timeStamp: Just timeStamp
}
, value: state.value
}
]
, R.p_ [ R.text ("Current value = " <> show state.value) ]
, R.p_ (maybe [] (\ts -> [R.text ("Changed at: " <> show ts)]) state.timeStamp)
]
}
53 changes: 9 additions & 44 deletions generated-docs/React/Basic.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
#### `react`

``` purescript
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
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 }
```

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

``` purescript
stateless :: forall props. { displayName :: String, render :: props -> JSX } -> ReactComponent props
stateless :: forall props. { displayName :: String, render :: { | props } -> JSX } -> ReactComponent { | props }
```

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

``` purescript
createElement :: forall props. ReactComponent props -> props -> JSX
createElement :: forall props. ReactComponent { | props } -> { | props } -> JSX
```

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


### Re-exported from React.Basic.Types:

#### `SyntheticEvent`

``` purescript
type SyntheticEvent = { bubbles :: Boolean, cancelable :: Boolean, currentTarget :: DOMNode, defaultPrevented :: Boolean, eventPhase :: Number, isTrusted :: Boolean, target :: DOMNode, timeStamp :: Number, "type" :: String }
```

Event data that we receive from React.

#### `ReactFX`

``` purescript
data ReactFX :: Effect
```

A placeholder effect for all React FFI.

#### `ReactComponent`

``` purescript
data ReactComponent :: Type -> Type
```

A React component which can be used from JavaScript.

#### `JSX`

``` purescript
Expand All @@ -98,28 +71,20 @@ data JSX :: Type

A virtual DOM element.

#### `EventHandler`
#### `ReactComponent`

``` purescript
type EventHandler = EffFn1 (react :: ReactFX) SyntheticEvent Unit
data ReactComponent :: Type -> Type
```

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

#### `DOMNode`
#### `ReactFX`

``` purescript
data DOMNode :: Type
data ReactFX :: Effect
```

An _actual_ DOM node (not a virtual DOM element!)

#### `CSS`

``` purescript
data CSS :: Type
```
A placeholder effect for all React FFI.

An abstract type representing records of CSS attributes.

8 changes: 8 additions & 0 deletions generated-docs/React/Basic/DOM.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ text :: String -> JSX

Create a text node.

#### `CSS`

``` purescript
data CSS :: Type
```

An abstract type representing records of CSS attributes.

#### `css`

``` purescript
Expand Down
Loading