antd-helpers.clj

; 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))))))

panel-view.cljs

; 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"]]

sorry which language is these?