1
0
silverbullet/web/components/filter.tsx

246 lines
6.7 KiB
TypeScript
Raw Normal View History

import {
CompletionContext,
CompletionResult,
useEffect,
useRef,
useState,
} from "../deps.ts";
import { FilterOption } from "../../common/types.ts";
import fuzzysort from "https://esm.sh/fuzzysort@2.0.1";
import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.3/src/index";
import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types";
import { MiniEditor } from "./mini_editor.tsx";
function magicSorter(a: FilterOption, b: FilterOption): number {
if (a.orderId && b.orderId) {
return a.orderId < b.orderId ? -1 : 1;
}
2022-05-16 13:09:36 +00:00
if (a.orderId) {
return -1;
2022-03-29 10:13:46 +00:00
}
2022-05-16 13:09:36 +00:00
if (b.orderId) {
return 1;
2022-03-29 10:13:46 +00:00
}
2022-05-16 13:09:36 +00:00
return 0;
2022-03-29 10:13:46 +00:00
}
2022-05-16 13:09:36 +00:00
type FilterResult = FilterOption & {
result?: any;
};
function simpleFilter(
pattern: string,
options: FilterOption[],
): FilterOption[] {
2022-04-01 13:02:35 +00:00
const lowerPattern = pattern.toLowerCase();
return options.filter((option) => {
return option.name.toLowerCase().includes(lowerPattern);
});
}
2022-05-16 13:09:36 +00:00
function escapeHtml(unsafe: string): string {
return unsafe
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("'", "&#039;");
}
function fuzzySorter(pattern: string, options: FilterOption[]): FilterResult[] {
return fuzzysort
.go(pattern, options, {
all: true,
key: "name",
})
.map((result: any) => ({ ...result.obj, result: result }))
2022-05-16 13:09:36 +00:00
.sort(magicSorter);
}
export function FilterList({
placeholder,
options,
label,
onSelect,
onKeyPress,
completer,
vimMode,
darkMode,
allowNew = false,
helpText = "",
2022-04-01 13:02:35 +00:00
completePrefix,
icon: Icon,
newHint,
}: {
placeholder: string;
options: FilterOption[];
label: string;
onKeyPress?: (key: string, currentText: string) => void;
onSelect: (option: FilterOption | undefined) => void;
vimMode: boolean;
darkMode: boolean;
completer: (context: CompletionContext) => Promise<CompletionResult | null>;
allowNew?: boolean;
2022-04-01 13:02:35 +00:00
completePrefix?: string;
helpText: string;
newHint?: string;
icon?: FunctionalComponent<FeatherProps>;
}) {
const [text, setText] = useState("");
const [matchingOptions, setMatchingOptions] = useState(
fuzzySorter("", options),
);
const [selectedOption, setSelectionOption] = useState(0);
const selectedElementRef = useRef<HTMLDivElement>(null);
function updateFilter(originalPhrase: string) {
const foundExactMatch = false;
const results = fuzzySorter(originalPhrase, options);
2022-08-01 15:06:17 +00:00
if (allowNew && !foundExactMatch && originalPhrase) {
results.splice(1, 0, {
2022-05-16 13:09:36 +00:00
name: originalPhrase,
hint: newHint,
});
}
2022-05-16 13:09:36 +00:00
setMatchingOptions(results);
// setText(originalPhrase);
setSelectionOption(0);
}
useEffect(() => {
updateFilter(text);
}, [options]);
useEffect(() => {
function closer() {
console.log("Invoking closer");
onSelect(undefined);
}
document.addEventListener("click", closer);
return () => {
document.removeEventListener("click", closer);
};
}, []);
const returnEl = (
2022-08-02 12:40:04 +00:00
<div className="sb-filter-wrapper">
<div className="sb-filter-box">
<div className="sb-header">
2022-08-01 11:05:30 +00:00
<label>{label}</label>
<MiniEditor
text={text}
vimMode={vimMode}
vimStartInInsertMode={true}
focus={true}
darkMode={darkMode}
completer={completer}
placeholderText={placeholder}
onEnter={() => {
onSelect(matchingOptions[selectedOption]);
return true;
}}
onEscape={() => {
onSelect(undefined);
2022-08-01 11:05:30 +00:00
}}
onChange={(text) => {
updateFilter(text);
}}
onKeyUp={(view, e) => {
2022-08-01 11:05:30 +00:00
if (onKeyPress) {
onKeyPress(e.key, view.state.sliceDoc());
2022-08-01 11:05:30 +00:00
}
switch (e.key) {
case "ArrowUp":
setSelectionOption(Math.max(0, selectedOption - 1));
return true;
2022-08-01 11:05:30 +00:00
case "ArrowDown":
setSelectionOption(
Math.min(matchingOptions.length - 1, selectedOption + 1),
2022-08-01 11:05:30 +00:00
);
return true;
2022-08-01 15:06:17 +00:00
case "PageUp":
setSelectionOption(Math.max(0, selectedOption - 5));
return true;
2022-08-01 15:06:17 +00:00
case "PageDown":
setSelectionOption(Math.max(0, selectedOption + 5));
return true;
2022-08-01 15:06:17 +00:00
case "Home":
setSelectionOption(0);
return true;
2022-08-01 15:06:17 +00:00
case "End":
setSelectionOption(matchingOptions.length - 1);
return true;
case " ": {
const text = view.state.sliceDoc();
if (completePrefix && text === " ") {
console.log("Doing the complete thing");
setText(completePrefix);
2022-08-01 11:05:30 +00:00
updateFilter(completePrefix);
return true;
2022-08-01 11:05:30 +00:00
}
break;
}
2022-08-01 11:05:30 +00:00
}
return false;
}}
2022-08-01 11:05:30 +00:00
/>
</div>
<div
2022-08-02 12:40:04 +00:00
className="sb-help-text"
2022-08-01 11:05:30 +00:00
dangerouslySetInnerHTML={{ __html: helpText }}
>
</div>
2022-08-02 12:40:04 +00:00
<div className="sb-result-list">
2022-08-01 11:05:30 +00:00
{matchingOptions && matchingOptions.length > 0
? matchingOptions.map((option, idx) => (
<div
key={"" + idx}
ref={selectedOption === idx ? selectedElementRef : undefined}
className={selectedOption === idx
? "sb-selected-option"
: "sb-option"}
onMouseOver={(e) => {
setSelectionOption(idx);
}}
onClick={(e) => {
console.log("Selecting", option);
e.stopPropagation();
onSelect(option);
}}
>
2022-12-17 08:07:09 +00:00
{Icon && (
<span className="sb-icon">
<Icon width={16} height={16} />
</span>
)}
<span
className="sb-name"
dangerouslySetInnerHTML={{
__html: option?.result?.indexes
? fuzzysort.highlight(option.result, "<b>", "</b>")!
: escapeHtml(option.name),
2022-05-16 13:09:36 +00:00
}}
2022-08-01 11:05:30 +00:00
>
</span>
{option.hint && <span className="sb-hint">{option.hint}</span>}
</div>
))
2022-08-01 11:05:30 +00:00
: null}
</div>
</div>
</div>
);
useEffect(() => {
selectedElementRef.current?.scrollIntoView({
block: "nearest",
});
});
return returnEl;
}