Commit 6ebc49e2 authored by arturo's avatar arturo

[forest] Sidebar issues

* #379
parent 55b2a8c9
Pipeline #2651 failed with stage
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -5,9 +5,11 @@ module Gargantext.Components.Bootstrap.Cloak
import Gargantext.Prelude
import Data.Foldable (elem)
import Data.Maybe (Maybe, fromMaybe)
import Data.Maybe (Maybe(..), fromMaybe)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Timer (setTimeout)
import Gargantext.Hooks.FirstEffect (useFirstEffect')
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Toestand as T
......@@ -17,10 +19,20 @@ type Props =
( defaultSlot :: R.Element
, cloakSlot :: R.Element
, isDisplayed :: Boolean
, idlingPhaseDuration :: Maybe Int -- Milliseconds
| Options
)
type Options =
( idlingPhaseDuration :: Maybe Int -- Milliseconds
, sustainingPhaseDuration :: Maybe Int -- Milliseconds
)
options :: Record Options
options =
{ idlingPhaseDuration : Nothing
, sustainingPhaseDuration : Nothing
}
-- | Abstract component type easing the transition display between a content
-- | component and transitional (or cloak) component
-- |
......@@ -94,8 +106,8 @@ type Props =
-- | , sustainingPhaseDuration : Just 400
-- | }
-- | ```
cloak :: R2.Leaf Props
cloak = R2.leaf component
cloak :: forall r. R2.OptLeaf Options Props r
cloak = R2.optLeaf component options
cname :: String
cname = "b-cloak"
......@@ -107,47 +119,50 @@ component = R.hooksComponent cname cpt where
phase /\ phaseBox <- R2.useBox' (Idle :: Phase)
-- Computed
canCloakBeDisplayed <- pure $ elem phase [ Sustain, Wait ]
canContentBeDisplayed <- pure $ elem phase [ Display ]
let
canCloakBeDisplayed = elem phase [ Sustain, Wait ]
canContentBeDisplayed = elem phase [ Display ]
-- Behaviors
let
execDisplayingPhaseOr :: (Unit -> Effect Unit) -> Effect Unit
execDisplayingPhaseOr thunk =
if props.isDisplayed
then T.write_ Display phaseBox
else thunk unit
-- @executeDisplayingPhase
execDisplayingPhase <- pure $ const $
T.write_ Display phaseBox
execWaitingPhase :: Unit -> Effect Unit
execWaitingPhase _ = execDisplayingPhaseOr $ const $
-- Helpers
execDisplayingPhaseOr <- pure $ \fn ->
T.write_ Wait phaseBox
if props.isDisplayed
then execDisplayingPhase unit
else fn
execSustainingPhase :: Unit -> Effect Unit
execSustainingPhase _ = execDisplayingPhaseOr $ const $
-- @executeWaitingPhase
execWaitingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Wait phaseBox
T.write_ Sustain phaseBox
-- @executeSustainingPhase
execSustainingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Sustain phaseBox
<* setTimeout
(fromMaybe 0 props.sustainingPhaseDuration)
(execWaitingPhase unit)
<* setTimeout
(fromMaybe 0 props.sustainingPhaseDuration)
(execWaitingPhase unit)
execIdlingPhase :: Unit -> Effect Unit
execIdlingPhase _ = execDisplayingPhaseOr $ const $
-- @executeIdlingPhase
execIdlingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Idle phaseBox
T.write_ Idle phaseBox
<* setTimeout
(fromMaybe 0 props.idlingPhaseDuration)
(execSustainingPhase unit)
<* setTimeout
(fromMaybe 0 props.idlingPhaseDuration)
(execSustainingPhase unit)
-- Effects
R.useEffectOnce' $ execIdlingPhase unit
useFirstEffect' $ execIdlingPhase unit
R.useEffect1' props.isDisplayed $
R.useEffect2' props.isDisplayed phase $
if (props.isDisplayed && phase == Wait)
then execDisplayingPhase unit
then T.write_ Display phaseBox
else pure unit
-- Render
......
......@@ -37,15 +37,16 @@ component :: R.Component Props
component = R.hooksComponent componentName cpt where
cpt props children = do
-- Computed
className <- pure $ intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
, componentName
-- Bootstrap specific classNames
, bootstrapName
, bootstrapName <> "-" <> show props.variant
]
let
className = intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
, componentName
-- Bootstrap specific classNames
, bootstrapName
, bootstrapName <> "-" <> show props.variant
]
-- Render
pure $
......
module Gargantext.Components.Bootstrap.Div (div', div_) where
import Reactix as R
import Reactix.DOM.HTML as H
-- | Shorthand for using HTML <div> without writing its text node
div' :: forall r. Record r -> String -> R.Element
div' props content = H.div props [ H.text content ]
-- | Shorthand for using HTML <div> without writing its text node nor props
div_ :: String -> R.Element
div_ content = H.div {} [ H.text content ]
module Gargantext.Components.Bootstrap.ProgressBar(progressBar) where
import Gargantext.Prelude
import Data.Foldable (intercalate)
import Gargantext.Components.Bootstrap.Types (Variant(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
type Props =
( value :: Number
| Options
)
type Options =
( className :: String
, variant :: Variant
)
options :: Record Options
options =
{ className : ""
, variant : Primary
}
-- | Structural Component for the Bootsrap "Progress Bar"
-- |
-- | https://getbootstrap.com/docs/4.6/components/progress/
progressBar :: forall r. R2.OptLeaf Options Props r
progressBar = R2.optLeaf component options
componentName :: String
componentName = "b-progress-bar"
bootstrapName :: String
bootstrapName = "progress"
component :: R.Component Props
component = R.hooksComponent componentName cpt where
cpt props _ = do
-- Computed
let
className = intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
, componentName
-- Bootstrap specific classNames
, bootstrapName
]
-- Render
pure $
H.div
{ className }
[
H.div
{ className: intercalate " "
[ "progress-bar"
, "bg-" <> show props.variant
]
, style: { width: (show props.value) <> "%" }
, role: "progress-bar"
, "aria-valuenow": show $ props.value
, "aria-valuemin": "0"
, "aria-valuemax": "100"
}
[]
]
......@@ -5,12 +5,28 @@ module Gargantext.Components.Bootstrap
import Gargantext.Components.Bootstrap.BaseModal(baseModal) as Exports
import Gargantext.Components.Bootstrap.Button(button) as Exports
import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
import Gargantext.Components.Bootstrap.Cloak(cloak) as Exports
import Gargantext.Components.Bootstrap.Div(div', div_) as Exports
import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
import Gargantext.Components.Bootstrap.Icon(icon) as Exports
import Gargantext.Components.Bootstrap.Label(label', label_) as Exports
import Gargantext.Components.Bootstrap.IconButton(iconButton) as Exports
import Gargantext.Components.Bootstrap.ProgressBar(progressBar) as Exports
import Gargantext.Components.Bootstrap.Spinner(spinner) as Exports
import Gargantext.Components.Bootstrap.Tooltip(tooltip, tooltipBind, tooltipContainer) as Exports
import Gargantext.Components.Bootstrap.Shortcut(
div', div_
, h1', h1_
, h2', h2_
, h3', h3_
, h4', h4_
, h5', h5_
, h6', h6_
, span', span_
, li', li_
, b', b_
, code', code_
, label', label_
) as Exports
This diff is collapsed.
......@@ -71,8 +71,9 @@ component = R.hooksComponent componentName cpt where
bootstrapName <> "-block" $
mempty
]
-- @click
click <- pure $ \event -> onClick status callback event
-- Behaviors
let
click = onClick status callback
-- Render
pure $
......
This diff is collapsed.
module Gargantext.Components.Bootstrap.Label
( label'
, label_
) where
import Reactix as R
import Reactix.DOM.HTML as H
-- | Shorthand for using HTML <label> without writing its text node
label' :: forall r. Record r -> String -> R.Element
label' props content = H.label props [ H.text content ]
-- | Shorthand for using HTML <label> without writing its text node nor props
label_ :: String -> R.Element
label_ content = H.label {} [ H.text content ]
This diff is collapsed.
......@@ -185,7 +185,7 @@ docViewCpt = here.component "docView" cpt where
R.fragment
[
H.div { className: "doc-table-doc-view container1" }
H.div { className: "doc-table-doc-view" }
[ R2.row
[ chart
, if showSearch then searchBar { query } [] else H.div {} []
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -432,7 +432,7 @@ fileTypeViewCpt = here.component "fileTypeView" cpt
droppedFile' <- T.useLive T.unequal droppedFile
case droppedFile' of
Nothing -> pure $ H.div {} []
Nothing -> pure $ mempty
Just df ->
pure $ H.div tooltipProps [ H.div { className: "card"}
[ panelHeading
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment