diff --git a/src/status_im/chat/styles/response_suggestions.cljs b/src/status_im/chat/styles/response_suggestions.cljs new file mode 100644 index 0000000000..831486cfa4 --- /dev/null +++ b/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}) diff --git a/src/status_im/chat/views/content_suggestions.cljs b/src/status_im/chat/views/content_suggestions.cljs index 25661ff11d..a10ae722db 100644 --- a/src/status_im/chat/views/content_suggestions.cljs +++ b/src/status_im/chat/views/content_suggestions.cljs @@ -2,11 +2,11 @@ (: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]] + icon + text + touchable-highlight + list-view + list-item]] [status-im.chat.styles.content-suggestions :as st] [status-im.utils.listview :refer [to-datasource]])) @@ -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}]]])) diff --git a/src/status_im/chat/views/plain_input.cljs b/src/status_im/chat/views/plain_input.cljs index c67a54de56..7843e4dafa 100644 --- a/src/status_im/chat/views/plain_input.cljs +++ b/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 - [content-suggestions-view] - [suggestions-view]) + (cond + response? [response-suggestions-view] + command [content-suggestions-view] + :else [suggestions-view]) [view st/input-view (if command (when-not response? diff --git a/src/status_im/chat/views/response_suggestions.cljs b/src/status_im/chat/views/response_suggestions.cljs new file mode 100644 index 0000000000..6946f693ff --- /dev/null +++ b/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}]]])) diff --git a/src/status_im/handlers/content_suggestions.cljs b/src/status_im/handlers/content_suggestions.cljs index f4457f931f..6fa8d3cec9 100644 --- a/src/status_im/handlers/content_suggestions.cljs +++ b/src/status_im/handlers/content_suggestions.cljs @@ -4,19 +4,22 @@ [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" + {:value "+79171111111" :description "Number format 2"} - {:value "9171111111" + {:value "9171111111" :description "Number format 3"}]}) (defn get-content-suggestions [db command text] (or (when command (when-let [command-suggestions ((:command command) suggestions)] (filterv (fn [s] - (and (.startsWith (:value s) (or text "")) - (not= (:value s) text))) + (or (:header s) + (and (.startsWith (:value s) (or text "")) + (not= (:value s) text)))) command-suggestions))) []))