Response suggestions

Former-commit-id: a495fa7961

src/status_im/chat/styles/response_suggestions.cljs

@@ -0,0 +1,62 @@
+(ns status-im.chat.styles.response-suggestions
+  (:require [status-im.components.styles :refer [font
+                                                 font-medium
+                                                 color-light-blue-transparent
+                                                 color-white
+                                                 color-black
+                                                 color-blue
+                                                 color-blue-transparent
+                                                 selected-message-color
+                                                 online-color
+                                                 separator-color
+                                                 text1-color
+                                                 text2-color
+                                                 text3-color]]))
+
+(def header-height 50)
+(def suggestion-height 56)
+
+(def header-container
+  {:paddingLeft     16
+   :height          header-height
+   :backgroundColor color-white})
+
+(def header-text
+  {:marginTop  18
+   :fontSize   13
+   :fontFamily font-medium
+   :color      text2-color})
+
+(def suggestion-container
+  {:flexDirection   :column
+   :paddingLeft     16
+   :height          56
+   :backgroundColor color-white})
+
+(def suggestion-sub-container
+  {:height            suggestion-height
+   :borderBottomWidth 1
+   :borderBottomColor separator-color})
+
+(def value-text
+  {:marginTop  10
+   :fontSize   12
+   :fontFamily font
+   :color      text1-color})
+
+(def description-text
+  {:marginTop  2
+   :fontSize   12
+   :fontFamily font
+   :color      text2-color})
+
+(defn suggestions-container [suggestions]
+  {:flexDirection    :row
+   :marginVertical   1
+   :marginHorizontal 0
+   :height           (min 150 (reduce + 0 (map #(if (:header %)
+                                                 header-height
+                                                 suggestion-height)
+                                               suggestions)))
+   :backgroundColor  color-white
+   :borderRadius     5})

src/status_im/chat/views/content_suggestions.cljs

@@ -32,6 +32,6 @@
                            :onPress (fn [])}
       [view [icon :drag_down st/drag-down-icon]]]
      [view (st/suggestions-container (count suggestions))
-      [list-view {:dataSource                (to-datasource suggestions)
+      [list-view {:dataSource                (to-datasource (filter :value suggestions))
                   :keyboardShouldPersistTaps true
                   :renderRow                 render-row}]]]))

src/status_im/chat/views/plain_input.cljs

@@ -8,6 +8,7 @@
                                                 dismiss-keyboard!]]
             [status-im.chat.views.suggestions :refer [suggestions-view]]
             [status-im.chat.views.content-suggestions :refer [content-suggestions-view]]
+            [status-im.chat.views.response-suggestions :refer [response-suggestions-view]]
             [status-im.chat.views.command :as command]
             [status-im.chat.views.response :as response]
             [status-im.chat.styles.plain-input :as st]
@@ -44,9 +45,10 @@
             response? (and command @to-msg-id)]
         [view st/input-container
          (if response? [response/request-info command])
-         (if command
+         (cond
-           [content-suggestions-view]
+           response? [response-suggestions-view]
-           [suggestions-view])
+           command [content-suggestions-view]
+           :else [suggestions-view])
          [view st/input-view
           (if command
             (when-not response?

src/status_im/chat/views/response_suggestions.cljs

@@ -0,0 +1,39 @@
+(ns status-im.chat.views.response-suggestions
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch]]
+            [status-im.components.react :refer [view
+                                                icon
+                                                text
+                                                touchable-highlight
+                                                list-view
+                                                list-item]]
+            [status-im.chat.styles.response-suggestions :as st]
+            [status-im.utils.listview :refer [to-datasource]]))
+
+(defn set-command-content [content]
+  (dispatch [:set-chat-command-content content]))
+
+(defn header-list-item [{:keys [header]}]
+  [view st/header-container
+   [text {:style st/header-text} header]])
+
+(defn suggestion-list-item [{:keys [value description]}]
+  [touchable-highlight {:onPress #(set-command-content value)}
+   [view st/suggestion-container
+    [view st/suggestion-sub-container
+     [text {:style st/value-text} value]
+     [text {:style st/description-text} description]]]])
+
+(defn render-row [row _ _]
+  (list-item (if (:header row)
+               [header-list-item row]
+               [suggestion-list-item row])))
+
+(defview response-suggestions-view []
+  [suggestions [:get-content-suggestions]]
+  (when (seq suggestions)
+    [view nil
+     [view (st/suggestions-container suggestions)
+      [list-view {:dataSource                (to-datasource suggestions)
+                  :keyboardShouldPersistTaps true
+                  :renderRow                 render-row}]]]))

src/status_im/handlers/content_suggestions.cljs

@@ -4,8 +4,10 @@
             [status-im.utils.logging :as log]
             [clojure.string :as s]))
 
+;; TODO stub data?
 (def suggestions
-  {:phone [{:value "89171111111"
+  {:phone [{:header "Phone number formats"}
+           {:value       "89171111111"
             :description "Number format 1"}
            {:value       "+79171111111"
             :description "Number format 2"}
@@ -16,7 +18,8 @@
   (or (when command
         (when-let [command-suggestions ((:command command) suggestions)]
           (filterv (fn [s]
+                     (or (:header s)
                          (and (.startsWith (:value s) (or text ""))
-                          (not= (:value s) text)))
+                              (not= (:value s) text))))
                    command-suggestions)))
       []))