starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-04-29 19:57:32 +02:00
Code Issues 2 Packages Projects Releases Wiki Activity

chore: add item value and cut line 1 (#167)

Browse Source
This commit is contained in:
Aslam
2024-09-19 21:12:19 +07:00
committed by GitHub
parent c003711905
commit 0df105f186
3 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/custom/command-palette/command-data.ts
View File

@@ -6,6 +6,7 @@ import { HTMLLikeElement } from "@/lib/utils"
export type CommandAction = string | (() => void) export type CommandAction = string | (() => void)
export interface CommandItemType { export interface CommandItemType {
id?: string
icon?: keyof typeof icons icon?: keyof typeof icons
value: string value: string
label: HTMLLikeElement | string label: HTMLLikeElement | string

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

@@ -11,14 +11,14 @@ export interface CommandItemProps extends Omit<CommandItemType, "action"> {
} }
const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = React.memo(({ content }) => { const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = React.memo(({ content }) => {
return <>{renderHTMLLikeElement(content)}</> 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> = React.memo(
({ icon, label, action, payload, shortcut, handleAction }) => ( ({ icon, label, action, payload, shortcut, handleAction, ...item }) => (
<Command.Item onSelect={() => handleAction(action, payload)}> <Command.Item value={`${item.id}-${item.value}`} onSelect={() => handleAction(action, payload)}>
{icon && <LaIcon name={icon} />} {icon && <LaIcon name={icon} />}
<HTMLLikeRenderer content={label} /> <HTMLLikeRenderer content={label} />
{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>} {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}

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

@@ -86,6 +86,7 @@ export function CommandPalette() {
heading: "Personal Links", heading: "Personal Links",
items: items:
me?.root.personalLinks?.map(link => ({ me?.root.personalLinks?.map(link => ({
id: link?.id,
icon: "Link" as const, icon: "Link" as const,
value: link?.title || "Untitled", value: link?.title || "Untitled",
label: link?.title || "Untitled", label: link?.title || "Untitled",
@@ -100,6 +101,7 @@ export function CommandPalette() {
heading: "Personal Pages", heading: "Personal Pages",
items: items:
me?.root.personalPages?.map(page => ({ me?.root.personalPages?.map(page => ({
id: page?.id,
icon: "FileText" as const, icon: "FileText" as const,
value: page?.title || "Untitled", value: page?.title || "Untitled",
label: page?.title || "Untitled", label: page?.title || "Untitled",
@@ -184,7 +186,7 @@ export function CommandPalette() {
const commandKey = React.useMemo(() => { const commandKey = React.useMemo(() => {
return filteredCommands return filteredCommands
.map(group => { .map(group => {
const itemsKey = group.items.map(item => `${item.label}-${item.action}`).join("|") const itemsKey = group.items.map(item => `${item.label}-${item.value}`).join("|")
return `${group.heading}:${itemsKey}` return `${group.heading}:${itemsKey}`
}) })
.join("__") .join("__")