Commit d3d99c14 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[inputWithText] add onBlur

parent 11855438
...@@ -20,6 +20,7 @@ import Gargantext.Types as GT ...@@ -20,6 +20,7 @@ import Gargantext.Types as GT
import Gargantext.Types (NodeType(..)) import Gargantext.Types (NodeType(..))
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
thisModule :: String
thisModule = "Gargantext.Components.Forest.Tree.Node.Action.Add" thisModule = "Gargantext.Components.Forest.Tree.Node.Action.Add"
---------------------------------------------------------------------- ----------------------------------------------------------------------
...@@ -83,7 +84,8 @@ addNodeView p@{ dispatch, nodeType, nodeTypes } = R.createElement el p [] ...@@ -83,7 +84,8 @@ addNodeView p@{ dispatch, nodeType, nodeTypes } = R.createElement el p []
defaultNt = (fromMaybe Error $ head nodeTypes) defaultNt = (fromMaybe Error $ head nodeTypes)
maybeEdit = [ if edit maybeEdit = [ if edit
then inputWithEnter { then inputWithEnter {
onEnter: \_ -> launchAff_ $ dispatch (AddNode name' nt') onBlur: \val -> setNodeName $ const val
, onEnter: \_ -> launchAff_ $ dispatch (AddNode name' nt')
, onValueChanged: \val -> setNodeName $ const val , onValueChanged: \val -> setNodeName $ const val
, autoFocus: true , autoFocus: true
, className: "form-control" , className: "form-control"
......
...@@ -346,7 +346,8 @@ searchInputCpt = R.hooksComponentWithModule thisModule "searchInput" cpt ...@@ -346,7 +346,8 @@ searchInputCpt = R.hooksComponentWithModule thisModule "searchInput" cpt
valueRef <- R.useRef term valueRef <- R.useRef term
pure $ H.div { className: "" } [ pure $ H.div { className: "" } [
inputWithEnter { onEnter: onEnter valueRef setSearch inputWithEnter { onBlur: onBlur valueRef setSearch
, onEnter: onEnter valueRef setSearch
, onValueChanged: onValueChanged valueRef , onValueChanged: onValueChanged valueRef
, autoFocus: false , autoFocus: false
, className: "form-control" , className: "form-control"
...@@ -364,6 +365,9 @@ searchInputCpt = R.hooksComponentWithModule thisModule "searchInput" cpt ...@@ -364,6 +365,9 @@ searchInputCpt = R.hooksComponentWithModule thisModule "searchInput" cpt
-- , type: "text" -- , type: "text"
-- } -- }
-- ] -- ]
onBlur valueRef setSearch value = do
R.setRef valueRef value
setSearch $ _ { term = value }
onEnter valueRef setSearch _ = do onEnter valueRef setSearch _ = do
setSearch $ _ { term = R.readRef valueRef } setSearch $ _ { term = R.readRef valueRef }
......
...@@ -82,7 +82,8 @@ textInputBoxCpt = R.hooksComponentWithModule thisModule "textInputBox" cpt ...@@ -82,7 +82,8 @@ textInputBoxCpt = R.hooksComponentWithModule thisModule "textInputBox" cpt
textInput renameNodeNameRef = textInput renameNodeNameRef =
H.div { className: "col-8" } H.div { className: "col-8" }
[ inputWithEnter { [ inputWithEnter {
onEnter: submit renameNodeNameRef onBlur: R.setRef renameNodeNameRef
, onEnter: submit renameNodeNameRef
, onValueChanged: R.setRef renameNodeNameRef , onValueChanged: R.setRef renameNodeNameRef
, autoFocus: true , autoFocus: true
, className: "form-control" , className: "form-control"
......
...@@ -11,7 +11,8 @@ thisModule :: String ...@@ -11,7 +11,8 @@ thisModule :: String
thisModule = "Gargantext.Components.InputWithEnter" thisModule = "Gargantext.Components.InputWithEnter"
type Props a = ( type Props a = (
onEnter :: Unit -> Effect Unit onBlur :: String -> Effect Unit
, onEnter :: Unit -> Effect Unit
, onValueChanged :: String -> Effect Unit , onValueChanged :: String -> Effect Unit
, autoFocus :: Boolean , autoFocus :: Boolean
...@@ -27,9 +28,10 @@ inputWithEnter props = R.createElement inputWithEnterCpt props [] ...@@ -27,9 +28,10 @@ inputWithEnter props = R.createElement inputWithEnterCpt props []
inputWithEnterCpt :: forall a. R.Component (Props a) inputWithEnterCpt :: forall a. R.Component (Props a)
inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt
where where
cpt props@{ onEnter, onValueChanged cpt props@{ onBlur, onEnter, onValueChanged
, autoFocus, className, defaultValue, placeholder } _ = do , autoFocus, className, defaultValue, placeholder } _ = do
pure $ H.input { on: { input: onInput pure $ H.input { on: { blur: onBlur'
, input: onInput
, keyPress: onKeyPress } , keyPress: onKeyPress }
, autoFocus , autoFocus
, className , className
...@@ -38,6 +40,7 @@ inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt ...@@ -38,6 +40,7 @@ inputWithEnterCpt = R.hooksComponentWithModule thisModule "inputWithEnter" cpt
, type: props.type } , type: props.type }
where where
onBlur' e = onBlur $ R.unsafeEventValue e
onInput e = onValueChanged $ R.unsafeEventValue e onInput e = onValueChanged $ R.unsafeEventValue e
onKeyPress e = do onKeyPress e = do
......
...@@ -130,6 +130,7 @@ contactInfoItemCpt = R.hooksComponentWithModule thisModule "contactInfoItem" cpt ...@@ -130,6 +130,7 @@ contactInfoItemCpt = R.hooksComponentWithModule thisModule "contactInfoItem" cpt
autoFocus: true autoFocus: true
, className: "form-control" , className: "form-control"
, defaultValue: R.readRef valueRef , defaultValue: R.readRef valueRef
, onBlur: R.setRef valueRef
, onEnter: onClick , onEnter: onClick
, onValueChanged: R.setRef valueRef , onValueChanged: R.setRef valueRef
, placeholder , placeholder
......
...@@ -130,6 +130,7 @@ contactInfoItemCpt = R.hooksComponentWithModule thisModule "contactInfoItem" cpt ...@@ -130,6 +130,7 @@ contactInfoItemCpt = R.hooksComponentWithModule thisModule "contactInfoItem" cpt
autoFocus: true autoFocus: true
, className: "form-control" , className: "form-control"
, defaultValue: R.readRef valueRef , defaultValue: R.readRef valueRef
, onBlur: R.setRef valueRef
, onEnter: onClick , onEnter: onClick
, onValueChanged: R.setRef valueRef , onValueChanged: R.setRef valueRef
, placeholder , placeholder
......
...@@ -309,6 +309,7 @@ renameableTextCpt = R.hooksComponentWithModule thisModule "renameableTextCpt" cp ...@@ -309,6 +309,7 @@ renameableTextCpt = R.hooksComponentWithModule thisModule "renameableTextCpt" cp
autoFocus: false autoFocus: false
, className: "form-control text" , className: "form-control text"
, defaultValue: text , defaultValue: text
, onBlur: setText <<< const
, onEnter: submit , onEnter: submit
, onValueChanged: setText <<< const , onValueChanged: setText <<< const
, placeholder: "" , placeholder: ""
......
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