day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
796 stars 147 forks source link

Keyword Args to Map Script #275

Closed superstructor closed 3 years ago

superstructor commented 3 years ago

Please write a script to convert kwargs to map (hiccup-alike) syntax. Examples:

;; before
[h-box :src (at)
 :gap      "1px"
 :children [[checkbox
             :src       (at)
             :model     something2?
             :on-change #(reset! something2? %)]
            [gap :src (at) :size "50px"]
            [left-arrow]
            [gap :src (at) :size "5px"]
            [label :src (at)
             :label "no label on this one"]]]
;; after
[h-box
 {:src (at)
  :gap      "1px"}
 [checkbox
  {:src       (at)
   :model     something2?
   :on-change #(reset! something2? %)}]
 [gap {:src (at) :size "50px"}]
 [left-arrow]
 [gap {:src (at) :size "5px"}]
 [label
  {:src (at)
   :label "no label on this one"}]]
;; before
[h-split :src (at)
 :panel-2 [right-panel]
 :panel-1 [left-panel]
 :size    "300px"]

;; after
[h-split
 {:src (at)
  :size    "300px"}
 left-panel  ;; <- panel 1
 right-panel] ;; <- panel 2, order matters!
;; before
[checkbox
 :src       (at)
 :label     "tick this one, to \"disable\""
 :model     disabled?
 :on-change #(reset! disabled? %)]

;; after
[checkbox
 {:src       (at)
  :model     disabled?
  :on-change #(reset! disabled? %)}
 "tick this one, to \"disable\""] ;; <- :label
;; before
[modal-panel :src (at)
 :backdrop-color   "grey"
 :backdrop-opacity 0.4
 :style            {:font-family "Consolas"}
 :child            [:div "Hello"]]

;; after
[modal-panel
 {:src (at)
  :backdrop-color   "grey"
  :backdrop-opacity 0.4
  :style            {:font-family "Consolas"}}
 [:div "Hello"]]

Not sure about popovers yet, for now just transform all args into map. Might change to :body etc being a child.

;; before
[alert-box
 :src        (at)
 :id         1
 :alert-type :none
 :heading    "This Is An Unstyled Alert"
 :body       [:p "This is an alert body. This alert has an :alert-type of :none, and it includes a :heading, a :body and a close button. Click the x to close it."]
 :closeable? true
 :on-close   #(reset! show-alert4 false)]

;; after
[alert-box
 {:src        (at)
  :id         1
  :alert-type :none
  :heading    "This Is An Unstyled Alert"
  :closeable? true
  :on-close   #(reset! show-alert4 false)}
 [:p "This is an alert body. This alert has an :alert-type of :none, and it includes a :heading, a :body and a close button. Click the x to close it."]]
mike-thompson-day8 commented 3 years ago

Note: p and p-span can be ignored.

MawiraIke commented 3 years ago

@mike-thompson-day8 thanks. I'll factor that in.