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

Fix incorrect usage of functional component (#17281) 

Every keypress on an input field of the preview descriptor re-rendered the whole
functional component and the input focus was lost.

As we know from past issues, we should never use this pattern:

    (defn component
      []
      [:f>
       (fn []
         ...)])
This commit is contained in:
Icaro Motta 2023-09-13 13:22:53 -03:00 committed by GitHub
parent baa9dff237
commit dab4d953ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -229,45 +229,46 @@
style)}] style)}]
children)]) children)])
(defn- f-preview-container
(defn preview-container
[{:keys [state descriptor blur? blur-dark-only? [{:keys [state descriptor blur? blur-dark-only?
component-container-style component-container-style
blur-container-style blur-view-props blur-height show-blur-background?] blur-container-style blur-view-props blur-height show-blur-background?]
:or {blur-height 200}} :or {blur-height 200}}
& children] & children]
[:f> (rn/use-effect (fn []
(fn [] (when blur-dark-only?
(rn/use-effect (fn [] (if blur?
(when blur-dark-only? (quo.theme/set-theme :dark)
(if blur? (quo.theme/set-theme :light))))
(quo.theme/set-theme :dark) [blur? blur-dark-only?])
(quo.theme/set-theme :light)))) [rn/view
[blur? blur-dark-only?]) {:style {:top (safe-area/get-top)
[rn/view :flex 1}}
{:style {:top (safe-area/get-top) [common/navigation-bar]
:flex 1}} [rn/scroll-view
[common/navigation-bar] {:style (style/panel-basic)
[rn/scroll-view :shows-vertical-scroll-indicator false}
{:style (style/panel-basic) [rn/pressable {:on-press rn/dismiss-keyboard!}
:shows-vertical-scroll-indicator false} (when descriptor
[rn/pressable {:on-press rn/dismiss-keyboard!} [rn/view {:style style/customizer-container}
(when descriptor [customizer state descriptor]])
[rn/view {:style style/customizer-container} (if blur?
[customizer state descriptor]]) [rn/view {:style (merge style/component-container component-container-style)}
(if blur? (into [blur-view
[rn/view {:style (merge style/component-container component-container-style)} {:show-blur-background? show-blur-background?
(into [blur-view :height blur-height
{:show-blur-background? show-blur-background? :style (merge {:width "100%"
:height blur-height :flex-grow 1}
:style (merge {:width "100%" (when-not show-blur-background?
:flex-grow 1} {:padding-horizontal 0
(when-not show-blur-background? :top 0})
{:padding-horizontal 0 blur-container-style)
:top 0}) :blur-view-props (merge {:blur-type (quo.theme/get-theme)}
blur-container-style) blur-view-props)}]
:blur-view-props (merge {:blur-type (quo.theme/get-theme)} children)]
blur-view-props)}] (into [rn/view {:style (merge style/component-container component-container-style)}]
children)] children))]]])
(into [rn/view {:style (merge style/component-container component-container-style)}]
children))]]])]) (defn preview-container
[& args]
(into [:f> f-preview-container] args))