Module

Grain.UI

Package: purescript-grain
Repository: purescript-grain/purescript-grain

#VNode Source

data VNode

The type of virtual node.

#key Source

key :: String -> VNode -> VNode

Add a key to a VNode.

#fingerprint Source

fingerprint :: String -> VNode -> VNode

Add a fingerprint to check equality of a VNode.

If it is same as previous rendered element's one, rendering will be skipped.

#component Source

component :: Render VNode -> VNode

Create a VNode of component.

#element Source

element :: String -> VNode

Create a VNode of specified tag element.

#text Source

text :: String -> VNode

Create a VNode of text.

#kids Source

kids :: Array VNode -> VNode -> VNode

Add children.

#prop Source

prop :: String -> String -> VNode -> VNode

Add a property.

#handle Source

handle :: String -> (Event -> Effect Unit) -> VNode -> VNode

Bind an event handler.

#css Source

css :: String -> VNode -> VNode

Define styles with CSS string.

It generates a hash string as class name from CSS string, and the generated class name is used automatically.

justDiv :: VNode
justDiv =
  H.div # H.css styles

styles :: String
styles =
  """
  .& {
    width: 100px;
    height: 100px;
  }
  .&:hover {
    width: 100px;
    height: 100px;
  }
  .&:hover .selected {
    color: blue;
  }
  """

& in the CSS string is replaced with the generated class name, and output it as stylesheet.

Like this:

.gz66dqm {
  width: 100px;
  height: 100px;
}
.gz66dqm:hover {
  width: 100px;
  height: 100px;
}
.gz66dqm:hover .selected {
  color: blue;
}

#className Source

className :: String -> VNode -> VNode

#didCreate Source

didCreate :: (Element -> Effect Unit) -> VNode -> VNode

Bind didCreate lifecycle.

#didUpdate Source

didUpdate :: (Element -> Effect Unit) -> VNode -> VNode

Bind didUpdate lifecycle.

#didDelete Source

didDelete :: (Element -> Effect Unit) -> VNode -> VNode

Bind didDelete lifecycle.

#Render Source

newtype Render a

The type of component renderer.

In this monad, you can declare that you use some states and updaters.

Instances

#Query Source

type Query = { listenValue :: forall p a. Grain p a => p a -> String -> Effect Unit, portalVNode :: Effect Node -> VNode -> VNode, selectValue :: forall p a. Grain p a => p a -> String -> Effect a, updateValue :: forall p a. Grain p a => p a -> String -> (a -> a) -> Effect Unit }

#runRender Source

runRender :: forall a. Render a -> Query -> Effect a

#useValue Source

useValue :: forall p a. NonKeyedGrain p a => p a -> Render a

Listen a state, then return it.

If the state is changed, the component will be rerendered.

#useFinder Source

useFinder :: forall p a. NonKeyedGrain p a => p a -> Render (Effect a)

Get a finder of a state.

#useUpdater Source

useUpdater :: forall p a. NonKeyedGrain p a => p a -> Render ((a -> a) -> Effect Unit)

Get an updater of a state.

#useKeyedValue Source

useKeyedValue :: forall k a. KeyedGlobalGrain k a => KGProxy k a -> k -> Render a

Listen a keyed global state, then return it.

If the state is changed, the component will be rerendered.

#useKeyedFinder Source

useKeyedFinder :: forall k a. KeyedGlobalGrain k a => KGProxy k a -> Render (k -> Effect a)

Get a finder of a keyed global state.

#useKeyedUpdater Source

useKeyedUpdater :: forall k a. KeyedGlobalGrain k a => KGProxy k a -> Render (k -> (a -> a) -> Effect Unit)

Get an updater of a keyed global state.

#usePortal Source

usePortal :: Effect Node -> Render (VNode -> VNode)

Get portal function.

#mount Source

mount :: VNode -> Node -> Effect Unit

Mount a VNode to a parent node.