3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Update to React 18

Browse source
This commit is contained in:
Aitor 2023-08-16 14:09:53 +02:00 • committed by Andrey Antukh
parent 5ea9a52e69
commit 4b8ee8ef84
30 changed files with 396 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/app/main/ui/components/dropdown_menu.cljs
View file

@ -97,21 +97,17 @@
(dom/focus! (dom/get-element next-id))))
(when (kbd/tab? event)
(on-close))))
(on-close))))]
on-mount
(fn []
(let [keys [(events/listen globals/document EventType.CLICK on-click)
(events/listen globals/document EventType.CONTEXTMENU on-click)
(events/listen globals/document EventType.KEYUP on-keyup)
(events/listen globals/document EventType.KEYDOWN on-key-down)]]
#(doseq [key keys]
(events/unlistenByKey key))))]
(mf/with-effect []
(let [keys [(events/listen globals/document EventType.CLICK on-click)
(events/listen globals/document EventType.CONTEXTMENU on-click)
(events/listen globals/document EventType.KEYUP on-keyup)
(events/listen globals/document EventType.KEYDOWN on-key-down)]]
#(doseq [key keys]
(events/unlistenByKey key))))
(mf/use-effect on-mount)
[:ul {:class list-class
:role "menu"}
children]))
[:ul {:class list-class :role "menu"} children]))
(mf/defc dropdown-menu
{::mf/wrap-props false}

10
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -32,8 +32,14 @@
emit-blur? (mf/use-ref nil)
font-size-wrapper-ref (mf/use-ref)
open-dropdown #(swap! state assoc :is-open? true)
close-dropdown #(swap! state assoc :is-open? false)
open-dropdown
(fn [event]
(dom/stop-propagation event)
(swap! state assoc :is-open? true))
close-dropdown
(fn [event]
(dom/stop-propagation event)
(swap! state assoc :is-open? false))
select-item (fn [value]
(fn [_]
(swap! state assoc :current-value value)

20
frontend/src/app/main/ui/components/select.cljs
View file

@ -39,8 +39,15 @@
current-label (get label-index current-value)
is-open? (:is-open? state)
open-dropdown (mf/use-fn #(swap! state* assoc :is-open? true))
close-dropdown (mf/use-fn #(swap! state* assoc :is-open? false))
open-dropdown (mf/use-fn
(fn [event]
(dom/stop-propagation event)
(swap! state* assoc :is-open? true)))
close-dropdown (mf/use-fn
(fn [event]
(dom/stop-propagation event)
(swap! state* assoc :is-open? false)))
select-item
(mf/use-fn
@ -77,8 +84,9 @@
(mf/with-effect [default-value]
(swap! state* assoc :current-value default-value))
(if new-css-system
[:div {:on-click open-dropdown :class (dom/classnames (css class) true
(css :custom-select) true)}
[:div {:on-click open-dropdown
:class (dom/classnames (css class) true
(css :custom-select) true)}
[:span {:class (css :current-label)} current-label]
[:span {:class (css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
@ -98,8 +106,8 @@
:on-click select-item}
[:span {:class (css :label)} label]
[:span {:class (css :check-icon)} i/tick-refactor]])))]]]
[:div.custom-select {:on-click open-dropdown :class class}
[:span current-label]