[ISSUE #3208] Removed ContextMenu usage

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
status-im · Feb 9, 2018 · 1e262fc · 1e262fc
1 parent 748b0fc
commit 1e262fc
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 246 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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,19 +26,17 @@
 
 (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?
        [react/view styles/forward-btn
         [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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {}