module Gargantext.Components.Tab where import Data.FunctorWithIndex (mapWithIndex) import Data.Tuple (Tuple) import Data.Tuple.Nested ((/\)) import Gargantext.Components.Bootstrap as B import Gargantext.Types as GT import Reactix as R import Reactix.DOM.HTML as H import Toestand as T import Gargantext.Prelude import Gargantext.Utils.Reactix as R2 here :: R2.Here here = R2.here "Gargantext.Components.Tab" type TabsProps = ( activeTab :: T.Box Int , tabs :: Array (Tuple String R.Element) | TabsOptions ) type TabsOptions = ( className :: String ) tabsOptions :: Record TabsOptions tabsOptions = { className: "" } tabs :: forall r. R2.OptLeaf TabsOptions TabsProps r tabs = R2.optLeaf tabsCpt tabsOptions -- this is actually just the list of tabs, not the tab contents itself tabsCpt :: R.Component TabsProps tabsCpt = here.component "tabs" cpt where cpt props@{ activeTab , tabs: tabs' } _ = do activeTab' <- T.useLive T.unequal activeTab pure $ H.div { className: props.className } [ H.nav {} [ H.br {} , H.div { className: "nav nav-tabs", title: "Search result" } (mapWithIndex (button activeTab activeTab') tabs') ] , H.div { className: "tab-content" } (mapWithIndex (item activeTab') tabs') ] button activeTab selected index (name /\ _) = H.a { className, on: { click } } [ B.icon { className: "mx-1" , name: iconName } , H.span {} [ H.text name ] ] where eq = index == selected className = "tab-label_" <> name <> " nav-item nav-link" <> (if eq then " active" else "") click _ = T.write_ index activeTab iconName = GT.getTabIcon name item selected index (_ /\ cpt') = tab { selected, index } [ cpt' ] -- TODO: document what these are (selection, item indices) type TabProps = ( selected :: Int, index :: Int ) tab :: R2.Component TabProps tab = R.createElement tabCpt -- | A tab only shows its contents if it is currently selected tabCpt :: R.Component TabProps tabCpt = here.component "tab" cpt where cpt { selected, index } children = do pure $ H.div { className } children' where same = selected == index className = "tab-pane" <> (if same then "show active" else "fade") children' = if same then children else []