astro-reactive-form/packages/form/components/controls/Dropdown.astro
Allan Siqueira f502e6ca24
feat(form): readOnly flag (#166)
* feat: add readOnly flag on form

* fix: resolve PR coments

* fix: add flag disabled to fields that dont have effect on readonly attr
2022-10-31 17:27:43 +01:00

47 lines
808 B
Text

---
/**
* DROPDOWN COMPONENT
*/
import type { Dropdown, ControlOption } from '@astro-reactive/common';
export interface Props {
control: Dropdown;
readOnly?: boolean;
}
const { control, readOnly } = Astro.props;
const options = control.options.map((option: string | ControlOption) => {
if (typeof option === 'string') {
return {
label: option,
value: option,
};
}
return option;
});
---
<select
name={control.name}
id={control.name}
disabled={readOnly || null}
>
{
control?.placeholder && (
<option value="" disabled selected={!control?.value}>
{control.placeholder}
</option>
)
}
{
options.map((option: ControlOption) => (
<option
value={option.value}
selected={option.value === control.value}
>
{option.label}
</option>
))
}
</select>