Skip to content

Parameterizing ReactThis with props and state #42

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.

Sign up for GitHub

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 1 commit into from
Sep 4, 2015
Merged

Parameterizing ReactThis with props and state #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions docs/React.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ A virtual DOM node, or component.
#### `ReactThis`

``` purescript
data ReactThis :: *
data ReactThis :: * -> * -> *
```

A reference to a component, essentially React's `this`.
Expand Down Expand Up @@ -147,15 +147,15 @@ A function which handles events.
#### `Render`

``` purescript
type Render props state eff = ReactThis -> Eff (props :: ReactProps props, refs :: ReactRefs Disallowed, state :: ReactState ReadOnly state | eff) ReactElement
type Render props state eff = ReactThis props state -> Eff (props :: ReactProps props, refs :: ReactRefs Disallowed, state :: ReactState ReadOnly state | eff) ReactElement
```

A rendering function.

#### `ReactSpec`

``` purescript
type ReactSpec props state eff = { render :: Render props state eff, displayName :: String, getInitialState :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState Disallowed state, refs :: ReactRefs Disallowed | eff) state, componentWillMount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs Disallowed | eff) Unit, componentDidMount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillReceiveProps :: ReactThis -> props -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillUnmount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit }
type ReactSpec props state eff = { render :: Render props state eff, displayName :: String, getInitialState :: ReactThis props state -> Eff (props :: ReactProps props, state :: ReactState Disallowed state, refs :: ReactRefs Disallowed | eff) state, componentWillMount :: ReactThis props state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs Disallowed | eff) Unit, componentDidMount :: ReactThis props state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillReceiveProps :: ReactThis props state -> props -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: ReactThis props state -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: ReactThis props state -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: ReactThis props state -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillUnmount :: ReactThis props state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit }
```

A specification of a component.
Expand All @@ -179,47 +179,47 @@ React class for components.
#### `getProps`

``` purescript
getProps :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) props
getProps :: forall props state eff. ReactThis props state -> Eff (props :: ReactProps props | eff) props
```

Read the component props.

#### `getRefs`

``` purescript
getRefs :: forall write eff. ReactThis -> Eff (refs :: ReactRefs (Read write) | eff) Refs
getRefs :: forall props state write eff. ReactThis props state -> Eff (refs :: ReactRefs (Read write) | eff) Refs
```

Read the component refs.

#### `getChildren`

``` purescript
getChildren :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) (Array ReactElement)
getChildren :: forall props state eff. ReactThis props state -> Eff (props :: ReactProps props | eff) (Array ReactElement)
```

Read the component children property.

#### `writeState`

``` purescript
writeState :: forall state eff. ReactThis -> state -> Eff (state :: ReactState ReadWrite state | eff) state
writeState :: forall props state eff. ReactThis props state -> state -> Eff (state :: ReactState ReadWrite state | eff) state
```

Write the component state.

#### `readState`

``` purescript
readState :: forall state write eff. ReactThis -> Eff (state :: ReactState (Read write) state | eff) state
readState :: forall props state write eff. ReactThis props state -> Eff (state :: ReactState (Read write) state | eff) state
```

Read the component state.

#### `transformState`

``` purescript
transformState :: forall state eff. ReactThis -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state
transformState :: forall props state eff. ReactThis props state -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state
```

Transform the component state by applying a function.
Expand Down
32 changes: 16 additions & 16 deletions src/React.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ import Control.Monad.Eff (Eff())
foreign import data ReactElement :: *

-- | A reference to a component, essentially React's `this`.
foreign import data ReactThis :: *
foreign import data ReactThis :: * -> * -> *

-- | An event handler. The type argument represents the type of the event.
foreign import data EventHandler :: * -> *
Expand Down Expand Up @@ -136,7 +136,7 @@ type EventHandlerContext eff props state result =

-- | A rendering function.
type Render props state eff =
ReactThis ->
ReactThis props state ->
Eff ( props :: ReactProps props
, refs :: ReactRefs Disallowed
, state :: ReactState ReadOnly state
Expand All @@ -148,36 +148,36 @@ type ReactSpec props state eff =
{ render :: Render props state eff
, displayName :: String
, getInitialState
:: ReactThis ->
:: ReactThis props state ->
Eff ( props :: ReactProps props
, state :: ReactState Disallowed state
, refs :: ReactRefs Disallowed
| eff
) state
, componentWillMount
:: ReactThis ->
:: ReactThis props state ->
Eff ( props :: ReactProps props
, state :: ReactState ReadWrite state
, refs :: ReactRefs Disallowed
| eff
) Unit
, componentDidMount
:: ReactThis ->
:: ReactThis props state ->
Eff ( props :: ReactProps props
, state :: ReactState ReadWrite state
, refs :: ReactRefs ReadOnly
| eff
) Unit
, componentWillReceiveProps
:: ReactThis ->
:: ReactThis props state ->
props ->
Eff ( props :: ReactProps props
, state :: ReactState ReadWrite state
, refs :: ReactRefs ReadOnly
| eff
) Unit
, shouldComponentUpdate
:: ReactThis ->
:: ReactThis props state ->
props ->
state ->
Eff ( props :: ReactProps props
Expand All @@ -186,7 +186,7 @@ type ReactSpec props state eff =
| eff
) Boolean
, componentWillUpdate
:: ReactThis ->
:: ReactThis props state ->
props ->
state ->
Eff ( props :: ReactProps props
Expand All @@ -195,7 +195,7 @@ type ReactSpec props state eff =
| eff
) Unit
, componentDidUpdate
:: ReactThis ->
:: ReactThis props state ->
props ->
state ->
Eff ( props :: ReactProps props
Expand All @@ -204,7 +204,7 @@ type ReactSpec props state eff =
| eff
) Unit
, componentWillUnmount
:: ReactThis ->
:: ReactThis props state ->
Eff ( props :: ReactProps props
, state :: ReactState ReadOnly state
, refs :: ReactRefs ReadOnly
Expand All @@ -231,22 +231,22 @@ spec st renderFn =
foreign import data ReactClass :: * -> *

-- | Read the component props.
foreign import getProps :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) props
foreign import getProps :: forall props state eff. ReactThis props state -> Eff (props :: ReactProps props | eff) props

-- | Read the component refs.
foreign import getRefs :: forall write eff. ReactThis -> Eff (refs :: ReactRefs (Read write) | eff) Refs
foreign import getRefs :: forall props state write eff. ReactThis props state -> Eff (refs :: ReactRefs (Read write) | eff) Refs

-- | Read the component children property.
foreign import getChildren :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) (Array ReactElement)
foreign import getChildren :: forall props state eff. ReactThis props state -> Eff (props :: ReactProps props | eff) (Array ReactElement)

-- | Write the component state.
foreign import writeState :: forall state eff. ReactThis -> state -> Eff (state :: ReactState ReadWrite state | eff) state
foreign import writeState :: forall props state eff. ReactThis props state -> state -> Eff (state :: ReactState ReadWrite state | eff) state

-- | Read the component state.
foreign import readState :: forall state write eff. ReactThis -> Eff (state :: ReactState (Read write) state | eff) state
foreign import readState :: forall props state write eff. ReactThis props state -> Eff (state :: ReactState (Read write) state | eff) state

-- | Transform the component state by applying a function.
transformState :: forall state eff. ReactThis -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state
transformState :: forall props state eff. ReactThis props state -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state
transformState ctx f = do
state <- readState ctx
writeState ctx $ f state
Expand Down