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

desktop emoji 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-02-10 18:18:58 +01:00
parent f8dfc82dd4
commit 3efeb71a16
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
3 changed files with 100 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/status_im/ui/screens/desktop/main/chat/emoji.cljs Normal file
View File

File diff suppressed because one or more lines are too long

10
src/status_im/ui/screens/desktop/main/chat/events.cljs
View File

@ -13,3 +13,13 @@
:show-profile-desktop :show-profile-desktop
(fn [cofx [_ identity]] (fn [cofx [_ identity]]
(show-profile-desktop identity cofx))) (show-profile-desktop identity cofx)))
(handlers/register-handler-fx
:desktop/insert-emoji
(fn [{{:keys [desktop current-chat-id chats] :as db} :db} [_ emoji]]
(let [inp-txt (get-in chats [current-chat-id :input-text])
input (:input-ref desktop)
sel (:input-selection desktop)
new-text (if sel (str (subs inp-txt 0 sel) emoji (subs inp-txt sel)) (str inp-txt emoji))]
(when input (.setNativeProps input (clj->js {:text new-text})))
{:db (assoc-in db [:chats current-chat-id :input-text] new-text)})))

37
src/status_im/ui/screens/desktop/main/chat/views.cljs
View File

@ -23,7 +23,9 @@
[status-im.utils.datetime :as time] [status-im.utils.datetime :as time]
[status-im.utils.gfycat.core :as gfycat] [status-im.utils.gfycat.core :as gfycat]
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]
[status-im.utils.utils :as utils]) [status-im.utils.utils :as utils]
[status-im.ui.screens.desktop.main.chat.emoji :as emoji]
[status-im.ui.components.icons.vector-icons :as icons])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(defn toolbar-chat-view (defn toolbar-chat-view
@ -298,7 +300,8 @@
(views/defview chat-text-input [chat-id input-text] (views/defview chat-text-input [chat-id input-text]
(views/letsubs [inp-ref (atom nil) (views/letsubs [inp-ref (atom nil)
disconnected? [:disconnected?]] disconnected? [:disconnected?]
show-emoji? [:get-in [:desktop :show-emoji?]]]
{:component-will-update {:component-will-update
(fn [e [_ new-chat-id new-input-text]] (fn [e [_ new-chat-id new-input-text]]
(let [[_ old-chat-id] (.. e -props -argv)] (let [[_ old-chat-id] (.. e -props -argv)]
@ -315,9 +318,11 @@
:blur-on-submit true :blur-on-submit true
:style (styles/chat-text-input container-height) :style (styles/chat-text-input container-height)
:font :default :font :default
:ref #(reset! inp-ref %) :ref #(do (reset! inp-ref %)
(re-frame/dispatch [:set-in [:desktop :input-ref] %]))
:default-value input-text :default-value input-text
:on-content-size-change #(set-container-height-fn (.-height (.-contentSize (.-nativeEvent %)))) :on-content-size-change #(set-container-height-fn (.-height (.-contentSize (.-nativeEvent %))))
:on-selection-change #(re-frame/dispatch [:set-in [:desktop :input-selection] (.-start (.-selection (.-nativeEvent %)))])
:submit-shortcut {:key "Enter"} :submit-shortcut {:key "Enter"}
:on-submit-editing #(when-not disconnected? :on-submit-editing #(when-not disconnected?
(.clear @inp-ref) (.clear @inp-ref)
@ -327,13 +332,35 @@
(let [native-event (.-nativeEvent e) (let [native-event (.-nativeEvent e)
text (.-text native-event)] text (.-text native-event)]
(re-frame/dispatch [:chat.ui/set-chat-input-text text])))}] (re-frame/dispatch [:chat.ui/set-chat-input-text text])))}]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:set-in [:desktop :show-emoji?] (not show-emoji?)])}
[icons/icon :main-icons/user-profile {:color colors/gray :height 40 :width 40
:container-style {:margin-right 14}}]]
[send-button inp-ref disconnected?]]))) [send-button inp-ref disconnected?]])))
(defn emoji-view []
(let [current-emoji (reagent/atom "Smileys")]
(fn []
[react/view {:margin 10}
[react/view
[react/view {:style {:flex-direction :row :flex-wrap :wrap}}
(for [emoj-key (keys emoji/emoji)]
[react/touchable-highlight {:on-press #(reset! current-emoji emoj-key)}
[react/text {:style {:color (if (= @current-emoji emoj-key) colors/black colors/gray)
:margin-right 20 :margin-bottom 5}
:number-of-lines 1}
emoj-key]])]
[react/view {:style {:flex-direction :row :flex-wrap :wrap :margin-top 5 :margin-bottom 10}}
(for [[inx emoji-code] (map-indexed vector (get emoji/emoji @current-emoji))]
^{:key (str "emoji" inx emoji-code)}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:desktop/insert-emoji emoji-code])}
[react/view {:padding 2}
[react/text {:style {:font-size 20}} emoji-code]]])]]])))
(views/defview chat-view [] (views/defview chat-view []
(views/letsubs [{:keys [input-text chat-id pending-invite-inviter-name] :as current-chat} (views/letsubs [{:keys [input-text chat-id pending-invite-inviter-name] :as current-chat}
[:chats/current-chat] [:chats/current-chat]
show-emoji? [:get-in [:desktop :show-emoji?]]
current-public-key [:account/public-key]] current-public-key [:account/public-key]]
[react/view {:style styles/chat-view} [react/view {:style styles/chat-view}
[toolbar-chat-view current-chat] [toolbar-chat-view current-chat]
[react/view {:style styles/separator}] [react/view {:style styles/separator}]
@ -342,6 +369,8 @@
[messages-view current-chat]) [messages-view current-chat])
[react/view {:style styles/separator}] [react/view {:style styles/separator}]
[reply-message-view] [reply-message-view]
(when show-emoji?
[emoji-view show-emoji?])
[chat-text-input chat-id input-text]])) [chat-text-input chat-id input-text]]))
(views/defview chat-profile [] (views/defview chat-profile []