InputWithEnter.purs 2.08 KB
Newer Older
1 2 3 4 5 6 7 8 9
module Gargantext.Components.InputWithEnter where

import Effect (Effect)
import Reactix as R
import Reactix.DOM.HTML as H

import Gargantext.Prelude
import Gargantext.Utils.Reactix as R2

10 11
here :: R2.Here
here = R2.here "Gargantext.Components.InputWithEnter"
12

arturo's avatar
arturo committed
13
type Props =
14
  ( onBlur         :: String -> Effect Unit
15
  , onEnter        :: Unit -> Effect Unit
16 17
  , onValueChanged :: String -> Effect Unit

18 19 20 21 22
  , autoFocus      :: Boolean
  , className      :: String
  , defaultValue   :: String
  , placeholder    :: String
  , type           :: String
23 24
  )

arturo's avatar
arturo committed
25
inputWithEnterWithKey :: R2.Leaf ( key :: String | Props )
26
inputWithEnterWithKey = R2.leafComponent inputWithEnterWithKeyCpt
arturo's avatar
arturo committed
27
inputWithEnterWithKeyCpt :: R.Component ( key :: String | Props )
28 29 30 31 32 33 34 35 36 37 38
inputWithEnterWithKeyCpt = here.component "inputWithEnterWithKey" cpt where
  cpt { onBlur, onEnter, onValueChanged, autoFocus, className, defaultValue, placeholder, type: t } _ = do
    pure $ inputWithEnter { onBlur
                          , onEnter
                          , onValueChanged
                          , autoFocus
                          , className
                          , defaultValue
                          , placeholder
                          , type: t }

arturo's avatar
arturo committed
39
inputWithEnter :: R2.Leaf Props
40
inputWithEnter = R2.leafComponent inputWithEnterCpt
arturo's avatar
arturo committed
41
inputWithEnterCpt :: R.Component Props
42
inputWithEnterCpt = here.component "inputWithEnter" cpt
43
  where
44
    cpt props@{ onBlur, onEnter, onValueChanged
45
              , autoFocus, className, defaultValue, placeholder } _ = do
46 47
      pure $ H.input { on: { blur: onBlur'
                           , input: onInput
48 49 50 51 52 53 54 55
                           , keyPress: onKeyPress }
                     , autoFocus
                     , className
                     , defaultValue
                     , placeholder
                     , type: props.type }

      where
56
        onBlur' e = onBlur $ R.unsafeEventValue e
57
        onInput e = onValueChanged $ R.unsafeEventValue e
58 59 60 61 62 63 64

        onKeyPress e = do
          char <- R2.keyCode e
          if char == 13 then
            onEnter unit
          else
            pure unit