-
Notifications
You must be signed in to change notification settings - Fork 992
/
Copy pathview.cljs
177 lines (175 loc) · 9.26 KB
/
view.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
(ns status-im2.contexts.chat.composer.view
(:require
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[react-native.hooks :as hooks]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[status-im2.contexts.chat.composer.actions.view :as actions]
[status-im2.contexts.chat.composer.constants :as constants]
[status-im2.contexts.chat.composer.edit.view :as edit]
[status-im2.contexts.chat.composer.effects :as effects]
[status-im2.contexts.chat.composer.gesture :as drag-gesture]
[status-im2.contexts.chat.composer.gradients.view :as gradients]
[status-im2.contexts.chat.composer.handlers :as handler]
[status-im2.contexts.chat.composer.images.view :as images]
[status-im2.contexts.chat.composer.link-preview.view :as link-preview]
[status-im2.contexts.chat.composer.mentions.view :as mentions]
[status-im2.contexts.chat.composer.reply.view :as reply]
[status-im2.contexts.chat.composer.selection :as selection]
[status-im2.contexts.chat.composer.style :as style]
[status-im2.contexts.chat.composer.sub-view :as sub-view]
[status-im2.contexts.chat.composer.utils :as utils]
[utils.i18n :as i18n]))
(defn sheet-component
[{:keys [insets
scroll-to-bottom-fn
show-floating-scroll-down-button?
window-height
blur-height
opacity
background-y
theme]} props state]
(let [{:keys [chat-screen-loaded?]
:as subscriptions} (utils/init-subs)
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 allowed height for the
; composer view
window-height
@(:kb-height state)
insets)
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
lines
content-height
max-height
opacity
background-y)
dimensions {:content-height content-height
:max-height max-height
:window-height window-height
: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)]
(effects/did-mount props)
(effects/initialize props
state
animations
dimensions
subscriptions)
(effects/use-edit props state subscriptions)
(effects/use-reply props animations subscriptions)
(effects/update-input-mention props state subscriptions)
(effects/edit-mentions props state subscriptions)
(effects/link-previews props state animations subscriptions)
(effects/use-images props state animations subscriptions)
[:<>
(when chat-screen-loaded?
[mentions/view props state animations max-height cursor-pos
(:images subscriptions)
(:link-previews? subscriptions)
(:reply subscriptions)
(:edit subscriptions)])
[rn/view
{:style style/composer-sheet-and-jump-to-container}
[sub-view/shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?]
[gesture/gesture-detector
{:gesture
(drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
[reanimated/view
{:style (style/sheet-container insets state animations theme)
:on-layout #(handler/layout % state blur-height)}
[sub-view/bar]
(when chat-screen-loaded?
[:<>
[reply/view state]
[edit/view
{:text-value (:text-value state)
:input-ref (:input-ref props)}]])
[reanimated/touchable-opacity
{:active-opacity 1
:on-press (fn []
(when-let [ref @(:input-ref props)]
(.focus ^js ref)))
:style (style/input-container (:height animations) max-height)
:accessibility-label :message-input-container}
[rn/selectable-text-input
{:ref #(reset! (:selectable-input-ref props) %)
:menu-items @(:menu-items state)
:style (style/input-view state)}
[rn/text-input
{:ref #(reset! (:input-ref props) %)
:default-value @(:text-value state)
:on-focus
#(handler/focus props state animations dimensions show-floating-scroll-down-button?)
:on-blur #(handler/blur state animations dimensions subscriptions)
:on-content-size-change #(handler/content-size-change %
state
animations
dimensions
(or keyboard-shown
(:edit subscriptions)))
:on-scroll #(handler/scroll % props state animations dimensions)
:on-change-text #(handler/change-text % props state)
:on-selection-change #(handler/selection-change % props state)
:on-selection #(selection/on-selection % props state)
:keyboard-appearance (quo.theme/theme-value :light :dark)
:max-font-size-multiplier 1
:multiline true
:placeholder (i18n/label :t/type-something)
:placeholder-text-color (colors/theme-colors colors/neutral-30 colors/neutral-50)
:style (style/input-text props
state
{:max-height max-height
:theme theme})
:max-length constants/max-text-size
:accessibility-label :chat-message-input}]]]
(when chat-screen-loaded?
[:<>
[gradients/view props state animations show-bottom-gradient?]
[link-preview/view]
[images/images-list]])
[:f> actions/view props state animations window-height insets scroll-to-bottom-fn
subscriptions]]]]]))
(defn composer
[{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}]
(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)) ; Y position of background
; overlay
blur-height (reanimated/use-shared-value (+ constants/composer-default-height
(:bottom insets)))
extra-params {:insets insets
:window-height window-height
:scroll-to-bottom-fn scroll-to-bottom-fn
:show-floating-scroll-down-button? show-floating-scroll-down-button?
:blur-height blur-height
:opacity opacity
:background-y background-y
:theme theme}
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)}] ; background
; overlay
[sub-view/blur-view
{:layout-height blur-height
:focused? (:focused? state)
:theme theme}]
[:f> sheet-component extra-params props state]]))