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: topic selector remove memo

Browse Source
This commit is contained in:
Aslam H
2024-11-09 15:12:45 +07:00
parent fe5f3ac1b9
commit 60846a4c42
1 changed files with 78 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
web/app/components/custom/topic-selector.tsx
View File

@@ -123,85 +123,89 @@ interface TopicSelectorContentProps
topics: ListOfTopics topics: ListOfTopics
} }
const TopicSelectorContent: React.FC<TopicSelectorContentProps> = React.memo( const TopicSelectorContent: React.FC<TopicSelectorContentProps> = ({
({ showSearch, searchPlaceholder, value, onSelect, topics }) => { showSearch,
const [search, setSearch] = React.useState("") searchPlaceholder,
const filteredTopics = React.useMemo( value,
() => onSelect,
topics.filter((topic) => topics,
topic?.prettyName.toLowerCase().includes(search.toLowerCase()), }) => {
), const [search, setSearch] = React.useState("")
[topics, search], const filteredTopics = React.useMemo(
) () =>
topics.filter((topic) =>
topic?.prettyName.toLowerCase().includes(search.toLowerCase()),
),
[topics, search],
)
const parentRef = React.useRef<HTMLDivElement>(null) const parentRef = React.useRef<HTMLDivElement>(null)
const rowVirtualizer = useVirtualizer({ const rowVirtualizer = useVirtualizer({
count: filteredTopics.length, count: filteredTopics.length,
getScrollElement: () => parentRef.current, getScrollElement: () => parentRef.current,
estimateSize: () => 35, estimateSize: () => 35,
overscan: 5, overscan: 5,
}) })
return ( return (
<Command> <Command>
{showSearch && ( {showSearch && (
<CommandInput <CommandInput
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
className="h-9" className="h-9"
value={search} value={search}
onValueChange={setSearch} onValueChange={setSearch}
/> />
)} )}
<CommandList> <CommandList>
<div ref={parentRef} style={{ height: "200px", overflow: "auto" }}> <div ref={parentRef} style={{ height: "200px", overflow: "auto" }}>
<div <div
style={{ style={{
height: `${rowVirtualizer.getTotalSize()}px`, height: `${rowVirtualizer.getTotalSize()}px`,
width: "100%", width: "100%",
position: "relative", position: "relative",
}} }}
> >
<CommandGroup> <CommandGroup>
{rowVirtualizer.getVirtualItems().map((virtualRow) => { {rowVirtualizer.getVirtualItems().map((virtualRow) => {
const topic = filteredTopics[virtualRow.index] const topic = filteredTopics[virtualRow.index]
return ( return (
topic && ( topic && (
<CommandItem <CommandItem
key={virtualRow.key} key={virtualRow.key}
value={topic.name} value={topic.name}
onSelect={(value) => onSelect(value, topic)} onSelect={(value) => onSelect(value, topic)}
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
width: "100%", width: "100%",
height: `${virtualRow.size}px`, height: `${virtualRow.size}px`,
transform: `translateY(${virtualRow.start}px)`, transform: `translateY(${virtualRow.start}px)`,
}} }}
> >
<span>{topic.prettyName}</span> <span>{topic.prettyName}</span>
<LaIcon <LaIcon
name="Check" name="Check"
className={cn( className={cn(
"absolute right-3", "absolute right-3",
topic.name === value topic.name === value
? "text-primary" ? "text-primary"
: "text-transparent", : "text-transparent",
)} )}
/> />
</CommandItem> </CommandItem>
)
) )
})} )
</CommandGroup> })}
</div> </CommandGroup>
</div> </div>
</CommandList> </div>
</Command> </CommandList>
) </Command>
}, )
) }
TopicSelectorContent.displayName = "TopicSelectorContent" TopicSelectorContent.displayName = "TopicSelectorContent"