diff --git a/renderer/src/ui/settings/addonlist.jsx b/renderer/src/ui/settings/addonlist.jsx
index 4d18df9e..9c6282ec 100644
--- a/renderer/src/ui/settings/addonlist.jsx
+++ b/renderer/src/ui/settings/addonlist.jsx
@@ -90,36 +90,36 @@ export default function AddonList({prefix, type, title, folder, addonList, addon
Events.off(`${prefix}-loaded`, forceUpdate);
Events.off(`${prefix}-unloaded`, forceUpdate);
};
- }, []);
+ }, [prefix]);
const changeView = useCallback((value) => {
saveState(type, "view", value);
setView(value);
- }, []);
+ }, [type]);
- const listView = useCallback(() => changeView("list"), []);
- const gridView = useCallback(() => changeView("grid"), []);
+ const listView = useCallback(() => changeView("list"), [changeView]);
+ const gridView = useCallback(() => changeView("grid"), [changeView]);
const changeDirection = useCallback((value) => {
saveState(type, "ascending", value);
setAscending(value);
- }, []);
+ }, [type]);
const changeSort = useCallback((value) => {
saveState(type, "sort", value);
setSort(value);
- }, []);
+ }, [type]);
const search = useCallback((e) => setQuery(e.target.value.toLocaleLowerCase()), []);
- const triggerEdit = useCallback((id) => editAddon?.(id), []);
+ const triggerEdit = useCallback((id) => editAddon?.(id), [editAddon]);
const triggerDelete = useCallback(async (id) => {
const addon = addonList.find(a => a.id == id);
const shouldDelete = await confirmDelete(addon);
if (!shouldDelete) return;
if (deleteAddon) deleteAddon(addon);
- }, []);
+ }, [addonList, deleteAddon]);
- const button = folder ? {title: Strings.Addons.openFolder.format({type: title}), onClick: openFolder} : null;
+ const button = folder ? {title: Strings.Addons.openFolder.format({type: title}), onClick: openFolder.bind(null, folder)} : null;
const renderedCards = useMemo(() => {
let sorted = addonList.sort((a, b) => {
const sortByEnabled = sort === "isEnabled";
@@ -150,7 +150,7 @@ export default function AddonList({prefix, type, title, folder, addonList, addon
const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
return
triggerEdit(addon.id)} deleteAddon={() => triggerDelete(addon.id)} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} />;
});
- }, [addonList, addonState, sort, ascending, query]);
+ }, [addonList, addonState, onChange, reload, triggerDelete, triggerEdit, type, sort, ascending, query]);
const hasAddonsInstalled = addonList.length !== 0;
const isSearching = !!query;
diff --git a/renderer/src/ui/settings/components/color.jsx b/renderer/src/ui/settings/components/color.jsx
index 31dcd30b..86040ca5 100644
--- a/renderer/src/ui/settings/components/color.jsx
+++ b/renderer/src/ui/settings/components/color.jsx
@@ -60,7 +60,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
const change = useCallback((e) => {
onChange?.(resolveColor(e.target.value));
setValue(e.target.value);
- }, []);
+ }, [onChange]);
const intValue = resolveColor(value, false);
return
diff --git a/renderer/src/ui/settings/components/dropdown.jsx b/renderer/src/ui/settings/components/dropdown.jsx
index c6ed7c99..d4d52946 100644
--- a/renderer/src/ui/settings/components/dropdown.jsx
+++ b/renderer/src/ui/settings/components/dropdown.jsx
@@ -9,7 +9,7 @@ export default function Select({value: initialValue, options, style, onChange})
const change = useCallback((val) => {
onChange?.(val);
setValue(val);
- }, []);
+ }, [onChange]);
const hideMenu = useCallback(() => {
@@ -26,7 +26,7 @@ export default function Select({value: initialValue, options, style, onChange})
setOpen(next);
if (!next) return;
document.addEventListener("click", hideMenu);
- }, [open]);
+ }, [hideMenu, open]);
// ?? options[0] provides a double failsafe
diff --git a/renderer/src/ui/settings/components/keybind.jsx b/renderer/src/ui/settings/components/keybind.jsx
index 20dd638b..c5191eee 100644
--- a/renderer/src/ui/settings/components/keybind.jsx
+++ b/renderer/src/ui/settings/components/keybind.jsx
@@ -26,19 +26,19 @@ export default function Keybind({value: initialValue, onChange, max = 2, clearab
if (onChange) onChange(state.accum);
setState({value: state.accum.slice(0), isRecording: false, accum: []});
}
- }, [state]);
-
- const onClick = useCallback((e) => {
- if (e.target?.className?.includes?.("bd-keybind-clear") || e.target?.closest(".bd-button")?.className?.includes("bd-keybind-clear")) return clearKeybind(e);
- setState({...state, isRecording: !state.isRecording});
- }, [state]);
+ }, [state, max, onChange]);
const clearKeybind = useCallback((event) => {
event.stopPropagation();
event.preventDefault();
if (onChange) onChange([]);
setState({...state, value: [], accum: []});
- }, []);
+ }, [onChange, state]);
+
+ const onClick = useCallback((e) => {
+ if (e.target?.className?.includes?.("bd-keybind-clear") || e.target?.closest(".bd-button")?.className?.includes("bd-keybind-clear")) return clearKeybind(e);
+ setState({...state, isRecording: !state.isRecording});
+ }, [state, clearKeybind]);
const displayValue = state.isRecording ? "Recording..." : !state.value.length ? "N/A" : state.value.join(" + ");
diff --git a/renderer/src/ui/settings/components/number.jsx b/renderer/src/ui/settings/components/number.jsx
index c634d0db..f6e31db0 100644
--- a/renderer/src/ui/settings/components/number.jsx
+++ b/renderer/src/ui/settings/components/number.jsx
@@ -8,7 +8,7 @@ export default function Number({value: initialValue, min, max, step, onChange})
const change = useCallback((e) => {
onChange?.(e.target.value);
setValue(e.target.value);
- }, []);
+ }, [onChange]);
return
;
}
\ No newline at end of file
diff --git a/renderer/src/ui/settings/components/radio.jsx b/renderer/src/ui/settings/components/radio.jsx
index 99d30d60..02d5da89 100644
--- a/renderer/src/ui/settings/components/radio.jsx
+++ b/renderer/src/ui/settings/components/radio.jsx
@@ -12,7 +12,7 @@ export default function Radio({name, value, options, onChange}) {
const newValue = options[newIndex].value;
onChange?.(newValue);
setIndex(newIndex);
- }, [index, options]);
+ }, [options, onChange]);
function renderOption(opt, i) {
const isSelected = index === i;
diff --git a/renderer/src/ui/settings/components/search.jsx b/renderer/src/ui/settings/components/search.jsx
index 888a6106..77ac05d0 100644
--- a/renderer/src/ui/settings/components/search.jsx
+++ b/renderer/src/ui/settings/components/search.jsx
@@ -9,7 +9,7 @@ export default function Search({onChange, className, onKeyDown, placeholder}) {
const change = useCallback((e) => {
onChange?.(e);
setValue(e.target.value);
- }, []);
+ }, [onChange]);
return
diff --git a/renderer/src/ui/settings/components/slider.jsx b/renderer/src/ui/settings/components/slider.jsx
index eeef48f7..75f833ac 100644
--- a/renderer/src/ui/settings/components/slider.jsx
+++ b/renderer/src/ui/settings/components/slider.jsx
@@ -8,7 +8,7 @@ export default function Slider({value: initialValue, min, max, step, onChange})
const change = useCallback((e) => {
onChange?.(e.target.value);
setValue(e.target.value);
- }, []);
+ }, [onChange]);
return
{value}
diff --git a/renderer/src/ui/settings/components/switch.jsx b/renderer/src/ui/settings/components/switch.jsx
index 99fe9e37..a0fdf278 100644
--- a/renderer/src/ui/settings/components/switch.jsx
+++ b/renderer/src/ui/settings/components/switch.jsx
@@ -8,7 +8,7 @@ export default function Switch({id, checked: initialValue, disabled, onChange})
const change = useCallback(() => {
onChange?.(!checked);
setChecked(!checked);
- }, [checked]);
+ }, [checked, onChange]);
const enabledClass = disabled ? " bd-switch-disabled" : "";
const checkedClass = checked ? " bd-switch-checked" : "";
diff --git a/renderer/src/ui/settings/components/textbox.jsx b/renderer/src/ui/settings/components/textbox.jsx
index 9835ad15..3997ea6e 100644
--- a/renderer/src/ui/settings/components/textbox.jsx
+++ b/renderer/src/ui/settings/components/textbox.jsx
@@ -8,7 +8,7 @@ export default function Textbox({value: initialValue, maxLength, placeholder, on
const change = useCallback((e) => {
onChange?.(e.target.value);
setValue(e.target.value);
- }, []);
+ }, [onChange]);
return
;
}
\ No newline at end of file
diff --git a/renderer/src/ui/settings/drawer.jsx b/renderer/src/ui/settings/drawer.jsx
index 692b0114..97425c5e 100644
--- a/renderer/src/ui/settings/drawer.jsx
+++ b/renderer/src/ui/settings/drawer.jsx
@@ -22,7 +22,7 @@ export default function Drawer({name, collapsible, shown = true, showDivider, ch
drawer.classList.remove("animating");
}, timeout);
- }, [collapsed]);
+ }, [collapsed, onDrawerToggle]);
const onClick = useCallback((event) => {
diff --git a/renderer/src/ui/settings/group.jsx b/renderer/src/ui/settings/group.jsx
index 2c96ac7d..0b98e8f8 100644
--- a/renderer/src/ui/settings/group.jsx
+++ b/renderer/src/ui/settings/group.jsx
@@ -17,7 +17,7 @@ export default function Group({onChange, id, name, button, shown, onDrawerToggle
const change = useCallback((settingId, value) => {
if (id) onChange?.(id, settingId, value);
else onChange?.(settingId, value);
- }, [id]);
+ }, [id, onChange]);
return
{settings.filter(s => !s.hidden).map((setting) => {
diff --git a/renderer/src/ui/settings/title.jsx b/renderer/src/ui/settings/title.jsx
index 8cdc9ff2..cd81f6d7 100644
--- a/renderer/src/ui/settings/title.jsx
+++ b/renderer/src/ui/settings/title.jsx
@@ -11,7 +11,7 @@ export default function SettingsTitle({isGroup, className, button, onClick, text
event.stopPropagation();
event.preventDefault();
button?.onClick?.(event);
- }, []);
+ }, [button]);
const baseClass = isGroup ? groupClass : basicClass;
diff --git a/renderer/src/ui/updater.jsx b/renderer/src/ui/updater.jsx
index 500e32ac..79f88b91 100644
--- a/renderer/src/ui/updater.jsx
+++ b/renderer/src/ui/updater.jsx
@@ -9,50 +9,50 @@ import Checkmark from "./icons/check";
const {useState, useCallback, useEffect} = React;
-function CoreUpdaterPanel(props) {
+function CoreUpdaterPanel({hasUpdate, remoteVersion, update}) {
return
-
- {!props.hasUpdate &&
}
- {props.hasUpdate && }
+
+ {!hasUpdate &&
}
+ {hasUpdate && }
;
}
-function NoUpdates(props) {
+function NoUpdates({type}) {
return
- {Strings.Updater.upToDateBlankslate.format({type: props.type})}
+ {Strings.Updater.upToDateBlankslate.format({type: type})}
;
}
-function AddonUpdaterPanel(props) {
- const filenames = props.pending;
- return props.updateAll(props.type)} : null}>
- {!filenames.length && }
+function AddonUpdaterPanel({pending, type, updater, update, updateAll}) {
+ const filenames = pending;
+ return updateAll(type)} : null}>
+ {!filenames.length && }
{filenames.map(f => {
- const info = props.updater.cache[f];
- const addon = props.updater.manager.addonList.find(a => a.filename === f);
+ const info = updater.cache[f];
+ const addon = updater.manager.addonList.find(a => a.filename === f);
return
-
+
;
})}
;
}
-export default function UpdaterPanel(props) {
- const [hasCoreUpdate, setCoreUpdate] = useState(props.coreUpdater.hasUpdate);
- const [updates, setUpdates] = useState({plugins: props.pluginUpdater.pending.slice(0), themes: props.themeUpdater.pending.slice(0)});
+export default function UpdaterPanel({coreUpdater, pluginUpdater, themeUpdater}) {
+ const [hasCoreUpdate, setCoreUpdate] = useState(coreUpdater.hasUpdate);
+ const [updates, setUpdates] = useState({plugins: pluginUpdater.pending.slice(0), themes: themeUpdater.pending.slice(0)});
const checkAddons = useCallback(async (type) => {
- const updater = type === "plugins" ? props.pluginUpdater : props.themeUpdater;
+ const updater = type === "plugins" ? pluginUpdater : themeUpdater;
await updater.checkAll(false);
setUpdates({...updates, [type]: updater.pending.slice(0)});
- }, []);
+ }, [updates, pluginUpdater, themeUpdater]);
const update = useCallback(() => {
checkAddons("plugins");
checkAddons("themes");
- }, []);
+ }, [checkAddons]);
useEffect(() => {
Events.on(`plugin-loaded`, update);
@@ -65,12 +65,12 @@ export default function UpdaterPanel(props) {
Events.off(`theme-loaded`, update);
Events.off(`theme-unloaded`, update);
};
- }, []);
+ }, [update]);
const checkCoreUpdate = useCallback(async () => {
- await props.coreUpdater.checkForUpdate(false);
- setCoreUpdate(props.coreUpdater.hasUpdate);
- }, []);
+ await coreUpdater.checkForUpdate(false);
+ setCoreUpdate(coreUpdater.hasUpdate);
+ }, [coreUpdater]);
const checkForUpdates = useCallback(async () => {
Toasts.info(Strings.Updater.checking);
@@ -78,33 +78,33 @@ export default function UpdaterPanel(props) {
await checkAddons("plugins");
await checkAddons("themes");
Toasts.info(Strings.Updater.finishedChecking);
- });
+ }, [checkAddons, checkCoreUpdate]);
const updateCore = useCallback(async () => {
- await props.coreUpdater.update();
+ await coreUpdater.update();
setCoreUpdate(false);
- }, []);
+ }, [coreUpdater]);
const updateAddon = useCallback(async (type, filename) => {
- const updater = type === "plugins" ? props.pluginUpdater : props.themeUpdater;
+ const updater = type === "plugins" ? pluginUpdater : themeUpdater;
await updater.updateAddon(filename);
setUpdates(prev => {
prev[type].splice(prev[type].indexOf(filename), 1);
return prev;
});
- }, []);
+ }, [pluginUpdater, themeUpdater]);
const updateAllAddons = useCallback(async (type) => {
const toUpdate = updates[type].slice(0);
for (const filename of toUpdate) {
await updateAddon(type, filename);
}
- }, []);
+ }, [updateAddon, updates]);
return [
,
- ,
- ,
- ,
+ ,
+ ,
+ ,
];
}
\ No newline at end of file