status-im
/
status-react
mirror of https://github.com/status-im/status-react.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 {} :NativeViewGestureHandler #js {}
:FlatList #js {} :FlatList #js {}
:ScrollView #js {} :ScrollView #js {}
:TouchableOpacity #js {}
:createNativeWrapper identity}) :createNativeWrapper identity})
(def react-native-redash #js {:clamp nil}) (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] [quo.design-system.colors :as colors]
["react-native-gesture-handler" ["react-native-gesture-handler"
:refer (TapGestureHandler PanGestureHandler LongPressGestureHandler :refer (TapGestureHandler PanGestureHandler LongPressGestureHandler
PureNativeButton TouchableWithoutFeedback PureNativeButton TouchableWithoutFeedback TouchableOpacity
TouchableHighlight TouchableHighlight
createNativeWrapper State NativeViewGestureHandler createNativeWrapper State NativeViewGestureHandler
FlatList ScrollView)])) FlatList ScrollView)]))
@ -39,6 +39,9 @@
props)] props)]
children)) children))
(def touchable-opacity
(reagent/adapt-react-class TouchableOpacity))
(def raw-button (def raw-button
(reagent/adapt-react-class (reagent/adapt-react-class
(createNativeWrapper (.createAnimatedComponent animated PureNativeButton) (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] [status-im.ethereum.tokens :as tokens]
[clojure.string :as string] [clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[quo.gesture-handler :as gh]
[status-im.ui.screens.signing.styles :as styles] [status-im.ui.screens.signing.styles :as styles]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.ui.screens.keycard.pin.views :as pin.views] [status-im.ui.screens.keycard.pin.views :as pin.views]
[status-im.ui.components.bottom-panel.views :as bottom-panel] [status-im.ui.components.bottom-panel.views :as bottom-panel]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[reagent.core :as reagent] [reagent.core :as reagent]))
[status-im.ui.components.tooltip.views :as tooltip]))
(defn separator [] (defn separator []
[react/view {:height 1 :background-color colors/gray-lighter}]) [react/view {:height 1 :background-color colors/gray-lighter}])
@ -314,51 +314,52 @@
[react/text (or formatted-data "")]]] [react/text (or formatted-data "")]]]
[password-view sign]]]))) [password-view sign]]])))
(defn error-item [_ _] (defn error-item []
(let [show-tooltip? (reagent/atom false)] (fn [title show-error]
(fn [title error] [gh/touchable-opacity {:on-press #(swap! show-error not)}
[react/touchable-highlight {:on-press #(swap! show-tooltip? not)} [react/view {:style {:align-items :center
[react/view {:align-items :center :flex-direction :row} :flex-direction :row}}
[react/text {:style {:color colors/red :margin-right 8}} [react/text {:style {:color colors/red :margin-right 8}}
(i18n/label title)] (i18n/label title)]
[icons/icon :warning {:color colors/red}] [icons/icon :warning {:color colors/red}]]]))
(when @show-tooltip?
[tooltip/tooltip error {:bottom-value -20
:font-size 12}])]])))
(defn amount-item [prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?] (defn amount-item []
(let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))] (let [show-error (reagent/atom false)]
[quo/list-item (fn [prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?]
{:size :small (let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))]
:title (if amount-error [quo/list-item
[error-item :t/send-request-amount amount-error] {:size :small
(i18n/label :t/send-request-amount)) :title (if amount-error
;; FIXME??? [error-item :t/send-request-amount show-error]
;; :error amount-error (i18n/label :t/send-request-amount))
:accessory [react/view {:style {:flex-direction :row}} :error (when (and amount-error @show-error) amount-error)
[react/nested-text {:style {:color colors/gray}} :animated false
[{:style {:color colors/black}} (utils/format-decimals amount 6)] :accessory [react/view {:style {:flex-direction :row}}
" " [react/nested-text {:style {:color colors/gray}}
(or display-symbol fee-display-symbol) [{:style {:color colors/black}} (utils/format-decimals amount 6)]
" • "] " "
(if prices-loading? (or display-symbol fee-display-symbol)
[react/small-loading-indicator] " • "]
[react/text {:style {:color colors/black}} (if prices-loading?
(i18n/format-currency converted-value (:code wallet-currency))]) [react/small-loading-indicator]
[react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]}])) [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/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]))] (let [converted-fee-value (* fee (get-in prices [(keyword fee-display-symbol) (keyword (:code wallet-currency)) :price]))]
[quo/list-item [quo/list-item
{:size :small {:size :small
:title (if (and (not (or gas-price-loading? gas-loading?)) gas-error) :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)) (i18n/label :t/network-fee))
;; FIXME :error (when (and (not (or gas-price-loading? gas-loading?)) gas-error @show-error)
;; :error (when-not (or gas-price-loading? gas-loading?) gas-error) gas-error)
:disabled (or gas-price-loading? gas-loading?) :disabled (or gas-price-loading? gas-loading?)
:chevron true :chevron true
:animated false
:accessory (if (or gas-price-loading? gas-loading?) :accessory (if (or gas-price-loading? gas-loading?)
[react/small-loading-indicator] [react/small-loading-indicator]
(if (= :gas-isnt-set gas-error-state) (if (= :gas-isnt-set gas-error-state)