Custom toolbar refactoring

Former-commit-id: 161356928c

src/syng_im/components/chat/new_participants.cljs

@@ -12,44 +12,20 @@
                                                text1-color
                                                text2-color
                                                toolbar-background1]]
+            [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
             [reagent.core :as r]
             [syng-im.navigation :refer [nav-pop]]))
 
-(defn toolbar [navigator]
+(defn new-participants-toolbar [navigator]
-  [view {:style {:flexDirection   "row"
+  [toolbar {:navigator navigator
-                 :backgroundColor toolbar-background1
+            :title     "Add Participants"
-                 :height          56
+            :action    {:image {:source res/v ;; {:uri "icon_search"}
-                 :elevation       2}}
+                                :style  {:width  20
-   [touchable-highlight {:on-press (fn []
+                                         :height 18}}
-                                     (nav-pop navigator))
+                        :handler (fn []
-                         :underlay-color :transparent}
+                                   (dispatch [:add-new-participants navigator]))}}])
-    [view {:width  56
-           :height 56}
-     [image {:source {:uri "icon_back"}
-             :style  {:marginTop  21
-                      :marginLeft 23
-                      :width      8
-                      :height     14}}]]]
-   [view {:style {:flex 1
-                  :alignItems "center"
-                  :justifyContent "center"}}
-    [text {:style {:marginTop  -2.5
-                   :color      text1-color
-                   :fontSize   16
-                   :fontFamily font}}
-     "Add Participants"]]
-   [touchable-highlight {:on-press (fn []
-                                     (dispatch [:add-new-participants navigator]))
-                         :underlay-color :transparent}
-    [view {:width  56
-           :height 56}
-     [image {:source res/v ;; {:uri "icon_search"}
-             :style  {:marginTop 19
-                      :marginHorizontal 18
-                      :width  20
-                      :height 18}}]]]])
 
 (defn new-participants [{:keys [navigator]}]
   (let [contacts (subscribe [:all-new-contacts])]
@@ -57,7 +33,7 @@
       (let [contacts-ds (to-realm-datasource @contacts)]
         [view {:style {:flex            1
                        :backgroundColor "white"}}
-         [toolbar navigator]
+         [new-participants-toolbar navigator]
          [list-view {:dataSource contacts-ds
                      :renderRow  (fn [row section-id row-id]
                                    (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))

src/syng_im/components/chat/remove_participants.cljs

@@ -12,44 +12,20 @@
                                                text1-color
                                                text2-color
                                                toolbar-background1]]
+            [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]]
             [reagent.core :as r]
             [syng-im.navigation :refer [nav-pop]]))
 
-(defn toolbar [navigator]
+(defn remove-participants-toolbar [navigator]
-  [view {:style {:flexDirection   "row"
+  [toolbar {:navigator navigator
-                 :backgroundColor toolbar-background1
+            :title     "Remove Participants"
-                 :height          56
+            :action    {:image {:source res/trash-icon ;; {:uri "icon_search"}
-                 :elevation       2}}
+                                :style  {:width  22
-   [touchable-highlight {:on-press (fn []
+                                         :height 30}}
-                                     (nav-pop navigator))
+                        :handler (fn []
-                         :underlay-color :transparent}
+                                   (dispatch [:remove-selected-participants navigator]))}}])
-    [view {:width  56
-           :height 56}
-     [image {:source {:uri "icon_back"}
-             :style  {:marginTop  21
-                      :marginLeft 23
-                      :width      8
-                      :height     14}}]]]
-   [view {:style {:flex 1
-                  :alignItems "center"
-                  :justifyContent "center"}}
-    [text {:style {:marginTop  -2.5
-                   :color      text1-color
-                   :fontSize   16
-                   :fontFamily font}}
-     "Remove Participants"]]
-   [touchable-highlight {:on-press (fn []
-                                     )
-                         :underlay-color :transparent}
-    [view {:width  56
-           :height 56}
-     [image {:source res/trash-icon ;; {:uri "icon_search"}
-             :style  {:marginTop 13
-                      :marginHorizontal 17
-                      :width  22
-                      :height 30}}]]]])
 
 (defn remove-participants [{:keys [navigator]}]
   (let [contacts (subscribe [:current-chat-contacts])]
@@ -57,7 +33,7 @@
       (let [contacts-ds (to-realm-datasource @contacts)]
         [view {:style {:flex            1
                        :backgroundColor "white"}}
-         [toolbar navigator]
+         [remove-participants-toolbar navigator]
          [list-view {:dataSource contacts-ds
                      :renderRow  (fn [row section-id row-id]
                                    (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))

src/syng_im/components/chats/chats_list.cljs

@@ -21,42 +21,20 @@
                                                color-black
                                                color-blue
                                                text1-color
-                                               text2-color
+                                               text2-color]]
-                                               toolbar-background1]]
+            [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.components.icons.ionicons :refer [icon]]))
 
-(defn toolbar []
+(defn chats-list-toolbar []
-  [view {:style {:flexDirection   "row"
+  [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"}
-                 :backgroundColor toolbar-background1
+                                 :style  {:width      16
-                 :height          56
+                                          :height     12}}
-                 :elevation       2}}
+                         :handler (fn [])}
-   [touchable-highlight {:on-press (fn []
+            :title      "Chats"
-                                     )
+            :action     {:image {:source {:uri "icon_search"}
-                         :underlay-color :transparent}
+                                 :style  {:width  17
-    [view {:width  56
+                                          :height 17}}
-           :height 56}
+                         :handler (fn [])}}])
-     [image {:source {:uri "icon_hamburger"}
-             :style  {:marginTop  22
-                      :marginLeft 20
-                      :width      16
-                      :height     12}}]]]
-   [view {:style {:flex 1
-                  :alignItems "center"
-                  :justifyContent "center"}}
-    [text {:style {:marginTop  -2.5
-                   :color      text1-color
-                   :fontSize   16
-                   :fontFamily font}}
-     "Chats"]]
-   [touchable-highlight {:on-press (fn []
-                                     )
-                         :underlay-color :transparent}
-    [view {:width  56
-           :height 56}
-     [image {:source {:uri "icon_search"}
-             :style  {:margin 19.5
-                      :width  17
-                      :height 17}}]]]])
 
 (defn chats-list [{:keys [navigator]}]
   (let [chats (subscribe [:get-chats])]
@@ -66,7 +44,7 @@
             datasource (to-realm-datasource chats)]
         [view {:style {:flex            1
                        :backgroundColor "white"}}
-         [toolbar]
+         [chats-list-toolbar]
          [list-view {:dataSource datasource
                      :renderRow  (fn [row section-id row-id]
                                    (r/as-element [chat-list-item row navigator]))

src/syng_im/components/chats/new_group.cljs

@@ -13,45 +13,21 @@
                                                text1-color
                                                text2-color
                                                toolbar-background1]]
+            [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.components.realm :refer [list-view]]
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [syng-im.components.chats.new-group-contact :refer [new-group-contact]]
             [reagent.core :as r]
             [syng-im.navigation :refer [nav-pop]]))
 
