69 lines
1.3 KiB
TypeScript
69 lines
1.3 KiB
TypeScript
|
import React, { ChangeEvent, CSSProperties } from "react";
|
||
|
|
import "./select.css";
|
||
|
|
|
||
|
|
interface CustomStyleCSS extends CSSProperties {
|
||
|
|
"--codex-select-background"?: string;
|
||
|
|
"--codex-color"?: string;
|
||
|
|
"--codex-border-radius"?: string;
|
||
|
|
"--codex-select-border"?: string;
|
||
|
|
"--codex-select-icon-url"?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
label: string;
|
||
|
|
id: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Tuple array for options.
|
||
|
|
* The first item is the value and the second is the text.
|
||
|
|
*/
|
||
|
|
options: [string, string][];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* OnChange event called whenever the select value changed.
|
||
|
|
*/
|
||
|
|
onChange?: (e: ChangeEvent<HTMLSelectElement>) => void | Promise<void>;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Apply custom css variables.
|
||
|
|
*/
|
||
|
|
style?: CustomStyleCSS;
|
||
|
|
|
||
|
|
defaultValue?: string;
|
||
|
|
|
||
|
|
className?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Select({
|
||
|
|
label,
|
||
|
|
id,
|
||
|
|
options,
|
||
|
|
onChange,
|
||
|
|
style,
|
||
|
|
className,
|
||
|
|
defaultValue,
|
||
|
|
}: Props) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<label htmlFor={id} className="select-label">
|
||
|
|
{label}
|
||
|
|
</label>
|
||
|
|
<div>
|
||
|
|
<select
|
||
|
|
id={id}
|
||
|
|
className={`select ${className}`}
|
||
|
|
onChange={onChange}
|
||
|
|
style={style}
|
||
|
|
defaultValue={defaultValue}
|
||
|
|
>
|
||
|
|
{options.map(([value, text]) => (
|
||
|
|
<option key={value} value={value}>
|
||
|
|
{text}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|