Feature/update timer behaviour (#2597)

* update: when countdown reaches 0 start button is disabled

* add: default values for Timer component

* add: default selection on paramUpdate if element updated is a select and component has default values setted

* refactor: add paramName to defaultvalue to not hardcode value name to update

* add: default values for Timer component and fix with proj lint rules

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 (
     <div className="card" style={{ height, display: styles.visibility ? '' : 'none' }}>
       <div className="timer-wrapper">
@@ -142,7 +155,10 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
         </div>
         <div className="btn-list justify-content-end">
           {state === 'initial' && (
-            <a className={`btn btn-primary${styles.disabledState ? ' disabled' : ''}`} onClick={() => onStart()}>
+            <a
+              className={`btn btn-primary${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
+              onClick={() => onStart()}
+            >
               Start
             </a>
           )}

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}}' },

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;
     }