Safe Haskell | None |
---|---|
Language | Haskell2010 |
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.
- data PropertyOrHandler handler
- property :: ToJSRef val => String -> val -> PropertyOrHandler handler
- elementProperty :: String -> ReactElementM handler () -> PropertyOrHandler handler
- nestedProperty :: String -> [PropertyOrHandler handler] -> PropertyOrHandler handler
- class CallbackFunction handler a | a -> handler
- callback :: CallbackFunction handler func => String -> func -> PropertyOrHandler handler
- (@=) :: ToJSON a => Text -> a -> PropertyOrHandler handler
- ($=) :: Text -> Text -> PropertyOrHandler handler
- classNames :: [(Text, Bool)] -> PropertyOrHandler handler
- data Event = Event {}
- newtype EventTarget = EventTarget JSRef
- eventTargetProp :: FromJSRef val => EventTarget -> String -> val
- target :: FromJSRef val => Event -> String -> val
- preventDefault :: Event -> SomeStoreAction
- stopPropagation :: Event -> SomeStoreAction
- capturePhase :: PropertyOrHandler handler -> PropertyOrHandler handler
- on :: String -> (Event -> handler) -> PropertyOrHandler handler
- data KeyboardEvent = KeyboardEvent {
- 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
- onKeyDown :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler
- onKeyPress :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler
- onKeyUp :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler
- data FocusEvent = FocusEvent {}
- onBlur :: (Event -> FocusEvent -> handler) -> PropertyOrHandler handler
- onFocus :: (Event -> FocusEvent -> handler) -> PropertyOrHandler handler
- onChange :: (Event -> handler) -> PropertyOrHandler handler
- onInput :: (Event -> handler) -> PropertyOrHandler handler
- onSubmit :: (Event -> handler) -> PropertyOrHandler handler
- data MouseEvent = MouseEvent {
- 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
- 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
- initializeTouchEvents :: IO ()
- data Touch = Touch {
- touchIdentifier :: Int
- touchTarget :: EventTarget
- touchScreenX :: Int
- touchScreenY :: Int
- touchClientX :: Int
- touchClientY :: Int
- touchPageX :: Int
- touchPageY :: Int
- data TouchEvent = TouchEvent {
- touchAltKey :: Bool
- changedTouches :: [Touch]
- touchCtrlKey :: Bool
- touchGetModifierState :: String -> Bool
- touchMetaKey :: Bool
- touchShiftKey :: Bool
- touchTargets :: [Touch]
- touches :: [Touch]
- onTouchCancel :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler
- onTouchEnd :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler
- onTouchMove :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler
- onTouchStart :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler
- onScroll :: (Event -> handler) -> PropertyOrHandler handler
- data WheelEvent = WheelEvent {
- wheelDeltaMode :: Int
- wheelDeltaX :: Int
- wheelDeltaY :: Int
- wheelDeltaZ :: Int
- onWheel :: (Event -> MouseEvent -> WheelEvent -> handler) -> PropertyOrHandler handler
- onLoad :: (Event -> handler) -> PropertyOrHandler handler
- onError :: (Event -> handler) -> PropertyOrHandler handler
Documentation
data PropertyOrHandler handler Source
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
.
Functor PropertyOrHandler Source | |
(~) * child (ReactElementM eventHandler a) => Term eventHandler [PropertyOrHandler eventHandler] (child -> ReactElementM eventHandler a) Source |
Creating Properties
property :: ToJSRef val => String -> val -> PropertyOrHandler handler Source
Create a property from anything that can be converted to a JSRef
elementProperty :: String -> ReactElementM handler () -> PropertyOrHandler handler Source
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 Source
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 Source
A class which is used to implement variable argument functions.
Any function where each argument implements FromJSRef
and the result is either
ViewEventHandler
or StatefulViewEventHandler
is an instance of this class.
applyFromArguments
CallbackFunction ViewEventHandler ViewEventHandler Source | |
(FromJSRef a, CallbackFunction handler b) => CallbackFunction handler (a -> b) Source | |
CallbackFunction (StatefulViewEventHandler s) (StatefulViewEventHandler s) Source |
callback :: CallbackFunction handler func => String -> func -> PropertyOrHandler handler Source
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 FromJSRef
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
FromJSRef
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 Source
Create a property.
($=) :: Text -> Text -> PropertyOrHandler handler Source
Create a text-valued property. This is here to avoid problems when OverloadedStrings extension is enabled
classNames :: [(Text, Bool)] -> PropertyOrHandler handler Source
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
Every event in React is a synthetic event, a cross-browser wrapper around the native event.
Event | |
|
newtype EventTarget Source
A reference to the object that dispatched the event. https://developer.mozilla.org/en-US/docs/Web/API/Event/target
EventTarget JSRef |
eventTargetProp :: FromJSRef val => EventTarget -> String -> val Source
Access a property in an event target
target :: FromJSRef val => Event -> String -> val Source
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 Source
Prevent the default browser action from occuring in response to this event.
stopPropagation :: Event -> SomeStoreAction Source
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 Source
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 Source
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 Source
The data for the keyboard events
KeyboardEvent | |
|
onKeyDown :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler Source
onKeyPress :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler Source
onKeyUp :: (Event -> KeyboardEvent -> handler) -> PropertyOrHandler handler Source
Focus
onBlur :: (Event -> FocusEvent -> handler) -> PropertyOrHandler handler Source
onFocus :: (Event -> FocusEvent -> handler) -> PropertyOrHandler handler Source
Form
onChange :: (Event -> handler) -> PropertyOrHandler handler Source
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 Source
onSubmit :: (Event -> handler) -> PropertyOrHandler handler Source
Mouse
data MouseEvent Source
MouseEvent | |
|
onClick :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onContextMenu :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDoubleClick :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDrag :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDragEnd :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDragEnter :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDragExit :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDragLeave :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDragOver :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDragStart :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onDrop :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseDown :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseEnter :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseLeave :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseMove :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseOut :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseOver :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
onMouseUp :: (Event -> MouseEvent -> handler) -> PropertyOrHandler handler Source
Touch
initializeTouchEvents :: IO () Source
Initialize touch events is only needed with React 0.13, in version 0.14 it was removed.
Touch | |
|
data TouchEvent Source
TouchEvent | |
|
onTouchCancel :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler Source
onTouchEnd :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler Source
onTouchMove :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler Source
onTouchStart :: (Event -> TouchEvent -> handler) -> PropertyOrHandler handler Source
UI
onScroll :: (Event -> handler) -> PropertyOrHandler handler Source
Wheel
data WheelEvent Source
WheelEvent | |
|
onWheel :: (Event -> MouseEvent -> WheelEvent -> handler) -> PropertyOrHandler handler Source
Image
onLoad :: (Event -> handler) -> PropertyOrHandler handler Source
onError :: (Event -> handler) -> PropertyOrHandler handler Source