Commit 91d92262 authored by Bruno Burke's avatar Bruno Burke 😁

dropdown with fixed position

parent a0bc95ea
Pipeline #45463 passed with stages
in 1 minute and 50 seconds
(ns lernmeister.components.bulma.select
(:require [reagent.core :as reagent]
[reagent.dom :as rdom]
[lernmeister.components.bulma.common
:as common]
[lernmeister.components.bulma.form.control
......@@ -12,50 +13,70 @@
(or (:title option) (:label option) (second option)))
(defn dropdown-select [params]
(fn [{:keys [value on-change options label multiple icons
expanded? choose-option-label]}]
(reagent/with-let [active? (reagent/atom nil)
id (gensym "select")]
[:div.dropdown {:class (str (when @active?
" is-active"))
:style (when expanded?
{:width "100%"})
}
(let [selected-option (some
#(when (= value
(keyword (get-key %)))
%)
options)]
[:div.dropdown-trigger
{:on-blur #(reset! active? false)
:style (when expanded?
{:width "100%"})}
[:button.button
{:style (when expanded?
{:width "100%"
:justify-content :left})
:on-click #(swap! active? not)}
[:span (or (get-title selected-option) choose-option-label "Bitte wählen")]
[common/icon {:style :solid
;;:id :fa-angle-down
:class "is-small"}]
]
])
[:div.dropdown-menu
[:div.dropdown-content
(when options
(doall
(for [o options]
(let [key (get-key o)
title (get-title o)]
[:a.dropdown-item
{:key (str id "-" key)
:on-mouse-down #(on-change (keyword key))}
title]))))
]
]]
)))
(let [active? (reagent/atom nil)
id (gensym "select")
close-fn (fn [_]
(reset! active? nil))]
(reagent/create-class
{:component-did-update
(fn [this]
(if @active?
(let [node (rdom/dom-node this)
dropdown-content (js/document.querySelector
(str "#" id " .dropdown-content"))
node-rect (nth (array-seq (.getClientRects node)) 0)
node-bottom-line (+ (.-top node-rect)
(.-height node-rect))]
;;;TODO use dropup instead of dropdown when there is no space under dropdown-trigger
(.addEventListener js/window "scroll" close-fn)
(set! (.-top (.-style dropdown-content))
(str node-bottom-line "px")))
(.removeEventListener js/window "scroll" close-fn)))
:reagent-render
(fn [{:keys [value on-change options label multiple icons
expanded? choose-option-label]}]
[:div.dropdown {:id (str id)
:class (str (when @active?
" is-active"))
:style (when expanded?
{:width "100%"})}
(let [selected-option (some
#(when (= value
(keyword (get-key %)))
%)
options)]
[:div.dropdown-trigger
{:on-blur #(reset! active? false)
:style (when expanded?
{:width "100%"})}
[:button.button
{:style (when expanded?
{:width "100%"
:justify-content :left})
:on-click #(swap! active? not)}
[:span (or (get-title selected-option) choose-option-label "Bitte wählen")]
[common/icon {:style :solid
;;:id :fa-angle-down
:class "is-small"}]
]
])
[:div.dropdown-menu
[:div.dropdown-content {:style {:position :fixed
:top "2rem"
:z-index "9999"
}}
(when options
(doall
(for [o options]
(let [key (get-key o)
title (get-title o)]
[:a.dropdown-item
{:key (str id "-" key)
:on-mouse-down #(on-change (keyword key))}
title]))))
]
]]
)})))
(defn native-select [params]
(fn [{:keys [value on-change options label disabled multiple
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment