Fork me on GitHub
#rum
<
2020-06-29
>
Roman Liutikov13:06:51

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

sova-soars-the-sora13:06:46

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

sergey.shvets22:06:35

I usually just have a higher-order component for this task. https://reactjs.org/docs/higher-order-components.html, You can control what shows up with props.

sova-soars-the-sora13:07:36

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

sergey.shvets19:07:12

Not in rum, but you should grasp the idea:

(defn Header-Sider-Footer [{:keys [header footer sidebar]
                            :or   {sidebar nil}
                            :as props}
                           content]
  [:> 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"}
       sidebar])
    [:> 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]}
                              props)
   (list children)])
You create a main level components (I use Ant.design 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)
       (list
        [: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.