Skip to content

Commit d24eb96

Browse files
seanstromseanstrom
authored
Use scrollable multiline text-input in contact request form (#19383)
* tweak: augment bottom-sheet component to be aware of keyboard height * tweak: augment quo input component to allow for styling of the input, the input container, and container * tweak: augment contact request input to grow until max screen size is reached for the bottom-sheet * tweak: handle blurring the contact request input when keyboard is dismissed on android * tidy: refactor with the use-keyboard hook * tweak: use on-layout for measuring sheet max-height * tweak: remove use of input-style and flex-direction column * tidy: remove unused requires * tidy: use container-style prop * tidy: fix formatting * fix: default layout-height to window-height
1 parent 3dfd9df commit d24eb96

File tree

5 files changed

+49
-23
lines changed

5 files changed

+49
-23
lines changed

‎src/quo/components/inputs/input/view.cljs

+4-3
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,11 @@
6060
"Custom properties that must be removed from properties map passed to InputText."
6161
[:type :blur? :error? :right-icon :left-icon :disabled? :small? :button
6262
:label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur
63-
:container-style :ref])
63+
:container-style :input-container-style :ref])
6464

6565
(defn- base-input
6666
[{:keys [blur? error? right-icon left-icon disabled? small? button
67-
label char-limit multiline? clearable? on-focus on-blur container-style
67+
label char-limit multiline? clearable? on-focus on-blur container-style input-container-style
6868
on-change-text on-char-limit-reach weight default-value on-clear]
6969
:as props}]
7070
(let [theme (quo.theme/use-theme-value)
@@ -119,7 +119,8 @@
119119
:current-chars char-count
120120
:char-limit char-limit
121121
:theme theme}])
122-
[rn/view {:style (style/input-container colors-by-status small? disabled?)}
122+
[rn/view
123+
{:style (merge (style/input-container colors-by-status small? disabled?) input-container-style)}
123124
(when-let [{:keys [icon-name]} left-icon]
124125
[left-accessory
125126
{:variant-colors variant-colors

‎src/status_im/common/bottom_sheet/view.cljs

+11-3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
[react-native.hooks :as hooks]
1111
[react-native.reanimated :as reanimated]
1212
[status-im.common.bottom-sheet.style :as style]
13+
[utils.number]
1314
[utils.re-frame :as rf]))
1415

1516
(def duration 450)
@@ -66,19 +67,23 @@
6667
gradient-cover? customization-color hide-handle? blur-radius]
6768
:or {border-radius 12}}]
6869
(let [theme (quo.theme/use-theme-value)
70+
{window-height :height} (rn/get-window)
6971
[sheet-height set-sheet-height] (rn/use-state 0)
72+
[layout-height set-layout-height] (rn/use-state window-height)
7073
handle-sheet-height (rn/use-callback (fn [e]
7174
(when (= sheet-height 0)
7275
(set-sheet-height
7376
(get-layout-height e))))
7477
[sheet-height])
78+
handle-layout-height (rn/use-callback (fn [e]
79+
(-> (get-layout-height e)
80+
(set-layout-height))))
7581
[item-height set-item-height] (rn/use-state 0)
7682
handle-item-height (rn/use-callback (fn [e]
7783
(when (= item-height 0)
7884
(set-item-height
7985
(get-layout-height e))))
8086
[item-height])
81-
{window-height :height} (rn/get-window)
8287
bg-opacity (reanimated/use-shared-value 0)
8388
translate-y (reanimated/use-shared-value window-height)
8489
sheet-gesture (rn/use-memo #(get-sheet-gesture translate-y
@@ -96,7 +101,8 @@
96101
bottom (if selected-item-smaller-than-sheet?
97102
(+ sheet-height bottom-margin)
98103
(:bottom insets))
99-
sheet-max-height (- window-height (:top insets))
104+
sheet-max-height (- layout-height
105+
(:top insets))
100106
content-padding-bottom (or padding-bottom-override
101107
(+ (:bottom insets) bottom-margin))]
102108
(rn/use-effect
@@ -109,7 +115,9 @@
109115
(on-close))
110116
(rf/dispatch [:hide-bottom-sheet])
111117
true))
112-
[rn/view {:style {:flex 1}}
118+
[rn/view
119+
{:style {:flex 1}
120+
:on-layout handle-layout-height}
113121
;; backdrop
114122
[rn/pressable
115123
{:on-press #(rf/dispatch [:hide-bottom-sheet])

‎src/status_im/contexts/profile/contact/contact_request/style.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77

88
(def message-input-wrapper
99
{:padding-vertical 8
10+
:flex-shrink 1
1011
:padding-horizontal 20})

‎src/status_im/contexts/profile/contact/contact_request/view.cljs

+24-10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
(:require [clojure.string :as string]
33
[quo.core :as quo]
44
[react-native.core :as rn]
5+
[react-native.platform :as platform]
56
[status-im.constants :as constants]
67
[status-im.contexts.profile.contact.contact-request.style :as style]
78
[status-im.contexts.profile.utils :as profile.utils]
@@ -15,6 +16,7 @@
1516
customization-color customization-color
1617
full-name (profile.utils/displayed-name profile)
1718
profile-picture (profile.utils/photo profile)
19+
input-ref (rn/use-ref-atom nil)
1820
[message set-message] (rn/use-state "")
1921
on-message-change (rn/use-callback #(set-message %))
2022
on-message-submit (rn/use-callback (fn []
@@ -27,6 +29,14 @@
2729
:text (i18n/label
2830
:t/contact-request-was-sent)}]))
2931
[public-key message])]
32+
(rn/use-mount
33+
(fn []
34+
(let [listener (.addListener rn/keyboard
35+
"keyboardDidHide"
36+
(fn [_event]
37+
(when (and platform/android? @input-ref)
38+
(.blur ^js @input-ref))))]
39+
#(.remove ^js listener))))
3040
[:<>
3141
[quo/drawer-top
3242
{:type :context-tag
@@ -39,17 +49,21 @@
3949
(i18n/label :t/contact-request-message-prompt)]
4050
[rn/view {:style style/message-input-wrapper}
4151
[quo/input
42-
{:type :text
43-
:multiline? true
44-
:char-limit constants/contact-request-message-max-length
45-
:max-length constants/contact-request-message-max-length
46-
:placeholder (i18n/label :t/type-something)
47-
:auto-focus true
48-
:accessibility-label :contact-request-message
49-
:label (i18n/label :t/message)
50-
:on-change-text on-message-change}]]
52+
{:type :text
53+
:ref #(reset! input-ref %)
54+
:multiline? true
55+
:char-limit constants/contact-request-message-max-length
56+
:max-length constants/contact-request-message-max-length
57+
:placeholder (i18n/label :t/type-something)
58+
:auto-focus true
59+
:accessibility-label :contact-request-message
60+
:label (i18n/label :t/message)
61+
:on-change-text on-message-change
62+
:container-style {:flex-shrink 1}
63+
:input-container-style {:flex-shrink 1}}]]
5164
[quo/bottom-actions
52-
{:actions :one-action
65+
{:container-style {:style {:flex 1}}
66+
:actions :one-action
5367
:button-one-props {:disabled? (string/blank? message)
5468
:accessibility-label :send-contact-request
5569
:customization-color customization-color

‎src/status_im/navigation/view.cljs

+9-7
Original file line numberDiff line numberDiff line change
@@ -92,19 +92,21 @@
9292
(def bottom-sheet
9393
(reagent/reactify-component
9494
(fn []
95-
(let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
96-
sheet (last sheets)
97-
{:keys [theme]} sheet
98-
insets (safe-area/get-insets)
99-
user-theme (theme/get-theme)]
95+
(let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
96+
sheet (last sheets)
97+
{:keys [theme]} sheet
98+
insets (safe-area/get-insets)
99+
user-theme (theme/get-theme)
100+
keyboard-vertical-offset (- (max 20 (:bottom insets)))]
100101
^{:key (str "sheet" @reloader/cnt)}
101102
[theme/provider {:theme (or theme user-theme)}
102103
[inactive]
103104
[rn/keyboard-avoiding-view
104105
{:style {:position :relative :flex 1}
105-
:keyboard-vertical-offset (- (max 20 (:bottom insets)))}
106+
:keyboard-vertical-offset keyboard-vertical-offset}
106107
(when sheet
107-
[bottom-sheet/view {:insets insets :hide? hide?}
108+
[bottom-sheet/view
109+
{:insets insets :hide? hide?}
108110
sheet])]]))
109111
functional-compiler))
110112

0 commit comments

Comments
 (0)