Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -05:00
Code Issues Activity

✨ Rework of the search function in swap components

Browse source
This commit is contained in:
Pablo Alba 2023-11-02 12:31:51 +01:00 • committed by Andrey Antukh
parent b07e9bdd37
commit c3c667d4b5
1 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -149,17 +149,17 @@
(mf/defc component-swap-item (mf/defc component-swap-item
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [item loop? shapes file-id root-shape container component-id] :as props}] [{:keys [item loop shapes file-id root-shape container component-id is-search] :as props}]
(let [on-select-component (let [on-select-component
(mf/use-fn (mf/use-fn
(mf/deps shapes file-id item) (mf/deps shapes file-id item)
#(when-not loop? #(when-not loop
(st/emit! (dwl/component-multi-swap shapes file-id (:id item))))) (st/emit! (dwl/component-multi-swap shapes file-id (:id item)))))
item-ref (mf/use-ref) item-ref (mf/use-ref)
visible? (h/use-visible item-ref :once? true)] visible? (h/use-visible item-ref :once? true)]
[:div.component-item [:div.component-item
{:ref item-ref {:ref item-ref
:class (stl/css-case :disabled loop?) :class (stl/css-case :disabled loop)
:key (:id item) :key (:id item)
:on-click on-select-component} :on-click on-select-component}
(when visible? (when visible?
@ -169,7 +169,7 @@
:container container}]) :container container}])
[:span.component-name [:span.component-name
{:class (stl/css-case :selected (= (:id item) component-id))} {:class (stl/css-case :selected (= (:id item) component-id))}
(:name item)]])) (if is-search (:full-name item) (:name item))]]))
(mf/defc component-swap (mf/defc component-swap
@ -212,36 +212,40 @@
{:term "" {:term ""
:file-id file-id :file-id file-id
:path path}) :path path})
filters (deref filters*) filters (deref filters*)
is-search? (not (str/blank? (:term filters)))
components (->> (get-in libraries [(:file-id filters) :data :components]) components (->> (get-in libraries [(:file-id filters) :data :components])
vals vals
(remove #(true? (:deleted %)))) (remove #(true? (:deleted %)))
(map #(assoc % :full-name (cph/merge-path-item (:path %) (:name %)))))
components (if (str/empty? (:term filters)) get-subgroups (fn [path]
components (let [split-path (cph/split-path path)]
(filter #(str/includes? (str/lower (:name %)) (str/lower (:term filters))) components)) (reduce (fn [acc dir]
(conj acc (str (last acc) " / " dir)))
[(first split-path)] (rest split-path))))
get-subgroups (fn [path] xform (comp
(let [split-path (cph/split-path path)] (map :path)
(reduce (fn [acc dir] (mapcat get-subgroups)
(conj acc (str (last acc) " / " dir))) (remove str/empty?)
[(first split-path)] (rest split-path)))) (remove nil?)
distinct
(filter #(= (cph/butlast-path %) (:path filters))))
groups (->> components groups (when-not is-search?
(map :path) (sort (sequence xform components)))
(map get-subgroups)
(apply concat)
(remove str/empty?)
(remove nil?)
distinct
(filter #(= (cph/butlast-path %) (:path filters)))
sort)
components (filter #(= (:path %) (:path filters)) components) components (if is-search?
(filter #(str/includes? (str/lower (:full-name %)) (str/lower (:term filters))) components)
(filter #(= (:path %) (:path filters)) components))
items (->> (concat groups components) items (if is-search?
(sort-by :name)) (sort-by :full-name components)
(->> (concat groups components)
(sort-by :name)))
;; Get the ids of the components and its root-shapes that are parents of the current shape, to avoid loops ;; Get the ids of the components and its root-shapes that are parents of the current shape, to avoid loops
get-comps-ids (fn get-comps-ids [shape ids] get-comps-ids (fn get-comps-ids [shape ids]
@ -255,8 +259,7 @@
parent-components (->> shapes parent-components (->> shapes
(map :parent-id) (map :parent-id)
(map #(get objects %)) (map #(get objects %))
(map #(get-comps-ids % [])) (mapcat #(get-comps-ids % []))
(apply concat)
set) set)
@ -315,12 +318,12 @@
:on-change on-search-term-change :on-change on-search-term-change
:on-key-down handle-key-down}] :on-key-down handle-key-down}]
(if ^boolean (str/empty? (:term filters)) (if is-search?
[:div.search-icon
i/search]
[:div.search-icon.close [:div.search-icon.close
{:on-click on-search-clear-click} {:on-click on-search-clear-click}
i/close])] i/close]
[:div.search-icon
i/search])]
[:select.input-select {:value (:file-id filters) [:select.input-select {:value (:file-id filters)
:data-mousetrap-dont-stop true :data-mousetrap-dont-stop true
@ -328,7 +331,7 @@
(for [library (vals libraries)] (for [library (vals libraries)]
[:option {:key (:id library) :value (:id library)} (:name library)])] [:option {:key (:id library) :value (:id library)} (:name library)])]
(when-not (str/empty? (:path filters)) (when-not (or is-search? (str/empty? (:path filters)))
[:div.component-path {:on-click on-go-back} [:div.component-path {:on-click on-go-back}
[:span i/arrow-slide] [:span i/arrow-slide]
[:span (-> (cph/split-path (:path filters)) [:span (-> (cph/split-path (:path filters))
@ -342,12 +345,13 @@
loop? (or (contains? parent-components (:main-instance-id item)) loop? (or (contains? parent-components (:main-instance-id item))
(contains? parent-components (:id item)))] (contains? parent-components (:id item)))]
[:& component-swap-item {:item item [:& component-swap-item {:item item
:loop? loop? :loop loop?
:shapes shapes :shapes shapes
:file-id (:file-id filters) :file-id (:file-id filters)
:root-shape root-shape :root-shape root-shape
:container container :container container
:component-id current-comp-id}]) :component-id current-comp-id
:is-search is-search?}])
(let [on-group-click #(on-enter-group item)] (let [on-group-click #(on-enter-group item)]
[:div.component-group {:key (uuid/next) :on-click on-group-click} [:div.component-group {:key (uuid/next) :on-click on-group-click}
[:span (cph/last-path item)] [:span (cph/last-path item)]