Show suggestions as hint for phone number format
This commit is contained in:
virvar
parent
152626da18
commit
6eeaab5c28
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
Binary file not shown.
|
After Width: | Height: | Size: 960 B |
|
|
@ -0,0 +1,52 @@
|
|||
(ns syng-im.components.chat.content-suggestions
|
||||
(:require-macros
|
||||
[natal-shell.core :refer [with-error-view]])
|
||||
(:require [clojure.string :as cstr]
|
||||
[reagent.core :as r]
|
||||
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.components.react :refer [view
|
||||
image
|
||||
text
|
||||
touchable-highlight
|
||||
list-view
|
||||
list-item]]
|
||||
[syng-im.components.chat.content-suggestions-styles :as st]
|
||||
[syng-im.utils.listview :refer [to-datasource]]
|
||||
[syng-im.utils.utils :refer [log toast http-post]]
|
||||
[syng-im.utils.logging :as log]))
|
||||
|
||||
(defn set-command-content [content]
|
||||
(dispatch [:set-chat-command-content content]))
|
||||
|
||||
(defn suggestion-list-item [suggestion]
|
||||
[touchable-highlight {:onPress (fn []
|
||||
(set-command-content (:value suggestion)))
|
||||
:underlay-color :transparent}
|
||||
[view (merge st/suggestion-container
|
||||
(when (= (:description suggestion) "Number format 12")
|
||||
{:backgroundColor "blue"}))
|
||||
[view st/suggestion-sub-container
|
||||
[text {:style st/value-text}
|
||||
(:value suggestion)]
|
||||
[text {:style st/description-text}
|
||||
(:description suggestion)]]]])
|
||||
|
||||
(defn render-row [row section-id row-id]
|
||||
(list-item [suggestion-list-item (js->clj row :keywordize-keys true)]))
|
||||
|
||||
(defn content-suggestions-view []
|
||||
(let [suggestions-atom (subscribe [:get-content-suggestions])]
|
||||
(fn []
|
||||
(let [suggestions @suggestions-atom]
|
||||
(when (seq suggestions)
|
||||
[view nil
|
||||
[touchable-highlight {:style st/drag-down-touchable
|
||||
:onPress (fn []
|
||||
;; TODO hide suggestions?
|
||||
)
|
||||
:underlay-color :transparent}
|
||||
[image {:source {:uri "icon_drag_down"}
|
||||
:style st/drag-down-icon}]]
|
||||
[view (st/suggestions-container (count suggestions))
|
||||
[list-view {:dataSource (to-datasource suggestions)
|
||||
:renderRow render-row}]]])))))
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
(ns syng-im.components.chat.content-suggestions-styles
|
||||
(:require [syng-im.components.styles :refer [font
|
||||
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 suggestion-height 56)
|
||||
|
||||
(def suggestion-container
|
||||
{:flexDirection :column
|
||||
:paddingLeft 16
|
||||
:backgroundColor color-white})
|
||||
|
||||
(def suggestion-sub-container
|
||||
{:height suggestion-height
|
||||
:borderBottomWidth 1
|
||||
:borderBottomColor separator-color})
|
||||
|
||||
(def value-text
|
||||
{:marginTop 9
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text1-color})
|
||||
|
||||
(def description-text
|
||||
{:marginTop 1.5
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text2-color})
|
||||
|
||||
(defn suggestions-container [suggestions-count]
|
||||
{:flexDirection :row
|
||||
:marginVertical 1
|
||||
:marginHorizontal 0
|
||||
:height (min 150 (* suggestion-height suggestions-count))
|
||||
:backgroundColor color-white
|
||||
:borderRadius 5})
|
||||
|
||||
(def drag-down-touchable
|
||||
{:height 22
|
||||
:alignItems :center
|
||||
:justifyContent :center})
|
||||
|
||||
(def drag-down-icon
|
||||
{:width 16
|
||||
:height 16})
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
text
|
||||
text-input
|
||||
touchable-highlight]]
|
||||
[syng-im.components.chat.content-suggestions :refer [content-suggestions-view]]
|
||||
[syng-im.components.styles :refer [font
|
||||
color-white
|
||||
color-blue
|
||||
|
|
@ -37,65 +38,67 @@
|
|||
(fn [command input-options & {:keys [validator]}]
|
||||
(let [chat-id @chat-id-atom
|
||||
message @message-atom]
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56
|
||||
:backgroundColor color-white
|
||||
:elevation 4}}
|
||||
[view {:style {:flexDirection "column"
|
||||
:marginTop 16
|
||||
:marginBottom 16
|
||||
:marginLeft 16
|
||||
:marginRight 0
|
||||
:backgroundColor (:color command)
|
||||
:height 24
|
||||
:borderRadius 50}}
|
||||
[text {:style {:marginTop 3
|
||||
:marginHorizontal 12
|
||||
:fontSize 12
|
||||
:fontFamily font
|
||||
:color color-white}}
|
||||
(:text command)]]
|
||||
[text-input (merge {:underlineColorAndroid "transparent"
|
||||
:style {:flex 1
|
||||
:marginLeft 8
|
||||
:marginTop 7
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text1-color}
|
||||
:autoFocus true
|
||||
:placeholder "Type"
|
||||
:placeholderTextColor text2-color
|
||||
:onChangeText (fn [new-text]
|
||||
(set-input-message new-text))
|
||||
:onSubmitEditing (fn [e]
|
||||
(when (valid? message validator)
|
||||
(send-command chat-id command message)))}
|
||||
input-options)
|
||||
message]
|
||||
(if (valid? message validator)
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(send-command chat-id command message))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:marginTop 10
|
||||
:marginRight 10
|
||||
:width 36
|
||||
:height 36
|
||||
:borderRadius 50
|
||||
:backgroundColor color-blue}}
|
||||
[image {:source {:uri "icon_send"}
|
||||
:style {:marginTop 10.5
|
||||
:marginLeft 12
|
||||
:width 15
|
||||
:height 15}}]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(cancel-command-input))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:marginTop 10
|
||||
:marginRight 10
|
||||
:width 36
|
||||
:height 36}}
|
||||
[image {:source res/icon-close-gray
|
||||
:style {:marginTop 10.5
|
||||
:marginLeft 12
|
||||
:width 12
|
||||
:height 12}}]]])]))))
|
||||
[view {:style {:flexDirection "column"}}
|
||||
[content-suggestions-view]
|
||||
[view {:style {:flexDirection "row"
|
||||
:height 56
|
||||
:backgroundColor color-white
|
||||
:elevation 4}}
|
||||
[view {:style {:flexDirection "column"
|
||||
:marginTop 16
|
||||
:marginBottom 16
|
||||
:marginLeft 16
|
||||
:marginRight 0
|
||||
:backgroundColor (:color command)
|
||||
:height 24
|
||||
:borderRadius 50}}
|
||||
[text {:style {:marginTop 3
|
||||
:marginHorizontal 12
|
||||
:fontSize 12
|
||||
:fontFamily font
|
||||
:color color-white}}
|
||||
(:text command)]]
|
||||
[text-input (merge {:underlineColorAndroid "transparent"
|
||||
:style {:flex 1
|
||||
:marginLeft 8
|
||||
:marginTop 7
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text1-color}
|
||||
:autoFocus true
|
||||
:placeholder "Type"
|
||||
:placeholderTextColor text2-color
|
||||
:onChangeText (fn [new-text]
|
||||
(set-input-message new-text))
|
||||
:onSubmitEditing (fn [e]
|
||||
(when (valid? message validator)
|
||||
(send-command chat-id command message)))}
|
||||
input-options)
|
||||
message]
|
||||
(if (valid? message validator)
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(send-command chat-id command message))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:marginTop 10
|
||||
:marginRight 10
|
||||
:width 36
|
||||
:height 36
|
||||
:borderRadius 50
|
||||
:backgroundColor color-blue}}
|
||||
[image {:source {:uri "icon_send"}
|
||||
:style {:marginTop 10.5
|
||||
:marginLeft 12
|
||||
:width 15
|
||||
:height 15}}]]]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
(cancel-command-input))
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:marginTop 10
|
||||
:marginRight 10
|
||||
:width 36
|
||||
:height 36}}
|
||||
[image {:source res/icon-close-gray
|
||||
:style {:marginTop 10.5
|
||||
:marginLeft 12
|
||||
:width 12
|
||||
:height 12}}]]])]]))))
|
||||
|
|
|
|||
|
|
@ -62,15 +62,3 @@
|
|||
:fontFamily font
|
||||
:lineHeight 21
|
||||
:color text3-color})
|
||||
|
||||
|
||||
(comment drawer-menu [navigator]
|
||||
[view {:style st/drawer-menu}
|
||||
|
||||
[view {:style }
|
||||
[touchable-opacity {:onPress (fn []
|
||||
(close-drawer)
|
||||
;; TODO not implemented
|
||||
)}
|
||||
[text {:style }
|
||||
"Switch users"]]]])
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
(ns syng-im.handlers.content-suggestions
|
||||
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.db :as db]
|
||||
[syng-im.utils.logging :as log]
|
||||
[clojure.string :as s]))
|
||||
|
||||
(def suggestions
|
||||
{:phone [{:value "89171111111"
|
||||
:description "Number format 1"}
|
||||
{:value "+79171111111"
|
||||
:description "Number format 2"}
|
||||
{: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)))
|
||||
command-suggestions)))
|
||||
[]))
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
get-chat-command-request
|
||||
parse-command-msg-content
|
||||
parse-command-request-msg-content]]
|
||||
[syng-im.handlers.suggestions :refer [get-suggestions]]))
|
||||
[syng-im.handlers.suggestions :refer [get-suggestions]]
|
||||
[syng-im.handlers.content-suggestions :refer [get-content-suggestions]]))
|
||||
|
||||
;; -- Chat --------------------------------------------------------------
|
||||
|
||||
|
|
@ -43,6 +44,12 @@
|
|||
(reaction))]
|
||||
(reaction (get-suggestions @db @input-text)))))
|
||||
|
||||
(register-sub :get-content-suggestions
|
||||
(fn [db _]
|
||||
(let [command (reaction (get-chat-command @db))
|
||||
text (reaction (get-chat-command-content @db))]
|
||||
(reaction (get-content-suggestions @db @command @text)))))
|
||||
|
||||
(register-sub :get-commands
|
||||
(fn [db _]
|
||||
(reaction (get-commands @db))))
|
||||
|
|
|
|||
Loading…
Reference in New Issue