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

flarum · Oct 30, 2021 · 1e595e7 · 1e595e7
1 parent a6f6602
commit 1e595e7
Showing 1 changed file with 39 additions and 25 deletions.
diff --git a/js/src/admin/components/AdminPage.tsx b/js/src/admin/components/AdminPage.tsx
@@ -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>
+    );
   }
 
   /**