Fix addoncard and addonlist

This commit is contained in:
Zack Rauen 2023-03-19 23:41:39 -04:00
parent 7b58be079d
commit 8d3f01bb40
5 changed files with 12 additions and 12 deletions

View File

@ -44,7 +44,7 @@ export default new class PluginManager extends AddonManager {
this.setupFunctions();
Settings.registerPanel("plugins", Strings.Panels.plugins, {
order: 3,
element: () => SettingsRenderer.getAddonPanel(Strings.Panels.plugins, this.addonList, this.state, {
element: SettingsRenderer.getAddonPanel(Strings.Panels.plugins, this.addonList, this.state, {
type: this.prefix,
folder: this.addonFolder,
onChange: this.togglePlugin.bind(this),

View File

@ -23,7 +23,7 @@ export default new class ThemeManager extends AddonManager {
const errors = super.initialize();
Settings.registerPanel("themes", Strings.Panels.themes, {
order: 4,
element: () => SettingsRenderer.getAddonPanel(Strings.Panels.themes, this.addonList, this.state, {
element: SettingsRenderer.getAddonPanel(Strings.Panels.themes, this.addonList, this.state, {
type: this.prefix,
folder: this.addonFolder,
onChange: this.toggleTheme.bind(this),

View File

@ -54,7 +54,7 @@ export default new class SettingsRenderer {
}
getAddonPanel(title, addonList, addonState, options = {}) {
return React.createElement(AddonList, Object.assign({}, {
return () => React.createElement(AddonList, Object.assign({}, {
title: title,
addonList: addonList,
addonState: addonState

View File

@ -80,15 +80,15 @@ function buildLink(type, url) {
return makeButton(Strings.Addons[type], link);
}
export default function AddonCard({addon, type, disabled, enabled, onChange: parentChange, hasSettings, editAddon, deleteAddon, getSettingsPanel}) {
const [isEnabled, setEnabled] = useState(enabled);
export default function AddonCard({addon, type, disabled, enabled: initialValue, onChange: parentChange, hasSettings, editAddon, deleteAddon, getSettingsPanel}) {
const [isEnabled, setEnabled] = useState(initialValue);
const onChange = useCallback(() => {
setEnabled(!isEnabled);
if (parentChange) parentChange(addon.id);
}, [addon.id, parentChange, isEnabled]);
const showSettings = useCallback(() => {
if (!hasSettings || !enabled) return;
if (!hasSettings || !isEnabled) return;
const name = getString(addon.name);
try {
Modals.showAddonSettingsModal(name, getSettingsPanel());
@ -97,7 +97,7 @@ export default function AddonCard({addon, type, disabled, enabled, onChange: par
Toasts.show(Strings.Addons.settingsError.format({name}), {type: "error"});
Logger.stacktrace("Addon Settings", "Unable to get settings panel for " + name + ".", err);
}
}, [hasSettings, enabled, addon.name, getSettingsPanel]);
}, [hasSettings, isEnabled, addon.name, getSettingsPanel]);
const messageAuthor = useCallback(() => {
if (!addon.authorId) return;
@ -135,18 +135,18 @@ export default function AddonCard({addon, type, disabled, enabled, onChange: par
return <div className="bd-footer">
<span className="bd-links">{linkComponents}</span>
<div className="bd-controls">
{hasSettings && makeButton(Strings.Addons.addonSettings, <CogIcon size={"20px"} />, showSettings, {isControl: true, disabled: !enabled})}
{hasSettings && makeButton(Strings.Addons.addonSettings, <CogIcon size={"20px"} />, showSettings, {isControl: true, disabled: !isEnabled})}
{editAddon && makeButton(Strings.Addons.editAddon, <EditIcon size={"20px"} />, editAddon, {isControl: true})}
{deleteAddon && makeButton(Strings.Addons.deleteAddon, <DeleteIcon size={"20px"} />, deleteAddon, {isControl: true, danger: true})}
</div>
</div>;
}, [hasSettings, editAddon, deleteAddon, addon, enabled, showSettings]);
}, [hasSettings, editAddon, deleteAddon, addon, isEnabled, showSettings]);
return <div id={`${addon.id}-card`} className={"bd-addon-card" + (disabled ? " bd-addon-card-disabled" : "")}>
<div className="bd-addon-header">
{type === "plugin" ? <ExtIcon size="18px" className="bd-icon" /> : <ThemeIcon size="18px" className="bd-icon" />}
<div className="bd-title">{title}</div>
<Switch disabled={disabled} checked={enabled} onChange={onChange} />
<Switch disabled={disabled} checked={isEnabled} onChange={onChange} />
</div>
<div className="bd-description-wrap">
{disabled && <div className="banner banner-danger"><ErrorIcon className="bd-icon" />{`An error was encountered while trying to load this ${type}.`}</div>}

View File

@ -81,7 +81,7 @@ export default function AddonList({prefix, type, title, folder, addonList, addon
const [sort, setSort] = useState(getState.bind(null, type, "sort", "name"));
const [ascending, setAscending] = useState(getState.bind(null, type, "ascending", true));
const [view, setView] = useState(getState.bind(null, type, "view", "list"));
const [, forceUpdate] = useReducer(x => x + 1, 0);
const [forced, forceUpdate] = useReducer(x => x + 1, 0);
useEffect(() => {
Events.on(`${prefix}-loaded`, forceUpdate);
@ -150,7 +150,7 @@ export default function AddonList({prefix, type, title, folder, addonList, addon
const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
return <ErrorBoundary><AddonCard disabled={addon.partial} type={type} editAddon={() => triggerEdit(addon.id)} deleteAddon={() => triggerDelete(addon.id)} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} /></ErrorBoundary>;
});
}, [addonList, addonState, onChange, reload, triggerDelete, triggerEdit, type, sort, ascending, query]);
}, [addonList, addonState, onChange, reload, triggerDelete, triggerEdit, type, sort, ascending, query, forced]); // eslint-disable-line react-hooks/exhaustive-deps
const hasAddonsInstalled = addonList.length !== 0;
const isSearching = !!query;