Fork me on GitHub
Roman Liutikov13:06:51

Please report any issues with 0.12.x in the repo 🙏


Hi, do you guys have any techniques on how to make one template for pages and selectively disable/hide components?


I usually just have a higher-order component for this task., You can control what shows up with props.


Neat, could you point me to an example of using props this way? I'm not really sure what that means. I'm a react noob with just enough info to build stuff xD


Not in rum, but you should grasp the idea:

(defn Header-Sider-Footer [{:keys [header footer sidebar]
                            :or   {sidebar nil}
                            :as props}
  [:> Layout {:class-name (clj->js (concat ["pointr-layout"] (:body-class props [])))}
   [:> Header {:class-name "pointr-header"} header]
   [:> Layout {:class-name (if (some? sidebar) "pointr-body-w-sidebar" "pointr-body")}
    (when sidebar
      [:> Sider {:class-name "pointr-sidebar"
                 :theme "light"}
    [:> Content {:class-name "pointr-content"} content]]
   [:> Footer {:class-name "pointr-footer"} footer]])

(defn DefaultLayout
  "Default layout for HAF"
  [props & children]
  [Header-Sider-Footer (merge {:header [TopBar] 
                               :footer [PointrFooter]}
   (list children)])
You create a main level components (I use in this particular project and uix as a react wrapper). Things that render in those panels are passed as props in a specific component. Here is how I use it:
[DefaultLayout {:body-class ["homepage"]}
     (if-not (nil? user)
        [:h1 "Hello, Homepage!"]
        [ProjectList {:projects (:pointr.users/projects user [])
                      :navigate navigate}]
        [:> Button {:on-click on-create-project
                    :type     "primary"}
         "Create Project"])
       [:div "Loading..."])]
This just takes children and uses Default Layout from the above. DefaultLayout takes a more generic layout and passes default header/footer/etc.