feat: timer preview

apps/client/src/features/control/message/InputRow.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { IconButton, Input } from '@chakra-ui/react';
+import { Input } from '@chakra-ui/react';
 import { IoEye } from '@react-icons/all-files/io5/IoEye';
 import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
 
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
-import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './InputRow.module.scss';
@@ -13,15 +12,13 @@ interface InputRowProps {
   label: string;
   placeholder: string;
   text: string;
-  visible?: boolean;
-  readonly?: boolean;
-  actionHandler: (action: string, payload: object) => void;
+  visible: boolean;
+  actionHandler: () => void;
   changeHandler: (newValue: string) => void;
-  className?: string;
 }
 
 export default function InputRow(props: InputRowProps) {
-  const { label, placeholder, text, visible, actionHandler, changeHandler, className, readonly } = props;
+  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
   const cursorPositionRef = useRef(0);
@@ -39,41 +36,27 @@ export default function InputRow(props: InputRowProps) {
     changeHandler(event.target.value);
   };
 
-  const classes = cx([style.inputRow, className]);
-
   return (
-    <div className={classes}>
+    <div className={style.inputRow}>
       <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
       <div className={style.inputItems}>
         <Input
           ref={inputRef}
           size='sm'
           variant='ontime-filled'
-          readOnly={readonly}
-          disabled={readonly}
           value={text}
           onChange={handleInputChange}
           placeholder={placeholder}
         />
-        {readonly ? (
-          <IconButton
-            size='sm'
-            isDisabled
-            icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-            aria-label={`Toggle ${label}`}
-            variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-          />
-        ) : (
-          <TooltipActionBtn
-            clickHandler={() => actionHandler('update', { field: 'isPublic', value: !visible })}
-            tooltip={visible ? 'Make invisible' : 'Make visible'}
-            aria-label={`Toggle ${label}`}
-            openDelay={tooltipDelayMid}
-            icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-            variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-            size='sm'
-          />
-        )}
+        <TooltipActionBtn
+          clickHandler={actionHandler}
+          tooltip={visible ? 'Make invisible' : 'Make visible'}
+          aria-label={`Toggle ${label}`}
+          openDelay={tooltipDelayMid}
+          icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          variant={visible ? 'ontime-filled' : 'ontime-subtle'}
+          size='sm'
+        />
       </div>
     </div>
   );