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

Documentation: composer (#17756) 

* Docs: composer
This commit is contained in:
Omar Basem 2023-11-02 08:53:22 +04:00 committed by GitHub
parent 972e1eee01
commit 2d92b515b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im2/contexts/chat/composer/actions/view.cljs
View File

@ -16,6 +16,7 @@
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn send-message (defn send-message
"Minimize composer, animate-out background overlay, clear input and flush state"
[{:keys [sending-images? sending-links?]} [{:keys [sending-images? sending-links?]}
{:keys [text-value focused? maximized?]} {:keys [text-value focused? maximized?]}
{:keys [height saved-height last-height opacity background-y container-opacity]} {:keys [height saved-height last-height opacity background-y container-opacity]}
@ -47,6 +48,7 @@
(let [{:keys [text-value]} state (let [{:keys [text-value]} state
customization-color (rf/sub [:profile/customization-color])] customization-color (rf/sub [:profile/customization-color])]
(rn/use-effect (fn [] (rn/use-effect (fn []
;; Handle send button opacity animation and z-index when input content changes
(if (or (seq @text-value) images?) (if (or (seq @text-value) images?)
(when (or (not= @z-index 1) (not= (reanimated/get-shared-value btn-opacity) 1)) (when (or (not= @z-index 1) (not= (reanimated/get-shared-value btn-opacity) 1))
(reset! z-index 1) (reset! z-index 1)

11
src/status_im2/contexts/chat/composer/handlers.cljs
View File

@ -14,6 +14,7 @@
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn focus (defn focus
"Animate to the `saved-height`, display background-overlay if needed, and set cursor position"
[{:keys [input-ref] :as props} [{:keys [input-ref] :as props}
{:keys [text-value focused? lock-selection? saved-cursor-position]} {:keys [text-value focused? lock-selection? saved-cursor-position]}
{:keys [height saved-height last-height opacity background-y container-opacity] {:keys [height saved-height last-height opacity background-y container-opacity]
@ -36,6 +37,7 @@
(reset! show-floating-scroll-down-button? false)) (reset! show-floating-scroll-down-button? false))
(defn blur (defn blur
"Save the current height, minimize the composer, animate-out the background, and save cursor position"
[{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
maximized? recording?]} maximized? recording?]}
{:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]} {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
@ -67,6 +69,7 @@
(rf/dispatch [:chat.ui/set-input-maximized false]))))) (rf/dispatch [:chat.ui/set-input-maximized false])))))
(defn content-size-change (defn content-size-change
"Save new text height, expand composer if possible, show background overlay if needed"
[event [event
{:keys [maximized? lock-layout? text-value]} {:keys [maximized? lock-layout? text-value]}
{:keys [height saved-height opacity background-y]} {:keys [height saved-height opacity background-y]}
@ -101,6 +104,7 @@
(reset! lock-layout? (> lines 2))))) (reset! lock-layout? (> lines 2)))))
(defn scroll (defn scroll
"Hide or show top gradient while scroll"
[event [event
{:keys [scroll-y]} {:keys [scroll-y]}
{:keys [gradient-z-index focused?]} {:keys [gradient-z-index focused?]}
@ -116,12 +120,10 @@
(js/setTimeout #(reset! gradient-z-index 0) 300)))) (js/setTimeout #(reset! gradient-z-index 0) 300))))
(defn change-text (defn change-text
"Update `text-value`, update cursor selection, find links, find mentions"
[text [text
{:keys [input-ref record-reset-fn]} {:keys [input-ref record-reset-fn]}
{:keys [text-value cursor-position recording?]}] {:keys [text-value cursor-position recording?]}]
(debounce/debounce-and-dispatch [:link-preview/unfurl-urls text]
constants/unfurl-debounce-ms)
(reset! text-value text) (reset! text-value text)
(reagent/next-tick #(when @input-ref (reagent/next-tick #(when @input-ref
(.setNativeProps ^js @input-ref (.setNativeProps ^js @input-ref
@ -131,11 +133,14 @@
(@record-reset-fn) (@record-reset-fn)
(reset! recording? false)) (reset! recording? false))
(rf/dispatch [:chat.ui/set-chat-input-text text]) (rf/dispatch [:chat.ui/set-chat-input-text text])
(debounce/debounce-and-dispatch [:link-preview/unfurl-urls text]
constants/unfurl-debounce-ms)
(if (string/ends-with? text "@") (if (string/ends-with? text "@")
(rf/dispatch [:mention/on-change-text text]) (rf/dispatch [:mention/on-change-text text])
(debounce/debounce-and-dispatch [:mention/on-change-text text] 300))) (debounce/debounce-and-dispatch [:mention/on-change-text text] 300)))
(defn selection-change (defn selection-change
"A method that handles our custom selector for `B I U`"
[event [event
{:keys [input-ref selection-event selection-manager]} {:keys [input-ref selection-event selection-manager]}
{:keys [lock-selection? cursor-position first-level? menu-items]}] {:keys [lock-selection? cursor-position first-level? menu-items]}]

1
src/status_im2/contexts/chat/composer/keyboard.cljs
View File

@ -20,6 +20,7 @@
(async-storage/set-item! :kb-default-height (str height))))) (async-storage/set-item! :kb-default-height (str height)))))
(defn handle-emoji-kb-ios (defn handle-emoji-kb-ios
"Opening emoji KB on iOS while maximized will cause a flicker up and down. This method handles that."
[event [event
{:keys [emoji-kb-extra-height]} {:keys [emoji-kb-extra-height]}
{:keys [text-value]} {:keys [text-value]}

4
src/status_im2/contexts/chat/composer/utils.cljs
View File

@ -144,7 +144,7 @@
(+ base bottom-content-height)) (+ base bottom-content-height))
(+ constants/actions-container-height (:bottom insets) (- curr-height cursor-pos) 18))))) (+ constants/actions-container-height (:bottom insets) (- curr-height cursor-pos) 18)))))
(defn init-props (defn init-non-reactive-state
[] []
{:input-ref (atom nil) {:input-ref (atom nil)
:selectable-input-ref (atom nil) :selectable-input-ref (atom nil)
@ -160,7 +160,7 @@
:selection-event (atom nil) :selection-event (atom nil)
:selection-manager (rn/selectable-text-input-manager)}) :selection-manager (rn/selectable-text-input-manager)})
(defn init-state (defn init-reactive-state
[] []
{:text-value (reagent/atom "") {:text-value (reagent/atom "")
:cursor-position (reagent/atom 0) :cursor-position (reagent/atom 0)

20
src/status_im2/contexts/chat/composer/view.cljs
View File

@ -36,15 +36,19 @@
theme]} props state] theme]} props state]
(let [{:keys [chat-screen-loaded?] (let [{:keys [chat-screen-loaded?]
:as subscriptions} (utils/init-subs) :as subscriptions} (utils/init-subs)
content-height (reagent/atom (or (:input-content-height content-height (reagent/atom (or (:input-content-height ; Actual text height
subscriptions) subscriptions)
constants/input-height)) constants/input-height))
{:keys [keyboard-shown]} (hooks/use-keyboard) {:keys [keyboard-shown]} (hooks/use-keyboard)
max-height (utils/calc-max-height subscriptions max-height (utils/calc-max-height subscriptions ; Max allowed height for the
; composer view
window-height window-height
@(:kb-height state) @(:kb-height state)
insets) insets)
lines (utils/calc-lines (- @content-height constants/extra-content-offset)) lines (utils/calc-lines (- @content-height constants/extra-content-offset)) ; Current
; lines
; count
;; Maximum number of lines that can be displayed when composer in maximized
max-lines (utils/calc-lines max-height) max-lines (utils/calc-lines max-height)
animations (utils/init-animations animations (utils/init-animations
subscriptions subscriptions
@ -59,6 +63,7 @@
:lines lines :lines lines
:max-lines max-lines} :max-lines max-lines}
show-bottom-gradient? (utils/show-bottom-gradient? state dimensions) show-bottom-gradient? (utils/show-bottom-gradient? state dimensions)
;; Cursor position, needed to determine where to display the mentions view
cursor-pos (utils/cursor-y-position-relative-to-container cursor-pos (utils/cursor-y-position-relative-to-container
props props
state)] state)]
@ -146,7 +151,7 @@
(let [window-height (:height (rn/get-window)) (let [window-height (:height (rn/get-window))
theme (quo.theme/use-theme-value) theme (quo.theme/use-theme-value)
opacity (reanimated/use-shared-value 0) opacity (reanimated/use-shared-value 0)
background-y (reanimated/use-shared-value (- window-height)) background-y (reanimated/use-shared-value (- window-height)) ; Y position of background overlay
blur-height (reanimated/use-shared-value (+ constants/composer-default-height blur-height (reanimated/use-shared-value (+ constants/composer-default-height
(:bottom insets))) (:bottom insets)))
extra-params {:insets insets extra-params {:insets insets
@ -157,10 +162,11 @@
:opacity opacity :opacity opacity
:background-y background-y :background-y background-y
:theme theme} :theme theme}
props (utils/init-props) props (utils/init-non-reactive-state)
state (utils/init-state)] state (utils/init-reactive-state)]
[rn/view (when platform/ios? {:style {:z-index 1}}) [rn/view (when platform/ios? {:style {:z-index 1}})
[reanimated/view {:style (style/background opacity background-y window-height)}] [reanimated/view {:style (style/background opacity background-y window-height)}] ; background
; overlay
[sub-view/blur-view [sub-view/blur-view
{:layout-height blur-height {:layout-height blur-height
:focused? (:focused? state) :focused? (:focused? state)

81
src/status_im2/contexts/wallet/home/view.cljs
View File

@ -57,43 +57,44 @@
(defn view (defn view
[] []
(rf/dispatch [:wallet/get-wallet-token]) (rf/dispatch [:wallet/get-wallet-token])
(fn [] (let [selected-tab (reagent/atom (:id (first tabs-data)))]
(let [accounts (rf/sub [:profile/wallet-accounts]) (fn []
top (safe-area/get-top) (let [accounts (rf/sub [:profile/wallet-accounts])
selected-tab (reagent/atom (:id (first tabs-data))) top (safe-area/get-top)
loading? (rf/sub [:wallet/tokens-loading?]) loading? (rf/sub [:wallet/tokens-loading?])
balances (rf/sub [:wallet/balances]) balances (rf/sub [:wallet/balances])
profile (rf/sub [:profile/profile]) profile (rf/sub [:profile/profile])
networks (rf/sub [:wallet/network-details])] networks (rf/sub [:wallet/network-details])]
[rn/view [rn/view
{:style {:margin-top top {:style {:margin-top top
:flex 1}} :flex 1}}
[common.top-nav/view] [common.top-nav/view]
[rn/view {:style style/overview-container} [rn/view {:style style/overview-container}
[quo/wallet-overview (temp/wallet-overview-state networks)]] [quo/wallet-overview (temp/wallet-overview-state networks)]]
[rn/pressable [rn/pressable
{:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])} {:on-long-press #(rf/dispatch [:show-bottom-sheet
[quo/wallet-graph {:time-frame :empty}]] {:content temp/wallet-temporary-navigation}])}
[rn/flat-list [quo/wallet-graph {:time-frame :empty}]]
{:style style/accounts-list [rn/flat-list
:data (account-cards {:accounts accounts {:style style/accounts-list
:loading? loading? :data (account-cards {:accounts accounts
:balances balances :loading? loading?
:profile profile}) :balances balances
:horizontal true :profile profile})
:separator [rn/view {:style {:width 12}}] :horizontal true
:render-fn quo/account-card}] :separator [rn/view {:style {:width 12}}]
[quo/tabs :render-fn quo/account-card}]
{:style style/tabs [quo/tabs
:size 32 {:style style/tabs
:default-active @selected-tab :size 32
:data tabs-data :default-active @selected-tab
:on-change #(reset! selected-tab %)}] :data tabs-data
(case @selected-tab :on-change #(reset! selected-tab %)}]
:assets [rn/flat-list (case @selected-tab
{:render-fn quo/token-value :assets [rn/flat-list
:data temp/tokens {:render-fn quo/token-value
:key :assets-list :data temp/tokens
:content-container-style {:padding-horizontal 8}}] :key :assets-list
:collectibles [collectibles/view] :content-container-style {:padding-horizontal 8}}]
[activity/view])]))) :collectibles [collectibles/view]
[activity/view])]))))