search

gadfly361 / soda-ash

Soda-ash is an interface between clojurescript's Reagent and Semantic UI React
MIT License
152 stars 8 forks source link

Modal #2

Closed fdabrao closed 8 years ago

fdabrao commented 8 years ago

Hello,

Do you have any idea to work with Modal? I tried something like below to test but it´s getting the error: "Uncaught Error: Invariant Violation: findComponentRoot(..., .6.0.0.2.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like<form>, <p>, or <a>, or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID ``." on click Modal Button. What I´ve missing?

(def jquery (js* "$")) 

(defn mostra-dialogo [id] 
  (let [dialogo (jquery id)] 
    (.modal dialogo "show"))) 

(defn esconde-dialogo [id] 
  (let [dialogo (jquery id)] 
    (.modal dialogo "hide"))) 

(defn dialogo [] 
  [:div {:class "ui united small modal" :id "dialogo"} 
   [:div {:class "header"} "MODAL"] 
   [:div {:class "content"} "AHAHAHAHHA"] 
   [:div {:class "actions"} 
    [:button {:class "ui blue labeled button" :id "btSair" 
              :on-click (fn [e] (js/console.log "NO !!!"))} "OK - Fechar"] 
   ]]) 

(defn home-page [] 
  [:div 
   [dialogo] 
   [:div {:class "ui primary button" :id "btAbrir" 
          :on-click (fn [e] (mostra-dialogo "#dialogo"))} "Modal"]]) 

(defn current-page [] 
  [:div [(session/get :current-page)]]) 

;; ------------------------- 
;; Routes 

(secretary/defroute "/" [] 
  (session/put! :current-page #'home-page)) 

;; ------------------------- 
;; Initialize app 

(defn mount-root [] 
  (reagent/render [current-page] (.getElementById js/document "app"))) 

(defn init! [] 
  (accountant/configure-navigation! 
    {:nav-handler 
     (fn [path] 
       (secretary/dispatch! path)) 
     :path-exists? 
     (fn [path] 
       (secretary/locate-route path))}) 
  (accountant/dispatch-current!) 
  (mount-root))

Regards

gadfly361 commented 8 years ago

Here is a minimal way to use modals with Semantic UI and reagent:

1. Create a repo

lein new reagent-figwheel mymodal

2. Add necessary dependencies to resources/public/index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>

    <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>

    <script src="js/compiled/app.js"></script>
    <script>mymodal.core.main();</script>
  </body>
</html>

3. Update src/cljs/mymodal/core.cljs to look like this.

(ns mymodal.core
    (:require
     [reagent.core :as reagent]))

(def app-state
  (reagent/atom {}))

;; This is the modal that will be displayed when you 
;; trigger the appropriate javascript found here: http://semantic-ui.com/modules/modal.html
(defn modal []
  [:div.ui.basic.modal
   [:div.header "Modal"]
   [:p "This is some content"]
   ])

(defn page [ratom]
  [:div
   [modal]

;; This button will fire the javascript to display the modal
   [:button
    {:on-click #(.modal (js/$ ".ui.basic.modal")
                        "show")}
    "Show Modal"]
   ])

(defn reload []
  (reagent/render [page app-state]
                  (.getElementById js/document "app")))

(defn ^:export main []
  (reload))

4. Start the app

lein figwheel dev

Wait a bit, then navigate to localhost:3449

If you have further questions, please ping me (@gadfly361) in the #reagent channel of clojurians slack (http://clojurians.net/)

stoeckley commented 7 years ago

That's interesting that you've shown to add a dependency on jQuery when Semantic UI's first marketing pitch is that the library is jQuery-free: https://react.semantic-ui.com/introduction

Why is jQuery needed?

gadfly361 commented 7 years ago

@astoeckley this issue is from before soda ash used semantic-ui's react components. Currently, there is no longer a dependency on jQuery.