rename combobox to dropdown
This commit is contained in:
parent
7f71f83a59
commit
7b3e7e9ca2
4 changed files with 8 additions and 8 deletions
|
@ -2,7 +2,7 @@ import { Component, createContext, createEffect, createResource, Match, ParentCo
|
||||||
import { action, query, useAction } from "@solidjs/router";
|
import { action, query, useAction } from "@solidjs/router";
|
||||||
import { useSession } from "vinxi/http";
|
import { useSession } from "vinxi/http";
|
||||||
import { createStore } from "solid-js/store";
|
import { createStore } from "solid-js/store";
|
||||||
import { ComboBox } from "./combobox";
|
import { Dropdown } from "./dropdown";
|
||||||
import { WiMoonAltFull, WiMoonAltNew, WiMoonAltFirstQuarter } from "solid-icons/wi";
|
import { WiMoonAltFull, WiMoonAltNew, WiMoonAltFirstQuarter } from "solid-icons/wi";
|
||||||
import css from './colorschemepicker.module.css';
|
import css from './colorschemepicker.module.css';
|
||||||
|
|
||||||
|
@ -90,7 +90,7 @@ export const ColorSchemePicker: Component = (props) => {
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<label aria-label="Color scheme picker">
|
<label aria-label="Color scheme picker">
|
||||||
<ComboBox id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={(next) => setColorScheme(next())} values={colorSchemes}>{
|
<Dropdown id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={(next) => setColorScheme(next())} values={colorSchemes}>{
|
||||||
(k, v) => <>
|
(k, v) => <>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
|
<Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
|
||||||
|
@ -99,7 +99,7 @@ export const ColorSchemePicker: Component = (props) => {
|
||||||
</Switch>
|
</Switch>
|
||||||
{v}
|
{v}
|
||||||
</>
|
</>
|
||||||
}</ComboBox>
|
}</Dropdown>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class={css.hue} aria-label="Hue slider">
|
<label class={css.hue} aria-label="Hue slider">
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "
|
||||||
import css from './index.module.css';
|
import css from './index.module.css';
|
||||||
import { FaSolidAngleDown } from "solid-icons/fa";
|
import { FaSolidAngleDown } from "solid-icons/fa";
|
||||||
|
|
||||||
interface ComboBoxProps<T, K extends string> {
|
interface DropdownProps<T, K extends string> {
|
||||||
id: string;
|
id: string;
|
||||||
class?: string;
|
class?: string;
|
||||||
value: K;
|
value: K;
|
||||||
|
@ -14,7 +14,7 @@ interface ComboBoxProps<T, K extends string> {
|
||||||
filter?: (query: string, key: K, value: T) => boolean;
|
filter?: (query: string, key: K, value: T) => boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ComboBox<T, K extends string>(props: ComboBoxProps<T, K>) {
|
export function Dropdown<T, K extends string>(props: DropdownProps<T, K>) {
|
||||||
const [dialog, setDialog] = createSignal<HTMLDialogElement>();
|
const [dialog, setDialog] = createSignal<HTMLDialogElement>();
|
||||||
const [value, setValue] = createSignal<K>(props.value);
|
const [value, setValue] = createSignal<K>(props.value);
|
||||||
const [open, setOpen] = createSignal<boolean>(props.open ?? false);
|
const [open, setOpen] = createSignal<boolean>(props.open ?? false);
|
|
@ -1,7 +1,7 @@
|
||||||
import { Component } from "solid-js";
|
import { Component } from "solid-js";
|
||||||
import { internal_useI18n } from "./context";
|
import { internal_useI18n } from "./context";
|
||||||
import { locales } from "./constants";
|
import { locales } from "./constants";
|
||||||
import { ComboBox } from "~/components/combobox";
|
import { Dropdown } from "~/components/dropdown";
|
||||||
import { Dynamic } from "solid-js/web";
|
import { Dynamic } from "solid-js/web";
|
||||||
import css from './picker.module.css';
|
import css from './picker.module.css';
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ interface LocalePickerProps { }
|
||||||
export const LocalePicker: Component<LocalePickerProps> = (props) => {
|
export const LocalePicker: Component<LocalePickerProps> = (props) => {
|
||||||
const { locale, setLocale } = internal_useI18n();
|
const { locale, setLocale } = internal_useI18n();
|
||||||
|
|
||||||
return <ComboBox
|
return <Dropdown
|
||||||
id="locale-picker"
|
id="locale-picker"
|
||||||
class={css.box}
|
class={css.box}
|
||||||
value={locale()}
|
value={locale()}
|
||||||
|
@ -19,5 +19,5 @@ export const LocalePicker: Component<LocalePickerProps> = (props) => {
|
||||||
showCaret={false}
|
showCaret={false}
|
||||||
>
|
>
|
||||||
{(locale, { flag, label }) => <Dynamic component={flag} lang={locale} aria-label={label} class={css.flag} />}
|
{(locale, { flag, label }) => <Dynamic component={flag} lang={locale} aria-label={label} class={css.flag} />}
|
||||||
</ComboBox>
|
</Dropdown>
|
||||||
};
|
};
|
Loading…
Add table
Add a link
Reference in a new issue