starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-04-22 08:18:33 +02: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] { [la-dialog][cmdk-dialog] {
top: 15%; top: 15%;
transform: translateX(-50%); transform: translateX(-50%);
width: 640px; max-width: 640px;
background: var(--cmdk-bg); background: var(--cmdk-bg);
box-shadow: var(--cmdk-shadow); box-shadow: var(--cmdk-shadow);
transform-origin: left; transform-origin: left;
animation: scaleIn 0.2s ease; animation: scaleIn 0.2s ease;
transition: transform 0.1s ease; transition: transform 0.1s ease;
border: 0.5px solid var(--cmdk-border-color); 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"] { [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 { Command } from "cmdk"
import { CommandSeparator, CommandShortcut } from "@/components/ui/command" 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 { CommandItemType, CommandAction } from "./command-data"
import { HTMLLikeElement, renderHTMLLikeElement } from "@/lib/utils" import { HTMLLikeElement, renderHTMLLikeElement } from "@/lib/utils"
@@ -9,17 +10,24 @@ 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 }> = ({ content }) => { const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = React.memo(({ content }) => {
return <>{renderHTMLLikeElement(content)}</> return <>{renderHTMLLikeElement(content)}</>
} })
export const CommandItem: React.FC<CommandItemProps> = ({ icon, label, action, payload, shortcut, handleAction }) => ( HTMLLikeRenderer.displayName = "HTMLLikeRenderer"
<Command.Item onSelect={() => handleAction(action, payload)}>
{icon && <LaIcon name={icon} />} export const CommandItem: React.FC<CommandItemProps> = React.memo(
<HTMLLikeRenderer content={label} /> ({ icon, label, action, payload, shortcut, handleAction }) => (
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>} <Command.Item onSelect={() => handleAction(action, payload)}>
</Command.Item> {icon && <LaIcon name={icon} />}
<HTMLLikeRenderer content={label} />
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
</Command.Item>
)
) )
CommandItem.displayName = "CommandItem"
export interface CommandGroupProps { export interface CommandGroupProps {
heading?: string heading?: string
items: CommandItemType[] items: CommandItemType[]
@@ -27,7 +35,7 @@ export interface CommandGroupProps {
isLastGroup: boolean 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 ( return (
<> <>
{heading ? ( {heading ? (
@@ -44,4 +52,6 @@ export const CommandGroup: React.FC<CommandGroupProps> = ({ heading, items, hand
{!isLastGroup && <CommandSeparator className="my-1.5" />} {!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 { useCommandActions } from "./hooks/use-command-actions"
import { atom, useAtom } from "jotai" 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) => const filterItems = (items: CommandItemType[], searchRegex: RegExp) =>
items.filter(item => searchRegex.test(item.value)).slice(0, 6) items.filter(item => searchRegex.test(item.value)).slice(0, 6)