starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

chore: remove account and memo

Browse Source
This commit is contained in:
Aslam H
2024-11-09 15:12:26 +07:00
parent b8336d50e6
commit fe5f3ac1b9
3 changed files with 54 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/command-palette/command-data.ts
View File

@@ -1,5 +1,4 @@
import { icons } from "lucide-react" import { icons } from "lucide-react"
import { LaAccount } from "@/lib/schema"
import { HTMLLikeElement } from "@/lib/utils" import { HTMLLikeElement } from "@/lib/utils"
import { useCommandActions } from "~/hooks/actions/use-command-actions" import { useCommandActions } from "~/hooks/actions/use-command-actions"
@@ -44,7 +43,6 @@ const createNavigationItem = (
export const createCommandGroups = ( export const createCommandGroups = (
actions: ReturnType<typeof useCommandActions>, actions: ReturnType<typeof useCommandActions>,
me: LaAccount,
): Record<string, CommandGroupType> => ({ ): Record<string, CommandGroupType> => ({
home: [ home: [
{ {
@@ -97,7 +95,7 @@ export const createCommandGroups = (
icon: "Plus", icon: "Plus",
value: "Create New Page...", value: "Create New Page...",
label: "Create New Page...", label: "Create New Page...",
action: () => actions.createNewPage(me), action: () => actions.createNewPage(),
}, },
], ],
}, },

90
web/app/components/command-palette/command-group.tsx
View File

@@ -10,26 +10,31 @@ export interface CommandItemProps extends Omit<CommandItemType, "action"> {
handleAction: (action: CommandAction, payload?: any) => void handleAction: (action: CommandAction, payload?: any) => void
} }
const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = ({
React.memo(({ content }) => { content,
return ( }) => {
<span className="line-clamp-1">{renderHTMLLikeElement(content)}</span> return <span className="line-clamp-1">{renderHTMLLikeElement(content)}</span>
) }
})
HTMLLikeRenderer.displayName = "HTMLLikeRenderer" HTMLLikeRenderer.displayName = "HTMLLikeRenderer"
export const CommandItem: React.FC<CommandItemProps> = React.memo( export const CommandItem: React.FC<CommandItemProps> = ({
({ icon, label, action, payload, shortcut, handleAction, ...item }) => ( icon,
<Command.Item label,
value={`${item.id}-${item.value}`} action,
onSelect={() => handleAction(action, payload)} payload,
> shortcut,
{icon && <LaIcon name={icon} />} handleAction,
<HTMLLikeRenderer content={label} /> ...item
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>} }) => (
</Command.Item> <Command.Item
), value={`${item.id}-${item.value}`}
onSelect={() => handleAction(action, payload)}
>
{icon && <LaIcon name={icon} />}
<HTMLLikeRenderer content={label} />
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
</Command.Item>
) )
CommandItem.displayName = "CommandItem" CommandItem.displayName = "CommandItem"
@@ -41,33 +46,36 @@ export interface CommandGroupProps {
isLastGroup: boolean isLastGroup: boolean
} }
export const CommandGroup: React.FC<CommandGroupProps> = React.memo( export const CommandGroup: React.FC<CommandGroupProps> = ({
({ heading, items, handleAction, isLastGroup }) => { heading,
return ( items,
<> handleAction,
{heading ? ( isLastGroup,
<Command.Group heading={heading}> }) => {
{items.map((item, index) => ( return (
<CommandItem <>
key={`${heading}-${item.label}-${index}`} {heading ? (
{...item} <Command.Group heading={heading}>
handleAction={handleAction} {items.map((item, index) => (
/>
))}
</Command.Group>
) : (
items.map((item, index) => (
<CommandItem <CommandItem
key={`item-${item.label}-${index}`} key={`${heading}-${item.label}-${index}`}
{...item} {...item}
handleAction={handleAction} handleAction={handleAction}
/> />
)) ))}
)} </Command.Group>
{!isLastGroup && <CommandSeparator className="my-1.5" />} ) : (
</> items.map((item, index) => (
) <CommandItem
}, key={`item-${item.label}-${index}`}
) {...item}
handleAction={handleAction}
/>
))
)}
{!isLastGroup && <CommandSeparator className="my-1.5" />}
</>
)
}
CommandGroup.displayName = "CommandGroup" CommandGroup.displayName = "CommandGroup"

9
web/app/components/command-palette/command-palette.tsx
View File

@@ -32,17 +32,16 @@ export function CommandPalette() {
} }
export function RealCommandPalette() { export function RealCommandPalette() {
const { me } = useAccount({ root: { personalLinks: [], personalPages: [] } }) const { me } = useAccount({
root: { personalLinks: [{}], personalPages: [{}] },
})
const dialogRef = React.useRef<HTMLDivElement | null>(null) const dialogRef = React.useRef<HTMLDivElement | null>(null)
const [inputValue, setInputValue] = React.useState("") const [inputValue, setInputValue] = React.useState("")
const [activePage, setActivePage] = React.useState("home") const [activePage, setActivePage] = React.useState("home")
const [open, setOpen] = useAtom(commandPaletteOpenAtom) const [open, setOpen] = useAtom(commandPaletteOpenAtom)
const actions = useCommandActions() const actions = useCommandActions()
const commandGroups = React.useMemo( const commandGroups = createCommandGroups(actions)
() => me && createCommandGroups(actions, me),
[actions, me],
)
const bounce = React.useCallback(() => { const bounce = React.useCallback(() => {
if (dialogRef.current) { if (dialogRef.current) {