starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-07-14 13:52:38 +02:00
Code Issues 2 Packages Projects Releases Wiki Activity

fix(link): Keybind, scroll behaviour, restrict drag to vertical (#176)

Browse Source 
* chore: expose scrollActiveElementIntoView

* feat(utils): editable element

* fix: memoize exceptionRefs, use animation frame and check editable element

* fix: improve btn on mobile

* chore(drps): bump framer motion version

* fix(link): big fix

* chore: remove comment code

* feat: touch device
This commit is contained in:
Aslam
2024-09-21 19:37:29 +07:00
committed by GitHub
parent bf5ae100ab
commit 21084cd3f3
14 changed files with 453 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/routes/link/LinkRoute.tsx
+6 -41
View File
@@ -1,13 +1,12 @@
"use client"
import React, { useEffect, useState, useCallback, useRef } from "react"
import React, { useState } from "react"
import { LinkHeader } from "@/components/routes/link/header"
import { LinkList } from "@/components/routes/link/list"
import { LinkManage } from "@/components/routes/link/manage"
import { parseAsBoolean, useQueryState } from "nuqs"
import { atom, useAtom } from "jotai"
import { useQueryState } from "nuqs"
import { atom } from "jotai"
import { LinkBottomBar } from "./bottom-bar"
import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
import { useKey } from "react-use"
export const isDeleteConfirmShownAtom = atom(false)
@@ -15,44 +14,9 @@ export const isDeleteConfirmShownAtom = atom(false)
export function LinkRoute(): React.ReactElement {
const [nuqsEditId, setNuqsEditId] = useQueryState("editId")
const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
const [isInCreateMode] = useQueryState("create", parseAsBoolean)
const [isCommandPaletteOpen] = useAtom(commandPaletteOpenAtom)
const [isDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom)
const [disableEnterKey, setDisableEnterKey] = useState(false)
const timeoutRef = useRef<NodeJS.Timeout | null>(null)
const handleCommandPaletteClose = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
}
setDisableEnterKey(true)
timeoutRef.current = setTimeout(() => {
setDisableEnterKey(false)
timeoutRef.current = null
}, 100)
}, [])
useEffect(() => {
if (isDeleteConfirmShown || isCommandPaletteOpen || isInCreateMode) {
setDisableEnterKey(true)
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
timeoutRef.current = null
}
} else if (!isCommandPaletteOpen) {
handleCommandPaletteClose()
}
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
}
}
}, [isDeleteConfirmShown, isCommandPaletteOpen, isInCreateMode, handleCommandPaletteClose])
const [keyboardActiveIndex, setKeyboardActiveIndex] = useState<number | null>(null)
useKey("Escape", () => {
setDisableEnterKey(false)
setNuqsEditId(null)
})
@@ -64,7 +28,8 @@ export function LinkRoute(): React.ReactElement {
key={nuqsEditId}
activeItemIndex={activeItemIndex}
setActiveItemIndex={setActiveItemIndex}
disableEnterKey={disableEnterKey}
keyboardActiveIndex={keyboardActiveIndex}
setKeyboardActiveIndex={setKeyboardActiveIndex}
/>
<LinkBottomBar />
</>