summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--gui/src/renderer/components/AdvancedSettings.tsx1
-rw-r--r--gui/src/renderer/components/Switch.tsx146
-rw-r--r--gui/src/renderer/components/WireguardSettings.tsx1
3 files changed, 10 insertions, 138 deletions
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 369f5169a2..cbd5c6d7f7 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -269,7 +269,6 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
private hideConfirmBlockWhenDisconnectedAlert = () => {
this.setState({ showConfirmBlockWhenDisconnectedAlert: false });
- this.blockWhenDisconnectedRef.current?.setOn(this.props.blockWhenDisconnected);
};
private confirmEnableBlockWhenDisconnected = () => {
diff --git a/gui/src/renderer/components/Switch.tsx b/gui/src/renderer/components/Switch.tsx
index c6464510f1..0a2c28147b 100644
--- a/gui/src/renderer/components/Switch.tsx
+++ b/gui/src/renderer/components/Switch.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import { colors } from '../../config.json';
-import { assignToRef } from '../lib/utilityHooks';
interface IProps {
id?: string;
@@ -14,16 +13,6 @@ interface IProps {
innerRef?: React.Ref<HTMLDivElement>;
}
-interface IState {
- isOn: boolean;
- isPressed: boolean;
- // gRPC calls cause the transition to glitch for some reason. Waiting with the onchange event
- // until after the transition prevents the visual glitch from happening.
- notifyOnTransitionEnd: boolean;
-}
-
-const PAN_DISTANCE = 10;
-
const SwitchContainer = styled.div({}, (props: { disabled: boolean }) => ({
position: 'relative',
width: '48px',
@@ -35,7 +24,7 @@ const SwitchContainer = styled.div({}, (props: { disabled: boolean }) => ({
padding: '2px',
}));
-const Knob = styled.div({}, (props: { isOn: boolean; isPressed: boolean; disabled: boolean }) => {
+const Knob = styled.div({}, (props: { isOn: boolean; disabled: boolean }) => {
let backgroundColor = props.isOn ? colors.green : colors.red;
if (props.disabled) {
backgroundColor = props.isOn ? colors.green40 : colors.red40;
@@ -46,42 +35,19 @@ const Knob = styled.div({}, (props: { isOn: boolean; isPressed: boolean; disable
height: '22px',
borderRadius: '11px',
transition: 'all 200ms linear',
- width: props.isPressed ? '26px' : '22px',
+ width: '22px',
backgroundColor,
- // When enabled the button should be placed all the way to the right (100%) minus padding (2px).
- left: props.isOn ? 'calc(100% - 2px)' : '2px',
- // This moves the knob to the left making the right side aligned with the parent's right side.
- transform: `translateX(${props.isOn ? '-100%' : '0'})`,
+ // When enabled the button should be placed all the way to the right (100%) minus padding (2px)
+ // minus it's own width (22px).
+ left: props.isOn ? 'calc(100% - 2px - 22px)' : '2px',
};
});
-export default class Switch extends React.PureComponent<IProps, IState> {
- public state: IState = {
- isOn: this.props.isOn,
- isPressed: false,
- notifyOnTransitionEnd: false,
- };
-
- private containerRef = React.createRef<HTMLDivElement>();
-
- private isPanning = false;
- private startPos = 0;
- private changedDuringPan = false;
-
- public componentDidUpdate(prevProps: IProps, _prevState: IState) {
- if (
- this.props.isOn !== prevProps.isOn &&
- this.props.isOn !== this.state.isOn &&
- !this.isPanning
- ) {
- this.setState({ isOn: this.props.isOn });
- }
- }
-
+export default class Switch extends React.PureComponent<IProps> {
public render() {
return (
<SwitchContainer
- ref={this.refCallback}
+ ref={this.props.innerRef}
id={this.props.id}
role="checkbox"
aria-labelledby={this.props['aria-labelledby']}
@@ -92,106 +58,14 @@ export default class Switch extends React.PureComponent<IProps, IState> {
aria-disabled={this.props.disabled ?? false}
tabIndex={-1}
className={this.props.className}>
- <Knob
- disabled={this.props.disabled ?? false}
- isOn={this.state.isOn}
- isPressed={this.state.isPressed}
- onMouseDown={this.handleMouseDown}
- onTransitionEnd={this.onTransitionEnd}
- />
+ <Knob disabled={this.props.disabled ?? false} isOn={this.props.isOn} />
</SwitchContainer>
);
}
- public setOn(isOn: boolean) {
- this.setState({ isOn });
- }
-
- private refCallback = (element: HTMLDivElement | null) => {
- assignToRef(element, this.containerRef);
- assignToRef(element, this.props.innerRef);
- };
-
- private onTransitionEnd = (event: React.TransitionEvent) => {
- if (this.state.notifyOnTransitionEnd && event.propertyName === 'left') {
- this.notify();
- }
- };
-
private handleClick = () => {
- if (this.props.disabled) {
- return;
+ if (!this.props.disabled) {
+ this.props.onChange?.(!this.props.isOn);
}
-
- if (!this.changedDuringPan) {
- this.setState((state) => ({ isOn: !state.isOn, notifyOnTransitionEnd: true }));
- }
-
- // Needs to be reset to allow clicks on container after panning.
- this.changedDuringPan = false;
};
-
- private handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
- if (this.props.disabled) {
- return;
- }
-
- this.isPanning = true;
- this.startPos = event.clientX;
- this.changedDuringPan = false;
-
- document.addEventListener('mouseup', this.handleMouseUp);
- document.addEventListener('mousemove', this.handleMouseMove);
- };
-
- private handleMouseUp = (event: MouseEvent) => {
- if (this.props.disabled) {
- return;
- }
-
- document.removeEventListener('mouseup', this.handleMouseUp);
- document.removeEventListener('mousemove', this.handleMouseMove);
-
- this.setState({ isPressed: false });
- this.isPanning = false;
- // Reset changedDuringPan when onClick wont be called.
- if (event.target instanceof Element && !this.containerRef.current?.contains(event.target)) {
- this.changedDuringPan = false;
- }
-
- if (this.props.isOn !== this.state.isOn) {
- this.notify();
- }
- };
-
- private handleMouseMove = (event: MouseEvent) => {
- if (this.props.disabled) {
- return;
- }
-
- if (this.isPanning) {
- this.setState({ isPressed: true });
-
- const nextOn = this.computeNextState(event.clientX);
- if (this.state.isOn !== nextOn) {
- this.startPos = event.clientX;
- this.changedDuringPan = true;
- this.setState({ isOn: nextOn, notifyOnTransitionEnd: false });
- }
- }
- };
-
- private computeNextState(currentPos: number): boolean {
- if (currentPos + PAN_DISTANCE < this.startPos && this.state.isOn) {
- return false;
- } else if (currentPos - PAN_DISTANCE > this.startPos && !this.state.isOn) {
- return true;
- } else {
- return this.state.isOn;
- }
- }
-
- private notify() {
- this.props.onChange?.(this.state.isOn);
- }
}
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index d41d647266..6a90c307f8 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -323,7 +323,6 @@ export default class WireguardSettings extends React.Component<IProps, IState> {
private hideWireguardMultihopConfirmationDialog = () => {
this.setState({ showMultihopConfirmationDialog: false });
- this.multihopRef.current?.setOn(this.props.wireguardMultihop);
};
private confirmWireguardMultihop = () => {
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.