Search.purs 4.13 KB
Newer Older
1 2 3
module Gargantext.Components.NgramsTable.Search where

import Gargantext.Prelude
4 5 6 7 8 9

import DOM.Simple as DOM
import Data.Foldable (intercalate)
import Data.Nullable (Nullable, null)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
10 11
import Gargantext.Components.Table (changePage)
import Gargantext.Components.Table.Types (Params)
12 13 14 15 16 17 18 19 20 21 22
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T

here :: R2.Here
here = R2.here "Gargantext.Components.NgramsTable.Search"


type SearchInputProps =
  ( searchQuery :: T.Box String
23
  , params      :: T.Box Params
24 25 26 27 28 29 30 31
  )

-- "key": to prevent refreshing & losing input
searchInput :: R2.Leaf ( key :: String | SearchInputProps )
searchInput = R2.leafComponent searchInputCpt
searchInputCpt :: R.Component ( key :: String | SearchInputProps )
searchInputCpt = here.component "searchInput" cpt
  where
32
    cpt { searchQuery, params } _ = do
33
      inputRef <- R.useRef null
34

35 36 37
      pure $ R2.row
        [ H.div { className: "col-12" }
          [ H.div { className: "input-group" }
38
            [ searchFieldInput { inputRef, searchQuery, params } []
39
            , searchButton { inputRef, searchQuery, params } []
40 41 42 43 44 45 46
            ]
          ]
        ]

type SearchButtonProps =
  ( inputRef    :: R.Ref (Nullable DOM.Element)
  , searchQuery :: T.Box String
47
  , params      :: T.Box Params
48 49 50 51
  )

searchButton :: R2.Component SearchButtonProps
searchButton = R.createElement searchButtonCpt
52

53 54
searchButtonCpt :: R.Component SearchButtonProps
searchButtonCpt = here.component "searchButton" cpt where
55
  cpt { inputRef, searchQuery, params } _ = do
56 57
    -- | States
    -- |
58 59
    searchQuery' <- T.useLive T.unequal searchQuery

60 61 62 63 64 65
    -- | Behaviors
    -- |
    let
      onReset _ = do
        R2.setInputValue inputRef ""
        T.write_ "" searchQuery
66
        changePage 1 params
67 68 69

      onSubmit _ = do
        T.write_ (R2.getInputValue inputRef) searchQuery
70
        changePage 1 params
71 72 73

    -- | Render
    -- |
74 75 76
    pure $

      H.div
77 78 79 80 81
      { className: intercalate " "
          [ "ngrams-table-search-button"
          , "input-group-append"
          ]
      }
82 83
      [
        if searchQuery' /= ""
84
        then
85
          R.fragment
86 87
            [
              B.button
88
              { variant: ButtonVariant Light
89 90 91 92 93
              , callback: onReset
              , className: "input-group-text"
              }
                [
                  B.icon
94 95 96 97
                  { name: "times"
                  , className: "text-danger"
                  }
                ]
98 99 100 101 102 103 104 105 106 107
            ,
              B.button
              { variant: ButtonVariant Light
              , callback: onSubmit
              , className: "input-group-text"
              }
                [ B.icon
                  { name: "search"
                  , className: "text-secondary"
                  }
108 109
                ]
            ]
110
        else
111 112 113 114 115 116 117 118 119 120
          B.button
          { variant: ButtonVariant Light
          , callback: onSubmit
          , className: "input-group-text"
          }
          [ B.icon
            { name: "search"
            , className: "text-secondary"
            }
          ]
121 122 123 124 125
      ]

type SearchFieldInputProps =
  ( inputRef    :: R.Ref (Nullable DOM.Element)
  , searchQuery :: T.Box String
126
  , params      :: T.Box Params
127 128 129 130 131 132
  )

searchFieldInput :: R2.Component SearchFieldInputProps
searchFieldInput = R.createElement searchFieldInputCpt
searchFieldInputCpt :: R.Component SearchFieldInputProps
searchFieldInputCpt = here.component "searchFieldInput" cpt where
133
  cpt { inputRef, searchQuery, params } _ = do
134 135 136
    pure $ H.input { className: "form-control"
                   -- , defaultValue: searchQuery'
                   , name: "search"
137
                   , on: { keyPress: onKeyPress }
138 139 140 141
                   , placeholder: "Search"
                   , ref: inputRef
                   , type: "value"
                   }
142 143 144
      where
        onKeyPress e = do
          char <- R2.keyCode e
145 146 147
          if char == 13 then do
            _ <- T.write_ (R2.getInputValue inputRef) searchQuery
            changePage 1 params
148 149
          else
            pure unit