This is the parent with the state that I want one child to be able to change and that triggers the render which looks at local state and then changes
(defn section-button-view [title-and-symbol-vector owner] | |
(om/component | |
(sab/html | |
[:div {:style {:color "black" | |
:border "1px solid grey" | |
:border-radius "4px" | |
:padding "5px" | |
:margin "5px" | |
:text-align "center" | |
:font-weight "bold" | |
:background-color "lightgrey" | |
:font-size "2rem" | |
} | |
:on-click (fn [event] | |
(js/alert (str "Hello from " (first title-and-symbol-vector))) | |
(om/set-state! owner :section-visible (second title-and-symbol-vector)) | |
) | |
} | |
(first title-and-symbol-vector)]))) | |
(defn editor-sections-buttons-view [data owner ] | |
(reify | |
om/IRender | |
(render [this] | |
(sab/html | |
[:div | |
; [:h1 "Sections"] | |
[:ul | |
(om/build-all section-button-view [["Basic Info & Photos" :info] | |
["Amenities" :amenities] | |
["Campsites" :campsites] | |
["Rates" :ratess] | |
["Policies & Restrictions" :policies]] | |
)]])))) | |
(defn setup-middle [data component] | |
(reify | |
om/IInitState | |
(init-state [_] | |
{:section-visible :info}) | |
om/IRenderState | |
(render-state [_ state] | |
(sab/html | |
[:div.container | |
[:hr {:style {:margin "2rem"}} | |
[:div.row | |
[:h4.two.columns {:style {:border-style "solid" | |
:background-color "WhiteSmoke" | |
:border-width "1px" | |
:padding "20px" | |
:margin "0px"}} | |
(om/build editor-sections-buttons-view data) | |
] | |
[:h4.ten.columns | |
(let [current-section (om/get-state component :section-visible)] | |
(.log js/console "Current section is: " current-section) | |
(case (name current-section) | |
"info" (om/build basic-info-and-photos-section data) | |
"amenities" (om/build amenities-section data) | |
"default" (.log js/console "Don't have this section done yet!"))) | |
]]]])))) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment