From a14b153ad82a5e00ea7fb7aded9ebcb65de318e1 Mon Sep 17 00:00:00 2001 From: Michael Trotter Date: Fri, 4 May 2018 16:30:00 -0600 Subject: [PATCH] Update examples --- README.md | 31 ++++++++------- examples/component/src/Container.purs | 17 ++++---- examples/component/src/ToggleButton.purs | 24 +++++++----- .../controlled-input/src/ControlledInput.purs | 39 +++++++++++-------- examples/counter/src/Counter.purs | 27 +++++++------ 5 files changed, 80 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 06a7c47..996ad83 100644 --- a/README.md +++ b/README.md @@ -23,9 +23,9 @@ module React.Basic.Example where import Prelude -import Control.Monad.Eff.Uncurried (mkEffFn1) import React.Basic (ReactComponent, react) import React.Basic.DOM as R +import React.Basic.Events as Events -- The props for the component type ExampleProps = @@ -33,19 +33,24 @@ type ExampleProps = } -- Create a component by passing a record to the `react` function. --- The `render` function takes a display name, the props and current state, as well as a +-- The `render` function takes the props and current state, as well as a -- state update callback, and produces a document. -example :: ReactComponent ExampleProps -example = react - { displayName: "Example" - , initialState: { counter: 0 } - , receiveProps: \_ _ _ -> pure unit - , render: \{ label } { counter } setState -> - R.button { onClick: mkEffFn1 \_ -> do - setState \s -> { counter: s.counter + 1 } - , children: [ R.text (label <> ": " <> show counter) ] - } - } +component :: ReactComponent ExampleProps +component = react { displayName: "Counter", initialState, receiveProps, render } + where + initialState = + { counter: 0 + } + + receiveProps _ _ _ = + pure unit + + render props state setState = + R.button + { onClick: Events.handler_ do + setState \s -> s { counter = s.counter + 1 } + , children: [ R.text (props.label <> ": " <> show state.counter) ] + } ``` This component can be used directly from JavaScript. For example, if you are using `purs-loader`: diff --git a/examples/component/src/Container.purs b/examples/component/src/Container.purs index 8ff4207..556b35c 100644 --- a/examples/component/src/Container.purs +++ b/examples/component/src/Container.purs @@ -5,11 +5,12 @@ import React.Basic.DOM as R import ToggleButton as ToggleButton component :: ReactComponent {} -component = stateless - { displayName: "Container" - , render: \_ -> - R.div { children: [ createElement ToggleButton.component { on: true } - , createElement ToggleButton.component { on: false } - ] - } - } +component = stateless { displayName: "Container", render } + where + render _ = + R.div + { children: + [ createElement ToggleButton.component { on: true } + , createElement ToggleButton.component { on: false } + ] + } diff --git a/examples/component/src/ToggleButton.purs b/examples/component/src/ToggleButton.purs index 8a5e4ec..dc617ba 100644 --- a/examples/component/src/ToggleButton.purs +++ b/examples/component/src/ToggleButton.purs @@ -2,21 +2,25 @@ module ToggleButton where import Prelude -import Control.Monad.Eff.Uncurried (mkEffFn1) import React.Basic (ReactComponent, react) import React.Basic.DOM as R +import React.Basic.Events as Events type ExampleProps = { on :: Boolean } component :: ReactComponent ExampleProps -component = react - { displayName: "ToggleButton" - , initialState: { on: false } - , receiveProps: \{ on } _ setState -> setState (const { on }) - , render: \_ { on } setState -> - R.button { onClick: mkEffFn1 \_ -> setState \s -> { on: not s.on } - , children: [ R.text if on then "On" else "Off" ] - } - } +component = react { displayName: "ToggleButton", initialState, receiveProps, render } + where + initialState = + { on: false } + + receiveProps props _ setState = + setState _ { on = props.on } + + render _ state setState = + R.button + { onClick: Events.handler_ (setState \s -> s { on = not s.on }) + , children: [ R.text if state.on then "On" else "Off" ] + } diff --git a/examples/controlled-input/src/ControlledInput.purs b/examples/controlled-input/src/ControlledInput.purs index b9d2153..92fe792 100644 --- a/examples/controlled-input/src/ControlledInput.purs +++ b/examples/controlled-input/src/ControlledInput.purs @@ -3,27 +3,34 @@ module ControlledInput where import Prelude import Data.Maybe (Maybe(..), fromMaybe, maybe) -import React.Basic (ReactComponent, react) +import React.Basic (ReactComponent, fragment, react) import React.Basic.DOM as R import React.Basic.DOM.Events (preventDefault, targetValue, timeStamp) import React.Basic.Events as Events component :: ReactComponent {} -component = react - { displayName: "ControlledInput" - , initialState: { value: "hello world", timeStamp: Nothing } - , receiveProps: \_ _ _ -> pure unit - , render: \_ state setState -> - R.div_ - [ R.p_ [ R.input { onChange: Events.handler (preventDefault >>> Events.merge { targetValue, timeStamp }) - \{ timeStamp, targetValue } -> setState \_ -> - { value: fromMaybe "" targetValue - , timeStamp: Just timeStamp - } - , value: state.value - } - ] +component = react { displayName: "ControlledInput", initialState, receiveProps, render } + where + initialState = + { value: "hello world" + , timeStamp: Nothing + } + + receiveProps _ _ _ = + pure unit + + render _ state setState = + fragment + [ R.input + { onChange: + Events.handler + (preventDefault >>> Events.merge { targetValue, timeStamp }) + \{ timeStamp, targetValue } -> + setState _ { value = fromMaybe "" targetValue + , timeStamp = Just timeStamp + } + , value: state.value + } , R.p_ [ R.text ("Current value = " <> show state.value) ] , R.p_ [ R.text ("Changed at = " <> maybe "never" show state.timeStamp) ] ] - } diff --git a/examples/counter/src/Counter.purs b/examples/counter/src/Counter.purs index cdf10ad..12dda23 100644 --- a/examples/counter/src/Counter.purs +++ b/examples/counter/src/Counter.purs @@ -2,9 +2,9 @@ module Counter where import Prelude -import Control.Monad.Eff.Uncurried (mkEffFn1) import React.Basic (ReactComponent, react) import React.Basic.DOM as R +import React.Basic.Events as Events -- The props for the component type ExampleProps = @@ -15,13 +15,18 @@ type ExampleProps = -- The `render` function takes the props and current state, as well as a -- state update callback, and produces a document. component :: ReactComponent ExampleProps -component = react - { displayName: "Counter" - , initialState: { counter: 0 } - , receiveProps: \_ _ _ -> pure unit - , render: \{ label } { counter } setState -> - R.button { onClick: mkEffFn1 \_ -> do - setState \s -> { counter: s.counter + 1 } - , children: [ R.text (label <> ": " <> show counter) ] - } - } +component = react { displayName: "Counter", initialState, receiveProps, render } + where + initialState = + { counter: 0 + } + + receiveProps _ _ _ = + pure unit + + render props state setState = + R.button + { onClick: Events.handler_ do + setState \s -> s { counter = s.counter + 1 } + , children: [ R.text (props.label <> ": " <> show state.counter) ] + }