Skip to content

Commit

Permalink
Add popup menu support
Browse files Browse the repository at this point in the history
Add menu options; use not-animated renderer

Use menu.open() instead of default trigger

Add wrap-with-menu; right-click menu for chat list
  • Loading branch information
Vitaliy Vlasov committed Nov 13, 2018
1 parent c088e7b commit 1b6d18b
Show file tree
Hide file tree
Showing 9 changed files with 90 additions and 23 deletions.
2 changes: 2 additions & 0 deletions clj-rn.conf.edn
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 6 additions & 0 deletions components/src/status_im/ui/components/react.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
1 change: 1 addition & 0 deletions desktop_files/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"))
Expand Down
10 changes: 10 additions & 0 deletions src/status_im/ui/components/popup_menu/styles.cljs
Original file line number Diff line number Diff line change
@@ -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})

23 changes: 23 additions & 0 deletions src/status_im/ui/components/popup_menu/views.cljs
Original file line number Diff line number Diff line change
@@ -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]]))

41 changes: 23 additions & 18 deletions src/status_im/ui/screens/desktop/main/chat/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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]]
Expand Down
24 changes: 21 additions & 3 deletions src/status_im/ui/screens/desktop/main/tabs/home/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions src/status_im/ui/screens/desktop/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]]])))

0 comments on commit 1b6d18b

Please sign in to comment.