[fix] ios checkbox

- remove usage of native checkboxes on android and desktop to ensure proper
design
- rename plain-checkbox to radio button and make sure it is only used where
radio button should be used (one possible choice beyond many)
- update autotest

Signed-off-by: yenda <eric@status.im>

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

@@ -9,8 +9,8 @@
    :align-items     :center
    :justify-content :center
    :border-radius   2
-   :width           24
-   :height          24})
+   :width           18
+   :height          18})
 
 (defn icon-radio-container [checked?]
   (merge (icon-check-container checked?)

src/status_im/ui/components/checkbox/view.cljs

@@ -1,35 +1,38 @@
 (ns status-im.ui.components.checkbox.view
   (:require [status-im.ui.components.checkbox.styles :as styles]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.icons.vector-icons :as icons]
             [status-im.ui.components.react :as react]
             [status-im.utils.platform :as platform]))
 
-(defn- checkbox-generic [{:keys [on-value-change checked? accessibility-label
-                                 disabled? style icon-style native?]
-                          :or   {accessibility-label :checkbox
-                                 native?             true}} plain?]
-  (let [icon-check-container (if plain? #() styles/icon-check-container)
-        check-icon           (merge (if plain? styles/plain-check-icon styles/check-icon) icon-style)]
-    (if (and (or platform/android?
-                 platform/desktop?)
-             native?)
-      [react/view (merge styles/wrapper style)
-       [react/check-box {:on-value-change     on-value-change
-                         :value               checked?
-                         :disabled            (and (not checked?)
-                                                   disabled?)
-                         :accessibility-label accessibility-label}]]
-      [react/touchable-highlight (merge {:style               (merge
-                                                               (icon-check-container checked?)
-                                                               styles/wrapper
-                                                               style)
-                                         :accessibility-label accessibility-label}
-                                        (when on-value-change {:on-press #(on-value-change (not checked?))}))
-       [react/view {}
-        (when checked?
-          [react/icon :check_on check-icon])]])))
+(defn checkbox
+  "react/check-box is currently not available on iOS,
+  use it once it is available on all platforms"
+  [{:keys [on-value-change checked? accessibility-label
+           disabled? style icon-style]
+    :or   {accessibility-label :checkbox}}]
+  [react/touchable-highlight
+   (merge {:style               (merge
+                                 styles/wrapper
+                                 style)
+           :accessibility-label accessibility-label}
+          (when on-value-change
+            {:on-press #(on-value-change (not checked?))}))
+   [react/view (styles/icon-check-container checked?)
+    (when checked?
+      [icons/icon :tiny-icons/tiny-check {:color colors/white}])]])
 
-(defn checkbox [props]
-  [checkbox-generic props false])
-
-(defn plain-checkbox [props]
-  [checkbox-generic props true])
+(defn radio-button
+  [{:keys [on-value-change checked? accessibility-label
+           disabled? style icon-style]
+    :or   {accessibility-label :radio-button}}]
+  [react/touchable-highlight
+   (merge {:style               (merge
+                                 styles/wrapper
+                                 style)
+           :accessibility-label accessibility-label}
+          (when on-value-change
+            {:on-press #(on-value-change (not checked?))}))
+   (if checked?
+     [icons/icon :main-icons/check {:color colors/blue}]
+     [react/view])])

src/status_im/ui/components/contact/contact.cljs

@@ -20,31 +20,26 @@
              [react/view {}
               [react/text {} label]]]))])
 
-(defn- contact-inner-view
-  ([{:keys [info style props] {:keys [public-key name dapp?] :as contact} :contact}]
-   [react/view (merge styles/contact-inner-container style)
-    [react/view
-     [chat-icon/contact-icon-contacts-tab contact]]
-    [react/view styles/info-container
+(defn contact-view
+  [{:keys [style contact extended? on-press extend-options extend-title
+           info show-forward? accessibility-label inner-props]
+    {:keys [public-key name]} :contact
+    :or   {accessibility-label :contact-item}}]
+  [react/touchable-highlight (merge {:accessibility-label accessibility-label}
+                                    (when-not extended?
+                                      {:on-press (when on-press #(on-press contact))}))
+   [react/view styles/contact-container-to-refactor
+    [chat-icon/contact-icon-contacts-tab contact]
+    [react/view styles/info-container-to-refactor
      [react/text (merge {:style           styles/name-text
                          :number-of-lines 1}
-                        (when dapp? {:accessibility-label :dapp-name})
-                        props)
+                        inner-props)
       (if (string/blank? name)
         (gfycat/generate-gfy public-key)
         (or name (i18n/label :t/chat-name)))]
      (when info
        [react/text {:style styles/info-text}
-        info])]]))
-
-(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward?
-                            accessibility-label inner-props]
-                     :or   {accessibility-label :contact-item}}]
-  [react/touchable-highlight (merge {:accessibility-label accessibility-label}
-                                    (when-not extended?
-                                      {:on-press (when on-press #(on-press contact))}))
-   [react/view styles/contact-container
-    [contact-inner-view {:contact contact :info info :style style :props inner-props}]
+        info])]
     (when show-forward?
       [react/view styles/forward-btn
        [vector-icons/icon :main-icons/next]])
@@ -58,13 +53,19 @@
           [react/view styles/more-btn
            [vector-icons/icon :main-icons/more {:accessibility-label :options}]]]]))]])
 
-(views/defview toggle-contact-view [{:keys [public-key] :as contact} selected-key on-toggle-handler disabled?]
+(views/defview toggle-contact-view
+  [{:keys [public-key name] :as contact} selected-key on-toggle-handler disabled?]
   (views/letsubs [checked [selected-key public-key]]
     [react/view {:accessibility-label :contact-item}
      [list/list-item-with-checkbox
       {:checked?        checked
        :disabled?       disabled?
-       :on-value-change #(on-toggle-handler checked public-key)
-       :plain-checkbox? true}
-      [react/view styles/contact-container
-       [contact-inner-view {:contact contact}]]]]))
+       :on-value-change #(on-toggle-handler checked public-key)}
+      [list/item
+       [chat-icon/contact-icon-contacts-tab contact]
+       [react/view styles/info-container
+        [react/text {:style           styles/name-text
+                     :number-of-lines 1}
+         (if (string/blank? name)
+           (gfycat/generate-gfy public-key)
+           (or name (i18n/label :t/chat-name)))]]]]]))

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

@@ -4,20 +4,20 @@
             [status-im.utils.platform]
             [status-im.ui.components.colors :as colors]))
 
-(defstyle contact-inner-container
-  {:flex             1
-   :flex-direction   :row
-   :align-items      :center
-   :padding-left     16
-   :background-color colors/white
-   :android          {:height 56}
-   :ios              {:height 63}})
+(def contact-container-to-refactor
+  {:flex-direction :row
+   :justify-content :center
+   :align-items :center
+   :padding-horizontal 16})
+
+(def info-container-to-refactor
+  {:flex        1
+   :flex-direction  :column
+   :margin-left 16
+   :justify-content :center})
 
 (def info-container
   {:flex            1
-   :flex-direction  :column
-   :margin-left     16
-   :margin-right    5
    :justify-content :center})
 
 (defstyle name-text
@@ -31,11 +31,6 @@
    :font-size  12
    :color      colors/text-gray})
 
-(def contact-container
-  {:flex-direction   :row
-   :align-items      :center
-   :background-color colors/white})
-
 (def forward-btn
   {:opacity         0.4
    :padding         12

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

@@ -87,16 +87,19 @@
   [& children]
   (into [react/view {:style styles/item-content-view}] (keep identity children)))
 
-(defn item-checkbox
-  [{:keys [style] :as props}]
-  [react/view {:style (merge style styles/item-checkbox)}
-   [checkbox/checkbox props]])
+(defn list-item-with-checkbox
+  [{:keys [on-value-change style checked?] :as props} item]
+  [react/touchable-highlight {:on-press #(on-value-change (not checked?))}
+   (conj item
+         [react/view {:style (merge style styles/item-checkbox)}
+          [checkbox/checkbox props]])])
 
-(defn list-item-with-checkbox [{:keys [on-value-change checked? plain-checkbox?] :as props} item]
-  (let [handler  #(on-value-change (not checked?))
-        checkbox [(if plain-checkbox? checkbox/plain-checkbox item-checkbox) props]
-        item     (conj item checkbox)]
-    [touchable-item handler item]))
+(defn list-item-with-radio-button
+  [{:keys [on-value-change style checked?] :as props} item]
+  [react/touchable-highlight {:on-press #(on-value-change (not checked?))}
+   (conj item
+         [react/view {:style (merge style styles/item-checkbox)}
+          [checkbox/radio-button props]])])
 
 (def item-icon-forward
   [item-icon {:icon      :main-icons/next

src/status_im/ui/screens/mobile_network_settings/view.cljs

@@ -32,8 +32,7 @@
         {:checked?        @checked?
          :style           styles/checkbox
          :icon-style      styles/checkbox-icon
-         :on-value-change #(swap! checked? not)
-         :native?         false}]
+         :on-value-change #(swap! checked? not)}]
        [react/view
         {:style styles/checkbox-text-container}
         [react/text {:style styles/checkbox-text}

src/status_im/ui/screens/network_settings/edit_network/views.cljs

@@ -19,10 +19,9 @@
                :testnet (i18n/label :t/ropsten-network)
                :rinkeby (i18n/label :t/rinkeby-network)
                :custom (i18n/label :t/custom))]
-    [list/list-item-with-checkbox
+    [list/list-item-with-radio-button
      {:checked?        (= (get-in manage-network [:chain :value]) type)
-      :on-value-change #(re-frame/dispatch [:network.ui/input-changed :chain type])
-      :plain-checkbox? true}
+      :on-value-change #(re-frame/dispatch [:network.ui/input-changed :chain type])}
      [list/item
       nil [list/item-primary-only name]]]))
 

test/appium/views/wallet_view.py

@@ -156,7 +156,7 @@ class AssetCheckBox(BaseButton):
     def __init__(self, driver, asset_name):
         super(AssetCheckBox, self).__init__(driver)
         self.asset_name = asset_name
-        self.locator = self.Locator.xpath_selector("//*[@text='%s']/../android.widget.CheckBox" % self.asset_name)
+        self.locator = self.Locator.xpath_selector("//*[@text='%s']" % self.asset_name)
 
     def click(self):
         self.scroll_to_element().click()