mirror of
https://github.com/penpot/penpot.git
synced 2025-05-18 20:36:10 +02:00
🔥 changes to effects
This commit is contained in:
parent
57d633b1d2
commit
decd3e3443
3 changed files with 19 additions and 18 deletions
|
@ -107,6 +107,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.library-tab-libraries {
|
.library-tab-libraries {
|
||||||
|
background-color: #303236;
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
|
|
||||||
(mf/defc tab-container
|
(mf/defc tab-container
|
||||||
[{:keys [children selected on-change-tab]}]
|
[{:keys [children selected on-change-tab]}]
|
||||||
(.log js/console (map #(-> % .-props .-title) children))
|
|
||||||
(let [first-id (-> children first .-props .-id)
|
(let [first-id (-> children first .-props .-id)
|
||||||
state (mf/use-state {:selected first-id})
|
state (mf/use-state {:selected first-id})
|
||||||
selected (or selected (:selected @state))
|
selected (or selected (:selected @state))
|
||||||
|
@ -20,7 +19,8 @@
|
||||||
[:div.tab-container-tabs
|
[:div.tab-container-tabs
|
||||||
(for [tab children]
|
(for [tab children]
|
||||||
[:div.tab-container-tab-title
|
[:div.tab-container-tab-title
|
||||||
{:on-click (partial handle-select tab)
|
{:key (str "tab-" (-> tab .-props .-id))
|
||||||
|
:on-click (partial handle-select tab)
|
||||||
:class (when (= selected (-> tab .-props .-id)) "current")}
|
:class (when (= selected (-> tab .-props .-id)) "current")}
|
||||||
(-> tab .-props .-title)])]
|
(-> tab .-props .-title)])]
|
||||||
[:div.tab-container-content
|
[:div.tab-container-content
|
||||||
|
|
|
@ -41,9 +41,8 @@
|
||||||
(mf/defc icons-tab [{:keys [libraries]}]
|
(mf/defc icons-tab [{:keys [libraries]}]
|
||||||
(when (and libraries (-> libraries count (> 0)))
|
(when (and libraries (-> libraries count (> 0)))
|
||||||
(let [state (mf/use-state {:selected-library (-> libraries first :id)})]
|
(let [state (mf/use-state {:selected-library (-> libraries first :id)})]
|
||||||
(mf/use-effect {:fn (fn []
|
(mf/use-effect (mf/deps (:selected-library @state))
|
||||||
(st/emit! (dlib/retrieve-library-data :icons (:selected-library @state))))
|
#(st/emit! (dlib/retrieve-library-data :icons (:selected-library @state))))
|
||||||
:deps (mf/deps (:selected-library @state))})
|
|
||||||
|
|
||||||
[:div.library-tab.icons-tab
|
[:div.library-tab.icons-tab
|
||||||
[:select.input-select.library-tab-libraries
|
[:select.input-select.library-tab-libraries
|
||||||
|
@ -67,9 +66,8 @@
|
||||||
(mf/defc images-tab [{:keys [libraries]}]
|
(mf/defc images-tab [{:keys [libraries]}]
|
||||||
(when (and libraries (-> libraries count (> 0)))
|
(when (and libraries (-> libraries count (> 0)))
|
||||||
(let [state (mf/use-state {:selected-library (-> libraries first :id)})]
|
(let [state (mf/use-state {:selected-library (-> libraries first :id)})]
|
||||||
(mf/use-effect {:fn (fn []
|
(mf/use-effect (mf/deps (:selected-library @state))
|
||||||
(st/emit! (dlib/retrieve-library-data :images (:selected-library @state))))
|
#(st/emit! (dlib/retrieve-library-data :images (:selected-library @state))))
|
||||||
:deps (mf/deps (:selected-library @state))})
|
|
||||||
|
|
||||||
[:div.library-tab.images-tab
|
[:div.library-tab.images-tab
|
||||||
[:select.input-select.library-tab-libraries
|
[:select.input-select.library-tab-libraries
|
||||||
|
@ -91,16 +89,17 @@
|
||||||
[{:keys [key]}]
|
[{:keys [key]}]
|
||||||
(let [team-id (-> project-ref mf/deref :team-id)
|
(let [team-id (-> project-ref mf/deref :team-id)
|
||||||
locale (i18n/use-locale)]
|
locale (i18n/use-locale)]
|
||||||
(mf/use-effect {:fn (fn []
|
(mf/use-effect
|
||||||
|
(mf/deps key)
|
||||||
|
#(do
|
||||||
(st/emit! (dlib/retrieve-libraries :icons))
|
(st/emit! (dlib/retrieve-libraries :icons))
|
||||||
(st/emit! (dlib/retrieve-libraries :images)))
|
(st/emit! (dlib/retrieve-libraries :images))))
|
||||||
:deps (mf/deps key)})
|
(mf/use-effect
|
||||||
(mf/use-effect {:fn (fn []
|
(mf/deps team-id)
|
||||||
(when team-id
|
#(when team-id
|
||||||
(do
|
(do
|
||||||
(st/emit! (dlib/retrieve-libraries :icons team-id))
|
(st/emit! (dlib/retrieve-libraries :icons team-id))
|
||||||
(st/emit! (dlib/retrieve-libraries :images team-id)))))
|
(st/emit! (dlib/retrieve-libraries :images team-id)))))
|
||||||
:deps (mf/deps team-id)})
|
|
||||||
[:div#libraries.tool-window
|
[:div#libraries.tool-window
|
||||||
[:div.libraries-window-bar
|
[:div.libraries-window-bar
|
||||||
[:div.libraries-window-bar-title "Libraries"]
|
[:div.libraries-window-bar-title "Libraries"]
|
||||||
|
@ -118,3 +117,4 @@
|
||||||
{:id :images :title "Images"}
|
{:id :images :title "Images"}
|
||||||
[:& images-tab {:libraries (-> (libraries-ref :images) mf/deref vals flatten)}]]]]]))
|
[:& images-tab {:libraries (-> (libraries-ref :images) mf/deref vals flatten)}]]]]]))
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue