Skip to content

Commit 6b0aa68

Browse files
mohanRepomohanRepo
committed
tab changes
1 parent ccb4404 commit 6b0aa68

File tree

6 files changed

+501
-123
lines changed

6 files changed

+501
-123
lines changed

‎reagent-bootstrap/.idea/workspace.xml

+92-45
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reagent-bootstrap/public/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,16 @@
1010
<link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" />
1111
</head>
1212
<body>
13+
<div id="app-super">
1314
<div id="app">
1415
<h3>ClojureScript has not been compiled!</h3>
1516
<p>please run <b>lein figwheel</b> in order to start the compiler</p>
1617
</div>
18+
<div id="tabcontent">
19+
20+
</div>
21+
</div>
22+
1723
<script src="js/app.js" type="text/javascript"></script>
1824
</body>
1925
</html>

‎reagent-bootstrap/src/reagent_bootstrap/core.cljs

+15-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
(:require
33
[reagent.core :as r]
44
[baking-soda.core :as b]
5-
[reagent-bootstrap.Nav.header-bar :as nav]))
5+
[reagent-bootstrap.Nav.header-bar :as nav]
6+
[reagent-bootstrap.tab.tab-content :as t]))
67

78
;; -------------------------
89
;; Views
@@ -37,6 +38,7 @@
3738
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."]
3839

3940
[b/ModalFooter
41+
4042
[b/Button {:color "primary"
4143
:on-click #(toggle! ratom)}
4244
"Do Something"]
@@ -62,8 +64,15 @@
6264
)
6365

6466
(defn page-body []
65-
[modal-example app-state {:button-label "Click Me"
66-
:class "mymodal"}]
67+
68+
[:div [modal-example app-state {:button-label "Click Me"
69+
:class "mymodal"}]
70+
[:div {:id "tabs1" :style {:height "auto" :width "auto"}}]
71+
72+
]
73+
74+
75+
6776
)
6877
(defn page[]
6978
[:div
@@ -76,7 +85,9 @@
7685

7786
(defn mount-root []
7887
(r/render [page]
79-
(.getElementById js/document "app")))
88+
(.getElementById js/document "app"))
89+
(t/tab-content)
90+
)
8091

8192
(defn mount-root-1 []
8293
(r/render [modal-example app-state {:button-label "Click Me"

‎reagent-bootstrap/src/reagent_bootstrap/tab/dynamic_tab.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
(ns reagent-bootstrap.tab.dynamic-tab)

‎reagent-bootstrap/src/reagent_bootstrap/tab/tab_content.cljs

+84
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,87 @@
33
[reagent.core :as r]
44
[baking-soda.core :as b]
55
[js.goldenlayout]))
6+
7+
8+
(def config {:content [{:type "row", :content [{:title "Users", :type "react-component", :component "user-list"}, {:title "User Detail", :type "react-component", :component "user-detail"}]}]})
9+
(def config-js (clj->js config))
10+
11+
(def user-layout (new js/GoldenLayout config-js "#tabs1"))
12+
13+
(def current-atom-user (r/atom {}))
14+
15+
(def UserDetail (r/create-class
16+
{:component-will-mount (fn [this]
17+
(let [gl-ev (.. this -props -glEventHub)]
18+
(.on gl-ev "user-select" (.-setUser this))))
19+
:component-will-unmount (fn [this]
20+
(let [gl-ev (.. this -props -glEventHub)]
21+
(.off gl-ev "user-select" (.-setUser this))))
22+
23+
:setUser (fn [ud]
24+
(println ud)
25+
(reset! current-atom-user ud)
26+
)
27+
28+
:render (fn [this]
29+
(let [user @current-atom-user
30+
imgUrl (str "https://s3-us-west-2.amazonaws.com/s.cdpn.io/152047/" (.-img user))]
31+
[:div.userdetails
32+
[:img {:src imgUrl :width 100 :height 100}]
33+
[:h2 (.-name user)]
34+
[:p (.-street user)]
35+
]
36+
)
37+
)
38+
39+
}))
40+
41+
(def UserList (r/create-class
42+
{
43+
:store (r/atom {})
44+
45+
:get-initial-state (fn [this]
46+
47+
(reset! (.. this -store) {:users [
48+
{:name "11Jackson Turner", :street "217 Tawny End", :img "men_1.jpg"}
49+
{:name "Megan Perry", :street "77 Burning Ramp", :img "women_1.jpg"}
50+
{:name "Ryan Harris", :street "12 Hazy Apple Route", :img "men_2.jpg"}
51+
{:name "Jennifer Edwards", :street "33 Maple Drive", :img "women_2.jpg"},
52+
{:name "Noah Jenkins", :street "423 Indian Pond Cape", :img "men_3.jpg"}
53+
]})
54+
55+
@(.. this -store)
56+
)
57+
58+
:selectUser (fn [this user]
59+
(println user)
60+
(.emit (.. this -props -glEventHub) "user-select" (clj->js user))
61+
)
62+
:render
63+
(fn [this]
64+
[:ul (for [user (:users (.-state this))]
65+
^{:key (:name user)} [:li {:style {:color "red"} :onClick #(.selectUser this this user)} (:name user)]
66+
)
67+
68+
])
69+
}))
70+
71+
(defn tab-content []
72+
(.registerComponent user-layout "user-list" UserList)
73+
(.registerComponent user-layout "user-detail" UserDetail)
74+
(.init user-layout)
75+
)
76+
77+
(defn render-tab-content []
78+
(r/render [tab-content] (.getElementById js/document "tabs-1"))
79+
)
80+
81+
82+
83+
84+
85+
;; -------------------------
86+
;; Initialize app
87+
88+
;;(defn mount-root []
89+
;; (r/render [home-page] (.getElementById js/document "app")))

0 commit comments

Comments
 (0)