Ant-Man

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

-Scott Lang

Overview

Thin wrapper for Ant Design React components with Reagent

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

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 type (reagent.core/atom nil)
(def types [{:id 1 :label "uno"}
            {:id 2 :label "dos"}]

[ant-man/select {:on-change (fn [val] (reset! type val))
                 :value @type
                 :style {:width "100%"}}
  (for [{:keys [label id]} types]
    [ant-man/select-option {:value id} label])]

Helper functions

Child Enumeration

To enumerate over child elements with auto-key association use the children function located in core

(: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}])

[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)]

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

License

Copyright © 2019 Hypaer

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