Create BrowserSearch component, because we cannot read from stores within slotted content

This commit is contained in:
Henrik Giesel 2021-03-22 01:07:15 +01:00
parent 6d546b0bca
commit 7dc74004ae
3 changed files with 22 additions and 9 deletions

View 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>

View file

@ -3,9 +3,9 @@
import type { SvelteComponent } from "svelte/internal"; import type { SvelteComponent } from "svelte/internal";
import type { I18n } from "anki/i18n"; import type { I18n } from "anki/i18n";
import { bridgeCommand } from "anki/bridgecommand";
import WithGraphData from "./WithGraphData.svelte"; import WithGraphData from "./WithGraphData.svelte";
import BrowserSearch from "./BrowserSearch.svelte";
export let i18n: I18n; export let i18n: I18n;
export let nightMode: boolean; export let nightMode: boolean;
@ -15,20 +15,22 @@
export let initialDays: number; export let initialDays: number;
export let controller: SvelteComponent | null; export let controller: SvelteComponent | null;
const browserSearch = (search: string, query: string): void => { let query: string;
bridgeCommand(`browserSearch:${search} ${query}`);
const activateBrowserSearch = (event: CustomEvent): void => {
query = event.detail.query;
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
div {
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.base {
font-size: 12px; font-size: 12px;
} }
} }
</style> </style>
<div class="base"> <div>
<WithGraphData <WithGraphData
{initialSearch} {initialSearch}
{initialDays} {initialDays}
@ -51,8 +53,10 @@
{revlogRange} {revlogRange}
{i18n} {i18n}
{nightMode} {nightMode}
on:search={(event) => browserSearch(search, event.detail.query)} /> on:search={activateBrowserSearch} />
{/each} {/each}
{/if} {/if}
<BrowserSearch {search} {query} />
</WithGraphData> </WithGraphData>
</div> </div>

View file

@ -11,8 +11,7 @@ function useAsyncReactive<T, E>(
asyncFunction: () => Promise<T>, asyncFunction: () => Promise<T>,
dependencies: [Readable<unknown>, ...Readable<unknown>[]] dependencies: [Readable<unknown>, ...Readable<unknown>[]]
): AsyncReativeData<T, E> { ): AsyncReativeData<T, E> {
const initial = asyncFunction(); const promise = derived(dependencies, (_, set) => set(asyncFunction()), asyncFunction());
const promise = derived(dependencies, (_, set) => set(asyncFunction()), initial);
const value = derived( const value = derived(
promise, promise,