Ripple.purs 1.38 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
module Gargantext.Components.Bootstrap.Ripple
  ( ripple
  ) where

import Gargantext.Prelude

import Data.Foldable (intercalate)
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Variant(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H

type Props = ( | Options )

type Options =
  ( status      :: ComponentStatus
  , className   :: String
  , variant     :: Variant
  )

options :: Record Options
options =
  { variant     : Light
  , status      : Enabled
  , className   : ""
  }


-- | Component for a Ripple Effect on DOMElement click (without JavaScript)
-- |
-- | ```
-- | B.ripple
-- | {}
-- | [
-- |   myContent {} []
-- | ]
-- | ```
ripple :: forall r. R2.OptComponent Options Props r
ripple = R2.optComponent component options

componentName :: String
componentName = "b-ripple"

component :: R.Component Props
component = R.hooksComponent componentName cpt where
  cpt props@{ variant
            , status
            } children = do
    -- Computed
    let
      className = intercalate " "
        -- provided custom className
        [ props.className
        -- BEM classNames
        , componentName
        , componentName <> "--" <> show status
        , componentName <> "--" <> show variant
        ]
    -- Render
    pure $

      R.fragment $
      [
        H.div
        { className }
        []
      ]
        <> children