Add wrap-with-menu; right-click menu for chat list

src/status_im/ui/components/popup_menu/styles.cljs

@@ -0,0 +1,10 @@
+(ns status-im.ui.components.popup-menu.styles
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.react :as react]))
+
+(def menu-style
+  {:border-width 1
+   :border-color colors/gray
+   :border-radius 5
+   :background-color colors/gray-lighter})
+

src/status_im/ui/components/popup_menu/views.cljs

@@ -0,0 +1,23 @@
+(ns status-im.ui.components.popup-menu.views
+  (:require [status-im.ui.components.popup-menu.styles :as styles]
+            [status-im.ui.components.react :as react]
+            [taoensso.timbre :as log]))
+
+(defn wrap-with-menu [component items left-click-action right-click-action]
+  (let [menu-ref (atom nil)
+        left-click-action (if (= left-click-action :menu) #(.open @menu-ref)
+                              (or left-click-action :none))
+        right-click-action (if (= right-click-action :menu) #(.open @menu-ref)
+                               (or right-click-action :none))]
+    [react/popup-menu {:renderer (:NotAnimatedContextMenu react/popup-menu-renderers)
+                       :ref #(reset! menu-ref %)}
+     [react/popup-menu-trigger {:disabled true}]
+     (into [react/popup-menu-options {:custom-styles {:options-wrapper styles/menu-style}}]
+           (for [i items]
+             [react/popup-menu-option i]))
+     [react/touchable-highlight
+      {:on-press #(let [right-click? (= "right" (.-button (.-nativeEvent %)))]
+                    (log/debug "### wrap-with-menu" right-click?)
+                    (if right-click? (right-click-action) (left-click-action)))}
+      component]]))
+

src/status_im/ui/screens/desktop/main/chat/views.cljs

@@ -21,39 +21,32 @@
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.screens.desktop.main.chat.styles :as styles]
             [status-im.utils.contacts :as utils.contacts]
+            [status-im.ui.components.popup-menu.views :as popup-menu]
             [status-im.i18n :as i18n]
             [status-im.ui.screens.desktop.main.chat.events :as chat.events]
             [status-im.ui.screens.chat.message.message :as chat.message]))
 
 (defn toolbar-popup-menu [public-key group-chat public? chat-id]
-  (let [menu-ref (atom nil)]
-    [react/popup-menu {:renderer (:NotAnimatedContextMenu react/popup-menu-renderers)
-                       :ref #(reset! menu-ref %)}
-     [react/popup-menu-trigger {:disabled true}]
-     [react/popup-menu-options {:custom-styles {:options-wrapper {:border-width 1
-                                                                  :border-color colors/gray
-                                                                  :border-radius 5
-                                                                  :background-color colors/gray-lighter}}}
-      (when (and (not group-chat) (not public?))
-        [react/popup-menu-option {:text (i18n/label :t/view-profile)
-                                  :on-select #(re-frame/dispatch [:show-profile-desktop public-key])}])
-      (when (and group-chat (not public?))
-        [react/popup-menu-option {:text (i18n/label :t/group-info)}
-         :on-select #(re-frame/dispatch [:show-group-chat-profile])])
-      [react/popup-menu-option {:text (i18n/label :t/clear-history)
-                                :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed])}]
-      [react/popup-menu-option {:text (i18n/label :t/delete-chat)
-                                :on-select #(re-frame/dispatch [(if (and group-chat (not public?))
-                                                                  :group-chats.ui/remove-chat-pressed
-                                                                  :chat.ui/remove-chat-pressed)
-                                                                chat-id])}]]
-     [react/touchable-highlight {:on-press #(let [right-click? (= "right" (.-button (.-nativeEvent %)))]
-                                              (log/debug "### menu-trigger on " (if right-click? "right" "left") "click")
-                                              (when right-click? (.open @menu-ref)))}
-      [vector-icons/icon :icons/dots-horizontal
-       {:style {:tint-color colors/black
-                :width      24
-                :height     24}}]]]))
+  (popup-menu/wrap-with-menu
+   [vector-icons/icon :icons/dots-horizontal
+    {:style {:tint-color colors/black
+             :width      24
+             :height     24}}]
+   (remove nil?
+           [(when (and (not group-chat) (not public?))
+              {:text (i18n/label :t/view-profile)
+               :on-select #(re-frame/dispatch [:show-profile-desktop public-key])})
+            (when (and group-chat (not public?))
+              {:text (i18n/label :t/group-info)
+               :on-select #(re-frame/dispatch [:show-group-chat-profile])})
+            {:text (i18n/label :t/clear-history)
+             :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed])}
+            {:text (i18n/label :t/delete-chat)
+             :on-select #(re-frame/dispatch [(if (and group-chat (not public?))
+                                               :group-chats.ui/remove-chat-pressed
+                                               :chat.ui/remove-chat-pressed)
+                                             chat-id])}])
+   :menu nil))
 (views/defview toolbar-chat-view [{:keys [chat-id color public-key public? group-chat]
                                    :as current-chat}]
   (views/letsubs [chat-name         [:get-current-chat-name]

src/status_im/ui/screens/desktop/main/tabs/home/views.cljs

@@ -5,6 +5,7 @@
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.screens.desktop.main.tabs.home.styles :as styles]
+            [status-im.ui.components.popup-menu.views :as popup-menu]
             [clojure.string :as string]
             [status-im.ui.screens.home.views.inner-item :as chat-item]
             [taoensso.timbre :as log]
@@ -62,9 +63,26 @@
        [react/view {:style styles/timestamp}
         [chat-item/message-timestamp (:timestamp last-message)]]])))
 
-(defn chat-list-item [[chat-id chat]]
-  [react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])}
-   [chat-list-item-inner-view (assoc chat :chat-id chat-id)]])
+(defn chat-list-item [[chat-id
+                       {:keys [group-chat public? public-key] :as chat}]]
+  [popup-menu/wrap-with-menu
+   [chat-list-item-inner-view (assoc chat :chat-id chat-id)]
+   (remove nil?
+           [(when (and (not group-chat) (not public?))
+              {:text (i18n/label :t/view-profile)
+               :on-select #(re-frame/dispatch [:show-profile-desktop public-key])})
+            (when (and group-chat (not public?))
+              {:text (i18n/label :t/group-info)
+               :on-select #(re-frame/dispatch [:show-group-chat-profile])})
+            {:text (i18n/label :t/clear-history)
+             :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed])}
+            {:text (i18n/label :t/delete-chat)
+             :on-select #(re-frame/dispatch [(if (and group-chat (not public?))
+                                               :group-chats.ui/remove-chat-pressed
+                                               :chat.ui/remove-chat-pressed)
+                                             chat-id])}])
+   #(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
+   :menu])
 
 (defn tag-view [tag {:keys [on-press]}]
   [react/touchable-highlight {:style {:border-radius 5