diff --git a/src/components/panes/configure-panes/custom/custom-control.tsx b/src/components/panes/configure-panes/custom/custom-control.tsx
index 9d5e338c..f37c78de 100644
--- a/src/components/panes/configure-panes/custom/custom-control.tsx
+++ b/src/components/panes/configure-panes/custom/custom-control.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import {useSelector} from 'react-redux';
import {PelpiKeycodeInput} from '../../../inputs/pelpi/keycode-input';
import {AccentButton} from '../../../inputs/accent-button';
import {AccentSlider} from '../../../inputs/accent-slider';
@@ -10,6 +11,7 @@ import type {LightingData} from '../../../../types/types';
import {ArrayColorPicker} from '../../../inputs/color-picker';
import {ConnectedColorPalettePicker} from 'src/components/inputs/color-palette-picker';
import {shiftFrom16Bit, shiftTo16Bit} from 'src/utils/keyboard-api';
+import {getAskConfirmationButton} from 'src/store/settingsSlice';
type Props = {
lightingData: LightingData;
@@ -28,21 +30,26 @@ type ControlMeta = [
type AdvancedControlProps = Props & {meta: ControlMeta};
export const VIACustomItem = React.memo(
- (props: VIACustomControlProps & {_id: string}) => (
-
-
-
- {'type' in props ? (
-
- ) : (
- props.content
- )}
-
-
- ),
+ (props: VIACustomControlProps & {_id: string}) => {
+ const showAskConfirmationButton = useSelector(getAskConfirmationButton);
+
+ return (
+
+
+
+ {'type' in props ? (
+
+ ) : (
+ props.content
+ )}
+
+
+ );
+ },
);
type ControlGetSet = {
@@ -50,7 +57,8 @@ type ControlGetSet = {
updateValue: (name: string, ...command: number[]) => void;
};
-type VIACustomControlProps = VIAItem & ControlGetSet & {label: string};
+type VIACustomControlProps = VIAItem &
+ ControlGetSet & {label: string; showAskConfirmationButton: boolean};
const boxOrArr = (elem: N | N[]) =>
Array.isArray(elem) ? elem : [elem];
@@ -76,7 +84,8 @@ const getRangeBytes = (value: number, max: number) => {
};
const VIACustomControl = (props: VIACustomControlProps) => {
- const {content, type, options, value} = props as any;
+ const {content, type, options, value, showAskConfirmationButton} =
+ props as any;
const [name, ...command] = content;
switch (type) {
case 'button': {
@@ -85,11 +94,14 @@ const VIACustomControl = (props: VIACustomControlProps) => {
{
if (
+ showAskConfirmationButton &&
window.confirm(
`Are you sure you want to continue performing the action ${props.label}?`,
)
) {
props.updateValue(name, ...command, buttonOption[0]);
+ } else if (!showAskConfirmationButton) {
+ props.updateValue(name, ...command, buttonOption[0]);
}
}}
>
diff --git a/src/components/panes/settings.tsx b/src/components/panes/settings.tsx
index 119f4587..359db262 100644
--- a/src/components/panes/settings.tsx
+++ b/src/components/panes/settings.tsx
@@ -14,11 +14,13 @@ import {
import {AccentSlider} from '../inputs/accent-slider';
import {useDispatch} from 'react-redux';
import {useAppSelector} from 'src/store/hooks';
-import {
+import {
getShowDesignTab,
getDisableFastRemap,
toggleCreatorMode,
toggleFastRemap,
+ getAskConfirmationButton,
+ toggleAskConfirmationButton,
getThemeMode,
toggleThemeMode,
getThemeName,
@@ -57,6 +59,7 @@ export const Settings = () => {
const dispatch = useDispatch();
const showDesignTab = useAppSelector(getShowDesignTab);
const disableFastRemap = useAppSelector(getDisableFastRemap);
+ const showAskConfirmationButton = useAppSelector(getAskConfirmationButton);
const themeMode = useAppSelector(getThemeMode);
const themeName = useAppSelector(getThemeName);
const renderMode = useAppSelector(getRenderMode);
@@ -120,6 +123,15 @@ export const Settings = () => {
/>
+
+
+
+ dispatch(toggleAskConfirmationButton())}
+ isChecked={showAskConfirmationButton}
+ />
+
+
diff --git a/src/store/settingsSlice.ts b/src/store/settingsSlice.ts
index 0355db4a..f4544bb1 100644
--- a/src/store/settingsSlice.ts
+++ b/src/store/settingsSlice.ts
@@ -45,6 +45,9 @@ const settingsSlice = createSlice({
toggleCreatorMode: (state) => {
toggleBool(state, 'showDesignTab');
},
+ toggleAskConfirmationButton: (state) => {
+ toggleBool(state, 'showAskConfirmationButton');
+ },
toggleThemeMode: (state) => {
const newThemeMode = state.themeMode === 'light' ? 'dark' : 'light';
document.documentElement.dataset.themeMode = newThemeMode;
@@ -104,6 +107,7 @@ const settingsSlice = createSlice({
export const {
toggleFastRemap,
toggleCreatorMode,
+ toggleAskConfirmationButton,
setTestMatrixEnabled,
setTestKeyboardSoundsSettings,
setMacroEditorSettings,
@@ -125,6 +129,8 @@ export const getDisableFastRemap = (state: RootState) =>
state.settings.disableFastRemap;
export const getShowDesignTab = (state: RootState) =>
state.settings.showDesignTab;
+export const getAskConfirmationButton = (state: RootState) =>
+ state.settings.showAskConfirmationButton;
export const getRestartRequired = (state: RootState) =>
state.settings.restartRequired;
export const getIsTestMatrixEnabled = (state: RootState) =>
diff --git a/src/types/types.ts b/src/types/types.ts
index 3b86fb2f..729fd17e 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -84,6 +84,7 @@ export type TestKeyboardSoundsSettings = {
export type Settings = {
showDesignTab: boolean;
disableFastRemap: boolean;
+ showAskConfirmationButton: boolean;
renderMode: '3D' | '2D';
themeMode: 'light' | 'dark';
themeName: string;