Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-select using reagent and klipse
(ns zap.core
"Demonstrate react-select in KLIPSE"
(:require [reagent.core :as r]
[cljsjs.classnames]
[cljsjs.react-input-autosize]
[cljsjs.react-select]))
(defonce value (r/atom nil))
(defn select-ui []
[:> js/window.Select {:value @value
:options #js [#js {:value "a" :label "alpha"}
#js {:value "b" :label "beta"}
#js {:value "c" :label "gamma"}]
:onChange #(reset! value (aget % "value"))}])
(defn root-ui []
[:div {:style {:width 400}}
[:h3 "Select test"]
[select-ui]])
;; the purpose of the rest is just to load the css
;; in KLIPSE
(defn load-many [cb x & rst]
(let [cntn (fn [] (if (seq rst)
(apply load-many cb rst)
(cb)))]
(if (.endsWith x ".css")
(let [head (aget (js/document.getElementsByTagName "head") 0)
node (doto (js/document.createElement "link")
(aset "type" "text/css")
(aset "rel" "stylesheet")
(aset "href" x)
(aset "onload" (fn []
(js/console.log "loaded css:" x)
(cntn))))]
(.append head node))
(goog.net.XhrIo.send x
(fn [e]
(js/eval (-> e .-target .getResponseText))
(js/console.log "loaded js:" x)
(cntn))))))
(defn unpkg-many [cb & xs]
(apply load-many cb (map #(str "https://unpkg.com/" %) xs)))
(defonce initialized? (atom nil))
(defn init [cb]
(let [cb (or cb identity)]
(if @initialized?
(cb)
(unpkg-many (fn []
(reset! initialized? true
(cb)))
"react-select/dist/react-select.css"))))
(init #(r/render [root-ui] js/klipse-container))
@pesterhazy
Copy link
Author

pesterhazy commented Mar 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment