rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: inner blocks note links (#1973)

Browse Source
This commit is contained in:
Mo
2022-11-09 06:06:46 -06:00
committed by GitHub
parent 2438443e53
commit 6bcba01dab
121 changed files with 1641 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
View File

@@ -15,11 +15,13 @@ type Props = {
link: ItemLink
activateItem: (item: LinkableItem) => Promise<void>
unlinkItem: LinkingController['unlinkItemFromSelectedItem']
focusPreviousItem: () => void
focusNextItem: () => void
focusedId: string | undefined
setFocusedId: (id: string) => void
focusPreviousItem?: () => void
focusNextItem?: () => void
focusedId?: string | undefined
setFocusedId?: (id: string) => void
isBidirectional: boolean
inlineFlex?: boolean
className?: string
}
const LinkedItemBubble = ({
@@ -31,6 +33,8 @@ const LinkedItemBubble = ({
focusedId,
setFocusedId,
isBidirectional,
inlineFlex,
className,
}: Props) => {
const ref = useRef<HTMLButtonElement>(null)
const application = useApplication()
@@ -42,7 +46,7 @@ const LinkedItemBubble = ({
const handleFocus = () => {
if (focusedId !== link.id) {
setFocusedId(link.id)
setFocusedId?.(link.id)
}
setShowUnlinkButton(true)
}
@@ -63,21 +67,21 @@ const LinkedItemBubble = ({
const onUnlinkClick: MouseEventHandler = (event) => {
event.stopPropagation()
void unlinkItem(link)
void unlinkItem(link.item)
}
const onKeyDown: KeyboardEventHandler = (event) => {
switch (event.key) {
case KeyboardKey.Backspace: {
focusPreviousItem()
void unlinkItem(link)
focusPreviousItem?.()
void unlinkItem(link.item)
break
}
case KeyboardKey.Left:
focusPreviousItem()
focusPreviousItem?.()
break
case KeyboardKey.Right:
focusNextItem()
focusNextItem?.()
break
}
}
@@ -94,7 +98,12 @@ const LinkedItemBubble = ({
return (
<button
ref={ref}
className="group flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-sm text-text hover:bg-contrast focus:bg-contrast lg:text-xs"
className={classNames(
'group h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-sm',
'text-text hover:bg-contrast focus:bg-contrast lg:text-xs',
inlineFlex ? 'inline-flex' : 'flex',
className,
)}
onFocus={handleFocus}
onBlur={onBlur}
onClick={onClick}

12
packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
View File

@@ -279,7 +279,7 @@ const LinkedItemsPanel = ({
key={link.id}
item={link.item}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -299,7 +299,7 @@ const LinkedItemsPanel = ({
key={link.id}
item={link.item}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -330,7 +330,7 @@ const LinkedItemsPanel = ({
key={link.id}
item={link.item}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -349,7 +349,7 @@ const LinkedItemsPanel = ({
key={link.id}
item={link.item}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -366,7 +366,7 @@ const LinkedItemsPanel = ({
key={link.id}
item={link.item}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>
@@ -385,7 +385,7 @@ const LinkedItemsPanel = ({
key={link.id}
item={link.item}
searchQuery={searchQuery}
unlinkItem={() => unlinkItemFromSelectedItem(link)}
unlinkItem={() => unlinkItemFromSelectedItem(link.item)}
activateItem={activateItem}
handleFileAction={filesController.handleFileAction}
/>