3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 13:56:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Scroll to selected font size or closest in font size selector

Browse source
This commit is contained in:
Eva 2022-02-22 17:34:51 +01:00 • committed by Andrey Antukh
parent 07e8d110a2
commit e139cba621
5 changed files with 32 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,6 +33,7 @@
(math/finite? val)))
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)
@ -109,7 +110,7 @@
(and (num? max-val) (> new-value max-val)) max-val
:else new-value)]
(set-value new-value)))))))
(set-value new-value)))))))
handle-focus
(mf/use-callback
@ -127,13 +128,23 @@
(mf/use-effect
(mf/deps value (:current-value @state))
#(when (not= value (:current-value @state))
#(when (not= (str value) (:current-value @state))
(reset! state {:current-value value})))
(mf/use-effect
(mf/deps (:is-open? @state))
(fn []
(mf/set-ref-val! emit-blur? (not (:is-open? @state)))))
(mf/with-effect [(:is-open? @state)]
(let [wrapper-node (mf/ref-val font-size-wrapper-ref)
node (dom/get-element-by-class "checked-element is-selected" wrapper-node)
nodes (dom/get-elements-by-class "checked-element-value" wrapper-node)
closest (fn [a b] (first (sort-by #(math/abs (- % b)) a)))
closest-value (str (closest options value))]
(when (:is-open? @state)
(if (some? node)
(dom/scroll-into-view-if-needed! node)
(some->> nodes
(d/seek #(= closest-value (dom/get-inner-text %)))
(dom/scroll-into-view-if-needed!)))))
(mf/set-ref-val! emit-blur? (not (:is-open? @state))))
[:div.editable-select {:class class
:ref on-node-load}
@ -151,14 +162,15 @@
[:ul.custom-select-dropdown {:style {:position "fixed"
:top (:top @state)
:left (:left @state)
:bottom (:bottom @state)}}
:bottom (:bottom @state)
:ref font-size-wrapper-ref}}
(for [[index item] (map-indexed vector options)]
(if (= :separator item)
[:hr {:key (str (:id @state) "-" index)}]
(let [[value label] (as-key-value item)]
[:li.checked-element
{:key (str (:id @state) "-" index)
:class (when (= value (-> @state :current-value)) "is-selected")
:class (when (= (str value) (-> @state :current-value)) "is-selected")
:on-click (select-item value)}
[:span.check-icon i/tick]
[:span label]])))]]]))
[:span.checked-element-value label]
[:span.check-icon i/tick]])))]]]))