Ant-Man

One question, is it too late to change the name?

-Scott Lang

Overview

Thin ClojureScript wrapper for Ant Design React components with Reagent

Quick link to Ant Design introduction: https://ant.design/docs/react/introduce

Documentation

• API Documents

Usage

Include Ant-Man in your project.clj

Include Ant Design CSS and JavaScript CDNs

https://cdnjs.cloudflare.com/ajax/libs/antd/${antd_version}/antd.min.css

https://cdnjs.cloudflare.com/ajax/libs/antd/${antd_version}/antd.min.js

Require and use in your project

(require '[ant-man.core :as ant-man])

;; Input field
[ant-man/input {:value @your-reagent-atom
                :id "your-id"
                :placeholder "your-placeholder"}]


;; Select input field
(def t (reagent.core/atom nil)
(def col [{:id 1 :label "uno"}
          {:id 2 :label "dos"}]

[ant-man/select {:on-change (fn [val] (reset! t val))
                 :value @t}
  (for [{:keys [label id]} col]
    [ant-man/select-option {:value id} label])]

Helper functions

Keyify-ing lists

Given a function and collection will add unique :key value to metadata information

A customizable :key-fn functionality for specifying list item :key value

Use example:

(require '[ant-man.core :as ant-man]
         '[reagent.core :as r])

(def selection (r/atom nil))
(def example-collection [{:label "foo" :id 1} {:label "bar" :id 2}])

;; Default
[ant-man/select {:on-change (fn [val] (reset! selection val))
                 :value @selection}
  (ant-man/children
    (fn [{:keys [label id]}]
      [ant-man/select-option {:value id} label])
    example-collection)]
  
;; Custom `:key-fn`
[ant-man/select {:on-change (fn [val] (reset! selection val))
                 :value @selection}
  (ant-man/children
    (fn [{:keys [label id]}]
      [ant-man/select-option {:value id} label] :key-fn (fn [x] [(inc x)]))
    example-collection)]

Development

To use in your project and develop this library simultaneously use Leiningen Checkouts along with specifying a src path inside your :cljsbuild configuration. If you are using Figwheel and it is configured correctly changes made in Ant-Man will auto re-load.

Example:

;; Specify path in your `project.clj`

:cljsbuild {:builds
            [{:id "dev"
              :source-paths ["src/cljs" "src/cljc" "checkouts/ant-man/src/cljs"]}]}

License

Copyright © 2019 Hypaer

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.