Add popup menu support

Add menu options; use not-animated renderer

Use menu.open() instead of default trigger

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

clj-rn.conf.edn

@@ -12,6 +12,7 @@
               "react-native-status"
               "react-native-camera"
               "react-native-qrcode"
+              "react-native-popup-menu"
               "identicon.js"
               "react-native-fs"
               "react-native-dialogs"
@@ -50,6 +51,7 @@
                    "react-native-splash-screen"
                    "react-native-status"
                    "react-native-qrcode"
+                   "react-native-popup-menu"
                    "identicon.js"
                    "react-native-fs"
                    "react-native-dialogs"

components/src/status_im/ui/components/react.cljs

@@ -68,6 +68,12 @@
 (def activity-indicator (get-class "ActivityIndicator"))
 
 (def modal (get-class "Modal"))
+(def popup-menu-provider (adapt-class (.-MenuProvider js-dependencies/popup-menu)))
+(def popup-menu (adapt-class (.-Menu js-dependencies/popup-menu)))
+(def popup-menu-options (adapt-class (.-MenuOptions js-dependencies/popup-menu)))
+(def popup-menu-option (adapt-class (.-MenuOption js-dependencies/popup-menu)))
+(def popup-menu-trigger (adapt-class (.-MenuTrigger js-dependencies/popup-menu)))
+(def popup-menu-renderers (js->clj (.-renderers js-dependencies/popup-menu) :keywordize-keys true))
 
 (def pan-responder (.-PanResponder js-dependencies/react-native))
 (def animated (.-Animated js-dependencies/react-native))

desktop_files/package.json

@@ -73,6 +73,7 @@
     "react-native-level-fs": "3.0.0",
     "react-native-os": "1.1.0",
     "react-native-qrcode": "0.2.6",
+    "react-native-popup-menu": "0.14.0",
     "react-native-securerandom": "git+https://github.com/status-im/react-native-securerandom.git",
     "react-native-splash-screen": "3.0.6",
     "react-native-svg": "6.3.1",

react-native/src/desktop/status_im/react_native/js_dependencies.cljs

@@ -5,6 +5,7 @@
 (def http-bridge            (js/require "react-native-http-bridge"))
 (def keychain               (js/require "react-native-keychain"))
 (def qr-code                (js/require "react-native-qrcode"))
+(def popup-menu             (js/require "react-native-popup-menu"))
 (def react-native           (js/require "react-native"))
 (def realm                  (js/require "realm"))
 (def webview-bridge         (js/require "react-native-webview-bridge"))

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,10 +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]
+  (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]
@@ -49,24 +71,7 @@
              public?
              [react/text {:style styles/public-chat-text}
               (i18n/label :t/public-chat)])]]
-     [react/view
-      (when (and (not group-chat) (not public?))
-        [react/text {:style (styles/profile-actions-text colors/black)
-                     :on-press #(re-frame/dispatch [:show-profile-desktop public-key])}
-         (i18n/label :t/view-profile)])
-      (when (and group-chat (not public?))
-        [react/text {:style (styles/profile-actions-text colors/black)
-                     :on-press #(re-frame/dispatch [:show-group-chat-profile])}
-         (i18n/label :t/group-info)])
-      [react/text {:style (styles/profile-actions-text colors/black)
-                   :on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed])}
-       (i18n/label :t/clear-history)]
-      [react/text {:style (styles/profile-actions-text colors/black)
-                   :on-press #(re-frame/dispatch [(if (and group-chat (not public?))
-                                                    :group-chats.ui/remove-chat-pressed
-                                                    :chat.ui/remove-chat-pressed)
-                                                  chat-id])}
-       (i18n/label :t/delete-chat)]]]))
+     [toolbar-popup-menu public-key group-chat public? chat-id]]))
 
 (views/defview message-author-name [{:keys [from]}]
   (views/letsubs [incoming-name   [:get-contact-name-by-identity from]]

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

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

@@ -35,5 +35,6 @@
                        :backup-recovery-phrase) main.views/main-views
                       :login login.views/login
                       react/view)]
-      [react/view {:style {:flex 1}}
-       [component]])))
+      [react/popup-menu-provider
+       [react/view {:style {:flex 1}}
+        [component]]])))