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]))
(defn send-message
"Minimize composer, animate-out background overlay, clear input and flush state"
[{:keys [sending-images? sending-links?]}
{:keys [text-value focused? maximized?]}
{:keys [height saved-height last-height opacity background-y container-opacity]}
@ -47,6 +48,7 @@
(let [{:keys [text-value]} state
customization-color (rf/sub [:profile/customization-color])]
(rn/use-effect (fn []
;; Handle send button opacity animation and z-index when input content changes
(if (or (seq @text-value) images?)
(when (or (not= @z-index 1) (not= (reanimated/get-shared-value btn-opacity) 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]))
(defn focus
"Animate to the `saved-height`, display background-overlay if needed, and set cursor position"
[{:keys [input-ref] :as props}
{:keys [text-value focused? lock-selection? saved-cursor-position]}
{:keys [height saved-height last-height opacity background-y container-opacity]
@ -36,6 +37,7 @@
(reset! show-floating-scroll-down-button? false))
(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
maximized? recording?]}
{: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])))))
(defn content-size-change
"Save new text height, expand composer if possible, show background overlay if needed"
[event
{:keys [maximized? lock-layout? text-value]}
{:keys [height saved-height opacity background-y]}
@ -101,6 +104,7 @@
(reset! lock-layout? (> lines 2)))))
(defn scroll
"Hide or show top gradient while scroll"
[event
{:keys [scroll-y]}
{:keys [gradient-z-index focused?]}
@ -116,12 +120,10 @@
(js/setTimeout #(reset! gradient-z-index 0) 300))))
(defn change-text
"Update `text-value`, update cursor selection, find links, find mentions"
[text
{:keys [input-ref record-reset-fn]}
{:keys [text-value cursor-position recording?]}]
(debounce/debounce-and-dispatch [:link-preview/unfurl-urls text]
constants/unfurl-debounce-ms)
(reset! text-value text)
(reagent/next-tick #(when @input-ref
(.setNativeProps ^js @input-ref
@ -131,11 +133,14 @@
(@record-reset-fn)
(reset! recording? false))
(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 "@")
(rf/dispatch [:mention/on-change-text text])
(debounce/debounce-and-dispatch [:mention/on-change-text text] 300)))
(defn selection-change
"A method that handles our custom selector for `B I U`"
[event
{:keys [input-ref selection-event selection-manager]}
{: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)))))
(defn handle-emoji-kb-ios
"Opening emoji KB on iOS while maximized will cause a flicker up and down. This method handles that."
[event
{:keys [emoji-kb-extra-height]}
{:keys [text-value]}

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

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

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

@ -36,15 +36,19 @@
theme]} props state]
(let [{:keys [chat-screen-loaded?]
: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)
constants/input-height))
{: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
@(:kb-height state)
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)
animations (utils/init-animations
subscriptions
@ -59,6 +63,7 @@
:lines lines
:max-lines max-lines}
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
props
state)]
@ -146,7 +151,7 @@
(let [window-height (:height (rn/get-window))
theme (quo.theme/use-theme-value)
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
(:bottom insets)))
extra-params {:insets insets
@ -157,10 +162,11 @@
:opacity opacity
:background-y background-y
:theme theme}
props (utils/init-props)
state (utils/init-state)]
props (utils/init-non-reactive-state)
state (utils/init-reactive-state)]
[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
{:layout-height blur-height
:focused? (:focused? state)

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

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