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

fix(palette): responsive and improve performance

Browse Source
This commit is contained in:
Aslam H
2024-09-09 10:34:00 +07:00
parent 99816efa26
commit 1c3ffcf92f
3 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/command-palette.css
View File

@@ -69,14 +69,14 @@
[la-dialog][cmdk-dialog] {
top: 15%;
transform: translateX(-50%);
width: 640px;
max-width: 640px;
background: var(--cmdk-bg);
box-shadow: var(--cmdk-shadow);
transform-origin: left;
animation: scaleIn 0.2s ease;
transition: transform 0.1s ease;
border: 0.5px solid var(--cmdk-border-color);
@apply fixed left-1/2 z-50 overflow-hidden rounded-lg outline-none;
@apply fixed left-1/2 z-50 w-full overflow-hidden rounded-lg outline-none;
}
[la-dialog][cmdk-dialog][data-state="closed"] {

32
web/components/custom/command-palette/command-items.tsx
View File

@@ -1,6 +1,7 @@
import * as React from "react"
import { Command } from "cmdk"
import { CommandSeparator, CommandShortcut } from "@/components/ui/command"
import { LaIcon } from "../la-icon"
import { LaIcon } from "@/components/custom/la-icon"
import { CommandItemType, CommandAction } from "./command-data"
import { HTMLLikeElement, renderHTMLLikeElement } from "@/lib/utils"
@@ -9,17 +10,24 @@ export interface CommandItemProps extends Omit<CommandItemType, "action"> {
handleAction: (action: CommandAction, payload?: any) => void
}
const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = ({ content }) => {
const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = React.memo(({ content }) => {
return <>{renderHTMLLikeElement(content)}</>
}
})
export const CommandItem: React.FC<CommandItemProps> = ({ icon, label, action, payload, shortcut, handleAction }) => (
<Command.Item onSelect={() => handleAction(action, payload)}>
{icon && <LaIcon name={icon} />}
<HTMLLikeRenderer content={label} />
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
</Command.Item>
HTMLLikeRenderer.displayName = "HTMLLikeRenderer"
export const CommandItem: React.FC<CommandItemProps> = React.memo(
({ icon, label, action, payload, shortcut, handleAction }) => (
<Command.Item onSelect={() => handleAction(action, payload)}>
{icon && <LaIcon name={icon} />}
<HTMLLikeRenderer content={label} />
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
</Command.Item>
)
)
CommandItem.displayName = "CommandItem"
export interface CommandGroupProps {
heading?: string
items: CommandItemType[]
@@ -27,7 +35,7 @@ export interface CommandGroupProps {
isLastGroup: boolean
}
export const CommandGroup: React.FC<CommandGroupProps> = ({ heading, items, handleAction, isLastGroup }) => {
export const CommandGroup: React.FC<CommandGroupProps> = React.memo(({ heading, items, handleAction, isLastGroup }) => {
return (
<>
{heading ? (
@@ -44,4 +52,6 @@ export const CommandGroup: React.FC<CommandGroupProps> = ({ heading, items, hand
{!isLastGroup && <CommandSeparator className="my-1.5" />}
</>
)
}
})
CommandGroup.displayName = "CommandGroup"

2
web/components/custom/command-palette/command-palette.tsx
View File

@@ -12,7 +12,7 @@ import { GraphNode } from "@/components/routes/public/PublicHomeRoute"
import { useCommandActions } from "./hooks/use-command-actions"
import { atom, useAtom } from "jotai"
let graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default)
const graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default)
const filterItems = (items: CommandItemType[], searchRegex: RegExp) =>
items.filter(item => searchRegex.test(item.value)).slice(0, 6)