mirror of https://github.com/logseq/logseq
fix: disable property drag&&drop when editing or selecting
fixes https://github.com/logseq/db-test/issues/18pull/11483/head
Tienson Qin
parent
f28ab33bda
commit
c20f8ffbb3
|
|
@ -4,7 +4,8 @@
|
|||
["@dnd-kit/sortable" :refer [useSortable arrayMove SortableContext verticalListSortingStrategy horizontalListSortingStrategy] :as sortable]
|
||||
["@dnd-kit/utilities" :refer [CSS]]
|
||||
["@dnd-kit/core" :refer [DndContext closestCenter PointerSensor useSensor useSensors]]
|
||||
[frontend.rum :as r]))
|
||||
[frontend.rum :as r]
|
||||
[frontend.state :as state]))
|
||||
|
||||
(def dnd-context (r/adapt-class DndContext))
|
||||
(def sortable-context (r/adapt-class SortableContext))
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
children]))
|
||||
|
||||
(rum/defc items
|
||||
[col {:keys [on-drag-end parent-node vertical?]
|
||||
[col {:keys [on-drag-end parent-node vertical? sort-by-inner-element?]
|
||||
:or {vertical? true}}]
|
||||
(let [ids (mapv :id col)
|
||||
items' (bean/->js ids)
|
||||
|
|
@ -44,34 +45,35 @@
|
|||
dnd-opts {:sensors sensors
|
||||
:collisionDetection closestCenter
|
||||
:onDragStart (fn [event]
|
||||
(set-active-id (.-id (.-active event))))
|
||||
(when-not (state/editing?)
|
||||
(set-active-id (.-id (.-active event)))))
|
||||
:onDragEnd (fn [event]
|
||||
(let [active-id (.-id (.-active event))
|
||||
over-id (.-id (.-over event))]
|
||||
(js/console.dir event)
|
||||
(when-not (= active-id over-id)
|
||||
(let [old-index (.indexOf ids active-id)
|
||||
new-index (.indexOf ids over-id)
|
||||
new-items (arrayMove items old-index new-index)]
|
||||
(when (fn? on-drag-end)
|
||||
(let [new-values (->> (map (fn [id]
|
||||
(let [item (id->item id)]
|
||||
(if (map? item) (:value item) item)))
|
||||
new-items)
|
||||
(remove nil?)
|
||||
vec)]
|
||||
(if (not= (count new-values) (count ids))
|
||||
(do
|
||||
(js/console.error "Dnd length not matched: ")
|
||||
{:old-items items
|
||||
:new-items new-items})
|
||||
(do
|
||||
(set-items new-items)
|
||||
(on-drag-end new-values {:active-id active-id
|
||||
:over-id over-id
|
||||
:direction (if (> new-index old-index)
|
||||
:down
|
||||
:up)})))))))
|
||||
(when active-id
|
||||
(when-not (= active-id over-id)
|
||||
(let [old-index (.indexOf ids active-id)
|
||||
new-index (.indexOf ids over-id)
|
||||
new-items (arrayMove items old-index new-index)]
|
||||
(when (fn? on-drag-end)
|
||||
(let [new-values (->> (map (fn [id]
|
||||
(let [item (id->item id)]
|
||||
(if (map? item) (:value item) item)))
|
||||
new-items)
|
||||
(remove nil?)
|
||||
vec)]
|
||||
(if (not= (count new-values) (count ids))
|
||||
(do
|
||||
(js/console.error "Dnd length not matched: ")
|
||||
{:old-items items
|
||||
:new-items new-items})
|
||||
(do
|
||||
(set-items new-items)
|
||||
(on-drag-end new-values {:active-id active-id
|
||||
:over-id over-id
|
||||
:direction (if (> new-index old-index)
|
||||
:down
|
||||
:up)}))))))))
|
||||
(set-active-id nil)))}
|
||||
sortable-opts {:items items
|
||||
:strategy (if vertical?
|
||||
|
|
@ -80,13 +82,16 @@
|
|||
children (for [item col]
|
||||
(let [id (str (:id item))
|
||||
prop (merge
|
||||
(:prop item)
|
||||
{:key id :id id})]
|
||||
(rum/with-key
|
||||
(if (:disabled? item)
|
||||
(non-sortable-item prop (:content item))
|
||||
(sortable-item prop (:content item)))
|
||||
id)))
|
||||
(:prop item)
|
||||
{:key id :id id})]
|
||||
(cond
|
||||
sort-by-inner-element?
|
||||
[:div (:content item)]
|
||||
|
||||
(:disabled? item)
|
||||
(rum/with-key (non-sortable-item prop (:content item)) id)
|
||||
:else
|
||||
(rum/with-key (sortable-item prop (:content item)) id))))
|
||||
children' (if parent-node
|
||||
[parent-node children]
|
||||
children)]
|
||||
|
|
|
|||
|
|
@ -710,7 +710,7 @@
|
|||
(rum/defc property-cp <
|
||||
rum/reactive
|
||||
db-mixins/query
|
||||
[block k v {:keys [inline-text page-cp] :as opts}]
|
||||
[block k v {:keys [inline-text page-cp sortable-opts] :as opts}]
|
||||
(when (keyword? k)
|
||||
(when-let [property (db/sub-block (:db/id (db/entity k)))]
|
||||
(let [type (get-in property [:block/schema :type] :default)
|
||||
|
|
@ -723,17 +723,20 @@
|
|||
(:block/page (first v))))
|
||||
(contains? #{:default} type))
|
||||
date? (= type :date)
|
||||
checkbox? (= type :checkbox)]
|
||||
checkbox? (= type :checkbox)
|
||||
property-key-cp [:div.property-key.col-span-2
|
||||
(property-key block property (assoc (select-keys opts [:class-schema?])
|
||||
:block? block?
|
||||
:inline-text inline-text
|
||||
:page-cp page-cp))]]
|
||||
[:div {:class (cond
|
||||
(or date? checkbox?)
|
||||
"property-pair items-center"
|
||||
:else
|
||||
"property-pair items-start")}
|
||||
[:div.property-key.col-span-2
|
||||
(property-key block property (assoc (select-keys opts [:class-schema?])
|
||||
:block? block?
|
||||
:inline-text inline-text
|
||||
:page-cp page-cp))]
|
||||
(if (seq sortable-opts)
|
||||
(dnd/sortable-item sortable-opts property-key-cp)
|
||||
property-key-cp)
|
||||
[:div.property-value-container.col-span-3.flex.flex-row.gap-1.items-center
|
||||
(when-not block? [:div.opacity-30 {:style {:margin-left 5}}
|
||||
[:span.bullet-container.cursor [:span.bullet]]])
|
||||
|
|
@ -764,11 +767,14 @@
|
|||
m (zipmap (map first properties) (map second properties))
|
||||
properties (mapv (fn [k] [k (get m k)]) properties-order)
|
||||
choices (map (fn [[k v]]
|
||||
{:id (subs (str k) 1)
|
||||
:value k
|
||||
:content (property-cp block k v opts)}) properties)]
|
||||
(let [id (subs (str k) 1)
|
||||
opts (assoc opts :sortable-opts {:id id})]
|
||||
{:id id
|
||||
:value k
|
||||
:content (property-cp block k v opts)})) properties)]
|
||||
(dnd/items choices
|
||||
{:on-drag-end (fn [properties-order {:keys [active-id over-id direction]}]
|
||||
{:sort-by-inner-element? true
|
||||
:on-drag-end (fn [properties-order {:keys [active-id over-id direction]}]
|
||||
(let [move-down? (= direction :down)
|
||||
over (db/entity (keyword over-id))
|
||||
active (db/entity (keyword active-id))
|
||||
|
|
|
|||
Loading…
Reference in New Issue