Merge remote-tracking branch 'origin/master' into v3

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -14,24 +14,26 @@ interface TimeInputProps {
   time?: number;
   delay?: number;
   placeholder: string;
-  validationHandler: (entry: TimeEntryField, val: number) => boolean;
   previousEnd?: number;
-  warning?: string;
   className?: string;
 }
 
+function ButtonInitial(name: TimeEntryField) {
+  if (name === 'timeStart') return 'S';
+  if (name === 'timeEnd') return 'E';
+  if (name === 'durationOverride') return 'D';
+  return '';
+}
+
+function ButtonTooltip(name: TimeEntryField, tooltip?: string) {
+  if (name === 'timeStart') return `Start${tooltip ? `: ${tooltip}` : ''}`;
+  if (name === 'timeEnd') return `End${tooltip ? `: ${tooltip}` : ''}`;
+  if (name === 'durationOverride') return `Duration${tooltip ? `: ${tooltip}` : ''}`;
+  return '';
+}
+
 export default function TimeInput(props: TimeInputProps) {
-  const {
-    id,
-    name,
-    submitHandler,
-    time = 0,
-    delay = 0,
-    placeholder,
-    validationHandler,
-    previousEnd = 0,
-    className = '',
-  } = props;
+  const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0, className } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -87,15 +89,12 @@ export default function TimeInput(props: TimeInputProps) {
       // check if time is different from before
       if (newValMillis === time) return false;
 
-      // validate with parent
-      if (!validationHandler(name, newValMillis)) return false;
-
       // update entry
       submitHandler(name, newValMillis);
 
       return true;
     },
-    [name, previousEnd, submitHandler, time, validationHandler],
+    [name, previousEnd, submitHandler, time],
   );
 
   /**
@@ -153,8 +152,19 @@ export default function TimeInput(props: TimeInputProps) {
     resetValue();
   }, [resetValue, time]);
 
+  const isDelayed = delay !== 0;
+  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null]);
   const timeInputClass = className ? className : style.timeInput;
 
+  const TooltipLabel = useMemo(() => {
+    return ButtonTooltip(name, '');
+  }, [name]);
+
+  const ButtonText = useMemo(() => {
+    return ButtonInitial(name);
+  }, [name]);
+
   return (
     <Input
       size='sm'