diff --git a/src/App.tsx b/src/App.tsx index 89f37b2..e9a8a40 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,4 @@ -import {ReactNode, useCallback, useState} from "react"; -import {FixedSizeList as List} from "react-window"; -import Select, {createFilter, MenuListProps} from "react-select"; -import * as R from 'ramda'; +import {useEffect, useState} from "react"; import classNames from "classnames"; import {useQuery} from "@tanstack/react-query"; @@ -9,73 +6,6 @@ import {LinkCollection, type Option} from "./aliases"; import {CheckIcon, ChevronUpDownIcon} from '@heroicons/react/20/solid' import {Combobox} from '@headlessui/react' -// TODO: Fix this for wrapping items, esp on phones -const height = 35; - -function MenuList(props: MenuListProps) { - const { - options, - children, - maxHeight, - getValue - } = props as Omit & { - children: ReactNode[] - }; - - const [value] = getValue(); - const initialOffset = options.indexOf(value) * height; - - return ( - {({ - index, - style - }) =>
{children[index]}
} -
); -} - -function NaiveSelect({setSelected}: { - setSelected: (value: Option) => void -}) { - const { - data: options, - isLoading, - } = useQuery({ - queryKey: ['obsidian-metadata'], - initialData: [], - queryFn: async () => { - const response = await fetch("/metadata") - const fullData: any[] = await response.json(); - - return R.sortBy(v => -(v.data.backlinks?.length ?? 0), fullData.map(md => ({ - value: md.relativePath, - label: md.fileName, - data: md, - }) as Option)); - }, - }); - - const onChange = useCallback((value: Option) => { - setSelected(value); - navigator.clipboard.writeText(`[[${value.label}]]`) - }, []); - - return ( 'select-input-wrapper'}} + onChange={onChange as any} + components={{MenuList}} + isDisabled={isLoading} + isLoading={isLoading} + isClearable={true} + options={options} + filterOption={createFilter({ignoreAccents: false})} + />) +}