Box.purs 1.92 KB
Newer Older
1 2 3 4 5 6
module Gargantext.Components.FolderView.Box where

import Gargantext.Prelude

import DOM.Simple as DOM
import Effect (Effect)
7 8
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..))
9 10 11 12 13 14
import Gargantext.Components.Forest.Tree.Node.Tools (prettyNodeType)
import Gargantext.Types (ID, Name)
import Gargantext.Types as GT
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
15

16 17 18 19 20 21 22 23 24 25
here :: R2.Here
here = R2.here "Gargantext.Components.FolderView.Box"

type NodePopupProps =
  ( id             :: ID
  , name           :: Name
  , nodeType       :: GT.NodeType
  , onPopoverClose :: DOM.Element -> Effect Unit
  )

26
nodePopupView :: R2.Leaf NodePopupProps
27
nodePopupView = R2.leaf nodePopupViewCpt
28 29 30
nodePopupViewCpt :: R.Component NodePopupProps
nodePopupViewCpt = here.component "nodePopupView" cpt where
  cpt props  _ = do
31

32 33 34 35 36 37 38 39 40 41 42 43 44
    pure $

      H.div
      { className: "node-popup-tooltip"
      , title: "Node settings"
      }
      [
        H.div
        { className: "popup-container card" }
        [
          panelHeading  props
        ]
      ]
45

46
  closeBox props = props.onPopoverClose <<< R.unsafeEventTarget
47

48
  panelHeading props@{ nodeType } =
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 80 81 82
    H.div
    { className: "popup-container__header card-header" }
    [
      B.wad
      [ "d-flex", "align-items-center" ]
      [
        H.div
        { className: "w-3/12" }
        [
          H.span { className: GT.fldr nodeType true} [] -- TODO fix names
        ,
          B.span' { className: "ml-1 h5" } $ prettyNodeType nodeType
        ]
      ,
        B.wad
        [ "w-7/12", "pl-1" ]
        [
          B.wad'
          [ "text-primary" ]
          props.name
        ]
      ,
        B.wad
        [ "w-2/12", "text-right" ]
        [
          B.iconButton
          { callback: closeBox props
          , title: "Close"
          , elevation: Level1
          , name: "times"
          }
        ]
      ]
    ]