Renameable.purs 3.16 KB
Newer Older
1 2 3 4
module Gargantext.Components.Renameable where

import Gargantext.Prelude

5
import Effect (Effect)
6 7
import Gargantext.Components.InputWithEnter (inputWithEnter)
import Gargantext.Utils.Reactix as R2
8 9 10
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
11 12


13 14
here :: R2.Here
here = R2.here "Gargantext.Components.Renameable"
15 16 17 18

type RenameableProps =
  (
    onRename :: String -> Effect Unit
19
  , text     :: String
20
  , icon     :: String
21 22
  )

23 24
renameable :: R2.Component RenameableProps
renameable = R.createElement renameableCpt
25
renameableCpt :: R.Component RenameableProps
26
renameableCpt = here.component "renameableCpt" cpt
27
  where
28
    cpt { onRename, text, icon } _ = do
29 30
      isEditing <- T.useBox false
      state <- T.useBox text
31 32 33 34 35 36 37 38
      textRef <- R.useRef text

      -- handle props change of text
      R.useEffect1' text $ do
        if R.readRef textRef == text then
          pure unit
        else do
          R.setRef textRef text
39
          T.write_ text state
40 41

      pure $ H.div { className: "renameable" } [
42
        renameableText { isEditing, onRename, state, icon } []
43 44 45 46
      ]

type RenameableTextProps =
  (
47 48 49
    isEditing :: T.Box Boolean
  , onRename  :: String -> Effect Unit
  , state     :: T.Box String
50
  , icon      :: String
51 52
  )

53 54
renameableText :: R2.Component RenameableTextProps
renameableText = R.createElement renameableTextCpt
55
renameableTextCpt :: R.Component RenameableTextProps
56
renameableTextCpt = here.component "renameableText" cpt
57
  where
58
    cpt props@{ isEditing } _ = do
59 60 61 62
      isEditing' <- T.useLive T.unequal isEditing

      pure $ if isEditing' then
               editing props []
Karen Konou's avatar
Karen Konou committed
63 64
             else
               notEditing props []
65 66 67 68 69 70 71


notEditing :: R2.Component RenameableTextProps
notEditing = R.createElement notEditingCpt
notEditingCpt :: R.Component RenameableTextProps
notEditingCpt = here.component "notEditing" cpt
  where
72
    cpt { isEditing, state, icon} _ = do
73 74
      state' <- T.useLive T.unequal state

75
      pure $ H.div { className: "input-group" }
76 77 78
        [ H.span {className: icon} []
        , H.text state'
        , H.button { className: "btn input-group-append"
79
                , on: { click: \_ -> T.write_ true isEditing } }
80 81 82
          [ H.span { className: "fa fa-pencil" } []
          ]
        ]
83 84 85 86 87 88 89


editing :: R2.Component RenameableTextProps
editing = R.createElement editingCpt
editingCpt :: R.Component RenameableTextProps
editingCpt = here.component "editing" cpt
  where
90
    cpt { isEditing, onRename, state, icon } _ = do
91 92
      state' <- T.useLive T.unequal state

93
      pure $ H.div { className: "input-group" }
94 95
        [ H.span {className: icon} []
        , inputWithEnter {
96 97
            autoFocus: false
          , className: "form-control text"
98 99 100 101
          , defaultValue: state'
          , onBlur: \s -> T.write_ s state
          , onEnter: submit state'
          , onValueChanged: \s -> T.write_ s state
102 103 104
          , placeholder: ""
          , type: "text"
          }
105
        , H.button { className: "btn input-group-append"
Karen Konou's avatar
Karen Konou committed
106
                , on: { click: submit state' } }
107 108 109 110
          [ H.span { className: "fa fa-floppy-o" } []
          ]
        ]
      where
111 112
        submit text _ = do
          T.write_ false isEditing
113
          onRename text