status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Allow nested touchable in list item 

Fixes #10924

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-07-15 13:27:47 +03:00
parent afb4e9fdb9
commit 3b17a46bf8
No known key found for this signature in database
GPG Key ID: C9A094959935A952
3 changed files with 43 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/mocks/js_dependencies.cljs
View File

@ -173,6 +173,7 @@
:NativeViewGestureHandler #js {}
:FlatList #js {}
:ScrollView #js {}
:TouchableOpacity #js {}
:createNativeWrapper identity})
(def react-native-redash #js {:clamp nil})

5
src/quo/gesture_handler.cljs
View File

@ -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)

75
src/status_im/ui/screens/signing/views.cljs
View File

@ -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)