mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
Create BrowserSearch component, because we cannot read from stores within slotted content
This commit is contained in:
parent
6d546b0bca
commit
7dc74004ae
3 changed files with 22 additions and 9 deletions
10
ts/graphs/BrowserSearch.svelte
Normal file
10
ts/graphs/BrowserSearch.svelte
Normal file
|
@ -0,0 +1,10 @@
|
|||
<script lang="typescript">
|
||||
import { bridgeCommand } from "anki/bridgecommand";
|
||||
|
||||
export let search: Readable<string>;
|
||||
export let query: string;
|
||||
|
||||
$: {
|
||||
bridgeCommand(`browserSearch: ${$search} ${query}`);
|
||||
}
|
||||
</script>
|
|
@ -3,9 +3,9 @@
|
|||
|
||||
import type { SvelteComponent } from "svelte/internal";
|
||||
import type { I18n } from "anki/i18n";
|
||||
import { bridgeCommand } from "anki/bridgecommand";
|
||||
|
||||
import WithGraphData from "./WithGraphData.svelte";
|
||||
import BrowserSearch from "./BrowserSearch.svelte";
|
||||
|
||||
export let i18n: I18n;
|
||||
export let nightMode: boolean;
|
||||
|
@ -15,20 +15,22 @@
|
|||
export let initialDays: number;
|
||||
export let controller: SvelteComponent | null;
|
||||
|
||||
const browserSearch = (search: string, query: string): void => {
|
||||
bridgeCommand(`browserSearch:${search} ${query}`);
|
||||
let query: string;
|
||||
|
||||
const activateBrowserSearch = (event: CustomEvent): void => {
|
||||
query = event.detail.query;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
div {
|
||||
@media only screen and (max-width: 600px) {
|
||||
.base {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="base">
|
||||
<div>
|
||||
<WithGraphData
|
||||
{initialSearch}
|
||||
{initialDays}
|
||||
|
@ -51,8 +53,10 @@
|
|||
{revlogRange}
|
||||
{i18n}
|
||||
{nightMode}
|
||||
on:search={(event) => browserSearch(search, event.detail.query)} />
|
||||
on:search={activateBrowserSearch} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<BrowserSearch {search} {query} />
|
||||
</WithGraphData>
|
||||
</div>
|
||||
|
|
|
@ -11,8 +11,7 @@ function useAsyncReactive<T, E>(
|
|||
asyncFunction: () => Promise<T>,
|
||||
dependencies: [Readable<unknown>, ...Readable<unknown>[]]
|
||||
): AsyncReativeData<T, E> {
|
||||
const initial = asyncFunction();
|
||||
const promise = derived(dependencies, (_, set) => set(asyncFunction()), initial);
|
||||
const promise = derived(dependencies, (_, set) => set(asyncFunction()), asyncFunction());
|
||||
|
||||
const value = derived(
|
||||
promise,
|
||||
|
|
Loading…
Reference in a new issue