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