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;