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

import Data.Tuple.Nested ((/\))
import DOM.Simple.Console (log2)
import Effect (Effect)
import Reactix as R
import Reactix.DOM.HTML as H

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

12 13
thisModule = "Gargantext.Components.InputWithEnter"

14 15 16 17 18
type Props a = (
    onEnter :: Unit -> Effect Unit
  , onValueChanged :: String -> Effect Unit

  , autoFocus :: Boolean
19
  , autoSave :: Boolean
20 21 22 23 24 25 26 27 28
  , className :: String
  , defaultValue :: String
  , placeholder :: String
  , type :: String
  )

inputWithEnter :: forall a. Record (Props a) -> R.Element
inputWithEnter props = R.createElement inputWithEnterCpt props []
  where
29 30 31
    inputWithEnterCpt :: forall a. R.Component (Props a)
    inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt

32
    cpt props@{ onEnter, onValueChanged
33 34
              , autoFocus, autoSave, className, defaultValue, placeholder } _ = do
      pure $ H.input { on: { blur: \_ -> if autoSave then onEnter unit else pure unit
35
                           , input: onInput
36 37 38 39 40 41 42 43 44
                           , keyPress: onKeyPress }
                     , autoFocus
                     , className
                     , defaultValue
                     , placeholder
                     , type: props.type }

      where
        onInput e = do
45
           onValueChanged $ R.unsafeEventValue e
46 47 48 49 50 51 52 53

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