React.Flux.PropertiesAndEvents

This module contains the definitions for creating properties to pass to javascript elements and foreign javascript classes. In addition, it contains definitions for the React Event System.

Documentation

data PropertyOrHandler handler

Either a property or an event handler.

The combination of all properties and event handlers are used to create the javascript object passed as the second argument to React.createElement.

Instances

Functor PropertyOrHandler

Methods

fmap :: (a -> b) -> PropertyOrHandler a -> PropertyOrHandler b

(<$) :: a -> PropertyOrHandler b -> PropertyOrHandler a

(~) * child (ReactElementM eventHandler a) => Term eventHandler [PropertyOrHandler eventHandler] (child -> ReactElementM eventHandler a)

Methods

term :: JSString -> [PropertyOrHandler eventHandler] -> child -> ReactElementM eventHandler a

Creating Properties

property :: ToJSVal val => JSString -> val -> PropertyOrHandler handler

Create a property from anything that can be converted to a JSVal

elementProperty :: JSString -> ReactElementM handler () -> PropertyOrHandler handler

Some third-party React classes allow passing React elements as properties. This function will first run the given ReactElementM to obtain an element or elements, and then use that element as the value for a property with the given key.

nestedProperty :: JSString -> [PropertyOrHandler handler] -> PropertyOrHandler handler

Allows you to create nested object properties. The list of properties passed in will be converted to an object which is then set as the value for a property with the given name. For example,

[ nestedProperty "Hello" [ "a" @= (100 :: Int), "b" $= "World" ]
, "c" $= "!!!"
]

would create a javascript object

{"Hello": {a: 100, b: "World"}, "c": "!!!"}

class CallbackFunction handler a | a -> handler

A class which is used to implement variable argument functions. Any function where each argument implements FromJSVal and the result is either ViewEventHandler or StatefulViewEventHandler is an instance of this class.

Minimal complete definition

applyFromArguments

Instances

CallbackFunction ViewEventHandler ViewEventHandler

Methods

applyFromArguments :: JSArray -> Int -> ViewEventHandler -> IO ViewEventHandler

(FromJSVal a, CallbackFunction handler b) => CallbackFunction handler (a -> b)

Methods

applyFromArguments :: JSArray -> Int -> (a -> b) -> IO handler

CallbackFunction (StatefulViewEventHandler s) (StatefulViewEventHandler s)

Methods

applyFromArguments :: JSArray -> Int -> StatefulViewEventHandler s -> IO (StatefulViewEventHandler s)

callback :: CallbackFunction handler func => JSString -> func -> PropertyOrHandler handler

Create a callback property. This is primarily intended for foreign React classes which expect callbacks to be passed to them as properties. For events on DOM elements, you should instead use the handlers below.

The function func can be any function, as long as each argument to the function is an instance of FromJSVal and the result of the function is handler. Internally, callback creates a javascript function which accesses the arguments javascript object and then matches entries in arguments to the parameters of func. If func has more parameters than the javascript arguments object, a javascript null is used for the conversion. Since the Maybe instance of FromJSVal converts a null reference to Nothing, you can exploit this to create variable-argument javascript callbacks.

For example, all three of the following functions could be passed as func inside a view.

foo :: Int -> Maybe String -> ViewEventHandler
bar :: Aeson.Value -> ViewEventHandler
baz :: ViewEventHandler

For another example, see the haddock comments in React.Flux.Addons.Bootstrap.

callbackView :: JSString -> ReactView () -> PropertyOrHandler handler

Create a zero-argument callback property. When this callback function is executed, it will render the given view and return the resulting React element. If you need to create a callback which expects arguments, use callbackViewWithProps instead.

class ArgumentsToProps props a | a -> props

A class which is used to implement variable argument functions. These variable argument functions are used to convert from a JavaScript arguments array to a Haskell value of type props.

Any function where each argument implements FromJSVal and the result is ReturnProps is an instance of this class. Entries from the JavaScript arguments array are matched one-by-one to the arguments before ReturnProps value. If the Haskell function has more parameters than the javascript arguments object, a javascript null is used for the conversion. Since the Maybe instance of FromJSVal converts null references to Nothing, you can exploit this to handle arguments not given to the JavaScript function.

Minimal complete definition

returnViewFromArguments

Instances

ArgumentsToProps props (ReturnProps props)

Methods

returnViewFromArguments :: JSArray -> Int -> ReturnProps props -> IO props

(FromJSVal a, ArgumentsToProps props b) => ArgumentsToProps props (a -> b)

Methods

returnViewFromArguments :: JSArray -> Int -> (a -> b) -> IO props

newtype ReturnProps props

A type needed to make GHC happy when solving for instances of ArgumentsToProps.

Constructors

ReturnProps props

Instances

ArgumentsToProps props (ReturnProps props)

Methods

returnViewFromArguments :: JSArray -> Int -> ReturnProps props -> IO props

callbackViewWithProps :: (Typeable props, ArgumentsToProps props func) => JSString -> ReactView props -> func -> PropertyOrHandler handler

Create a callback that when called will render a view. This is useful for interacting with third-party React classes that expect a property which is a function which when called returns a React element. The way this works is as follows:

1. You create a Haskell function which translates the javascript arguments of the callback into a Haskell value of type ReturnProps props. This is a variable-argument function using the ArgumentsToProps class. For example,

    data MyProps = MyProps { theInt :: Int, theString :: String }
    myArgsToProps :: Int -> String -> ReturnProps MyProps
    myArgsToProps i s = ReturnProps $ MyProps i s
    

2. You create a view which receives these properties and renders itself. This view will not receive any children.

    myView :: ReactView MyProps
    mYView = defineView "my view" $ \myProps -> ...
    

3. You can then use callbackViewWithProps to create a property which is a JavaScript function. When this JavaScript function is executed, the JavaScript arguments are converted to the props, the view is rendered using the props, and the resulting React element is returned from the JavaScript function.

    someOtherView :: ReactView ()
    someOtherView = defineView "some other view" $ \() ->
        div_ $
           foreignClass_ "theForeginThing"
               [ callbackViewWithProps "the_propname_to_pass_to_theForeignThing" myView myArgsToProps
               , "hello" $= "world"
               ] mempty
   

   theForeignThing React class will receive a property called the_propname_to_pass_to_theForeignThing. The value of this property is a JavaScript function which when executed will convert the arguments to props, render the view, and return the resulting React element.

Combinators

(@=) :: ToJSON a => JSString -> a -> PropertyOrHandler handler

Create a property from any aeson value (the at sign looks like A for aeson)

($=) :: JSString -> JSString -> PropertyOrHandler handler

Create a text-valued property. This is here to avoid problems when OverloadedStrings extension is enabled

(&=) :: ToJSVal a => JSString -> a -> PropertyOrHandler handler

Create a property for anything that can be converted to a javascript value using the ToJSVal class from the ghcjs-base package.. This is just an infix version of property.

classNames :: [(Text, Bool)] -> PropertyOrHandler handler

Set the className property to consist of all the names which are matched with True, allowing you to easily toggle class names based on a computation.

Creating Events

data Event

Every event in React is a synthetic event, a cross-browser wrapper around the native event.

Constructors

Event

Fields

• evtType :: Text
• evtBubbles :: Bool
• evtCancelable :: Bool
• evtCurrentTarget :: EventTarget
• evtDefaultPrevented :: Bool
• evtPhase :: Int
• evtIsTrusted :: Bool
• evtTarget :: EventTarget
• evtTimestamp :: Int
• evtHandlerArg :: HandlerArg

Instances

Show Event

Methods

showsPrec :: Int -> Event -> ShowS

show :: Event -> String

showList :: [Event] -> ShowS

newtype EventTarget

A reference to the object that dispatched the event. https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Constructors

EventTarget JSVal

Instances

Show EventTarget

Methods

showsPrec :: Int -> EventTarget -> ShowS

show :: EventTarget -> String

showList :: [EventTarget] -> ShowS

eventTargetProp :: FromJSVal val => EventTarget -> JSString -> val

Access a property in an event target

target :: FromJSVal val => Event -> JSString -> val

A version of eventTargetProp which accesses the property of evtTarget in the event. This is useful for example:

div_ $
    input_ [ "type" @= "checked"
           , onChange $ \evt -> let val = target evt "value" in ...
           ]

In this case, val would coorespond to the javascript expression evt.target.value.

preventDefault :: Event -> SomeStoreAction

Prevent the default browser action from occuring in response to this event.

stopPropagation :: Event -> SomeStoreAction

Stop propagating this event, either down the DOM tree during the capture phase or up the DOM tree during the bubbling phase.

capturePhase :: PropertyOrHandler handler -> PropertyOrHandler handler

By default, the handlers below are triggered during the bubbling phase. Use this to switch them to trigger during the capture phase.

on :: JSString -> (Event -> handler) -> PropertyOrHandler handler

Use this to create an event handler for an event not covered by the rest of this module. (Events are not covered if they don't have extra arguments that require special handling.) For example, onPlay and onPause are events you could use with on.

Keyboard

data KeyboardEvent

The data for the keyboard events

Constructors

KeyboardEvent

Fields

• keyEvtAltKey :: Bool
• keyEvtCharCode :: Int
• keyEvtCtrlKey :: Bool
• keyGetModifierState :: Text -> Bool
• keyKey :: Text
• keyCode :: Int
• keyLocale :: Maybe Text
• keyLocation :: Int
• keyMetaKey :: Bool
• keyRepeat :: Bool
• keyShiftKey :: Bool
• keyWhich :: Int

Instances

Show KeyboardEvent

Methods

showsPrec :: Int -> KeyboardEvent -> ShowS

show :: KeyboardEvent -> String

showList :: [KeyboardEvent] -> ShowS

onKeyDown :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler

onKeyPress :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler

onKeyUp :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler

Focus

data FocusEvent

Constructors

FocusEvent

Fields

• focusRelatedTarget :: EventTarget

Instances

Show FocusEvent

Methods

showsPrec :: Int -> FocusEvent -> ShowS

show :: FocusEvent -> String

showList :: [FocusEvent] -> ShowS

onBlur :: (Event -> FocusEvent -> handler) -> PropertyOrHandler handler

onFocus :: (Event -> FocusEvent -> handler) -> PropertyOrHandler handler

Form

onChange :: (Event -> handler) -> PropertyOrHandler handler

The onChange event is special in React and should be used for all input change events. For details, see https://facebook.github.io/react/docs/forms.html

onInput :: (Event -> handler) -> PropertyOrHandler handler

onSubmit :: (Event -> handler) -> PropertyOrHandler handler

Mouse

data MouseEvent

Constructors

MouseEvent

Fields

• mouseAltKey :: Bool
• mouseButton :: Int
• mouseButtons :: Int
• mouseClientX :: Int
• mouseClientY :: Int
• mouseCtrlKey :: Bool
• mouseGetModifierState :: Text -> Bool
• mouseMetaKey :: Bool
• mousePageX :: Int
• mousePageY :: Int
• mouseRelatedTarget :: EventTarget
• mouseScreenX :: Int
• mouseScreenY :: Int
• mouseShiftKey :: Bool

Instances

Show MouseEvent

Methods

showsPrec :: Int -> MouseEvent -> ShowS

show :: MouseEvent -> String

showList :: [MouseEvent] -> ShowS

onClick :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onContextMenu :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDoubleClick :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDrag :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDragEnd :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDragEnter :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDragExit :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDragLeave :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDragOver :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDragStart :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onDrop :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseDown :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseEnter :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseLeave :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseMove :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseOut :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseOver :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

onMouseUp :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler

Touch

initializeTouchEvents :: IO ()

Initialize touch events is only needed with React 0.13, in version 0.14 it was removed.

data Touch

Constructors

Touch

Fields

• touchIdentifier :: Int
• touchTarget :: EventTarget
• touchScreenX :: Int
• touchScreenY :: Int
• touchClientX :: Int
• touchClientY :: Int
• touchPageX :: Int
• touchPageY :: Int

Instances

Show Touch

Methods

showsPrec :: Int -> Touch -> ShowS

show :: Touch -> String

showList :: [Touch] -> ShowS

data TouchEvent

Constructors

TouchEvent

Fields

• touchAltKey :: Bool
• changedTouches :: [Touch]
• touchCtrlKey :: Bool
• touchGetModifierState :: Text -> Bool
• touchMetaKey :: Bool
• touchShiftKey :: Bool
• touchTargets :: [Touch]
• touches :: [Touch]

Instances

Show TouchEvent

Methods

showsPrec :: Int -> TouchEvent -> ShowS

show :: TouchEvent -> String

showList :: [TouchEvent] -> ShowS

onTouchCancel :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler

onTouchEnd :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler

onTouchMove :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler

onTouchStart :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler

UI

onScroll :: (Event -> handler) -> PropertyOrHandler handler

Wheel

data WheelEvent

Constructors

WheelEvent

Fields

• wheelDeltaMode :: Int
• wheelDeltaX :: Int
• wheelDeltaY :: Int
• wheelDeltaZ :: Int

Instances

Show WheelEvent

Methods

showsPrec :: Int -> WheelEvent -> ShowS

show :: WheelEvent -> String

showList :: [WheelEvent] -> ShowS

onWheel :: (Event -> MouseEvent -> WheelEvent -> handler) -> PropertyOrHandler handler

Image

onLoad :: (Event -> handler) -> PropertyOrHandler handler

onError :: (Event -> handler) -> PropertyOrHandler handler