SlideButton.purs 1.98 KB
Newer Older
1 2 3
module Gargantext.Components.GraphExplorer.SlideButton
  ( Props
  , sizeButton
4
  , cursorSizeButton
5 6 7 8 9
  , labelSizeButton
  ) where

import Global (readFloat)
import Prelude
10 11
import Data.Maybe (Maybe(..))
import Data.Tuple (snd)
12
import Data.Tuple.Nested ((/\))
13
import Effect (Effect)
14 15 16
import Reactix as R
import Reactix.DOM.HTML as H

17 18
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Sigma as Sigma
19 20
import Gargantext.Utils.Reactix as R2

21 22 23 24 25 26 27
type Props = (
    state :: R.State Number
  , caption :: String
  , min :: Number
  , max :: Number
  , onChange :: forall e. e -> Effect Unit
  )
28 29 30 31 32 33 34

sizeButton :: Record Props -> R.Element
sizeButton props = R.createElement sizeButtonCpt props []

sizeButtonCpt :: R.Component Props
sizeButtonCpt = R.hooksComponent "SizeButton" cpt
  where
35
    cpt {state, caption, min, max, onChange} _ = do
36 37 38 39 40 41 42 43 44
      let (value /\ setValue) = state
      pure $
        H.span {}
          [ H.label {} [ H.text caption ]
          , H.input { type: "range"
                    , className: "form-control"
                    , min: show min
                    , max: show max
                    , defaultValue: value
45
                    , on: {input: onChange}
46 47 48
                    }
          ]

49 50
cursorSizeButton :: R.State Number -> R.Element
cursorSizeButton state =
51 52 53 54 55 56 57
  sizeButton {
      state: state
    , caption: "Cursor Size"
    , min: 1.0
    , max: 4.0
    , onChange: \e -> snd state $ const $ readFloat $ R2.unsafeEventValue e
    }
58

59
labelSizeButton :: R.Ref Sigmax.Sigma -> R.State Number -> R.Element
60 61 62 63
labelSizeButton sigmaRef state =
  sizeButton {
      state: state
    , caption: "Label Size"
64 65
    , min: 5.0
    , max: 30.0
66
    , onChange: \e -> do
67
      let sigma = R.readRef sigmaRef
68 69
      let newValue = readFloat $ R2.unsafeEventValue e
      let (value /\ setValue) = state
70 71
      Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
        Sigma.setSettings s {
72
          defaultLabelSize: newValue
73
        }
74 75
      setValue $ const newValue
    }