diff --git a/frontend/src/Editor/Components/Timer.jsx b/frontend/src/Editor/Components/Timer.jsx index 01b84cfb0c..5b71fe6ef1 100644 --- a/frontend/src/Editor/Components/Timer.jsx +++ b/frontend/src/Editor/Components/Timer.jsx @@ -18,9 +18,14 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose const [state, setState] = useState('initial'); const [intervalId, setIntervalId] = useState(0); + const TimerType = { + COUNTDOWN: 'countDown', + COUNTUP: 'countUp', + }; + useEffect(() => { if ( - properties.type === 'countDown' && + properties.type === TimerType.COUNTDOWN && time.mSecond === 0 && time.second === 0 && time.minute === 0 && @@ -63,7 +68,7 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose SS = previousTime.second, MS = previousTime.mSecond; - if (properties.type === 'countUp') { + if (properties.type === TimerType.COUNTUP) { MS = MS + 15; if (MS >= 1000) { MS = MS - 1000; @@ -79,7 +84,7 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose } } } - } else if (properties.type === 'countDown') { + } else if (properties.type === TimerType.COUNTDOWN) { MS = MS - 15; if (MS < 0) { MS = MS + 1000; @@ -131,6 +136,14 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose } }; + const isCountDownFinished = () => { + return time.hour === 0 && time.minute === 0 && time.second === 0 && time.mSecond === 0; + }; + + const isStartDisabled = () => { + return properties.type === TimerType.COUNTDOWN && isCountDownFinished(); + }; + return (
@@ -142,7 +155,10 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
{state === 'initial' && ( - onStart()}> + onStart()} + > Start )} diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js index b2e4c96768..cea1e2a984 100644 --- a/frontend/src/Editor/Components/components.js +++ b/frontend/src/Editor/Components/components.js @@ -1574,6 +1574,18 @@ export const componentTypes = [ value: 'countUp', }, }, + defaults: [ + { + type: 'countUp', + value: '00:00:00:000', + paramName: 'value', + }, + { + type: 'countDown', + value: '00:00:10:000', + paramName: 'value', + }, + ], events: [], styles: { visibility: { value: '{{true}}' }, diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx index 210132a34d..6eed99663a 100644 --- a/frontend/src/Editor/Inspector/Inspector.jsx +++ b/frontend/src/Editor/Inspector/Inspector.jsx @@ -112,18 +112,27 @@ export const Inspector = ({ } } + const getDefaultValue = (val) => { + if (componentMeta?.definition?.defaults) { + return componentMeta.definition.defaults.find((el) => el.type === val); + } + return null; + }; + function paramUpdated(param, attr, value, paramType) { let newDefinition = { ...component.component.definition }; - let allParams = newDefinition[paramType] || {}; const paramObject = allParams[param.name]; - if (!paramObject) { allParams[param.name] = {}; } if (attr) { allParams[param.name][attr] = value; + const defaultValue = getDefaultValue(value); + if (param.type === 'select' && defaultValue) { + allParams[defaultValue.paramName]['value'] = defaultValue.value; + } } else { allParams[param.name] = value; }