From bd511bbc66d6c68bf831e6e9f8843186d3711341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arne=20Schl=C3=BCter?= Date: Sat, 24 Nov 2018 18:41:49 +0100 Subject: [PATCH] Fix warning about children with non-unique keys --- package-lock.json | 13 ++++++--- .../components/audio_player/views.cljs | 11 ++++---- .../airsonic_ui/components/library/views.cljs | 27 +++++++++++-------- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index a4e6c8a..e2bfd54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1794,7 +1794,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2209,7 +2210,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -2265,6 +2267,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2308,12 +2311,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/cljs/airsonic_ui/components/audio_player/views.cljs b/src/cljs/airsonic_ui/components/audio_player/views.cljs index 7583bd0..f9a9180 100644 --- a/src/cljs/airsonic_ui/components/audio_player/views.cljs +++ b/src/cljs/airsonic_ui/components/audio_player/views.cljs @@ -88,12 +88,11 @@ :media-play "Play" :media-pause "Pause" :media-step-forward "Next"}] - (map (fn [[icon-glyph event]] - ^{:key icon-glyph} [:p.control>button.button.is-light - {:on-click (muted-dispatch [event]) - :title (title icon-glyph)} - [icon icon-glyph]]) - buttons))]) + (for [[icon-glyph event] buttons] + ^{:key icon-glyph} [:p.control [:button.button.is-light + {:on-click (muted-dispatch [event]) + :title (title icon-glyph)} + [icon icon-glyph]]]))]) (defn- toggle-shuffle [playback-mode] (muted-dispatch [:audio-player/set-playback-mode (if (= playback-mode :shuffled) diff --git a/src/cljs/airsonic_ui/components/library/views.cljs b/src/cljs/airsonic_ui/components/library/views.cljs index 921b576..b533861 100644 --- a/src/cljs/airsonic_ui/components/library/views.cljs +++ b/src/cljs/airsonic_ui/components/library/views.cljs @@ -12,9 +12,19 @@ ^{:key idx} [:li (when (= params active-item) {:class-name "is-active"}) [:a {:href (apply url-for route)} label]]))]]) -;; this variable determines how many pages before the first known page we should list +;; this variable determines how many pages before the first known page we should list (def page-padding 2) +(defn pagination-link + "One of many numbered links to a page" + [current-page page href] + (let [current-page? (= page current-page)] + [(if current-page? + :a.pagination-link.is-current + :a.pagination-link) + (cond-> {:href href, :aria-label (str "Page " page)} + current-page? (assoc :aria-current "page")) page])) + (defn pagination "Builds a pagination, calling `url-fn` for every rendered page link with the page as its argument. When `max-pages` is `nil` an infinite pagination @@ -22,11 +32,11 @@ [{:keys [items current-page url-fn]}] ;; NOTE: This is currently slightly flawed. We don't have any good way to ;; know whether we're on the last possible page so we take the last loaded - ;; page instead + ;; page instead (let [num-pages (last (keys items)) first-page? (= current-page 1) pages (range (max 1 (- current-page page-padding)) - (min (inc (+ current-page page-padding)) (inc num-pages))) ] + (min (inc (+ current-page page-padding)) (inc num-pages)))] [:nav.pagination.is-centered {:role "pagination", :aria-label "pagination"} ;; now we add buttons to progress one page in each direction [:a.pagination-previous (if first-page? @@ -37,22 +47,17 @@ [:ul.pagination-list ;; some indication that there are previous pages (when (> current-page (+ page-padding 2)) - [:li>a.pagination-link {:href (url-fn 1), :aria-label "Page 1"} "1"]) + [:li [pagination-link current-page 1 (url-fn 1)]]) (when (> current-page (+ page-padding 1)) [:li>span.pagination-ellipsis "…"]) ;; all pagination links around our current page (for [page pages] - (let [current-page? (= page current-page)] - ^{:key page} [(cond-> :li>a.pagination-link - current-page? (add-classes :is-current)) - (cond-> {:href (url-fn page), :aria-label (str "Page " page)} - current-page? (assoc :aria-current "page")) page])) + ^{:key page} [:li [pagination-link current-page page (url-fn page)]]) ;; some indication that there are more pages after (when (< current-page (- num-pages page-padding)) [:li>span.pagination-ellipsis "…"]) (when (< current-page (- num-pages page-padding)) - [:li>a.pagination-link {:href (url-fn num-pages), :aria-label (str "Page " num-pages)} num-pages])]])) - + [:li [pagination-link current-page num-pages (url-fn num-pages)]])]])) (def tab-items [[[::routes/library {:kind "recent"} nil] "Recently played"] [[::routes/library {:kind "newest"} nil] "Newest additions"]