From e260187cf5d800e5af2ab5614ca67c6ae1faccfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 4 Jul 2023 17:08:47 -0600 Subject: [PATCH] [#16073] Password info box * Refactor: Remove use of f-component * Fix documentation drawer styles * Refactor: move title styles to style ns * Fix StaticSafeAreaInsets not being defined on component tests * Fix bottom sheet height on Android --- .../drawers/documentation_drawers/style.cljs | 16 +++- .../drawers/documentation_drawers/view.cljs | 15 ++-- src/react_native/safe_area.cljs | 7 +- src/status_im2/common/bottom_sheet/style.cljs | 3 +- .../onboarding/create_password/view.cljs | 82 ++++++++----------- 5 files changed, 62 insertions(+), 61 deletions(-) diff --git a/src/quo2/components/drawers/documentation_drawers/style.cljs b/src/quo2/components/drawers/documentation_drawers/style.cljs index f8a9cd7aa9..70d328f94f 100644 --- a/src/quo2/components/drawers/documentation_drawers/style.cljs +++ b/src/quo2/components/drawers/documentation_drawers/style.cljs @@ -1,4 +1,10 @@ -(ns quo2.components.drawers.documentation-drawers.style) +(ns quo2.components.drawers.documentation-drawers.style + (:require [quo2.foundations.colors :as colors] + [react-native.safe-area :as safe-area])) + +(def outer-container + ;; Margin negative to fill the bottom-sheet container where this component is used + {:margin-bottom (- (+ (safe-area/get-bottom) 8))}) (def container {:align-items :flex-start @@ -6,4 +12,10 @@ (def content {:margin-top 8 - :margin-bottom 16}) + :margin-bottom (+ (safe-area/get-bottom) 8)}) + +(defn title + [shell?] + {:color (colors/theme-colors colors/neutral-100 + colors/white + (when shell? :dark))}) diff --git a/src/quo2/components/drawers/documentation_drawers/view.cljs b/src/quo2/components/drawers/documentation_drawers/view.cljs index 676a6ce037..dbe6788434 100644 --- a/src/quo2/components/drawers/documentation_drawers/view.cljs +++ b/src/quo2/components/drawers/documentation_drawers/view.cljs @@ -1,10 +1,9 @@ (ns quo2.components.drawers.documentation-drawers.view - (:require [quo2.components.markdown.text :as text] + (:require [quo2.components.buttons.button :as button] [quo2.components.drawers.documentation-drawers.style :as style] + [quo2.components.markdown.text :as text] [react-native.core :as rn] - [react-native.gesture :as gesture] - [quo2.components.buttons.button :as button] - [quo2.foundations.colors :as colors])) + [react-native.gesture :as gesture])) (defn view "Options @@ -14,18 +13,18 @@ - `button-icon` button icon - `on-press-button` On press handler for the button - `shell?` use shell theme - `content` Content of the drawer " [{:keys [title show-button? on-press-button button-label button-icon shell?]} content] [gesture/scroll-view + {:style style/outer-container + :always-bounce-vertical false + :content-inset-adjustment-behavior :never} [rn/view {:style style/container} [text/text {:size :heading-2 :accessibility-label :documentation-drawer-title - :style {:color (colors/theme-colors colors/neutral-100 - colors/white - (when shell? :dark))} + :style (style/title shell?) :weight :semi-bold} title] [rn/view {:style style/content :accessibility-label :documentation-drawer-content} diff --git a/src/react_native/safe_area.cljs b/src/react_native/safe_area.cljs index d5a371299b..78256450a3 100644 --- a/src/react_native/safe_area.cljs +++ b/src/react_native/safe_area.cljs @@ -10,7 +10,8 @@ (defn- get-static-bottom [] - (oops/oget StaticSafeAreaInsets "safeAreaInsetsBottom")) + (some-> StaticSafeAreaInsets + (oops/oget "safeAreaInsetsBottom"))) (defn get-top [] @@ -20,8 +21,8 @@ (defn get-bottom [] - (if platform/ios? - (get-static-bottom) + (if-let [bottom (and platform/ios? (get-static-bottom))] + bottom 0)) (defn get-insets diff --git a/src/status_im2/common/bottom_sheet/style.cljs b/src/status_im2/common/bottom_sheet/style.cljs index 3451e80ee3..ae78b706af 100644 --- a/src/status_im2/common/bottom_sheet/style.cljs +++ b/src/status_im2/common/bottom_sheet/style.cljs @@ -16,8 +16,7 @@ (defn sheet [{:keys [top bottom]} window-height override-theme padding-bottom-override shell?] {:position :absolute - :max-height (cond-> window-height - platform/ios? (- top)) + :max-height (- window-height top) :z-index 1 :bottom 0 :left 0 diff --git a/src/status_im2/contexts/onboarding/create_password/view.cljs b/src/status_im2/contexts/onboarding/create_password/view.cljs index 51019c659a..17f882f5e6 100644 --- a/src/status_im2/contexts/onboarding/create_password/view.cljs +++ b/src/status_im2/contexts/onboarding/create_password/view.cljs @@ -187,54 +187,44 @@ (defn create-password-doc [] [quo/documentation-drawers - {:title (i18n/label - :t/create-profile-password-info-box-title) + {:title (i18n/label :t/create-profile-password-info-box-title) :shell? true} [rn/view - [quo/text - {:size :paragraph-2} - (i18n/label - :t/create-profile-password-info-box-description)]]]) - -(defn- f-create-password - [] - (let [keyboard-shown? (reagent/atom false) - {:keys [top bottom]} (safe-area/get-insets)] - (fn [] - (rn/use-effect - (let [will-show-listener (ocall rn/keyboard - "addListener" - "keyboardWillShow" - #(reset! keyboard-shown? true)) - will-hide-listener (ocall rn/keyboard - "addListener" - "keyboardWillHide" - #(reset! keyboard-shown? false))] - (fn [] - (fn [] - (ocall will-show-listener "remove") - (ocall will-hide-listener "remove")))) - []) - [rn/touchable-without-feedback - {:on-press rn/dismiss-keyboard! - :accessible false} - [rn/view {:style style/flex-fill} - [rn/keyboard-avoiding-view {:style style/flex-fill} - [navigation-bar/navigation-bar - {:top top - :right-section-buttons [{:type :blur-bg - :icon :i/info - :icon-override-theme :dark - :on-press (fn [] - (rn/dismiss-keyboard!) - (rf/dispatch [:show-bottom-sheet - {:content create-password-doc - :shell? true}]))}]}] - [password-form] - [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]))) + [quo/text {:size :paragraph-2} + (i18n/label :t/create-profile-password-info-box-description)]]]) (defn create-password [] - [:<> - [background/view true] - [:f> f-create-password]]) + (reagent/with-let [keyboard-shown? (reagent/atom false) + {:keys [top bottom]} (safe-area/get-insets) + will-show-listener (ocall rn/keyboard + "addListener" + "keyboardWillShow" + #(reset! keyboard-shown? true)) + will-hide-listener (ocall rn/keyboard + "addListener" + "keyboardWillHide" + #(reset! keyboard-shown? false)) + on-press-info (fn [] + (rn/dismiss-keyboard!) + (rf/dispatch [:show-bottom-sheet + {:content create-password-doc + :shell? true}]))] + [:<> + [background/view true] + [rn/touchable-without-feedback + {:on-press rn/dismiss-keyboard! + :accessible false} + [rn/view {:style style/flex-fill} + [rn/keyboard-avoiding-view {:style style/flex-fill} + [navigation-bar/navigation-bar + {:top top + :right-section-buttons [{:type :blur-bg + :icon :i/info + :icon-override-theme :dark + :on-press on-press-info}]}] + [password-form] + [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]] + (finally + (ocall will-show-listener "remove") + (ocall will-hide-listener "remove"))))