React.Flux.PropertiesAndEvents

This module contains the definitions for creating properties to pass to elements, as well as the 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)

(@=) :: 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

callback :: String -> (Value -> handler) -> 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.

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 (JSRef ())

Instances

Show EventTarget

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

Access a property in an event target

target :: FromJSRef 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.

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 ()

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