gadfly361
commented
8 years ago Hey!
So shape has both classes and javascript. I plan to eventually have full coverage of Semantic UI's classes. However, I am still deciding how to handle the javascript portion. I see two options: 1) write wrappers for the javascript in a reagenty way (i.e., likely no reason to select by class, and can use reagent's dom-node instead), or 2) show devcard examples for all of the components and their variations. I am leaning toward option 2.
What could be a helpful PR is making a devcard showing how to go about this (at least the javascript part) for shape. That exercise could also help inform which option makes the most sense.
Oh, I should note, there was some discussion on slack about how to wrap the javascript portions of Semantic UI (log1 and log2). Here is an example by @jaen
(defn dropdown [{:keys [value] :as options} choices]
(reagent/create-class
{:component-did-mount
(fn [component]
(let [dom-node (reagent/dom-node component)]
(.dropdown (js/$ dom-node) #js {:match "text"
:onChange (fn [new-value]
(reset! value new-value))})))
:component-did-update
(fn [component]
(let [dom-node (reagent/dom-node component)]
(.dropdown (js/$ dom-node) "set selected" @value)
(.dropdown (js/$ dom-node) "refresh")))
:reagent-render
(fn [{:keys [value] :as options} _]
(let [value @value]
[:div.ui.fluid.search.selection.dropdown
[:input {:type "hidden" :name "choice" :value value}]
[:i.dropdown.icon]
[:div.default.text "Select choice"]
[:div.menu
(doall (for [{:keys [value text]} choices]
(conj
^{:key (str "choice-" value)}
[:div.item {:data-value value}]
text)))]]))}))which is a rewrite from Semantic UI's docs on managing lifecycle with React
Conaws
Any plans to implement shape?
http://codepen.io/Siyanda/pen/Xmmzbe
Or tips on how you would want a pull request for this to look?