Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support custom reusable setting components for buildSettingComponent #3494

Merged
merged 3 commits into from
Jun 20, 2022
Merged

feat: support custom reusable setting components for buildSettingComponent #3494

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a603e99
chore: export common settings options
davwheat Jun 20, 2022
0b00c40
feat: support custom reusable setting components for `buildSettingCom…
davwheat Jun 20, 2022
818bb76
fix: oops, buggered the typings
davwheat Jun 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 49 additions & 3 deletions framework/core/js/src/admin/components/AdminPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import saveSettings from '../utils/saveSettings';
import AdminHeader from './AdminHeader';
import generateElementId from '../utils/generateElementId';
import ColorPreviewInput from '../../common/components/ColorPreviewInput';
import ItemList from '../../common/utils/ItemList';

export interface AdminHeaderOptions {
title: Mithril.Children;
Expand Down Expand Up @@ -57,7 +58,7 @@ export type HTMLInputTypes =
| 'url'
| 'week';

interface CommonSettingsItemOptions extends Mithril.Attributes {
export interface CommonSettingsItemOptions extends Mithril.Attributes {
setting: string;
label: Mithril.Children;
help?: Mithril.Children;
Expand Down Expand Up @@ -112,6 +113,11 @@ export interface ColorPreviewSettingComponentOptions extends CommonSettingsItemO
type: typeof ColorPreviewSettingType;
}

export interface CustomSettingComponentOptions extends CommonSettingsItemOptions {
type: string;
[key: string]: unknown;
}

/**
* All valid options for the setting component builder.
*/
Expand All @@ -120,7 +126,8 @@ export type SettingsComponentOptions =
| SwitchSettingComponentOptions
| SelectSettingComponentOptions
| TextareaSettingComponentOptions
| ColorPreviewSettingComponentOptions;
| ColorPreviewSettingComponentOptions
| CustomSettingComponentOptions;

/**
* Valid attrs that can be returned by the `headerInfo` function
Expand Down Expand Up @@ -185,6 +192,41 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
};
}

/**
* A list of extension-defined custom setting components to be available through
* {@link AdminPage.buildSettingComponent}.
*
* The ItemList key represents the value for `type` to be provided when calling
* {@link AdminPage.buildSettingComponent}. Other attributes passed are provided
* as arguments to the function added to the ItemList.
*
* ItemList priority has no effect here.
*
* @example
* ```tsx
* extend(AdminPage.prototype, 'customSettingComponents', function (items) {
* // You can access the AdminPage instance with `this` to access its `settings` property.
*
* // Prefixing the key with your extension ID is recommended to avoid collisions.
* items.add('my-ext.setting-component', (attrs) => {
* return (
* <div className={attrs.className}>
* <label>{attrs.label}</label>
* {attrs.help && <p class="helpText">{attrs.help}</p>}
*
* My setting component!
* </div>
* );
* })
* })
* ```
*/
customSettingComponents(): ItemList<(attributes: CommonSettingsItemOptions) => Mithril.Children> {
const items = new ItemList<(attributes: CommonSettingsItemOptions) => Mithril.Children>();

return items;
}

/**
* `buildSettingComponent` takes a settings object and turns it into a component.
* Depending on the type of input, you can set the type to 'bool', 'select', or
Expand Down Expand Up @@ -228,6 +270,8 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
return entry.call(this);
}

const customSettingComponents = this.customSettingComponents();

const { setting, help, type, label, ...componentAttrs } = entry;

const value = this.setting(setting)();
Expand Down Expand Up @@ -262,8 +306,10 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
{...otherAttrs}
/>
);
} else if (customSettingComponents.has(type)) {
return customSettingComponents.get(type)({ setting, help, label, ...componentAttrs });
} else {
componentAttrs.className = classList(['FormControl', componentAttrs.className]);
componentAttrs.className = classList('FormControl', componentAttrs.className);

if ((TextareaSettingTypes as readonly string[]).includes(type)) {
settingElement = <textarea id={inputId} aria-describedby={helpTextId} bidi={this.setting(setting)} {...componentAttrs} />;
Expand Down