status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Phone input 

Former-commit-id: 079c262bec
This commit is contained in:
virvar 2016-03-31 16:44:16 +03:00
parent fddf80b126
commit ea3bbd7536
5 changed files with 175 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
syng-im/src/syng_im/components/chat.cljs
View File

@ -14,8 +14,8 @@
[syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
[reagent.core :as r]
[syng-im.components.chat-message :refer [chat-message]]
[syng-im.components.chat-message-new :refer [chat-message-new]]))
[syng-im.components.chat.chat-message :refer [chat-message]]
[syng-im.components.chat.chat-message-new :refer [chat-message-new]]))
(defn chat [{:keys [navigator]}]

2
syng-im/src/syng_im/components/chat_message.cljs → syng-im/src/syng_im/components/chat/chat_message.cljs
View File

@ -1,4 +1,4 @@
(ns syng-im.components.chat-message
(ns syng-im.components.chat.chat-message
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view

91
syng-im/src/syng_im/components/chat/chat_message_new.cljs Normal file
View File

@ -0,0 +1,91 @@
(ns syng-im.components.chat.chat-message-new
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
image
text
text-input
touchable-highlight]]
[syng-im.components.chat.plain-message-input :refer [plain-message-input-view]]
[syng-im.components.chat.phone-input :refer [phone-input-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]
[reagent.core :as r]))
(defn cancel-command-input []
(dispatch [:set-input-command nil]))
(defn default-command-input-view []
(let [message-atom (r/atom nil)
chat-id (subscribe [:get-current-chat-id])]
(fn []
(let [message @message-atom]
[view {:style {:flexDirection "row"}}
[view {:style {:flexDirection "column"
:backgroundColor "white"}}
[view {:style {:flexDirection "column"
:margin 10
:width 200
:backgroundColor "#E5F5F6"
:borderRadius 10}}
[view {:style {:flexDirection "row"}}
[view {:style {:flexDirection "column"
:margin 10
:width 120
:backgroundColor "blue"
:borderRadius 10}}
[text {:style {:marginVertical 3
:marginHorizontal 10
:fontSize 14
:fontFamily "Avenir-Roman"
:color "white"}}
"!<command>"]]
[touchable-highlight {:style {:marginTop 14
:marginRight 16
:position "absolute"
:top 3
:right 20}
:onPress (fn []
(cancel-command-input))}
[image {:source res/att
:style {:width 17
:height 14}}]]]
[text-input {:style {:flex 1
:marginLeft 8
:lineHeight 42
:fontSize 14
:fontFamily "Avenir-Roman"
:color "#9CBFC0"}
:underlineColorAndroid "transparent"
:autoFocus true
:value message
:onChangeText (fn [new-text]
)
:onSubmitEditing (fn [e]
)}]]]
[touchable-highlight {:style {:marginTop 14
:marginRight 16
:position "absolute"
:right 20
:bottom 20}
:onPress (fn []
(cancel-command-input))}
[image {:source res/att
:style {:width 34
:height 28}}]]]))))
(defn special-input-view [command]
(case command
:phone [phone-input-view]
[default-command-input-view]))
(defn chat-message-new []
(let [input-command-atom (subscribe [:get-input-command])]
(fn []
(let [input-command @input-command-atom]
[view ;; TODO temp to show input above react-native warning
{:style {:marginBottom 50}}
(if input-command
[special-input-view input-command]
[plain-message-input-view])]))))

75
syng-im/src/syng_im/components/chat/phone_input.cljs Normal file
View File

@ -0,0 +1,75 @@
(ns syng-im.components.chat.phone-input
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
image
text
text-input
touchable-highlight]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]
[reagent.core :as r]))
(defn cancel-command-input []
(dispatch [:set-input-command nil]))
(defn phone-input-view []
(let [message-atom (r/atom nil)
chat-id (subscribe [:get-current-chat-id])]
(fn []
(let [message @message-atom]
[view {:style {:flexDirection "row"}}
[view {:style {:flexDirection "column"
:backgroundColor "white"}}
[view {:style {:flexDirection "column"
:margin 10
:width 200
:backgroundColor "#E5F5F6"
:borderRadius 10}}
[view {:style {:flexDirection "row"}}
[view {:style {:flexDirection "column"
:margin 10
:width 120
:backgroundColor "blue"
:borderRadius 10}}
[text {:style {:marginVertical 3
:marginHorizontal 10
:fontSize 14
:fontFamily "Avenir-Roman"
:color "white"}}
"!phone"]]
[touchable-highlight {:style {:marginTop 14
:marginRight 16
:position "absolute"
:top 3
:right 20}
:onPress (fn []
(cancel-command-input))}
[image {:source res/att
:style {:width 17
:height 14}}]]]
[text-input {:style {:flex 1
:marginLeft 8
:lineHeight 42
:fontSize 14
:fontFamily "Avenir-Roman"
:color "#9CBFC0"}
:underlineColorAndroid "transparent"
:autoFocus true
:keyboardType "phone-pad"
:value message
:onChangeText (fn [new-text]
)
:onSubmitEditing (fn [e]
)}]]]
[touchable-highlight {:style {:marginTop 14
:marginRight 16
:position "absolute"
:right 20
:bottom 20}
:onPress (fn []
(cancel-command-input))}
[image {:source res/att
:style {:width 34
:height 28}}]]]))))

40
syng-im/src/syng_im/components/chat_message_new.cljs → syng-im/src/syng_im/components/chat/plain_message_input.cljs
View File

@ -1,4 +1,4 @@
(ns syng-im.components.chat-message-new
(ns syng-im.components.chat.plain-message-input
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
@ -10,11 +10,13 @@
[syng-im.resources :as res]
[reagent.core :as r]))
(defn message-input []
(defn plain-message-input-view []
(let [text (r/atom nil)
chat-id (subscribe [:get-current-chat-id])]
(dispatch [:generate-suggestions @text])
(fn []
[view {:style {:flexDirection "column"}}
[suggestions-view]
[view {:style {:flexDirection "row"
:margin 10
:height 40
@ -32,7 +34,7 @@
:fontSize 14
:fontFamily "Avenir-Roman"
:color "#9CBFC0"}
:autoFocus true
:autoFocus false
:placeholder "Enter your message here"
:value @text
:onChangeText (fn [new-text]
@ -51,34 +53,4 @@
:style {:marginTop 14
:marginRight 16
:width 17
:height 14}}]]
[suggestions-view]])))
(defn special-input [command]
(case command
:phone [text-input {:underlineColorAndroid "#9CBFC0"
:style {:flex 1
:marginLeft 18
:lineHeight 42
:fontSize 14
:fontFamily "Avenir-Roman"
:color "#9CBFC0"}
:autoFocus true
:placeholder "Phone input"}]
[text-input {:underlineColorAndroid "#9CBFC0"
:style {:flex 1
:marginLeft 18
:lineHeight 42
:fontSize 14
:fontFamily "Avenir-Roman"
:color "#9CBFC0"}
:autoFocus true
:placeholder "Command input"}]))
(defn chat-message-new []
(let [input-command-atom (subscribe [:get-input-command])]
(fn []
(let [input-command @input-command-atom]
(if input-command
[special-input input-command]
[message-input])))))
:height 14}}]]])))