anki/ts/change-notetype/MapperRow.svelte
Matthias Metelka e059aab184
Improve Select component and add it back to Change Notetype screen (#2239)
* Do not include oldIdx in Select change event

I included it due to confusion about the variable names in the Change Notetype components.

* Remove redundant on:change listener from NotetypeSelector

* Use Select component in Change Notetype MapperRow (again)

* Remove redundant --cols and --col-size definitions

Bootstrap divides rows into columns of equal width by default.

* Add highlight to active DropdownItem

* Remove bootstrap dropdown item styling

* Fix JS error on dropdown accept action

cause: When closing the dropdown, buttonRef was removed before the callback in setTimeout was run.
2022-12-07 15:31:37 +10:00

39 lines
1.1 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import Col from "../components/Col.svelte";
import Row from "../components/Row.svelte";
import Select from "../components/Select.svelte";
import SelectOption from "../components/SelectOption.svelte";
import type { ChangeNotetypeState, MapContext } from "./lib";
export let state: ChangeNotetypeState;
export let ctx: MapContext;
export let newIndex: number;
const info = state.info;
$: oldIndex = $info.getOldIndex(ctx, newIndex);
function onChange(evt: CustomEvent) {
oldIndex = evt.detail.value;
state.setOldIndex(ctx, newIndex, oldIndex);
}
$: label = $info.getOldNamesIncludingNothing(ctx)[oldIndex];
</script>
<Row>
<Col>
<Select value={oldIndex} {label} on:change={onChange}>
{#each $info.getOldNamesIncludingNothing(ctx) as name, idx}
<SelectOption value={idx}>{name}</SelectOption>
{/each}
</Select>
</Col>
<Col>
{$info.getNewName(ctx, newIndex)}
</Col>
</Row>