Fix addoncard and addonlist
This commit is contained in:
parent
7b58be079d
commit
8d3f01bb40
|
@ -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),
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue