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

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

Creating Properties

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

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

elementProperty :: String -> 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 :: String -> [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

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

CallbackFunction (StatefulViewEventHandler s) (StatefulViewEventHandler s)

callback :: CallbackFunction handler func => String -> 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.

Combinators

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

Create a property.

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

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

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 :: String

evtBubbles :: Bool

evtCancelable :: Bool

evtCurrentTarget :: EventTarget

evtDefaultPrevented :: Bool

evtPhase :: Int

evtIsTrusted :: Bool

evtTarget :: EventTarget

evtTimestamp :: Int

evtHandlerArg :: HandlerArg

Instances

Show Event

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

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

Access a property in an event target

target :: FromJSVal val => Event -> String -> 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 :: String -> (Event -> handler) -> PropertyOrHandler handler

Use this to create an event handler for an event not covered by the rest of this module. At the moment, this is just the media events (onPlay, onPause, etc.) on image and video tags.

Keyboard

data KeyboardEvent

The data for the keyboard events

Constructors

KeyboardEvent

Fields

keyEvtAltKey :: Bool

keyEvtCharCode :: Int

keyEvtCtrlKey :: Bool

keyGetModifierState :: String -> Bool

keyKey :: String

keyCode :: Int

keyLocale :: String

keyLocation :: Int

keyMetaKey :: Bool

keyRepeat :: Bool

keyShiftKey :: Bool

keyWhich :: Int

Instances

Show KeyboardEvent

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

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 :: String -> Bool

mouseMetaKey :: Bool

mousePageX :: Int

mousePageY :: Int

mouseRelatedTarget :: EventTarget

mouseScreenX :: Int

mouseScreenY :: Int

mouseShiftKey :: Bool

Instances

Show MouseEvent

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

data TouchEvent

Constructors

TouchEvent

Fields

touchAltKey :: Bool

changedTouches :: [Touch]

touchCtrlKey :: Bool

touchGetModifierState :: String -> Bool

touchMetaKey :: Bool

touchShiftKey :: Bool

touchTargets :: [Touch]

touches :: [Touch]

Instances

Show TouchEvent

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

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

Image

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

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