From 8cac1274fc1c383e9ba026221a390fca0ae0e693 Mon Sep 17 00:00:00 2001 From: Kimo Knowles Date: Mon, 3 Jul 2023 12:43:17 +0200 Subject: [PATCH] [refactor] Scroll the code element with a react ref --- src/day8/re_frame_10x/panels/event/views.cljs | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/day8/re_frame_10x/panels/event/views.cljs b/src/day8/re_frame_10x/panels/event/views.cljs index 377bae4e..c500ae1b 100644 --- a/src/day8/re_frame_10x/panels/event/views.cljs +++ b/src/day8/re_frame_10x/panels/event/views.cljs @@ -2,6 +2,7 @@ (:require-macros [day8.re-frame-10x.components.re-com :refer [handler-fn]]) (:require + ["react" :as react] [clojure.string :as string] [goog.string :as gstring] [re-highlight.core :as re-highlight] @@ -121,20 +122,21 @@ (defn code [] - (let [scroll-pos (atom {:top 0 :left 0})] + (let [scroll-pos (atom {:top 0 :left 0}) + ref (react/createRef)] (r/create-class {:display-name "code" :get-snapshot-before-update (fn code-get-snapshot-before-update [this _ _] - (let [node (rdom/dom-node this)] + (let [node (.-current ref)] (reset! scroll-pos {:top (.-scrollTop node) :left (.-scrollLeft node)}))) :component-did-update (fn code-component-did-update [this] - (let [node (rdom/dom-node this)] + (let [node (.-current ref)] (set! (.-scrollTop node) (:top @scroll-pos)) (set! (.-scrollLeft node) (:left @scroll-pos)))) @@ -162,7 +164,8 @@ (if (re-highlight/hljs-compatible?) [rc/box :class (code-style ambiance syntax-color-scheme show-all-code?) - :attr {:on-double-click (handler-fn (rf/dispatch [::event.events/set-show-all-code? (not show-all-code?)]))} + :attr {:ref ref + :on-double-click (handler-fn (rf/dispatch [::event.events/set-show-all-code? (not show-all-code?)]))} :child (if (some? highlighted-form) [#_re-highlight/highlight :span {:language "clojure"} (list ^{:key "before"} before