From 1e262fc27789211c05efaf4f5d9d4b4d0029d98a Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Thu, 8 Feb 2018 09:31:05 +0100 Subject: [PATCH] [ISSUE #3208] Removed ContextMenu usage Signed-off-by: Andrey Shovkoplyas --- .re-natal | 1 - package-lock.json | 5 - package.json | 1 - .../react_native/js_dependencies.cljs | 1 - .../ui/components/common/common.cljs | 17 +-- .../ui/components/contact/contact.cljs | 29 ++--- src/status_im/ui/components/context_menu.cljs | 54 -------- src/status_im/ui/screens/contacts/views.cljs | 115 ------------------ .../ui/screens/home/views/inner_item.cljs | 1 - .../network_details/views.cljs | 1 - src/status_im/ui/screens/profile/styles.cljs | 3 - src/status_im/ui/screens/profile/views.cljs | 9 +- src/status_im/ui/screens/views.cljs | 54 ++++---- 13 files changed, 45 insertions(+), 246 deletions(-) diff --git a/.re-natal b/.re-natal index f32e654226..76261cfccd 100644 --- a/.re-natal +++ b/.re-natal @@ -29,7 +29,6 @@ "identicon.js", "react-native-fs", "react-native-dialogs", - "react-native-popup-menu", "react-native-sortable-listview", "react-native-image-resizer", "react-native-image-crop-picker", diff --git a/package-lock.json b/package-lock.json index 5bf124e225..92bbc831c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7023,11 +7023,6 @@ "resolved": "https://registry.npmjs.org/react-native-os/-/react-native-os-1.1.0.tgz", "integrity": "sha1-v74cRNilsUpvOjpAXYrab1R6UW4=" }, - "react-native-popup-menu": { - "version": "0.12.2", - "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.12.2.tgz", - "integrity": "sha1-ZWi1LPZFZj8GClUPIyQfoVUr+g4=" - }, "react-native-qrcode": { "version": "0.2.6", "resolved": "https://registry.npmjs.org/react-native-qrcode/-/react-native-qrcode-0.2.6.tgz", diff --git a/package.json b/package.json index 7a47e7a37b..869df56bb3 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "react-native-linear-gradient": "2.4.0", "react-native-orientation": "3.1.0", "react-native-os": "1.1.0", - "react-native-popup-menu": "0.12.2", "react-native-qrcode": "0.2.6", "react-native-randombytes": "3.0.0", "react-native-sortable-listview": "0.2.6", diff --git a/react-native/src/status_im/react_native/js_dependencies.cljs b/react-native/src/status_im/react_native/js_dependencies.cljs index 0391183da7..66efbb4b1e 100644 --- a/react-native/src/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/status_im/react_native/js_dependencies.cljs @@ -18,7 +18,6 @@ (def linear-gradient (js/require "react-native-linear-gradient")) (def nfc (js/require "nfc-react-native")) (def orientation (js/require "react-native-orientation")) -(def popup-menu (js/require "react-native-popup-menu")) (def qr-code (js/require "react-native-qrcode")) (def random-bytes (js/require "react-native-randombytes")) (def react-native (js/require "react-native")) diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index 219d7b6f81..86b641ff12 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -3,8 +3,9 @@ (:require [status-im.i18n :as i18n] [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.context-menu :as context-menu] [status-im.ui.components.common.styles :as styles] + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.react :as react] [status-im.utils.ethereum.core :as ethereum] [status-im.utils.platform :as platform])) @@ -39,7 +40,7 @@ (defn list-header [] [react/view styles/list-header-footer-spacing]) -(defn form-title [label & [{:keys [count-value extended? options]}]] +(defn form-title [label & [{:keys [count-value]}]] [react/view [react/view styles/form-title-container [react/view styles/form-title-inner-container @@ -49,17 +50,7 @@ (when-not (nil? count-value) [react/text {:style styles/form-title-count :font :medium} - count-value])] - (when extended? - [react/view - [react/view {:flex 1}]]) - (when extended? - [react/view styles/form-title-extend-container - [context-menu/context-menu - [vector-icons/icon :icons/options] - options - nil - styles/form-title-extend-button]])] + count-value])]] [top-shadow]]) (defview network-info [{:keys [text-color]}] diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index a17769bf33..386435219b 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -1,21 +1,18 @@ (ns status-im.ui.components.contact.contact (:require-macros [status-im.utils.views :as views]) - (:require [status-im.ui.components.react :as react] + (:require [status-im.i18n :as i18n] + [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.chat-icon.screen :as chat-icon.screen] - [status-im.ui.components.context-menu :as context-menu] + [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.contact.styles :as styles] - [status-im.utils.gfycat.core :as gfycat] - [status-im.i18n :as i18n])) + [status-im.ui.components.list-selection :as list-selection] + [status-im.utils.gfycat.core :as gfycat])) -(defn contact-photo [contact] - [react/view - [chat-icon.screen/contact-icon-contacts-tab contact]]) - -(defn contact-inner-view +(defn- contact-inner-view ([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}] [react/view (merge styles/contact-inner-container style) - [contact-photo contact] + [react/view + [chat-icon/contact-icon-contacts-tab contact]] [react/view styles/info-container [react/text {:style styles/name-text :number-of-lines 1} @@ -29,7 +26,7 @@ (defn contact-view [{:keys [contact extended? on-press extend-options info show-forward?]}] [react/touchable-highlight (when-not extended? - {:on-press (when on-press #(on-press contact))}) + {:on-press (when on-press #(on-press contact))}) [react/view styles/contact-container [contact-inner-view {:contact contact :info info}] (when show-forward? @@ -37,11 +34,9 @@ [vector-icons/icon :icons/forward]]) (when (and extended? (not (empty? extend-options))) [react/view styles/more-btn-container - [context-menu/context-menu - [vector-icons/icon :icons/options {:accessibility-label :options}] - extend-options - nil - styles/more-btn]])]]) + [react/touchable-highlight {:on-press #(list-selection/show {:options extend-options})} + [react/view styles/more-btn + [vector-icons/icon :icons/options {:accessibility-label :options}]]]])]]) (views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] (views/letsubs [checked [selected-key whisper-identity]] diff --git a/src/status_im/ui/components/context_menu.cljs b/src/status_im/ui/components/context_menu.cljs index 6e84f5a3f8..e69de29bb2 100644 --- a/src/status_im/ui/components/context_menu.cljs +++ b/src/status_im/ui/components/context_menu.cljs @@ -1,54 +0,0 @@ -(ns status-im.ui.components.context-menu - (:require [status-im.react-native.js-dependencies :as js-dependencies] - [status-im.ui.components.action-sheet :as action-sheet] - [status-im.ui.components.react :as react] - [goog.object :as object] - [status-im.ui.components.styles :as styles] - [status-im.utils.platform :as platform])) - -(defn- get-property [name] - (object/get js-dependencies/popup-menu name)) - -(defn- get-class [name] - (react/adapt-class (get-property name))) - -(def menu (get-class "Menu")) -(def menu-context (get-class "MenuContext")) -(def menu-trigger (get-class "MenuTrigger")) -(def menu-options (get-class "MenuOptions")) -(def menu-option (get-class "MenuOption")) - -(defn- context-menu-options [custom-styles] - {:customStyles {:optionsContainer - (merge {:elevation 2 - :margin-top 0 - :padding-top 8 - :width 164 - :padding-bottom 8} - (:optionsContainer custom-styles)) - :optionWrapper - (merge {:padding-left 16 - :padding-right 16 - :justify-content :center - :height 48} - (:optionWrapper custom-styles))}}) - -(defn- context-menu-text [destructive?] - {:font-size 15 - :line-height 20 - :color (if destructive? styles/color-light-red styles/text1-color)}) - -(defn context-menu [trigger options & custom-styles trigger-style] - (if platform/ios? - [react/touchable-highlight {:style trigger-style - :on-press #(action-sheet/show options)} - [react/view - trigger]] - [menu {:onSelect #(when % (do (%) nil))} - [menu-trigger {:style trigger-style} trigger] - [menu-options (context-menu-options custom-styles) - (for [{:keys [style action destructive?] :as option} options] - ^{:key option} - [menu-option {:value action} - [react/text {:style (merge (context-menu-text destructive?) style)} - (:label option)]])]])) diff --git a/src/status_im/ui/screens/contacts/views.cljs b/src/status_im/ui/screens/contacts/views.cljs index 4f3d3561c8..2b79c0b3e5 100644 --- a/src/status_im/ui/screens/contacts/views.cljs +++ b/src/status_im/ui/screens/contacts/views.cljs @@ -1,46 +1,16 @@ (ns status-im.ui.screens.contacts.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :refer [dispatch]] - [status-im.ui.components.common.common :as common] [status-im.ui.components.react :refer [view text touchable-highlight scroll-view]] - [status-im.ui.components.icons.vector-icons :as vi] [status-im.ui.components.native-action-button :refer [native-action-button native-action-button-item]] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.toolbar.actions :as act] [status-im.ui.components.icons.custom-icons :refer [ion-icon]] [status-im.ui.components.contact.contact :refer [contact-view]] [status-im.utils.platform :refer [platform-specific ios? android?]] [status-im.utils.utils :as u] [status-im.i18n :refer [label]] - [status-im.ui.screens.contacts.styles :as st] - [status-im.ui.screens.home.styles :as home.styles] [status-im.ui.components.styles :refer [color-blue]])) -(def ^:const contacts-limit 5) - -(def toolbar-options - [{:text (label :t/new-contact) :value #(dispatch [:navigate-to :new-contact])} - {:text (label :t/edit) :value #(dispatch [:set-in [:contacts/ui-props :edit?] true])} - {:text (label :t/new-group) :value #(dispatch [:open-contact-toggle-list :contact-group])} - {:text (label :t/reorder-groups) :value #(dispatch [:navigate-to :reorder-groups])}]) - -(defn toolbar-actions [] - [(act/search #(dispatch [:navigate-to :group-contacts {:group/contact-group-id nil - :show-search? :show-search}])) - (act/opts (if ios? toolbar-options (rest toolbar-options)))]) - -(defn toolbar-view [] - [toolbar/toolbar {} - [toolbar/content-title (label :t/contacts)] - [toolbar/actions - (toolbar-actions)]]) - -(defn toolbar-edit [] - [toolbar/toolbar {} - [toolbar/nav-button (act/back #(dispatch [:set-in [:contacts/ui-props :edit?] false]))] - [toolbar/content-title (label :t/edit-contacts)]]) - (defn contact-options [{:keys [unremovable?] :as contact} group] (let [delete-contact-opt {:action #(u/show-confirmation (str (label :t/delete-contact) "?") (label :t/delete-contact-confirmation) @@ -57,88 +27,3 @@ :label (label :t/remove-from-group)}) options))) -(defn contact-group-form [{:keys [contacts contacts-count group edit? click-handler]}] - (let [subtitle (:name group)] - [view - (when subtitle - [common/form-title subtitle - {:count-value contacts-count - :extended? edit? - :options [{:action #(dispatch [:navigate-to :edit-contact-group {:group group - :group-type :contact-group}]) - :label (label :t/edit-group)}]}]) - [view st/contacts-list - [common/list-footer] - (doall - (map (fn [contact] - ^{:key contact} - [view - [contact-view - {:contact contact - :extended? edit? - :on-press #(dispatch [:open-chat-with-contact %]) - :extend-options (contact-options contact group)}] - (when-not (= contact (last contacts)) - [common/list-separator])]) - contacts))] - (when (< contacts-limit contacts-count) - [view - [common/list-separator] - [view st/show-all - [touchable-highlight {:on-press #(do - (when edit? - (dispatch [:set-in [:contacts/list-ui-props :edit?] true])) - (dispatch [:navigate-to :group-contacts {:group/contact-group-id (:group-id group)}]))} - [view - [text {:style st/show-all-text - :uppercase? (get-in platform-specific [:uppercase?]) - :font (if ios? :default :medium)} - (str (- contacts-count contacts-limit) " " (label :t/more))]]]]]) - [common/bottom-shadow]])) - -(defview contact-group-view [{:keys [group] :as params}] - (letsubs [contacts [:all-added-group-contacts-with-limit (:group-id group) contacts-limit] - contacts-count [:all-added-group-contacts-count (:group-id group)]] - [contact-group-form (merge params {:contacts contacts - :contacts-count contacts-count})])) - -(defn contacts-action-button [] - [native-action-button {:button-color color-blue - :offset-x 16 - :offset-y 40 - :hide-shadow true - :spacing 13} - [native-action-button-item - {:title (label :t/new-contact) - :accessibility-label :new-contact - :buttonColor :#9b59b6 - :onPress #(dispatch [:navigate-to :new-contact])} - [ion-icon {:name :md-create - :style home.styles/create-icon}]]]) - -(defview contact-groups-list [_] - (letsubs [contacts [:get-added-contacts-with-limit contacts-limit] - contacts-count [:added-contacts-count] - edit? [:get-in [:contacts/ui-props :edit?]] - groups [:all-added-groups] - tabs-hidden? [:tabs-hidden?]] - [view {:flex 1} - [view st/contacts-list-container - (if edit? - [toolbar-edit] - [toolbar-view]) - (if (pos? (+ (count groups) contacts-count)) - [scroll-view {:style st/contact-groups} - (when (pos? contacts-count) - [contact-group-form {:contacts contacts - :contacts-count contacts-count - :edit? edit?}]) - (for [group groups] - ^{:key group} - [contact-group-view {:group group - :edit? edit?}])] - [view st/empty-contact-groups - [vi/icon :icons/group-big {:style st/empty-contacts-icon}] - [text {:style st/empty-contacts-text} (label :t/no-contacts)]])] - (when (and android? (not edit?)) - [contacts-action-button])])) diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index a1d511a0e2..190ccef969 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -5,7 +5,6 @@ [clojure.string :as str] [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.context-menu :as context-menu] [status-im.ui.screens.home.styles :as styles] [status-im.ui.components.styles :as component.styles] [status-im.utils.core :as utils] diff --git a/src/status_im/ui/screens/network_settings/network_details/views.cljs b/src/status_im/ui/screens/network_settings/network_details/views.cljs index da5711e54b..ce47902f37 100644 --- a/src/status_im/ui/screens/network_settings/network_details/views.cljs +++ b/src/status_im/ui/screens/network_settings/network_details/views.cljs @@ -4,7 +4,6 @@ [re-frame.core :as rf] [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.context-menu :as context-menu] [status-im.ui.screens.network-settings.views :as network-settings] [status-im.ui.components.react :as react] [status-im.utils.platform :as platform] diff --git a/src/status_im/ui/screens/profile/styles.cljs b/src/status_im/ui/screens/profile/styles.cljs index e7acab13e1..e439b6a96b 100644 --- a/src/status_im/ui/screens/profile/styles.cljs +++ b/src/status_im/ui/screens/profile/styles.cljs @@ -51,9 +51,6 @@ (def modal-menu {:align-items :center}) -(def context-menu-custom-styles - {:optionsContainer {:margin-top 78}}) - (def edit-name-title {:color colors/gray :ios {:font-size 13 diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index a2f87696c2..4ddf6bdb34 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/src/status_im/ui/screens/profile/views.cljs @@ -8,7 +8,6 @@ [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.common.common :as common] [status-im.ui.components.common.styles :as common.styles] - [status-im.ui.components.context-menu :as context-menu] [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] [status-im.ui.components.react :as react] @@ -148,11 +147,9 @@ :accessibility-label accessibility-label} value]] (when options - [context-menu/context-menu - [vector-icons/icon :icons/options] - options - nil - styles/profile-info-item-button])]) + [react/touchable-highlight {:on-press #(list-selection/show {:options options})} + [react/view styles/modal-menu + [vector-icons/icon :icons/options {:container-style styles/profile-info-item-button}]]])]) (defn- toolbar [label value] [toolbar/toolbar {} diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 7cdaebfbda..af4ff62047 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -5,7 +5,6 @@ [status-im.ui.components.react :refer [view modal] :as react] [status-im.ui.components.styles :as common-styles] [status-im.ui.screens.main-tabs.views :refer [main-tabs]] - [status-im.ui.components.context-menu :refer [menu-context]] [status-im.ui.screens.accounts.login.views :refer [login]] [status-im.ui.screens.accounts.recover.views :refer [recover recover-modal]] @@ -178,30 +177,29 @@ :contact-code contact-code :profile-qr-viewer profile/qr-viewer (throw (str "Unknown view: " current-view)))] - [(if android? menu-context view) common-styles/flex - [view common-styles/flex - (if (and android? - signed-up? - (#{:home :wallet :my-profile :chat :wallet-send-transaction - :choose-recipient :wallet-transaction-sent :transactions-history - :unsigned-transactions :wallet-request-transaction :edit-my-profile - :profile-photo-capture :wallet-request-assets} - current-view)) - [root-view] - [component]) - (when modal-view - [view common-styles/modal - [modal {:animation-type :slide - :transparent true - :on-request-close #(dispatch [:navigate-back])} - (let [component (case modal-view - :qr-scanner qr-scanner - :recover-modal recover-modal - :contact-list-modal contact-list-modal - :wallet-transactions-filter wallet-transactions/filter-history - :wallet-settings-assets wallet-settings/manage-assets - :wallet-send-transaction-modal send-transaction-modal - :wallet-transaction-sent-modal transaction-sent-modal - :wallet-transaction-fee wallet.send/transaction-fee - (throw (str "Unknown modal view: " modal-view)))] - [component])]])]]))))) + [view common-styles/flex + (if (and android? + signed-up? + (#{:home :wallet :my-profile :chat :wallet-send-transaction + :choose-recipient :wallet-transaction-sent :transactions-history + :unsigned-transactions :wallet-request-transaction :edit-my-profile + :profile-photo-capture :wallet-request-assets} + current-view)) + [root-view] + [component]) + (when modal-view + [view common-styles/modal + [modal {:animation-type :slide + :transparent true + :on-request-close #(dispatch [:navigate-back])} + (let [component (case modal-view + :qr-scanner qr-scanner + :recover-modal recover-modal + :contact-list-modal contact-list-modal + :wallet-transactions-filter wallet-transactions/filter-history + :wallet-settings-assets wallet-settings/manage-assets + :wallet-send-transaction-modal send-transaction-modal + :wallet-transaction-sent-modal transaction-sent-modal + :wallet-transaction-fee wallet.send/transaction-fee + (throw (str "Unknown modal view: " modal-view)))] + [component])]])])))))