Browse Source

added documentation (#1)

master
piq9117 1 year ago
committed by Gitea
parent
commit
4f8b52b002
2 changed files with 108 additions and 4 deletions
  1. +94
    -0
      README.md
  2. +14
    -4
      src/Mado.purs

+ 94
- 0
README.md View File

@@ -1,2 +1,96 @@
# Mado

Mado is a halogen modal component

## Installation
Add `mado` to your `package.dhall`
``` sh
let additions =
{ mado =
{ dependencies =
[ "halogen"
]
, repo = "https://taezos.org/taezos/purescript-halogen-mado.git"
, version = "v1.0"
}
}
```
Then add it as a dependency in your `spago.dhall`

## Usage
This module exports the following
- Slot
- Query
- Output
- ModalState
- component

Here's an example on how it's used.
```haskell
module Component.Container where

import Prelude
import Data.Maybe ( Maybe (..) )
import Data.Symbol ( SProxy(..) )
-- Internal
import Component.Title as Title
-- Halogen
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
-- Halogen Components
import Mado as Mado

type ChildSlot =
( modal :: forall query. Mado.Slot query Void Unit
)

data Action = OpenModal

_modal :: SProxy "modal"
_modal = SProxy

component :: forall q i o m. H.Component HH.HTML q i o m
component =
H.mkComponent
{ initialState: identity
, render
, eval: H.mkEval H.defaultEval
{ handleAction = handleAction }
}

render :: forall state m. state -> H.ComponentHTML Action ChildSlot m
render state =
HH.div_
[ HH.button
[ HE.onClick ( const $ Just OpenModal )
]
[ HH.text "Open"]
, HH.slot _modal unit modalComponent unit ( const Nothing )
]

handleAction :: forall state o m. Action -> H.HalogenM state Action ChildSlot o m Unit
handleAction = case _ of
OpenModal ->
void $ H.query _modal unit $ H.tell ( Mado.ChangeModalState Mado.Open )

modalComponent
:: forall q o m
. H.Component HH.HTML ( Mado.Query q ) Unit ( Mado.Output o ) m
modalComponent = Mado.component Title.component

```
and this it the `Title` component
``` haskell
component :: forall q i o m. H.Component HH.HTML q i o m
component =
H.mkComponent
{ initialState: identity
, render
, eval: H.mkEval H.defaultEval
}

render :: forall state action m. state -> H.ComponentHTML action () m
render _ =
HH.h1_ [ HH.text "Hello, World!" ]
```

+ 14
- 4
src/Mado.purs View File

@@ -1,4 +1,10 @@
module Mado where
module Mado
( Slot
, Query (..)
, Output (..)
, ModalState (..)
, component
) where

import Prelude

@@ -12,34 +18,38 @@ import Halogen.HTML.Properties as HP
import Halogen.HTML.Core as HC
import Halogen.HTML.Events as HE

-- | Slot
type Slot q o = H.Slot ( Query q ) ( Output o )

type ChildSlot q o =
( inner :: H.Slot q o Unit
)

-- | The modal's internal state.
type State i =
{ modalState :: ModalState
, input :: i
}

-- | Query
data Query ( q :: Type -> Type ) a
= ChangeModalState ModalState a

-- | Output of the modal
data Output o
= Opened
| Closed

-- | Possible Action of the modal
data Action o
= HandleClose

-- | Possible states of the modal
data ModalState
= Open
| Close

type WithInput i =
( input :: i )

-- | This component is a higher order component that will wrap other components
component
:: forall q i o m
. H.Component HH.HTML q i o m


Loading…
Cancel
Save