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(); this.setupFunctions();
Settings.registerPanel("plugins", Strings.Panels.plugins, { Settings.registerPanel("plugins", Strings.Panels.plugins, {
order: 3, 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, type: this.prefix,
folder: this.addonFolder, folder: this.addonFolder,
onChange: this.togglePlugin.bind(this), onChange: this.togglePlugin.bind(this),

View File

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

View File

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

View File

@ -80,15 +80,15 @@ function buildLink(type, url) {
return makeButton(Strings.Addons[type], link); return makeButton(Strings.Addons[type], link);
} }
export default function AddonCard({addon, type, disabled, enabled, onChange: parentChange, hasSettings, editAddon, deleteAddon, getSettingsPanel}) { export default function AddonCard({addon, type, disabled, enabled: initialValue, onChange: parentChange, hasSettings, editAddon, deleteAddon, getSettingsPanel}) {
const [isEnabled, setEnabled] = useState(enabled); const [isEnabled, setEnabled] = useState(initialValue);
const onChange = useCallback(() => { const onChange = useCallback(() => {
setEnabled(!isEnabled); setEnabled(!isEnabled);
if (parentChange) parentChange(addon.id); if (parentChange) parentChange(addon.id);
}, [addon.id, parentChange, isEnabled]); }, [addon.id, parentChange, isEnabled]);
const showSettings = useCallback(() => { const showSettings = useCallback(() => {
if (!hasSettings || !enabled) return; if (!hasSettings || !isEnabled) return;
const name = getString(addon.name); const name = getString(addon.name);
try { try {
Modals.showAddonSettingsModal(name, getSettingsPanel()); 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"}); Toasts.show(Strings.Addons.settingsError.format({name}), {type: "error"});
Logger.stacktrace("Addon Settings", "Unable to get settings panel for " + name + ".", err); 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(() => { const messageAuthor = useCallback(() => {
if (!addon.authorId) return; if (!addon.authorId) return;
@ -135,18 +135,18 @@ export default function AddonCard({addon, type, disabled, enabled, onChange: par
return <div className="bd-footer"> return <div className="bd-footer">
<span className="bd-links">{linkComponents}</span> <span className="bd-links">{linkComponents}</span>
<div className="bd-controls"> <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})} {editAddon && makeButton(Strings.Addons.editAddon, <EditIcon size={"20px"} />, editAddon, {isControl: true})}
{deleteAddon && makeButton(Strings.Addons.deleteAddon, <DeleteIcon size={"20px"} />, deleteAddon, {isControl: true, danger: true})} {deleteAddon && makeButton(Strings.Addons.deleteAddon, <DeleteIcon size={"20px"} />, deleteAddon, {isControl: true, danger: true})}
</div> </div>
</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" : "")}> return <div id={`${addon.id}-card`} className={"bd-addon-card" + (disabled ? " bd-addon-card-disabled" : "")}>
<div className="bd-addon-header"> <div className="bd-addon-header">
{type === "plugin" ? <ExtIcon size="18px" className="bd-icon" /> : <ThemeIcon size="18px" className="bd-icon" />} {type === "plugin" ? <ExtIcon size="18px" className="bd-icon" /> : <ThemeIcon size="18px" className="bd-icon" />}
<div className="bd-title">{title}</div> <div className="bd-title">{title}</div>
<Switch disabled={disabled} checked={enabled} onChange={onChange} /> <Switch disabled={disabled} checked={isEnabled} onChange={onChange} />
</div> </div>
<div className="bd-description-wrap"> <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>} {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 [sort, setSort] = useState(getState.bind(null, type, "sort", "name"));
const [ascending, setAscending] = useState(getState.bind(null, type, "ascending", true)); const [ascending, setAscending] = useState(getState.bind(null, type, "ascending", true));
const [view, setView] = useState(getState.bind(null, type, "view", "list")); 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(() => { useEffect(() => {
Events.on(`${prefix}-loaded`, forceUpdate); 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); 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>; 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 hasAddonsInstalled = addonList.length !== 0;
const isSearching = !!query; const isSearching = !!query;