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

🐛 Fix layout problem for editable selects

Browse source
This commit is contained in:
alonso.torres 2021-03-29 18:27:02 +02:00 • committed by Andrey Antukh
parent cd7ad03cf0
commit 3ebc94ab8e
3 changed files with 42 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,16 +13,19 @@
[app.common.uuid :as uuid]
[app.common.data :as d]
[app.util.dom :as dom]
[app.util.timers :as timers]
[app.main.ui.icons :as i]
[app.main.ui.components.dropdown :refer [dropdown]]))
(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
(let [state (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value})
:current-value value
:top nil
:left nil
:bottom nil})
open-dropdown #(swap! state assoc :is-open? true)
close-dropdown #(swap! state assoc :is-open? false)
select-item (fn [value]
(fn [event]
(swap! state assoc :current-value value)
@ -38,7 +41,23 @@
(let [value (-> event dom/get-target dom/get-value)
value (or (d/parse-integer value) value)]
(swap! state assoc :current-value value)
(when on-change (on-change value))))]
(when on-change (on-change value))))
on-node-load
(fn [node]
;; There is a problem when changing the state in this callback that
;; produces the dropdown to close in the same event
(timers/schedule
#(when-let [bounds (when node (dom/get-bounding-rect node))]
(let [{window-height :height} (dom/get-window-size)
{:keys [left top height]} bounds
bottom (when (< (- window-height top) 300) (- window-height top))
top (when (>= (- window-height top) 300) (+ top height))]
(swap! state
assoc
:left left
:top top
:bottom bottom)))))]
(mf/use-effect
(mf/deps value)
@ -49,7 +68,8 @@
#(reset! state {:is-open? false
:current-value value}))
[:div.editable-select {:class class}
[:div.editable-select {:class class
:ref on-node-load}
[:input.input-text {:value (or (-> @state :current-value value->label) "")
:on-change handle-change-input
:placeholder placeholder
@ -58,7 +78,10 @@
[:& dropdown {:show (get @state :is-open? false)
:on-close close-dropdown}
[:ul.custom-select-dropdown
[:ul.custom-select-dropdown {:style {:position "fixed"
:top (:top @state)
:left (:left @state)
:bottom (:bottom @state)}}
(for [[index item] (map-indexed vector options)]
(cond
(= :separator item) [:hr {:key (str (:id @state) "-" index)}]