Fieldset.purs 1.43 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
module Gargantext.Components.Bootstrap.Fieldset
  ( fieldset
  ) where

import Gargantext.Prelude

import Data.Array (intercalate)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H

type Props =
  ( titleSlot :: R.Element
  | Options
  )

type Options =
arturo's avatar
arturo committed
18 19
  ( className         :: String
  , contentClassName  :: String
20 21 22 23
  )

options :: Record Options
options =
arturo's avatar
arturo committed
24 25
  { className         : ""
  , contentClassName  : ""
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  }

-- | Component simulating a native <fieldset>
-- | (which has been completly reset by Bootstrap libraries)
fieldset :: forall r. R2.OptComponent Options Props r
fieldset = R2.optComponent component options

componentName :: String
componentName = "b-fieldset"

component :: R.Component Props
component = R.hooksComponent componentName cpt where
  cpt props@{ titleSlot
            } children = do
    -- Computed
arturo's avatar
arturo committed
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
    let
      className = intercalate " "
        -- provided custom className
        [ props.className
        -- BEM classNames
        , componentName
        ]

      contentClassName = intercalate " "
        -- provided custom className
        [ props.contentClassName
        -- BEM classNames
        , componentName <> "__content"
        ]

56 57 58 59 60 61 62 63 64 65 66
    -- Render
    pure $

      H.section
      { className }
      [
        H.div
        { className: componentName <> "__legend" }
        [ titleSlot ]
      ,
        H.div
arturo's avatar
arturo committed
67
        { className: contentClassName}
68 69
        children
      ]