-
Notifications
You must be signed in to change notification settings - Fork 984
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement quo2 code snippet preview component
- Loading branch information
1 parent
9df1b85
commit 0cf9538
Showing
6 changed files
with
180 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| (ns quo2.components.code.snippet-preview.style | ||
| (:require [quo2.foundations.colors :as colors] | ||
| [quo2.components.code.code.style :as code-style])) | ||
|
|
||
| (defn container | ||
| [theme] | ||
| {:overflow :hidden | ||
| :width 108 | ||
| :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) | ||
| :border-radius 8}) | ||
|
|
||
| (defn line-number-container | ||
| [theme] | ||
| {:position :absolute | ||
| :bottom 0 | ||
| :top 0 | ||
| :left 0 | ||
| :width 20 | ||
| :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme)}) | ||
|
|
||
| (defn text-style | ||
| [class-names] | ||
| (let [text-color (->> class-names | ||
| (map keyword) | ||
| (some (fn [class-name] | ||
| (when-let [text-color (code-style/theme class-name)] | ||
| text-color))))] | ||
| (cond-> {:flex-shrink 1 | ||
| :line-height 18} | ||
| text-color (assoc :color text-color)))) | ||
|
|
||
| (def line {:flex 1 :flex-direction :row}) | ||
|
|
||
| (defn line-number | ||
| [width] | ||
| {:width width | ||
| :align-items :center | ||
| :justify-content :center}) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| (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)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
src/status_im2/contexts/quo_preview/code/snippet_preview.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| (ns status-im2.contexts.quo-preview.code.snippet-preview | ||
| (:require [quo2.core :as quo] | ||
| [reagent.core :as reagent] | ||
| [status-im2.contexts.quo-preview.preview :as preview])) | ||
|
|
||
| (def go-example | ||
| "for(let ind") | ||
|
|
||
| (def clojure-example | ||
| "(for [x [0 1 2 3 4 5] | ||
| :let [y (* x 3)] | ||
| :when (even? y)] | ||
| y)") | ||
|
|
||
| (def examples | ||
| {:clojure {:language :clojure | ||
| :text clojure-example} | ||
| :go {:language :go | ||
| :text go-example}}) | ||
|
|
||
| (def descriptor | ||
| [{:key :language | ||
| :type :select | ||
| :options [{:key :clojure} | ||
| {:key :go}]} | ||
| {:label "Syntax highlight?" | ||
| :key :syntax | ||
| :type :boolean}]) | ||
|
|
||
| (defn view | ||
| [] | ||
| (let [state (reagent/atom {:language :clojure | ||
| :max-lines 1 | ||
| :syntax true})] | ||
| (fn [] | ||
| (let [language (if (:syntax @state) (:language @state) :text) | ||
| text (-> (:language @state) examples :text)] | ||
| [preview/preview-container {:state state :descriptor descriptor} | ||
| [quo/snippet-preview | ||
| {:language language} text]])))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters