Open 2food opened 3 months ago
Hi! I have a scene for a simple "collapsible" component, with a css transitioning max-height. But the portfolio "viewport" for the component behaves a strangely. Almost like it's resizing to the opposite of what it should do.
Screencast demo:
Screencast from 16. april 2024 kl. 13.54 +0200.webm
And here's the code (using dumdom):
(defcomponent collapsible-box "Makes a box with title and collapsible content. (must be given a max-height (in absolute units) for css-transition to work right.)" [{:keys [title content max-height component-data update-component-data]}] [:div.box [:div.level {:on-click (update-component-data #(update % :closed? not))} [:div.level-left [:h3.subtitle.is-5 title]] [:div.level-right [:span.icon (if (:closed? component-data) [:i.fas.fa-angle-up] [:i.fas.fa-angle-down])]]] (when-not (:closed? component-data) (into [:div {:style {:overflow "hidden" :max-height "0px" :transition "max-height 0.5s ease"} :mounted-style {:max-height max-height} :leaving-style {:max-height "0px"}}] content))]) (defn generic-event-handler [!state] (fn [_ actions] (doseq [action actions] (match action [:update-in path f] (swap! !state #(update-in % path f)))))) (defn render-collapsible-box [!state opts] (d/render-portfolio #'collapsible-box !state #'generic-event-handler)) (defscene collapsible-box :params (atom {:title "Title text" :content [[:p "some"] [:p "list"] [:p "of"] [:p "children"]] :max-height "10em" :update-component-data (fn [f] [[:update-in [:component-data] f]])}) render-collapsible-box)
(d/render-portfolio sets the event-handler and calls the render function on the dereffed state)
d/render-portfolio
Hi! I have a scene for a simple "collapsible" component, with a css transitioning max-height. But the portfolio "viewport" for the component behaves a strangely. Almost like it's resizing to the opposite of what it should do.
Screencast demo:
Screencast from 16. april 2024 kl. 13.54 +0200.webm
And here's the code (using dumdom):
(
d/render-portfolio
sets the event-handler and calls the render function on the dereffed state)