Type features explicitly.
This commit is contained in:
parent
ee289d562c
commit
f4b547b99f
|
@ -1,3 +1,4 @@
|
|||
import Settings from '../settings.js';
|
||||
import {
|
||||
AboutSetting,
|
||||
AnonymizeUsernamesSetting,
|
||||
|
@ -10,66 +11,68 @@ import {
|
|||
UsernameColorsSetting,
|
||||
} from './components/exports.js';
|
||||
|
||||
/**
|
||||
* The array of features available in TRX.
|
||||
* * The index exists to sort the sidebar listing.
|
||||
* * The key should match the corresponding key from `Settings.features`.
|
||||
* * The value should be the header title for display.
|
||||
* * The component function should return the corresponding settings components.
|
||||
*/
|
||||
export const features = [
|
||||
type Feature = {
|
||||
index: number;
|
||||
key: keyof RemoveIndexSignature<Settings['features']>;
|
||||
title: string;
|
||||
component: () => any;
|
||||
};
|
||||
|
||||
export const features: Feature[] = [
|
||||
{
|
||||
index: 0,
|
||||
key: 'anonymizeUsernames',
|
||||
value: 'Anonymize Usernames',
|
||||
title: 'Anonymize Usernames',
|
||||
component: () => AnonymizeUsernamesSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'autocomplete',
|
||||
value: 'Autocomplete',
|
||||
title: 'Autocomplete',
|
||||
component: () => AutocompleteSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'backToTop',
|
||||
value: 'Back To Top',
|
||||
title: 'Back To Top',
|
||||
component: () => BackToTopSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'hideVotes',
|
||||
value: 'Hide Votes',
|
||||
title: 'Hide Votes',
|
||||
component: () => HideVotesSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'jumpToNewComment',
|
||||
value: 'Jump To New Comment',
|
||||
title: 'Jump To New Comment',
|
||||
component: () => JumpToNewCommentSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'markdownToolbar',
|
||||
value: 'Markdown Toolbar',
|
||||
title: 'Markdown Toolbar',
|
||||
component: () => MarkdownToolbarSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'userLabels',
|
||||
value: 'User Labels',
|
||||
title: 'User Labels',
|
||||
component: () => UserLabelsSetting,
|
||||
},
|
||||
{
|
||||
index: 0,
|
||||
key: 'usernameColors',
|
||||
value: 'Username Colors',
|
||||
title: 'Username Colors',
|
||||
component: () => UsernameColorsSetting,
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
key: 'debug',
|
||||
value: 'About & Info',
|
||||
title: 'About & Info',
|
||||
component: () => AboutSetting,
|
||||
},
|
||||
].sort((a, b) => a.index - b.index);
|
||||
];
|
||||
|
||||
features.sort((a, b) => a.index - b.index);
|
||||
|
|
|
@ -97,7 +97,7 @@ class App extends Component<Props, State> {
|
|||
const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`;
|
||||
|
||||
const asideElements = features.map(
|
||||
({key, value}) =>
|
||||
({key, title}) =>
|
||||
html`
|
||||
<li
|
||||
key=${key}
|
||||
|
@ -107,20 +107,20 @@ class App extends Component<Props, State> {
|
|||
this.setActiveFeature(key);
|
||||
}}"
|
||||
>
|
||||
${value}
|
||||
${title}
|
||||
</li>
|
||||
`,
|
||||
);
|
||||
|
||||
const mainElements = features.map(
|
||||
({key, value, component}) =>
|
||||
({key, title, component}) =>
|
||||
html`
|
||||
<${component()}
|
||||
class="${activeFeature === key ? '' : 'trx-hidden'}"
|
||||
enabled="${enabledFeatures.has(key)}"
|
||||
feature=${key}
|
||||
key=${key}
|
||||
title="${value}"
|
||||
title="${title}"
|
||||
/>
|
||||
`,
|
||||
);
|
||||
|
|
|
@ -33,4 +33,15 @@ declare global {
|
|||
id: number;
|
||||
username: string;
|
||||
};
|
||||
|
||||
// Removes an index signature from a type, useful for getting all defined keys
|
||||
// from an object that also has an index signature, like Settings.features.
|
||||
// https://stackoverflow.com/a/66252656
|
||||
type RemoveIndexSignature<T> = {
|
||||
[K in keyof T as string extends K
|
||||
? never
|
||||
: number extends K
|
||||
? never
|
||||
: K]: T[K];
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue