Reimplement Discord's Switch to fix performance (#413)

1 files changed, 76 insertions, 0 deletions

diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
new file mode 100644
index 0000000..a18a7e4
--- /dev/null
+++ b/src/components/Switch.tsx
@@ -0,0 +1,76 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./Switch.css";
+
+import { findByPropsLazy } from "@webpack";
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+
+const SWITCH_ON = "var(--status-green-600)";
+const SWITCH_OFF = "var(--primary-dark-400)";
+const SwitchClasses = findByPropsLazy("slider", "input", "container");
+
+export function Switch({ checked, onChange, disabled }: SwitchProps) {
+    return (
+        <div>
+            <div className={`${SwitchClasses.container} default-colors`} style={{
+                backgroundColor: checked ? SWITCH_ON : SWITCH_OFF,
+                opacity: disabled ? 0.3 : 1
+            }}>
+                <svg
+                    className={SwitchClasses.slider + " vc-switch-slider"}
+                    viewBox="0 0 28 20"
+                    preserveAspectRatio="xMinYMid meet"
+                    aria-hidden="true"
+                    style={{
+                        transform: checked ? "translateX(12px)" : "translateX(-3px)",
+                    }}
+                >
+                    <rect fill="white" x="4" y="0" height="20" width="20" rx="10" />
+                    <svg viewBox="0 0 20 20" fill="none">
+                        {checked ? (
+                            <>
+                                <path fill={SWITCH_ON} d="M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z" />
+                                <path fill={SWITCH_ON} d="M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z" />
+                            </>
+                        ) : (
+                            <>
+                                <path fill={SWITCH_OFF} d="M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z" />
+                                <path fill={SWITCH_OFF} d="M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z" />
+                            </>
+                        )}
+
+                    </svg>
+                </svg>
+                <input
+                    disabled={disabled}
+                    type="checkbox"
+                    className={SwitchClasses.input}
+                    tabIndex={0}
+                    checked={checked}
+                    onChange={e => onChange(e.currentTarget.checked)}
+                />
+            </div>
+        </div>
+    );
+}