improve(ui): optimize functional components to rum functional component

logseq · Mar 21, 2023 · 9b6b5a6 · 9b6b5a6
1 parent 97a501a
commit 9b6b5a6
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
@@ -756,7 +756,7 @@
         (if (not @collapsed?) (content) nil)
         content)]]))
 
-(defn admonition
+(rum/defc admonition
   [type content]
   (let [type (name type)]
     (when-let [icon (case (string/lower-case type)
@@ -925,14 +925,14 @@
                           [:div {:key "tippy"} ""])))
            (rum/fragment {:key "tippy-children"} child))))
 
-(defn slider
+(rum/defc slider
   [default-value {:keys [min max on-change]}]
   [:input.cursor-pointer
-   {:type  "range"
-    :value (int default-value)
-    :min   min
-    :max   max
-    :style {:width "100%"}
+   {:type      "range"
+    :value     (int default-value)
+    :min       min
+    :max       max
+    :style     {:width "100%"}
     :on-change #(let [value (util/evalue %)]
                   (on-change value))}])
 
@@ -949,18 +949,18 @@
 (def get-adapt-icon-class
   (memoize (fn [klass] (r/adapt-class klass))))
 
-(defn icon
+(rum/defc icon
   ([name] (icon name nil))
   ([name {:keys [extension? font? class] :as opts}]
    (when-not (string/blank? name)
      (let [^js jsTablerIcons (gobj/get js/window "tablerIcons")]
        (if (or extension? font? (not jsTablerIcons))
          [:span.ui__icon (merge {:class
                                  (util/format
-                                  (str "%s-" name
-                                       (when (:class opts)
-                                         (str " " (string/trim (:class opts)))))
-                                  (if extension? "tie tie" "ti ti"))}
+                                   (str "%s-" name
+                                        (when (:class opts)
+                                          (str " " (string/trim (:class opts)))))
+                                   (if extension? "tie tie" "ti ti"))}
                                 (dissoc opts :class :extension? :font?))]
 
          ;; tabler svg react
@@ -970,7 +970,7 @@
               {:class (str "ls-icon-" name " " class)}
               (f (merge {:size 18} (r/map-keys->camel-case (dissoc opts :class))))])))))))
 
-(defn button
+(rum/defc button
   [text & {:keys [background href class intent on-click small? large? title icon icon-props disabled?]
            :or   {small? false large? false}
            :as   option}]
@@ -981,15 +981,15 @@
         klass (if disabled? (str klass "disabled:opacity-75") klass)]
     [:button.ui__button
      (merge
-      {:type  "button"
-       :title title
-       :disabled disabled?
-       :class (str (util/hiccup->class klass) " " class)}
-      (dissoc option :background :class :small? :large?)
-      (when href
-        {:on-click (fn []
-                     (util/open-url href)
-                     (when (fn? on-click) (on-click)))}))
+       {:type     "button"
+        :title    title
+        :disabled disabled?
+        :class    (str (util/hiccup->class klass) " " class)}
+       (dissoc option :background :class :small? :large?)
+       (when href
+         {:on-click (fn []
+                      (util/open-url href)
+                      (when (fn? on-click) (on-click)))}))
      (when icon (frontend.ui/icon icon (merge icon-props {:class (when-not (empty? text) "mr-1")})))
      text]))