From c75efabc04f05e3e64036a3c235b11adc5632c13 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 30 Dec 2024 09:22:08 +0800 Subject: [PATCH] fix: react key warning --- deps/shui/src/logseq/shui/base/core.cljs | 18 +++--- src/main/frontend/components/container.cljs | 65 ++++++++++++--------- src/main/frontend/components/journal.cljs | 8 ++- 3 files changed, 51 insertions(+), 40 deletions(-) diff --git a/deps/shui/src/logseq/shui/base/core.cljs b/deps/shui/src/logseq/shui/base/core.cljs index f2e233637a0..679c26a4928 100644 --- a/deps/shui/src/logseq/shui/base/core.cljs +++ b/deps/shui/src/logseq/shui/base/core.cljs @@ -1,7 +1,7 @@ (ns logseq.shui.base.core - (:require [logseq.shui.util :as util] + (:require [cljs-bean.core :as bean] [logseq.shui.icon.v2 :as tabler-icon] - [cljs-bean.core :as bean])) + [logseq.shui.util :as util])) (def button-base (util/lsui-wrap "Button" {:static? false})) (def link (util/lsui-wrap "Link")) @@ -52,12 +52,14 @@ (defn button-icon [variant icon-name {:keys [icon-props size] :as props} child] - (button (merge (dissoc props :icon-props :size) - {:variant variant - :data-button :icon - :style (when size {:width size :height size})}) - [:<> - (tabler-icon/root (name icon-name) (merge {:size 20} icon-props)) child])) + (button + (merge (dissoc props :icon-props :size) + {:variant variant + :data-button :icon + :style (when size {:width size :height size})}) + (tabler-icon/root (name icon-name) (merge {:size 20 + :key "icon"} icon-props)) + child)) (def button-ghost-icon (partial button-icon :ghost)) (def button-outline-icon (partial button-icon :outline)) diff --git a/src/main/frontend/components/container.cljs b/src/main/frontend/components/container.cljs index 2e345ad3462..79262706bf2 100644 --- a/src/main/frontend/components/container.cljs +++ b/src/main/frontend/components/container.cljs @@ -1,37 +1,36 @@ (ns frontend.components.container (:require [cljs-drag-n-drop.core :as dnd] [clojure.string :as string] - [frontend.version :refer [version]] + [dommy.core :as d] + [electron.ipc :as ipc] + [frontend.components.block :as block] + [frontend.components.content :as cp-content] + [frontend.components.dnd :as dnd-component] [frontend.components.find-in-page :as find-in-page] + [frontend.components.handbooks :as handbooks] [frontend.components.header :as header] + [frontend.components.icon :as icon] [frontend.components.journal :as journal] [frontend.components.plugins :as plugins] [frontend.components.repo :as repo] [frontend.components.right-sidebar :as right-sidebar] [frontend.components.theme :as theme] - [frontend.components.dnd :as dnd-component] - [frontend.components.icon :as icon] - [frontend.components.handbooks :as handbooks] - [frontend.components.block :as block] - [dommy.core :as d] - [frontend.components.content :as cp-content] + [frontend.components.window-controls :as window-controls] [frontend.config :as config] [frontend.context.i18n :refer [t tt]] [frontend.db :as db] - [electron.ipc :as ipc] [frontend.db-mixins :as db-mixins] [frontend.db.model :as db-model] + [frontend.extensions.fsrs :as fsrs] [frontend.extensions.pdf.utils :as pdf-utils] - [frontend.storage :as storage] + [frontend.handler.block :as block-handler] [frontend.handler.common :as common-handler] [frontend.handler.editor :as editor-handler] [frontend.handler.page :as page-handler] - [frontend.util.page :as page-util] + [frontend.handler.recent :as recent-handler] [frontend.handler.route :as route-handler] [frontend.handler.user :as user-handler] [frontend.handler.whiteboard :as whiteboard-handler] - [frontend.handler.recent :as recent-handler] - [frontend.handler.block :as block-handler] [frontend.mixins :as mixins] [frontend.mobile.action-bar :as action-bar] [frontend.mobile.footer :as footer] @@ -40,24 +39,25 @@ [frontend.modules.shortcut.data-helper :as shortcut-dh] [frontend.modules.shortcut.utils :as shortcut-utils] [frontend.state :as state] + [frontend.storage :as storage] [frontend.ui :as ui] - [logseq.shui.ui :as shui] - [logseq.shui.toaster.core :as shui-toaster] - [logseq.shui.dialog.core :as shui-dialog] - [logseq.shui.popup.core :as shui-popup] [frontend.util :as util] [frontend.util.cursor :as cursor] - [frontend.components.window-controls :as window-controls] - [medley.core :as medley] + [frontend.util.page :as page-util] + [frontend.version :refer [version]] [goog.dom :as gdom] [goog.object :as gobj] [logseq.common.path :as path] + [logseq.common.util.namespace :as ns-util] + [logseq.db :as ldb] + [logseq.shui.dialog.core :as shui-dialog] + [logseq.shui.popup.core :as shui-popup] + [logseq.shui.toaster.core :as shui-toaster] + [logseq.shui.ui :as shui] + [medley.core :as medley] [react-draggable] [reitit.frontend.easy :as rfe] - [rum.core :as rum] - [logseq.db :as ldb] - [frontend.extensions.fsrs :as fsrs] - [logseq.common.util.namespace :as ns-util])) + [rum.core :as rum])) (rum/defc sidebar-content-group < rum/reactive [name {:keys [class count more header-props enter-show-more? collapsable?]} child] @@ -99,7 +99,8 @@ [:<> (when-not recent? (x-menu-item - {:on-click #(page-handler/ (x-menu-item - {:on-click #(ipc/ipc :openFileInFolder page-fpath)} + {:key "open-in-folder" + :on-click #(ipc/ipc :openFileInFolder page-fpath)} (ctx-icon "folder") (t :page/open-in-finder)) (x-menu-item - {:on-click #(js/window.apis.openPath page-fpath)} + {:key "open with default app" + :on-click #(js/window.apis.openPath page-fpath)} (ctx-icon "file") (t :page/open-with-default-app))]) (x-menu-item - {:on-click open-in-sidebar} + {:key "open in sidebar" + :on-click open-in-sidebar} (ctx-icon "layout-sidebar-right") (t :content/open-in-sidebar) (x-menu-shortcut (shortcut-utils/decorate-binding "shift+click")))]))] @@ -169,7 +173,8 @@ (defn sidebar-item [{:keys [on-click-handler class title icon icon-extension? active href shortcut more]}] [:div - {:class (util/classnames [class {:active active}])} + {:key class + :class (util/classnames [class {:active active}])} [:a.item.group.flex.items-center.text-sm.rounded-md.font-medium {:on-click on-click-handler :class (when active "active") @@ -433,7 +438,8 @@ [:<> [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0 - {:ref ref-el + {:key "left-sidebar" + :ref ref-el :style (cond-> {} (and (number? offset-ratio) (> touching-x-offset 0)) @@ -474,7 +480,8 @@ (sidebar-recent-pages))]]] [:span.shade-mask - (cond-> {:on-click close-fn} + (cond-> {:on-click close-fn + :key "shade-mask"} (number? offset-ratio) (assoc :style {:opacity (cond-> offset-ratio (neg? offset-ratio) diff --git a/src/main/frontend/components/journal.cljs b/src/main/frontend/components/journal.cljs index 2aded5a1d8e..ee37af18325 100644 --- a/src/main/frontend/components/journal.cljs +++ b/src/main/frontend/components/journal.cljs @@ -3,11 +3,11 @@ [frontend.db :as db] [frontend.db-mixins :as db-mixins] [frontend.handler.page :as page-handler] + [frontend.mixins :as mixins] [frontend.state :as state] - [rum.core :as rum] [frontend.util :as util] [goog.functions :refer [debounce]] - [frontend.mixins :as mixins])) + [rum.core :as rum])) (rum/defc journal-cp < rum/reactive [page] @@ -39,7 +39,9 @@ (when (seq latest-journals) [:div#journals (for [journal latest-journals] - (journal-cp journal))])) + (rum/with-key + (journal-cp journal) + (str "journal-" (:db/id journal))))])) (rum/defc all-journals < rum/reactive db-mixins/query []