Tabs.purs 1.67 KB
Newer Older
arturo's avatar
arturo committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
module Gargantext.Components.Bootstrap.Tabs(tabs) where

import Gargantext.Prelude

import Data.Foldable (intercalate)
import Effect (Effect)
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H

type Props a =
  ( value     :: a
  , callback  :: a -> Effect Unit
  , list      :: Array a
  | Options
  )

type Options =
  ( className :: String
  )

options :: Record Options
options =
  { className : ""
  }

-- | Structural molecular component to the Bootstrap <nav-tabs> + <nav-item>
-- | simplifying a lot of the available UI/UX possibilites (type, disabled
-- | tabs, etc)
-- |
-- | https://getbootstrap.com/docs/4.6/components/navs/#tabs
tabs :: forall r a.
     Show a
  => Eq a
  => R2.OptLeaf Options (Props a) r
tabs = R2.optLeaf component options

componentName :: String
componentName = "b-tabs"

component :: forall a.
     Show a
  => Eq a
  => R.Component (Props a)
component = R.hooksComponent componentName cpt where
  cpt props@{ list, value, callback } _ = do
    -- Computed
    let
      className = intercalate " "
        -- provided custom className
        [ props.className
        -- BEM classNames
        , componentName
        -- Bootstrap specific classNames
        , "nav nav-tabs"
        ]
    -- Render
    pure $

      H.ul
      { className } $
      flip map list \item ->

        H.li
        { className: "nav-item"
        , on: { click: \_ -> callback item }
        }
        [
          H.a
          { className: intercalate " "
              [ "nav-link"
              , value == item ? "active" $ ""
              ]
          }
          [
            H.text $ show item
          ]
        ]