fix(mobile): clicking item in left sidebar should close it quickly

This commit is contained in:
Tienson Qin
2025-08-16 20:31:31 +08:00
parent 180778a43b
commit a54b1586b3
3 changed files with 52 additions and 36 deletions

View File

@@ -112,7 +112,7 @@ const PersistentSheetWithDetentView = React.forwardRef<
>(({ children, className, dimmingColor, onTravel, ...restProps }, ref) => {
const viewRef = useRef<HTMLDivElement>(null);
const [inertOutside, setInertOutside] = useState(restProps.inertOutside);
console.log('inertOutside' + inertOutside);
const {
range,
setRange,

View File

@@ -3,6 +3,8 @@
(:require [cljs-bean.core :as bean]
[dommy.core :as dom]
[frontend.components.container :as container]
[frontend.rum :as r]
[frontend.util :as util]
[logseq.shui.hooks :as hooks]
[logseq.shui.silkhq :as silkhq]
[mobile.state :as mobile-state]
@@ -23,38 +25,51 @@
(rum/defc left-sidebar
[]
(let [*ref (hooks/use-ref nil)
[detent set-detent!] (mobile-state/use-left-sidebar-detent)
[inertOutside setInertOutside!] (hooks/use-state false)]
[detent set-detent!] (r/use-atom mobile-state/*left-sidebar-detent)
[{:keys [open? _block]}] (mobile-state/use-singleton-modal)
[inertOutside setInertOutside!] (r/use-atom mobile-state/*left-sidebar-inert-outside?)]
(hooks/use-effect!
(fn []
(set-detent! 1))
(when (zero? detent)
(set-detent! 1)))
[])
(silkhq/persistent-sheet
{:presented true
:onPresentedChange (fn [_v])
:activeDetent (if (= detent 0) 1 detent)
:onActiveDetentChange (fn [_v])}
(silkhq/persistent-sheet-portal
(silkhq/persistent-sheet-view
{:class "app-silk-sidebar-sheet-view"
:contentPlacement "left"
:detents ["25px" "min(90vw, 325px)"]
:onTravel (fn [v]
(let [{:keys [range]} (bean/->clj v)
{:keys [start end]} range
ref (.-current *ref)]
(cond (and (= start 1) (= end 2))
(do
(dom/remove-class! ref "Sidebar-hidden")
(setInertOutside! true))
(and (= start 1) (= end 1))
(do
(dom/add-class! ref "Sidebar-hidden")
(setInertOutside! false)))))
:inertOutside inertOutside}
(silkhq/persistent-sheet-content
{:ref *ref
:class "app-silk-sidebar-sheet-content Sidebar-content Sidebar-hidden"}
(silkhq/persistent-sheet-expanded-content
(sidebar-content))))))))
(when-not open?
(silkhq/persistent-sheet
{:presented true
:onPresentedChange (fn [_v])
:activeDetent detent
:onActiveDetentChange (fn [v]
(when (and v (not= v detent))
(set-detent! v)))}
(silkhq/persistent-sheet-portal
(silkhq/persistent-sheet-view
{:class "app-silk-sidebar-sheet-view"
:contentPlacement "left"
:detents ["25px" "min(90vw, 325px)"]
:onTravel (fn [v]
(when-not open?
(let [{:keys [range]} (bean/->clj v)
{:keys [start end]} range
ref (.-current *ref)]
(when ref
(cond (and (= start 1) (= end 2))
(do
(dom/remove-class! ref "Sidebar-hidden")
(setInertOutside! true))
(and (<= start 1) (<= end 1))
(do
(dom/add-class! ref "Sidebar-hidden")
(setInertOutside! false)))))))
:onClickOutside (fn [e]
(util/stop e)
(bean/->js {:dismiss false}))
:inertOutside inertOutside}
(silkhq/persistent-sheet-content
{:ref *ref
:class "app-silk-sidebar-sheet-content Sidebar-content Sidebar-hidden"}
(silkhq/persistent-sheet-expanded-content
(sidebar-content)))))))))

View File

@@ -20,16 +20,17 @@
(reset! *popup-data data))
(defonce *left-sidebar-detent (atom 0))
(defn use-left-sidebar-detent [] (r/use-atom *left-sidebar-detent))
(defonce *left-sidebar-inert-outside? (atom false))
(defn open-left-sidebar!
[]
(reset! *left-sidebar-detent 3))
(reset! *left-sidebar-inert-outside? true)
(reset! *left-sidebar-detent 2))
(defn close-left-sidebar!
[]
(reset! *left-sidebar-detent 1))
(reset! *left-sidebar-inert-outside? false)
(reset! *left-sidebar-detent 0))
(defn toggle-left-sidebar!
[]