Skip to content

Instantly share code, notes, and snippets.

@ksmithbaylor
Last active May 2, 2017 17:31
Show Gist options
  • Select an option

  • Save ksmithbaylor/86c5459be2a7c84b438975487b3818f1 to your computer and use it in GitHub Desktop.

Select an option

Save ksmithbaylor/86c5459be2a7c84b438975487b3818f1 to your computer and use it in GitHub Desktop.
; src/ui/helpers/antd.clj
(ns ui.helpers.antd)
(defn- has-dots? [sym]
(not (clojure.string/blank? (re-matches #".*\..*" (str sym)))))
(defn- to-property-access [name]
(symbol (str ".-" name)))
(defmacro adapt-single [component]
`(def ~component
(r/adapt-react-class
(~(->> `~component
(str ".-")
(symbol))
js/antd))))
(defmacro adapt-nested [component]
(let [heirarchy (-> component
str
(clojure.string/split #"\."))
access-symbols (map to-property-access heirarchy)
final-name (symbol (clojure.string/join "-" heirarchy))]
`(def ~final-name
(r/adapt-react-class
(-> js/antd ~@access-symbols)))))
(defmacro antd->reagent [& components]
`(do
~@(for [component components]
(if (has-dots? component)
(macroexpand `(adapt-nested ~component))
(macroexpand `(adapt-single ~component))))))
; src/ui/views/panel.cljs
(ns ui.views.panel
(:require [reagent.core :as r]
[cljsjs.antd])
(:require-macros [ui.helpers.antd :refer [antd->reagent]]))
; Defines reagent wrappers for antd components. Equivalent to this:
; (def Collapse (r/adapt-react-class (.-Collapse js/antd)))
; (def Collapse-Panel (r/adapt-react-class (.-Panel (.-Collapse js/antd))))
(antd->reagent Collapse
Collapse.Panel)
(defonce which (r/atom "one"))
(defn panel []
[Collapse {:accordion true
:activeKey @which
:onChange #(reset! which %1)}
[Collapse-Panel {:key "one" :header "First"}
"First panel"]
[Collapse-Panel {:key "two" :header "Second"}
"Second panel"]
[Collapse-Panel {:key "three" :header "Third"}
"Third awesome panel"]]
Copy link
Copy Markdown

ghost commented May 2, 2017

sorry which language is these?

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