[#5451] [desktop] fix flickering topic input

This commit is contained in:
Roman Volosovskyi 2018-09-26 20:33:23 +03:00
parent d225b7cc46
commit 66a83a6135
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
2 changed files with 28 additions and 17 deletions

View File

@ -37,6 +37,9 @@
:margin-right 12 :margin-right 12
:border-radius 8}) :border-radius 8})
(def add-pub-chat-input
(assoc add-contact-input :padding-left 10))
(defn add-contact-button [error?] (defn add-contact-button [error?]
{:width 140 {:width 140
:height 45 :height 45
@ -72,3 +75,12 @@
(def suggested-topic-text (def suggested-topic-text
{:font-size 25.6 {:font-size 25.6
:color colors/white}) :color colors/white})
(def topic-placeholder
{:flex 0
:top -63
:left 5
:font-size 14
:width 5
:height 16
:margin-bottom -16})

View File

@ -27,14 +27,19 @@
{:style (styles/add-contact-button-text nil)} {:style (styles/add-contact-button-text nil)}
(i18n/label :start-chat)]]]]) (i18n/label :start-chat)]]]])
(defn topic-input-placeholder []
[react/text {:style styles/topic-placeholder} "#"])
(defn on-topic-change [e]
(let [text (.. e -nativeEvent -text)]
(re-frame/dispatch [:set :public-group-topic text])))
(views/defview new-contact [] (views/defview new-contact []
(views/letsubs [new-contact-identity [:get :contacts/new-identity] (views/letsubs [new-contact-identity [:get :contacts/new-identity]
contacts [:all-added-people-contacts] contacts [:all-added-people-contacts]
chat-error [:new-identity-error] chat-error [:new-identity-error]
topic [:get :public-group-topic] topic [:get :public-group-topic]
topic-error [:new-topic-error-message] topic-error [:new-topic-error-message]]
account [:get-current-account]
topic-input-ref (atom nil)]
[react/scroll-view [react/scroll-view
[react/view {:style styles/new-contact-view} [react/view {:style styles/new-contact-view}
^{:key "newcontact"} ^{:key "newcontact"}
@ -83,20 +88,13 @@
[react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)]
[react/view {:style styles/new-contact-separator}] [react/view {:style styles/new-contact-separator}]
[react/view {:style styles/add-contact-edit-view} [react/view {:style styles/add-contact-edit-view}
[react/view {:style {:flex 1}} [react/view {:flex 1
[react/text-input {:flex 1 :style styles/add-pub-chat-input}
:ref #(when (and (nil? @topic-input-ref) %) [react/text-input {:flex 1
(.setNativeProps % (js-obj "text" "#")) :font :default
(reset! topic-input-ref %)) :selection-color colors/hawkes-blue
:style styles/add-contact-input :placeholder ""
:font :default :on-change on-topic-change}]]
:selection-color colors/hawkes-blue
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)
[_ before after] (first (re-seq #"(.*)\#(.*)" text))]
(.setNativeProps @topic-input-ref (js-obj "text" (str "#" before after)))
(re-frame/dispatch [:set :public-group-topic (subs text 1)])))}]]
[react/touchable-highlight {:disabled topic-error [react/touchable-highlight {:disabled topic-error
:on-press #(when-not topic-error :on-press #(when-not topic-error
(do (do
@ -105,6 +103,7 @@
[react/view {:style (styles/add-contact-button topic-error)} [react/view {:style (styles/add-contact-button topic-error)}
[react/text {:style (styles/add-contact-button-text topic-error)} [react/text {:style (styles/add-contact-button-text topic-error)}
(i18n/label :new-public-group-chat)]]]] (i18n/label :new-public-group-chat)]]]]
[topic-input-placeholder]
[react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)] [react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)]
[react/view {:style styles/suggested-contacts} [react/view {:style styles/suggested-contacts}
(doall (doall