Increase timer limit and add +5min option

miroapp · Dec 12, 2023 · 34ef457 · 34ef457
1 parent 3768a98
commit 34ef457
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 24 deletions.
diff --git a/examples/breakout-rooms/src/components/Timer/Timer.css b/examples/breakout-rooms/src/components/Timer/Timer.css
@@ -10,7 +10,6 @@
   align-items: center;
   gap: 0.5em;
   padding-right: 0.5em;
-  border-right: 1px solid var(--indigo400);
 }
 
 .timer-display {

diff --git a/examples/breakout-rooms/src/components/Timer/Timer.tsx b/examples/breakout-rooms/src/components/Timer/Timer.tsx
@@ -23,11 +23,20 @@ export const DEFAULT_MIN_TIME = convertTime(1, "milliseconds", "minutes");
 /**
  * 10 mins
  */
-export const DEFAULT_MAX_TIME = convertTime(10, "milliseconds", "minutes");
+export const DEFAULT_MAX_TIME = convertTime(90, "milliseconds", "minutes");
 /**
- * 15 seconds
+ * 30 seconds
  */
-export const DEFAULT_STEP = convertTime(15, "milliseconds", "seconds");
+export const DEFAULT_STEP = convertTime(30, "milliseconds", "seconds");
+/**
+ * 5 mins
+ */
+export const BIG_STEP = convertTime(5, "milliseconds", "minutes");
+/**
+ * 5 mins
+ */
+export const BIG_STEP_MAX_TIME = convertTime(86, "milliseconds", "minutes");
+
 
 type Props = {
   /**
@@ -46,6 +55,14 @@ type Props = {
    * Inc/Dec step in milliseconds
    */
   step?: number;
+  /**
+   * Inc/Dec step in milliseconds
+   */
+  bigStep?: number;  
+  /**
+   * Inc/Dec step in milliseconds
+   */
+  bigStepMaxTime?: number;    
   /**
    * Set chosen time in milliseconds
    */
@@ -57,6 +74,8 @@ export const Timer: React.FunctionComponent<Props> = ({
   minTime = DEFAULT_MIN_TIME,
   maxTime = DEFAULT_MAX_TIME,
   step = DEFAULT_STEP,
+  bigStep = BIG_STEP,
+  bigStepMaxTime = BIG_STEP_MAX_TIME,
   onSet,
 }) => {
   const [time, setTime] = React.useState<number>(defaultTime);
@@ -70,14 +89,18 @@ export const Timer: React.FunctionComponent<Props> = ({
     setTime((time) => (time > minTime ? time - step : time));
   };
 
+  const handleBigAdd = () => {
+    setTime((time) => (time <= bigStepMaxTime ? time + bigStep : time));
+  };
+
   const handleSetTime = () => {
     onSet(time);
     setTimeChanged(true);
   };
 
   return (
     <>
-      <DropdownMenu>
+      <DropdownMenu onClose={() => handleSetTime()}>
         <DropdownMenu.Trigger asChild>
           <Button variant="outline-prominent" rounded>
             <Button.IconSlot>
@@ -92,8 +115,8 @@ export const Timer: React.FunctionComponent<Props> = ({
           <div className="timer-container">
             <div className="timer-control">
               <Button
-                variant="outline-subtle"
-                size="small"
+                variant="solid-subtle"
+                size="medium"
                 rounded
                 disabled={time <= minTime}
                 onClick={() => handleDecrease()}
@@ -104,22 +127,24 @@ export const Timer: React.FunctionComponent<Props> = ({
               <div className="timer-display">{formatDisplayTime(time)}</div>
 
               <Button
-                variant="outline-subtle"
-                size="small"
+                variant="solid-subtle"
+                size="medium"
                 rounded
                 disabled={time >= maxTime}
                 onClick={() => handleAdd()}
               >
                 <IconPlus />
               </Button>
+              <Button
+                variant="solid-subtle"
+                size="medium"
+                rounded
+                disabled={time >= bigStepMaxTime}
+                onClick={() => handleBigAdd()}
+              >
+                +5m
+              </Button>          
             </div>
-            <button
-              className="button button-primary button-small"
-              type="button"
-              onClick={() => handleSetTime()}
-            >
-              Set
-            </button>
           </div>
         </DropdownMenu.Content>
       </DropdownMenu>

diff --git a/examples/breakout-rooms/src/utils.ts b/examples/breakout-rooms/src/utils.ts
@@ -45,14 +45,15 @@ export const formatTime = (
     formattedValue = seconds / 60;
     formattedUnit = "minutes";
   }
-  if (formattedValue >= 60) {
-    formattedValue = formattedValue / 60;
-    formattedUnit = "hours";
-  }
-  if (formattedValue >= 24) {
-    formattedValue = formattedValue / 24;
-    formattedUnit = "days";
-  }
+  // Commented for possible future use
+  // if (formattedValue >= 60) {
+  //   formattedValue = formattedValue / 60;
+  //   formattedUnit = "hours";
+  // }
+  // if (formattedValue >= 24) {
+  //   formattedValue = formattedValue / 24;
+  //   formattedUnit = "days";
+  // }
 
   return formatter.format(formattedValue, formattedUnit);
 };