chore: refactor code snippet component

src/quo2/components/code/common/style.cljs

@@ -1,7 +1,6 @@
 (ns quo2.components.code.common.style
   (:require [quo2.foundations.colors :as colors]))
 
-
 ;; Example themes:
 ;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
 (defn theme

src/quo2/components/code/common/view.cljs

@@ -104,7 +104,7 @@
            :on-press   on-copy-press}
           :main-icons/copy]]])]))
 
-(defn snippet
+(defn view
   [{:keys [language max-lines on-copy-press preview?]} children]
   [highlighter/highlighter
    {:language          language

src/quo2/components/code/snippet/view.cljs

@@ -0,0 +1,15 @@
+(ns quo2.components.code.snippet.view
+  (:require [quo2.theme :as theme]
+            [quo2.components.code.common.view :as code-common]))
+
+(defn- view-internal
+  [_]
+  (fn [{:keys [language max-lines on-copy-press]} children]
+    [code-common/view
+     {:language      language
+      :max-lines     max-lines
+      :on-copy-press on-copy-press
+      :preview?      false}
+     children]))
+
+(def view (theme/with-theme view-internal))

src/quo2/components/code/snippet_preview/view.cljs

@@ -1,86 +1,10 @@
 (ns quo2.components.code.snippet-preview.view
-  (:require [react-native.core :as rn]
-            [react-native.syntax-highlighter :as highlighter]
-            [reagent.core :as reagent]
-            [cljs-bean.core :as bean]
-            [quo2.components.code.snippet-preview.style :as style]
-            [quo2.theme :as theme]
-            [quo2.components.markdown.text :as text]
-            [clojure.string :as string]))
-
-(defn- render-nodes
-  [nodes]
-  (map (fn [{:keys [children value last-line?] :as node}]
-         (println last-line? value)
-         (if children
-           (into [text/text
-                  (cond-> {:weight :code
-                           :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]))}
-                    last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children))
-           ;; Remove newlines as we already render each line separately.
-           (string/trim-newline value)))
-       nodes))
-
-(defn- line
-  [{:keys [line-number line-number-width]} children]
-  [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width)}
-    [text/text
-     {:style  (style/text-style ["line-number"])
-      :weight :code
-      :size   :paragraph-2}
-     line-number]]
-   [rn/view
-    {:style {:flex               1
-             :padding-horizontal 8
-             :padding-vertical   3}}
-    children]])
-
-(defn- code-block
-  [{:keys [rows line-number-width]}]
-  [rn/view
-   (->> rows
-        (render-nodes)
-        (map-indexed (fn [idx row-content]
-                       [line
-                        {:line-number       (inc idx)
-                         :line-number-width line-number-width}
-                        row-content]))
-        (into [:<>]))])
-
-(defn- f-native-renderer
-  [{:keys [rows max-lines theme]
-    :or   {max-lines ##Inf}}]
-  (let [total-rows          (count rows)
-        number-rows-to-show (min (count rows) max-lines)
-        truncated?          (< number-rows-to-show total-rows)
-        rows-to-show-coll   (if truncated?
-                              (as-> rows $
-                                (update $ number-rows-to-show assoc :last-line? true)
-                                (take (inc number-rows-to-show) $))
-                              rows)]
-    [rn/view {:style (style/container theme)}
-     [rn/view {:style (style/line-number-container theme)}]
-     [code-block
-      {:rows              rows-to-show-coll
-       :line-number-width 20}]]))
-
-(defn- view-internal
-  [_]
-  (fn [{:keys [language theme]} children]
-    [highlighter/highlighter
-     {:language          language
-      :renderer          (fn [^js/Object props]
-                           (reagent/as-element
-                            [:f> f-native-renderer
-                             {:rows      (-> props .-rows bean/->clj)
-                              :max-lines 0
-                              :theme     theme}]))
-      :show-line-numbers false
-      :style             {}
-      :custom-style      {:background-color nil}}
-     children]))
-
-(def view (theme/with-theme view-internal))
+  (:require [quo2.components.code.common.view :as code-common]))
+
+(defn view
+  [{:keys [language]} children]
+  [code-common/view
+   {:preview?  true
+    :language  language
+    :max-lines 0}
+   children])

src/quo2/core.cljs

@@ -19,7 +19,7 @@
     quo2.components.calendar.calendar.view
     quo2.components.calendar.calendar-day.view
     quo2.components.calendar.calendar-year.view
-    quo2.components.code.snippet
+    quo2.components.code.snippet.view
     quo2.components.code.snippet-preview.view
     quo2.components.colors.color-picker.view
     quo2.components.common.notification-dot.view
@@ -165,7 +165,7 @@
 (def calendar-year quo2.components.calendar.calendar-year.view/view)
 
 ;;;; Code
-(def snippet quo2.components.code.snippet/snippet)
+(def snippet quo2.components.code.snippet.view/view)
 (def snippet-preview quo2.components.code.snippet-preview.view/view)
 
 ;;;; Cards