[refactor] Scroll the code element with a react ref

day8 · Jul 3, 2023 · 8cac127 · 8cac127
1 parent c697b34
commit 8cac127
Showing 1 changed file with 7 additions and 4 deletions.
diff --git 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