-(defn toolbar [navigator group-name]
+(defn new-group-toolbar [navigator group-name]
-  [view {:style {:flexDirection   "row"
+  [toolbar {:navigator navigator
-                 :backgroundColor toolbar-background1
+            :title     "New group chat"
-                 :height          56
+            :action    {:image {:source res/v ;; {:uri "icon_search"}
-                 :elevation       2}}
+                                :style  {:width  20
-   [touchable-highlight {:on-press (fn []
+                                         :height 18}}
-                                     (nav-pop navigator))
+                        :handler (fn []
-                         :underlay-color :transparent}
+                                   (dispatch [:create-new-group group-name navigator]))}}])
-    [view {:width  56
-           :height 56}
-     [image {:source {:uri "icon_back"}
-             :style  {:marginTop  21
-                      :marginLeft 23
-                      :width      8
-                      :height     14}}]]]
-   [view {:style {:flex 1
-                  :alignItems "center"
-                  :justifyContent "center"}}
-    [text {:style {:marginTop  -2.5
-                   :color      text1-color
-                   :fontSize   16
-                   :fontFamily font}}
-     "New group chat"]]
-   [touchable-highlight {:on-press (fn []
-                                     (dispatch [:create-new-group group-name navigator]))
-                         :underlay-color :transparent}
-    [view {:width  56
-           :height 56}
-     [image {:source res/v ;; {:uri "icon_search"}
-             :style  {:marginTop 19
-                      :marginHorizontal 18
-                      :width  20
-                      :height 18}}]]]])
 
 (defn new-group [{:keys [navigator]}]
   (let [contacts   (subscribe [:all-contacts])
@@ -61,7 +37,7 @@
         [view {:style {:flex            1
                        :flexDirection   "column"
                        :backgroundColor color-white}}
-         [toolbar navigator @group-name]
+         [new-group-toolbar navigator @group-name]
          [view {:style {:marginHorizontal 16}}
           [text {:style {:marginTop    24
                          :marginBottom 16

src/syng_im/components/contact_list/contact_list.cljs

@@ -15,6 +15,7 @@
                                                text1-color
                                                text2-color
                                                toolbar-background2]]
+            [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.navigation :refer [nav-pop]]
             [syng-im.resources :as res]
             [syng-im.utils.logging :as log]))
@@ -28,38 +29,14 @@
                                                   (not= row1 row2))})
                    contacts))
 
-(defn toolbar [navigator]
+(defn contact-list-toolbar [navigator]
-  [view {:style {:flexDirection   "row"
+  [toolbar {:navigator        navigator
-                 :backgroundColor toolbar-background2
+            :title            "Contacts"
-                 :height          56
+            :background-color toolbar-background2
-                 :elevation       2}}
+            :action           {:image {:source {:uri "icon_search"}
-   [touchable-highlight {:on-press (fn []
+                                       :style  {:width  17
-                                     (nav-pop navigator))
+                                                :height 17}}
-                         :underlay-color :transparent}
+                               :handler (fn [])}}])
-    [view {:width  56
-           :height 56}
-     [image {:source {:uri "icon_back"}
-             :style  {:marginTop  21
-                      :marginLeft 23
-                      :width      8
-                      :height     14}}]]]
-   [view {:style {:flex 1
-                  :alignItems "center"
-                  :justifyContent "center"}}
-    [text {:style {:marginTop  -2.5
-                   :color      text1-color
-                   :fontSize   16
-                   :fontFamily font}}
-     "Contacts"]]
-   [touchable-highlight {:on-press (fn []
-                                     )
-                         :underlay-color :transparent}
-    [view {:width  56
-           :height 56}
-     [image {:source {:uri "icon_search"}
-             :style  {:margin 19.5
-                      :width  17
-                      :height 17}}]]]])
 
 (defn contact-list [{:keys [navigator]}]
   (let [contacts (subscribe [:get-contacts])]
@@ -67,7 +44,7 @@
       (let [contacts-ds (get-data-source @contacts)]
         [view {:style {:flex            1
                        :backgroundColor "white"}}
-         [toolbar navigator]
+         [contact-list-toolbar navigator]
          (when contacts-ds
            [list-view {:dataSource contacts-ds
                        :renderRow  (partial render-row navigator)

src/syng_im/components/toolbar.cljs

@@ -0,0 +1,58 @@
+(ns syng-im.components.toolbar
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [syng-im.resources :as res]
+            [syng-im.components.react :refer [view
+                                              text-input
+                                              text
+                                              image
+                                              touchable-highlight]]
+            [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               color-purple
+                                               text1-color
+                                               text2-color
+                                               toolbar-background1]]
+            [syng-im.components.realm :refer [list-view]]
+            [syng-im.utils.listview :refer [to-realm-datasource]]
+            [reagent.core :as r]
+            [syng-im.navigation :refer [nav-pop]]))
+
+(defn toolbar [{:keys [navigator title nav-action action background-color]}]
+  [view {:style {:flexDirection   "row"
+                 :backgroundColor (or background-color toolbar-background1)
+                 :height          56
+                 :elevation       2}}
+   (if nav-action
+     [touchable-highlight {:on-press       (:handler nav-action)
+                           :underlay-color :transparent}
+      [view {:width          56
+             :height         56
+             :alignItems     "center"
+             :justifyContent "center"}
+       [image (:image nav-action)]]]
+     [touchable-highlight {:on-press (fn []
+                                       (nav-pop navigator))
+                           :underlay-color :transparent}
+      [view {:width  56
+             :height 56}
+       [image {:source {:uri "icon_back"}
+               :style  {:marginTop  21
+                        :marginLeft 23
+                        :width      8
+                        :height     14}}]]])
+   [view {:style {:flex 1
+                  :alignItems "center"
+                  :justifyContent "center"}}
+    [text {:style {:marginTop  -2.5
+                   :color      text1-color
+                   :fontSize   16
+                   :fontFamily font}}
+     title]]
+   [touchable-highlight {:on-press       (:handler action)
+                         :underlay-color :transparent}
+    [view {:width          56
+           :height         56
+           :alignItems     "center"
+           :justifyContent "center"}
+     [image (:image action)]]]])