From 3b17a46bf8e51ba6ca039715fe1d5d3add109a3b Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Wed, 15 Jul 2020 13:27:47 +0300 Subject: [PATCH] Allow nested touchable in list item Fixes #10924 Signed-off-by: Gheorghe Pinzaru --- src/mocks/js_dependencies.cljs | 1 + src/quo/gesture_handler.cljs | 5 +- src/status_im/ui/screens/signing/views.cljs | 75 +++++++++++---------- 3 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index 8c84ce7e8a..70d9dbb8a7 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -173,6 +173,7 @@ :NativeViewGestureHandler #js {} :FlatList #js {} :ScrollView #js {} + :TouchableOpacity #js {} :createNativeWrapper identity}) (def react-native-redash #js {:clamp nil}) diff --git a/src/quo/gesture_handler.cljs b/src/quo/gesture_handler.cljs index 469c34aff6..905e3a0877 100644 --- a/src/quo/gesture_handler.cljs +++ b/src/quo/gesture_handler.cljs @@ -5,7 +5,7 @@ [quo.design-system.colors :as colors] ["react-native-gesture-handler" :refer (TapGestureHandler PanGestureHandler LongPressGestureHandler - PureNativeButton TouchableWithoutFeedback + PureNativeButton TouchableWithoutFeedback TouchableOpacity TouchableHighlight createNativeWrapper State NativeViewGestureHandler FlatList ScrollView)])) @@ -39,6 +39,9 @@ props)] children)) +(def touchable-opacity + (reagent/adapt-react-class TouchableOpacity)) + (def raw-button (reagent/adapt-react-class (createNativeWrapper (.createAnimatedComponent animated PureNativeButton) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index 06ac3eaa27..d53260f8f9 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -17,13 +17,13 @@ [status-im.ethereum.tokens :as tokens] [clojure.string :as string] [quo.core :as quo] + [quo.gesture-handler :as gh] [status-im.ui.screens.signing.styles :as styles] [status-im.react-native.resources :as resources] [status-im.ui.screens.keycard.pin.views :as pin.views] [status-im.ui.components.bottom-panel.views :as bottom-panel] [status-im.utils.utils :as utils] - [reagent.core :as reagent] - [status-im.ui.components.tooltip.views :as tooltip])) + [reagent.core :as reagent])) (defn separator [] [react/view {:height 1 :background-color colors/gray-lighter}]) @@ -314,51 +314,52 @@ [react/text (or formatted-data "")]]] [password-view sign]]]))) -(defn error-item [_ _] - (let [show-tooltip? (reagent/atom false)] - (fn [title error] - [react/touchable-highlight {:on-press #(swap! show-tooltip? not)} - [react/view {:align-items :center :flex-direction :row} - [react/text {:style {:color colors/red :margin-right 8}} - (i18n/label title)] - [icons/icon :warning {:color colors/red}] - (when @show-tooltip? - [tooltip/tooltip error {:bottom-value -20 - :font-size 12}])]]))) +(defn error-item [] + (fn [title show-error] + [gh/touchable-opacity {:on-press #(swap! show-error not)} + [react/view {:style {:align-items :center + :flex-direction :row}} + [react/text {:style {:color colors/red :margin-right 8}} + (i18n/label title)] + [icons/icon :warning {:color colors/red}]]])) -(defn amount-item [prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?] - (let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))] - [quo/list-item - {:size :small - :title (if amount-error - [error-item :t/send-request-amount amount-error] - (i18n/label :t/send-request-amount)) - ;; FIXME??? - ;; :error amount-error - :accessory [react/view {:style {:flex-direction :row}} - [react/nested-text {:style {:color colors/gray}} - [{:style {:color colors/black}} (utils/format-decimals amount 6)] - " " - (or display-symbol fee-display-symbol) - " • "] - (if prices-loading? - [react/small-loading-indicator] - [react/text {:style {:color colors/black}} - (i18n/format-currency converted-value (:code wallet-currency))]) - [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]}])) +(defn amount-item [] + (let [show-error (reagent/atom false)] + (fn [prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?] + (let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))] + [quo/list-item + {:size :small + :title (if amount-error + [error-item :t/send-request-amount show-error] + (i18n/label :t/send-request-amount)) + :error (when (and amount-error @show-error) amount-error) + :animated false + :accessory [react/view {:style {:flex-direction :row}} + [react/nested-text {:style {:color colors/gray}} + [{:style {:color colors/black}} (utils/format-decimals amount 6)] + " " + (or display-symbol fee-display-symbol) + " • "] + (if prices-loading? + [react/small-loading-indicator] + [react/text {:style {:color colors/black}} + (i18n/format-currency converted-value (:code wallet-currency))]) + [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]}])))) (views/defview fee-item [prices wallet-currency fee-display-symbol fee gas-error gas-error-state prices-loading?] - (views/letsubs [{:keys [gas-price-loading? gas-loading?]} [:signing/edit-fee]] + (views/letsubs [{:keys [gas-price-loading? gas-loading?]} [:signing/edit-fee] + show-error (reagent/atom false)] (let [converted-fee-value (* fee (get-in prices [(keyword fee-display-symbol) (keyword (:code wallet-currency)) :price]))] [quo/list-item {:size :small :title (if (and (not (or gas-price-loading? gas-loading?)) gas-error) - [error-item :t/network-fee gas-error] + [error-item :t/network-fee show-error] (i18n/label :t/network-fee)) - ;; FIXME - ;; :error (when-not (or gas-price-loading? gas-loading?) gas-error) + :error (when (and (not (or gas-price-loading? gas-loading?)) gas-error @show-error) + gas-error) :disabled (or gas-price-loading? gas-loading?) :chevron true + :animated false :accessory (if (or gas-price-loading? gas-loading?) [react/small-loading-indicator] (if (= :gas-isnt-set gas-error-state)