Add textarea setting type to AdminPage#buildSettingComponent (#3141)

This commit is contained in:
David Sevilla Martin 2021-10-30 19:16:21 -04:00 committed by GitHub
parent a6f660236f
commit 1e595e752a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -75,6 +75,7 @@ export interface HTMLInputSettingsComponentOptions extends CommonSettingsItemOpt
const BooleanSettingTypes = ['bool', 'checkbox', 'switch', 'boolean'] as const;
const SelectSettingTypes = ['select', 'dropdown', 'selectdropdown'] as const;
const TextareaSettingTypes = ['textarea'] as const;
/**
* Valid options for the setting component builder to generate a Switch.
@ -95,10 +96,21 @@ export interface SelectSettingComponentOptions extends CommonSettingsItemOptions
default: string;
}
/**
* Valid options for the setting component builder to generate a Textarea.
*/
export interface TextareaSettingComponentOptions extends CommonSettingsItemOptions {
type: typeof TextareaSettingTypes[number];
}
/**
* All valid options for the setting component builder.
*/
export type SettingsComponentOptions = HTMLInputSettingsComponentOptions | SwitchSettingComponentOptions | SelectSettingComponentOptions;
export type SettingsComponentOptions =
| HTMLInputSettingsComponentOptions
| SwitchSettingComponentOptions
| SelectSettingComponentOptions
| TextareaSettingComponentOptions;
/**
* Valid attrs that can be returned by the `headerInfo` function
@ -212,6 +224,8 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
const [inputId, helpTextId] = [generateElementId(), generateElementId()];
let settingElement: Mithril.Children;
// Typescript being Typescript
// https://github.com/microsoft/TypeScript/issues/14520
if ((BooleanSettingTypes as readonly string[]).includes(type)) {
@ -228,35 +242,35 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
} else if ((SelectSettingTypes as readonly string[]).includes(type)) {
const { default: defaultValue, options, ...otherAttrs } = componentAttrs;
return (
<div className="Form-group">
<label for={inputId}>{label}</label>
<div className="helpText" id={helpTextId}>
{help}
</div>
<Select
id={inputId}
aria-describedby={helpTextId}
value={value || defaultValue}
options={options}
onchange={this.settings[setting]}
{...otherAttrs}
/>
</div>
settingElement = (
<Select
id={inputId}
aria-describedby={helpTextId}
value={value || defaultValue}
options={options}
onchange={this.settings[setting]}
{...otherAttrs}
/>
);
} else {
componentAttrs.className = classList(['FormControl', componentAttrs.className]);
return (
<div className="Form-group">
{label && <label for={inputId}>{label}</label>}
<div id={helpTextId} className="helpText">
{help}
</div>
<input id={inputId} aria-describedby={helpTextId} type={type} bidi={this.setting(setting)} {...componentAttrs} />
</div>
);
if ((TextareaSettingTypes as readonly string[]).includes(type)) {
settingElement = <textarea id={inputId} aria-describedby={helpTextId} bidi={this.setting(setting)} {...componentAttrs} />;
} else {
settingElement = <input id={inputId} aria-describedby={helpTextId} type={type} bidi={this.setting(setting)} {...componentAttrs} />;
}
}
return (
<div className="Form-group">
{label && <label for={inputId}>{label}</label>}
<div id={helpTextId} className="helpText">
{help}
</div>
{settingElement}
</div>
);
}
/**