From c6d58bdc2d5b27ff78790f44231357a09f77c56e Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Mon, 6 Mar 2023 02:16:00 -0500 Subject: [PATCH 01/12] Convert icons to functional components --- renderer/src/ui/icons/bdlogo.jsx | 16 +++++++--------- renderer/src/ui/icons/check.jsx | 14 ++++++-------- renderer/src/ui/icons/close.jsx | 18 ++++++++---------- renderer/src/ui/icons/cog.jsx | 14 ++++++-------- renderer/src/ui/icons/delete.jsx | 14 ++++++-------- renderer/src/ui/icons/detach.jsx | 14 ++++++-------- renderer/src/ui/icons/dollarsign.jsx | 12 +++++------- renderer/src/ui/icons/downarrow.jsx | 12 +++++------- renderer/src/ui/icons/edit.jsx | 14 ++++++-------- renderer/src/ui/icons/error.jsx | 15 ++++++--------- renderer/src/ui/icons/extension.jsx | 16 +++++++--------- renderer/src/ui/icons/favorite.jsx | 11 +++++------ renderer/src/ui/icons/fullscreen.jsx | 16 +++++++--------- renderer/src/ui/icons/github.jsx | 14 ++++++-------- renderer/src/ui/icons/globe.jsx | 18 ++++++++---------- renderer/src/ui/icons/grid.jsx | 16 +++++++--------- renderer/src/ui/icons/history.jsx | 16 +++++++--------- renderer/src/ui/icons/keyboard.jsx | 16 +++++++--------- renderer/src/ui/icons/list.jsx | 16 +++++++--------- renderer/src/ui/icons/magnifyingglass.jsx | 22 ++++++++++------------ renderer/src/ui/icons/next.jsx | 14 ++++++-------- renderer/src/ui/icons/patreon.jsx | 16 +++++++--------- renderer/src/ui/icons/previous.jsx | 14 ++++++-------- renderer/src/ui/icons/radio.jsx | 18 ++++++++---------- renderer/src/ui/icons/reload.jsx | 14 ++++++-------- renderer/src/ui/icons/save.jsx | 16 +++++++--------- renderer/src/ui/icons/search.jsx | 16 +++++++--------- renderer/src/ui/icons/support.jsx | 16 +++++++--------- renderer/src/ui/icons/theme.jsx | 16 +++++++--------- renderer/src/ui/icons/twitch.jsx | 9 ++++----- 30 files changed, 197 insertions(+), 256 deletions(-) diff --git a/renderer/src/ui/icons/bdlogo.jsx b/renderer/src/ui/icons/bdlogo.jsx index e10c56dd..d6dc74d1 100644 --- a/renderer/src/ui/icons/bdlogo.jsx +++ b/renderer/src/ui/icons/bdlogo.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class BDLogo extends React.Component { - render() { - return - - - - ; - } -} \ No newline at end of file +export default function BDLogo(props) { + return + + + + ; +} diff --git a/renderer/src/ui/icons/check.jsx b/renderer/src/ui/icons/check.jsx index c84fd0fc..d994ea89 100644 --- a/renderer/src/ui/icons/check.jsx +++ b/renderer/src/ui/icons/check.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Checkmark extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } +export default function Checkmark(props) { + const size = props.size || "24px"; + return + + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/close.jsx b/renderer/src/ui/icons/close.jsx index b93cba8e..55a45c0a 100644 --- a/renderer/src/ui/icons/close.jsx +++ b/renderer/src/ui/icons/close.jsx @@ -1,13 +1,11 @@ import {React} from "modules"; -export default class CloseButton extends React.Component { - render() { - const size = this.props.size || "18px"; - return - - - - - ; - } +export default function Close(props) { + const size = props.size || "18px"; + return + + + + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/cog.jsx b/renderer/src/ui/icons/cog.jsx index 4d76b92a..9a929bf5 100644 --- a/renderer/src/ui/icons/cog.jsx +++ b/renderer/src/ui/icons/cog.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Cog extends React.Component { - render() { - const size = this.props.size || "20px"; - return - - - ; - } +export default function Cog(props) { + const size = props.size || "20px"; + return + + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/delete.jsx b/renderer/src/ui/icons/delete.jsx index 4dcc5d16..92f4d79d 100644 --- a/renderer/src/ui/icons/delete.jsx +++ b/renderer/src/ui/icons/delete.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Delete extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } +export default function Delete(props) { + const size = props.size || "24px"; + return + + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/detach.jsx b/renderer/src/ui/icons/detach.jsx index e12449d9..8e5ade9f 100644 --- a/renderer/src/ui/icons/detach.jsx +++ b/renderer/src/ui/icons/detach.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Detach extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } +export default function Detach(props) { + const size = props.size || "24px"; + return + + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/dollarsign.jsx b/renderer/src/ui/icons/dollarsign.jsx index 3352af7a..5634e440 100644 --- a/renderer/src/ui/icons/dollarsign.jsx +++ b/renderer/src/ui/icons/dollarsign.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class DollarSign extends React.Component { - render() { - const size = this.props.size || "18px"; - return - - +export default function DollarSign(props) { + const size = props.size || "18px"; + return + + ; - } } \ No newline at end of file diff --git a/renderer/src/ui/icons/downarrow.jsx b/renderer/src/ui/icons/downarrow.jsx index 556bd932..96d40694 100644 --- a/renderer/src/ui/icons/downarrow.jsx +++ b/renderer/src/ui/icons/downarrow.jsx @@ -1,10 +1,8 @@ import {React} from "modules"; -export default class DownArrow extends React.Component { - render() { - const size = this.props.size || "16px"; - return - - ; - } +export default function DownArrow(props) { + const size = props.size || "16px"; + return + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/edit.jsx b/renderer/src/ui/icons/edit.jsx index 17e407d6..e7cf3109 100644 --- a/renderer/src/ui/icons/edit.jsx +++ b/renderer/src/ui/icons/edit.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Edit extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } +export default function Edit(props) { + const size = props.size || "24px"; + return + + + ; } \ No newline at end of file diff --git a/renderer/src/ui/icons/error.jsx b/renderer/src/ui/icons/error.jsx index eb1bf767..5c6a7e5f 100644 --- a/renderer/src/ui/icons/error.jsx +++ b/renderer/src/ui/icons/error.jsx @@ -1,12 +1,9 @@ import {React} from "modules"; -export default class Error extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } +export default function Error(props) { + const size = props.size || "24px"; + return + + + ; } - diff --git a/renderer/src/ui/icons/extension.jsx b/renderer/src/ui/icons/extension.jsx index 0f396de0..d908cd2c 100644 --- a/renderer/src/ui/icons/extension.jsx +++ b/renderer/src/ui/icons/extension.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Extension extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } -} \ No newline at end of file +export default function Extension(props) { + const size = props.size || "24px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/favorite.jsx b/renderer/src/ui/icons/favorite.jsx index 1d85e40b..929bb316 100644 --- a/renderer/src/ui/icons/favorite.jsx +++ b/renderer/src/ui/icons/favorite.jsx @@ -1,9 +1,8 @@ import {React} from "modules"; -export default class Favorite extends React.Component { - render() { - return - +export default function Favorite(props) { + const size = props.size || "24px"; + return + ; - } -} \ No newline at end of file +} diff --git a/renderer/src/ui/icons/fullscreen.jsx b/renderer/src/ui/icons/fullscreen.jsx index 06ffc02d..41ee8d71 100644 --- a/renderer/src/ui/icons/fullscreen.jsx +++ b/renderer/src/ui/icons/fullscreen.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class FullScreen extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } -} \ No newline at end of file +export default function FullScreen(props) { + const size = props.size || "24px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/github.jsx b/renderer/src/ui/icons/github.jsx index 180ff1ff..851bc2cd 100644 --- a/renderer/src/ui/icons/github.jsx +++ b/renderer/src/ui/icons/github.jsx @@ -1,10 +1,8 @@ import {React} from "modules"; -export default class GitHub extends React.Component { - render() { - const size = this.props.size || "18px"; - return - - ; - } -} \ No newline at end of file +export default function GitHub(props) { + const size = props.size || "18px"; + return + + ; +} diff --git a/renderer/src/ui/icons/globe.jsx b/renderer/src/ui/icons/globe.jsx index c543802e..b89a3d53 100644 --- a/renderer/src/ui/icons/globe.jsx +++ b/renderer/src/ui/icons/globe.jsx @@ -1,12 +1,10 @@ import {React} from "modules"; -export default class Globe extends React.Component { - render() { - const size = this.props.size || "18px"; - const color = this.props.color || "#FFFFFF"; - return - - - ; - } -} \ No newline at end of file +export default function Globe(props) { + const size = props.size || "18px"; + const color = props.color || "#FFFFFF"; + return + + + ; +} diff --git a/renderer/src/ui/icons/grid.jsx b/renderer/src/ui/icons/grid.jsx index 89f9940b..1e926576 100644 --- a/renderer/src/ui/icons/grid.jsx +++ b/renderer/src/ui/icons/grid.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Grid extends React.Component { - render() { - const size = this.props.size || "20px"; - return - - - ; - } -} \ No newline at end of file +export default function Grid(props) { + const size = props.size || "20px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/history.jsx b/renderer/src/ui/icons/history.jsx index 19fc43be..92999de0 100644 --- a/renderer/src/ui/icons/history.jsx +++ b/renderer/src/ui/icons/history.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class History extends React.Component { - render() { - const size = this.props.size || "18px"; - return - - - ; - } -} \ No newline at end of file +export default function History(props) { + const size = props.size || "18px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/keyboard.jsx b/renderer/src/ui/icons/keyboard.jsx index 5472f2a3..52161f60 100644 --- a/renderer/src/ui/icons/keyboard.jsx +++ b/renderer/src/ui/icons/keyboard.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Keyboard extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } -} \ No newline at end of file +export default function Keyboard(props) { + const size = props.size || "24px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/list.jsx b/renderer/src/ui/icons/list.jsx index 9e6f3167..b6011e1a 100644 --- a/renderer/src/ui/icons/list.jsx +++ b/renderer/src/ui/icons/list.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class List extends React.Component { - render() { - const size = this.props.size || "20px"; - return - - - ; - } -} \ No newline at end of file +export default function List(props) { + const size = props.size || "20px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/magnifyingglass.jsx b/renderer/src/ui/icons/magnifyingglass.jsx index e5c61dc1..1d838d50 100644 --- a/renderer/src/ui/icons/magnifyingglass.jsx +++ b/renderer/src/ui/icons/magnifyingglass.jsx @@ -1,11 +1,10 @@ import {React} from "modules"; -export default class MagnifyingGlass extends React.Component { - render() { - const size = this.props.size || "160px"; - return - - +export default function MagnifyingGlass(props) { + const size = props.size || "160px"; + return + + @@ -15,9 +14,8 @@ export default class MagnifyingGlass extends React.Component { - - - - ; - } -} \ No newline at end of file + + + + ; +} diff --git a/renderer/src/ui/icons/next.jsx b/renderer/src/ui/icons/next.jsx index 50b1b993..c2e01393 100644 --- a/renderer/src/ui/icons/next.jsx +++ b/renderer/src/ui/icons/next.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class ArrowRight extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - +export default function ArrowRight(props) { + const size = props.size || "24px"; + return + + ; - } -} \ No newline at end of file +} diff --git a/renderer/src/ui/icons/patreon.jsx b/renderer/src/ui/icons/patreon.jsx index f408a7e3..573d8c2a 100644 --- a/renderer/src/ui/icons/patreon.jsx +++ b/renderer/src/ui/icons/patreon.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Patreon extends React.Component { - render() { - const size = this.props.size || "18px"; - return - - - ; - } -} \ No newline at end of file +export default function Patreon(props) { + const size = props.size || "18px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/previous.jsx b/renderer/src/ui/icons/previous.jsx index 913705df..36407172 100644 --- a/renderer/src/ui/icons/previous.jsx +++ b/renderer/src/ui/icons/previous.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class ArrowLeft extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - +export default function ArrowLeft(props) { + const size = props.size || "24px"; + return + + ; - } -} \ No newline at end of file +} diff --git a/renderer/src/ui/icons/radio.jsx b/renderer/src/ui/icons/radio.jsx index d56d9c84..b08f2445 100644 --- a/renderer/src/ui/icons/radio.jsx +++ b/renderer/src/ui/icons/radio.jsx @@ -1,12 +1,10 @@ import {React} from "modules"; -export default class Radio extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - {this.props.checked && } - {!this.props.checked && } - ; - } -} \ No newline at end of file + export default function Radio(props) { + const size = props.size || "24px"; + return + + {props.checked && } + {!props.checked && } + ; +} diff --git a/renderer/src/ui/icons/reload.jsx b/renderer/src/ui/icons/reload.jsx index 385a6f26..4ff81a98 100644 --- a/renderer/src/ui/icons/reload.jsx +++ b/renderer/src/ui/icons/reload.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class ReloadIcon extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - +export default function ReloadIcon(props) { + const size = props.size || "24px"; + return + + ; - } -} \ No newline at end of file +} diff --git a/renderer/src/ui/icons/save.jsx b/renderer/src/ui/icons/save.jsx index 89b023a9..5a02f66c 100644 --- a/renderer/src/ui/icons/save.jsx +++ b/renderer/src/ui/icons/save.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Save extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } -} \ No newline at end of file +export default function Save(props) { + const size = props.size || "24px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/search.jsx b/renderer/src/ui/icons/search.jsx index e9d7a2be..3a936e90 100644 --- a/renderer/src/ui/icons/search.jsx +++ b/renderer/src/ui/icons/search.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Search extends React.Component { - render() { - const size = this.props.size || "16px"; - return - - - ; - } -} \ No newline at end of file + export default function Search(props) { + const size = props.size || "16px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/support.jsx b/renderer/src/ui/icons/support.jsx index fbe7413b..732c6409 100644 --- a/renderer/src/ui/icons/support.jsx +++ b/renderer/src/ui/icons/support.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Support extends React.Component { - render() { - const size = this.props.size || "18px"; - return - - - ; - } -} \ No newline at end of file +export default function Support(props) { + const size = props.size || "18px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/theme.jsx b/renderer/src/ui/icons/theme.jsx index f2e9906a..cccae69b 100644 --- a/renderer/src/ui/icons/theme.jsx +++ b/renderer/src/ui/icons/theme.jsx @@ -1,11 +1,9 @@ import {React} from "modules"; -export default class Theme extends React.Component { - render() { - const size = this.props.size || "24px"; - return - - - ; - } -} \ No newline at end of file +export default function Theme(props) { + const size = props.size || "24px"; + return + + + ; +} diff --git a/renderer/src/ui/icons/twitch.jsx b/renderer/src/ui/icons/twitch.jsx index 1c7182c3..04a313d4 100644 --- a/renderer/src/ui/icons/twitch.jsx +++ b/renderer/src/ui/icons/twitch.jsx @@ -1,9 +1,8 @@ import {React} from "modules"; -export default class Twitch extends React.Component { - render() { - return - +export default function Twitch(props) { + const size = props.size || "18px"; + return + ; - } } \ No newline at end of file From 2976a4cf0039656581422236f71a6abaa3dd7ef0 Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Mon, 6 Mar 2023 02:50:48 -0500 Subject: [PATCH 02/12] Convert stateless components --- renderer/src/ui/blankslates/emptyimage.jsx | 24 +++++----- renderer/src/ui/blankslates/noresults.jsx | 16 +++---- renderer/src/ui/settings/sidebarheader.jsx | 30 +++++------- renderer/src/ui/updater.jsx | 54 ++++++++++------------ 4 files changed, 54 insertions(+), 70 deletions(-) diff --git a/renderer/src/ui/blankslates/emptyimage.jsx b/renderer/src/ui/blankslates/emptyimage.jsx index fa1d5891..7fd77004 100644 --- a/renderer/src/ui/blankslates/emptyimage.jsx +++ b/renderer/src/ui/blankslates/emptyimage.jsx @@ -1,17 +1,15 @@ import {React, DiscordClasses} from "modules"; import SimpleMarkdown from "../../structs/markdown"; -export default class EmptyImage extends React.Component { - render() { - return
-
-
- {this.props.title || "You don't have anything!"} -
-
- {SimpleMarkdown.parseToReact(this.props.message || "You should probably get something.")} -
- {this.props.children} -
; - } +export default function EmptyImage(props) { + return
+
+
+ {props.title || "You don't have anything!"} +
+
+ {SimpleMarkdown.parseToReact(props.message || "You should probably get something.")} +
+ {props.children} +
; } \ No newline at end of file diff --git a/renderer/src/ui/blankslates/noresults.jsx b/renderer/src/ui/blankslates/noresults.jsx index e9d796eb..943f7102 100644 --- a/renderer/src/ui/blankslates/noresults.jsx +++ b/renderer/src/ui/blankslates/noresults.jsx @@ -1,13 +1,11 @@ import {React, DiscordModules} from "modules"; import MagnifyingGlass from "../icons/magnifyingglass"; -export default class NoResults extends React.Component { - render() { - return
- -
- {this.props.text || DiscordModules.Strings.SEARCH_NO_RESULTS || ""} -
-
; - } +export default function NoResults(props) { + return
+ +
+ {props.text || DiscordModules.Strings.SEARCH_NO_RESULTS || ""} +
+
; } \ No newline at end of file diff --git a/renderer/src/ui/settings/sidebarheader.jsx b/renderer/src/ui/settings/sidebarheader.jsx index b8b1fa07..ad99ade4 100644 --- a/renderer/src/ui/settings/sidebarheader.jsx +++ b/renderer/src/ui/settings/sidebarheader.jsx @@ -4,21 +4,15 @@ import HistoryIcon from "../icons/history"; import Modals from "../modals"; -export default class SettingsTitle extends React.Component { - renderHeader() { - return

BetterDiscord

; - } - - render() { - return
- {this.renderHeader()} - - {props => -
Modals.showChangelogModal(Changelog)}> - -
- } - -
; - } -} +export default function SettingsTitle() { + return
+

BetterDiscord

+ + {props => +
Modals.showChangelogModal(Changelog)}> + +
+ } + +
; +} \ No newline at end of file diff --git a/renderer/src/ui/updater.jsx b/renderer/src/ui/updater.jsx index 05ee2acc..367a256e 100644 --- a/renderer/src/ui/updater.jsx +++ b/renderer/src/ui/updater.jsx @@ -7,40 +7,34 @@ import Toasts from "./toasts"; import Checkmark from "./icons/check"; -class CoreUpdaterPanel extends React.Component { - render() { - return - - {!this.props.hasUpdate &&
} - {this.props.hasUpdate && } - - ; - } +function CoreUpdaterPanel(props) { + return + + {!props.hasUpdate &&
} + {props.hasUpdate && } + + ; } -class NoUpdates extends React.Component { - render() { - return
- - {Strings.Updater.upToDateBlankslate.format({type: this.props.type})} -
; - } +function NoUpdates(props) { + return
+ + {Strings.Updater.upToDateBlankslate.format({type: props.type})} +
; } -class AddonUpdaterPanel extends React.Component { - render() { - const filenames = this.props.pending; - return this.props.updateAll(this.props.type)} : null}> - {!filenames.length && } - {filenames.map(f => { - const info = this.props.updater.cache[f]; - const addon = this.props.updater.manager.addonList.find(a => a.filename === f); - return - - ; - })} - ; - } +function AddonUpdaterPanel(props) { + const filenames = props.pending; + return props.updateAll(props.type)} : null}> + {!filenames.length && } + {filenames.map(f => { + const info = props.updater.cache[f]; + const addon = props.updater.manager.addonList.find(a => a.filename === f); + return + + ; + })} + ; } export default class UpdaterPanel extends React.Component { From 0d57129de7e83ce43f67f7d9de087e9260a39574 Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Mon, 6 Mar 2023 19:17:28 -0500 Subject: [PATCH 03/12] Convert settings types --- renderer/src/ui/customcss/checkbox.jsx | 30 +++--- renderer/src/ui/settings/components/color.jsx | 97 +++++++++---------- .../src/ui/settings/components/dropdown.jsx | 76 +++++++-------- renderer/src/ui/settings/components/item.jsx | 22 ++--- .../src/ui/settings/components/keybind.jsx | 92 ++++++------------ .../src/ui/settings/components/number.jsx | 22 ++--- renderer/src/ui/settings/components/radio.jsx | 43 +++----- .../src/ui/settings/components/search.jsx | 30 +++--- .../src/ui/settings/components/slider.jsx | 27 +++--- .../src/ui/settings/components/switch.jsx | 47 ++++----- .../src/ui/settings/components/textbox.jsx | 22 ++--- 11 files changed, 212 insertions(+), 296 deletions(-) diff --git a/renderer/src/ui/customcss/checkbox.jsx b/renderer/src/ui/customcss/checkbox.jsx index 79f069e6..f483e8cc 100644 --- a/renderer/src/ui/customcss/checkbox.jsx +++ b/renderer/src/ui/customcss/checkbox.jsx @@ -1,27 +1,23 @@ import {React} from "modules"; -export default class Checkbox extends React.Component { - constructor(props) { - super(props); - this.onClick = this.onClick.bind(this); - this.state = {checked: this.props.checked || false}; - } +const {useState, useCallback} = React; - render() { - return
-
{this.props.text}
-
+ +export default function Checkbox(props) { + const [checked, setChecked] = useState(props.checked); + const onClick = useCallback(() => { + props?.onChange(!checked); + setChecked(!checked); + }, [checked]); + + return
+
{props.text}
+
- +
; - } - - onClick() { - this.props.onChange(!this.state.checked); - this.setState({checked: !this.state.checked}); - } } \ No newline at end of file diff --git a/renderer/src/ui/settings/components/color.jsx b/renderer/src/ui/settings/components/color.jsx index 22774b0b..31dcd30b 100644 --- a/renderer/src/ui/settings/components/color.jsx +++ b/renderer/src/ui/settings/components/color.jsx @@ -1,5 +1,8 @@ import {DiscordModules, React} from "modules"; +const {useState, useCallback} = React; + + const Checkmark = React.memo((props) => ( @@ -28,7 +31,6 @@ const resolveColor = (color, hex = true) => { } }; - const getRGB = (color) => { let result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color); if (result) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])]; @@ -52,56 +54,47 @@ const getContrastColor = (color) => { return (luma(color) >= 165) ? "#000" : "#fff"; }; -export default class Color extends React.Component { - constructor(props) { - super(props); - this.state = {value: this.props.value}; - this.onChange = this.onChange.bind(this); - } - onChange(e) { - this.setState({value: e.target.value}); - if (this.props.onChange) this.props.onChange(resolveColor(e.target.value)); - } +export default function Color({value: initialValue, onChange, colors = defaultColors, defaultValue}) { + const [value, setValue] = useState(initialValue); + const change = useCallback((e) => { + onChange?.(resolveColor(e.target.value)); + setValue(e.target.value); + }, []); - render() { - const intValue = resolveColor(this.state.value, false); - const {colors = defaultColors, defaultValue} = this.props; - - - return
-
- - {props => ( -
this.onChange({target: {value: defaultValue}})}> - {intValue === resolveColor(defaultValue, false) - ? - : null - } -
- )} - - - {props => ( -
- - -
- )} - -
-
- { - colors.map((int, index) => ( -
this.onChange({target: {value: int}})}> - {intValue === int - ? - : null - } -
- )) - } -
-
; - } -} + const intValue = resolveColor(value, false); + return
+
+ + {props => ( +
change({target: {value: defaultValue}})}> + {intValue === resolveColor(defaultValue, false) + ? + : null + } +
+ )} + + + {props => ( +
+ + +
+ )} + +
+
+ { + colors.map((int, index) => ( +
change({target: {value: int}})}> + {intValue === int + ? + : null + } +
+ )) + } +
+
; +} \ No newline at end of file diff --git a/renderer/src/ui/settings/components/dropdown.jsx b/renderer/src/ui/settings/components/dropdown.jsx index 241aa003..004f12d7 100644 --- a/renderer/src/ui/settings/components/dropdown.jsx +++ b/renderer/src/ui/settings/components/dropdown.jsx @@ -1,56 +1,46 @@ import {React} from "modules"; import Arrow from "../../icons/downarrow"; -export default class Select extends React.Component { - constructor(props) { - super(props); - this.state = {open: false, value: this.props.hasOwnProperty("value") ? this.props.value : this.props.options[0].value}; - this.dropdown = React.createRef(); - this.onChange = this.onChange.bind(this); - this.showMenu = this.showMenu.bind(this); - this.hideMenu = this.hideMenu.bind(this); - } +const {useState, useCallback} = React; - showMenu(event) { + +export default function Select({value: initialValue, options, style, onChange}) { + const [value, setValue] = useState(initialValue ?? options[0].value); + const change = useCallback((val) => { + onChange?.(val); + setValue(val); + }, []); + + + const hideMenu = useCallback(() => { + setOpen(false); + document.removeEventListener("click", hideMenu); + }, []); + + const [open, setOpen] = useState(false); + const showMenu = useCallback((event) => { event.preventDefault(); event.stopPropagation(); - this.setState((state) => ({open: !state.open}), () => { - if (!this.state.open) return; + const next = !open; + setOpen(next); + if (!next) return; + document.addEventListener("click", hideMenu); + }, [open]); - document.addEventListener("click", this.hideMenu); - }); - } - hideMenu() { - this.setState({open: false}, () => { - document.removeEventListener("click", this.hideMenu); - }); - } - - onChange(value) { - this.setState({value}); - if (this.props.onChange) this.props.onChange(value); - } - - get selected() {return this.props.options.find(o => o.value == this.state.value);} - - get options() { - const selected = this.selected; - return
- {this.props.options.map(opt => -
{opt.label}
+ const selected = options.find(o => o.value == value); + const optionComponents =
+ {options.map(opt => +
change(opt.value)}>{opt.label}
)}
; - } - render() { - const style = this.props.style == "transparent" ? " bd-select-transparent" : ""; - const isOpen = this.state.open ? " menu-open" : ""; - return
-
{this.selected.label}
- - {this.state.open && this.options} -
; - } + const styleClass = style == "transparent" ? " bd-select-transparent" : ""; + const isOpen = open ? " menu-open" : ""; + return
+
{selected.label}
+ + {open && optionComponents} +
; } \ No newline at end of file diff --git a/renderer/src/ui/settings/components/item.jsx b/renderer/src/ui/settings/components/item.jsx index e7fc2075..0fdb40e0 100644 --- a/renderer/src/ui/settings/components/item.jsx +++ b/renderer/src/ui/settings/components/item.jsx @@ -1,15 +1,13 @@ import {React} from "modules"; -export default class SettingItem extends React.Component { - render() { - return
-
- - {this.props.inline && this.props.children} -
-
{this.props.note}
- {!this.props.inline && this.props.children} -
-
; - } +export default function SettingItem({id, name, note, inline, children}) { + return
+
+ + {inline && children} +
+
{note}
+ {!inline && children} +
+
; } \ No newline at end of file diff --git a/renderer/src/ui/settings/components/keybind.jsx b/renderer/src/ui/settings/components/keybind.jsx index dd028bfc..20dd638b 100644 --- a/renderer/src/ui/settings/components/keybind.jsx +++ b/renderer/src/ui/settings/components/keybind.jsx @@ -3,78 +3,50 @@ import {React} from "modules"; import Keyboard from "../../icons/keyboard"; import Close from "../../icons/close"; -export default class Keybind extends React.Component { - constructor(props) { - super(props); - this.state = {value: this.props.value, isRecording: false}; - this.onClick = this.onClick.bind(this); - this.keyHandler = this.keyHandler.bind(this); - this.clearKeybind = this.clearKeybind.bind(this); - this.accum = []; - this.max = this.props.max ?? 2; - } +const {useState, useCallback, useEffect} = React; - componentDidMount() { - window.addEventListener("keydown", this.keyHandler); - } - componentWillUnmount() { - window.removeEventListener("keydown", this.keyHandler); - } +export default function Keybind({value: initialValue, onChange, max = 2, clearable = true}) { + const [state, setState] = useState({value: initialValue, isRecording: false, accum: []}); - /** - * - * @param {KeyboardEvent} event - */ - keyHandler(event) { - if (!this.state.isRecording) return; + useEffect(() => { + window.addEventListener("keydown", keyHandler); + return () => window.removeEventListener("keydown", keyHandler); + }); + + const keyHandler = useCallback((event) => { + if (!state.isRecording) return; event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); - if (event.repeat || this.accum.includes(event.key)) return; + if (event.repeat || state.accum.includes(event.key)) return; - this.accum.push(event.key); - if (this.accum.length == this.max) { - if (this.props.onChange) this.props.onChange(this.accum); - this.setState({value: this.accum.slice(0), isRecording: false}, () => this.accum.splice(0, this.accum.length)); + state.accum.push(event.key); + if (state.accum.length == max) { + if (onChange) onChange(state.accum); + setState({value: state.accum.slice(0), isRecording: false, accum: []}); } - } + }, [state]); - /** - * - * @param {MouseEvent} e - */ - onClick(e) { - if (e.target?.className?.includes?.("bd-keybind-clear") || e.target?.closest(".bd-button")?.className?.includes("bd-keybind-clear")) return this.clearKeybind(e); - this.setState({isRecording: !this.state.isRecording}); - } + 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]); - /** - * - * @param {MouseEvent} event - */ - clearKeybind(event) { + const clearKeybind = useCallback((event) => { event.stopPropagation(); event.preventDefault(); - this.accum.splice(0, this.accum.length); - if (this.props.onChange) this.props.onChange(this.accum); - this.setState({value: this.accum, isRecording: false}); - } + if (onChange) onChange([]); + setState({...state, value: [], accum: []}); + }, []); - display() { - if (this.state.isRecording) return "Recording..."; - if (!this.state.value.length) return "N/A"; - return this.state.value.join(" + "); - } - render() { - const {clearable = true} = this.props; - return
- -
- - {clearable && } -
-
; - } + const displayValue = state.isRecording ? "Recording..." : !state.value.length ? "N/A" : state.value.join(" + "); + return
+ +
+ + {clearable && } +
+
; } \ No newline at end of file diff --git a/renderer/src/ui/settings/components/number.jsx b/renderer/src/ui/settings/components/number.jsx index 51e9189b..c634d0db 100644 --- a/renderer/src/ui/settings/components/number.jsx +++ b/renderer/src/ui/settings/components/number.jsx @@ -1,18 +1,14 @@ import {React} from "modules"; -export default class Number extends React.Component { - constructor(props) { - super(props); - this.state = {value: this.props.value}; - this.onChange = this.onChange.bind(this); - } +const {useState, useCallback} = React; - onChange(e) { - this.setState({value: e.target.value}); - if (this.props.onChange) this.props.onChange(e.target.value); - } - render() { - return ; - } +export default function Number({value: initialValue, min, max, step, onChange}) { + const [value, setValue] = useState(initialValue); + const change = useCallback((e) => { + onChange?.(e.target.value); + setValue(e.target.value); + }, []); + + 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 fbacc3fa..99d30d60 100644 --- a/renderer/src/ui/settings/components/radio.jsx +++ b/renderer/src/ui/settings/components/radio.jsx @@ -2,25 +2,22 @@ import {React} from "modules"; import RadioIcon from "../../icons/radio"; -export default class Radio extends React.Component { - constructor(props) { - super(props); - this.state = {value: this.props.options.findIndex(o => o.value === this.props.value)}; - this.onChange = this.onChange.bind(this); - this.renderOption = this.renderOption.bind(this); - } +const {useState, useCallback} = React; - onChange(e) { - const index = parseInt(e.target.value); - const newValue = this.props.options[index].value; - this.setState({value: index}); - if (this.props.onChange) this.props.onChange(newValue); - } - renderOption(opt, index) { - const isSelected = this.state.value === index; +export default function Radio({name, value, options, onChange}) { + const [index, setIndex] = useState(options.findIndex(o => o.value === value)); + const change = useCallback((e) => { + const newIndex = parseInt(e.target.value); + const newValue = options[newIndex].value; + onChange?.(newValue); + setIndex(newIndex); + }, [index, options]); + + function renderOption(opt, i) { + const isSelected = index === i; return