Make selects and reset button reactive on Photos filters
This commit is contained in:
@@ -4,19 +4,27 @@
|
||||
interface Option {
|
||||
value: string
|
||||
name: string
|
||||
default?: boolean
|
||||
}
|
||||
|
||||
export let id: string
|
||||
export let name: string
|
||||
export let base: Option
|
||||
export let options: Option[]
|
||||
export let value: string = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const defaultOption = options.find(option => option.default)
|
||||
const defaultOptionIndex = options.findIndex(option => option.default)
|
||||
|
||||
let current: number = 0
|
||||
let current: number = defaultOptionIndex
|
||||
let currentOptionEl: HTMLElement
|
||||
$: currentOption = options[current]
|
||||
|
||||
// Redefine value from parent (when reset)
|
||||
$: if (value === defaultOption.value) {
|
||||
current = defaultOptionIndex
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* When changing select value
|
||||
@@ -37,8 +45,8 @@
|
||||
</span>
|
||||
|
||||
<select {name} {id} on:change={handleChange}>
|
||||
{#each options as { value, name }}
|
||||
<option {value}>
|
||||
{#each options as { value, name }, index}
|
||||
<option {value} selected={index === current}>
|
||||
{name}
|
||||
</option>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user