Commit ca3205a2 authored by Bruno Burke's avatar Bruno Burke 😁

add node-type :dropdown for select-component

parent ed06d0ca
Pipeline #45313 passed with stages
in 2 minutes and 6 seconds
(ns lernmeister.components.bulma.select
(:require [reagent.core :as reagent]
[lernmeister.components.bulma.form.control :refer [control]]))
[lernmeister.components.bulma.common
:as common]
[lernmeister.components.bulma.form.control
:refer [control]]))
(defn get-key [option]
(or (:key option) (first option)))
(defn get-title [option]
(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]))))
]
]]
)))
(defn native-select [params]
(fn [{:keys [value on-change options label disabled multiple
choose-option-label icons expanded?] :as params}]
(reagent/with-let [id (gensym "select")]
[:select
{:id id
:disabled disabled
:multiple multiple
:value (if multiple
(or value [])
(or value ""))
:on-change (fn [event]
(js/console.log multiple)
(let [value (-> event
.-target
.-value)]
(when on-change
(on-change
(if multiple
(set (map (fn [o]
(keyword (.-value o)))
(-> event
.-target
.-selectedOptions
array-seq)))
(keyword value))))))}
[:option {:value ""
:disabled true}
(or choose-option-label "Bitte wählen")]
(when options
(doall
(for [o options]
(let [key (or (:key o) (first o))
title (or (:title o) (:label o) (second o))]
[:option {:value (name key)
:key (str id "-" key)}
title]))))]
)
))
(defn select
[{:keys [value on-change options label multiple icons
expanded? choose-option-label]}]
expanded? choose-option-label node-type]}]
(let [id (gensym "select")
instance (reagent/atom nil)
change-fn (reagent/atom on-change)]
......@@ -13,7 +107,7 @@
{:display-name "input-select-component"
:reagent-render
(fn [{:keys [value on-change options label disabled multiple
choose-option-label icons expanded?]}]
choose-option-label icons expanded? node-type] :as params}]
[:<>
[control {:icons icons
:expanded? expanded?}
......@@ -23,40 +117,10 @@
" is-multiple")
(when expanded?
" is-fullwidth"))
}
[:select
{:id id
:disabled disabled
:multiple multiple
:value (if multiple
(or value [])
(or value ""))
:on-change (fn [event]
(js/console.log multiple)
(let [value (-> event
.-target
.-value)]
(when on-change
(on-change
(if multiple
(set (map (fn [o]
(keyword (.-value o)))
(-> event
.-target
.-selectedOptions
array-seq)))
(keyword value))))))}
[:option {:value ""
:disabled true}
(or choose-option-label "Bitte wählen")]
(when options
(doall
(for [o options]
(let [key (or (:key o) (first o))
title (or (:title o) (:label o) (second o))]
[:option {:value (name key)
:key (str id "-" key)}
title]))))]]]])})))
}
(case node-type
:dropdown [dropdown-select params]
[native-select params])]]])})))
(defn select*
[{:keys [cursor options label multiple
......@@ -70,13 +134,14 @@
:reagent-render
(fn [{:keys [cursor options label multiple
choose-option-label on-change
expanded?]}]
expanded? node-type]}]
[select
{:value @cursor
:options options
:label label
:multiple multiple
:expanded? expanded?
:node-type node-type
:choose-option-label choose-option-label
:on-change (fn [value]
(reset! cursor value)
......
......@@ -158,7 +158,8 @@
(for [line lines]
[:p {:key (hash line)} line]))]])
(when exercise-types
[ui/field {:expanded? true}
[ui/field {:expanded? true
:label "Aufgabentyp"}
[ui/select*
{:expanded? true
:cursor (reagent/cursor exercise [:core :type])
......
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