refactor: simple migrations and tweaks to cuesheet

2026-08-20 14:39:06 +00:00 · 2025-06-27 22:14:45 +02:00
parent c8c2a05724
commit aefa4cbf44
23 changed files with 200 additions and 141 deletions
@@ -10,8 +10,7 @@ interface BlockRowProps {
  columnCount: number;
 }

-function BlockRow(props: BlockRowProps) {
-  const { hidePast, title, columnCount } = props;
+function BlockRow({ hidePast, title, columnCount }: BlockRowProps) {
  const { currentBlockId } = useCurrentBlockId();
  const firstCellRef = useRef<null | HTMLTableCellElement>(null);

@@ -18,9 +18,7 @@ interface CuesheetBodyProps {
  table: Table<OntimeEntry>;
 }

-export default function CuesheetBody(props: CuesheetBodyProps) {
-  const { rowModel, selectedRef, table } = props;
-
+export default function CuesheetBody({ rowModel, selectedRef, table }: CuesheetBodyProps) {
  const { selectedEventId } = useSelectedEventId();
  const { hideDelays, hidePast } = useCuesheetOptions();

@@ -13,8 +13,7 @@ interface CuesheetHeaderProps {
  headerGroups: HeaderGroup<OntimeEntry>[];
 }

-export default function CuesheetHeader(props: CuesheetHeaderProps) {
-  const { headerGroups } = props;
+export default function CuesheetHeader({ headerGroups }: CuesheetHeaderProps) {
  const { hideIndexColumn, showActionMenu } = useCuesheetOptions();

  return (
@@ -8,8 +8,7 @@ interface DelayRowProps {
  duration: number;
 }

-function DelayRow(props: DelayRowProps) {
-  const { duration } = props;
+function DelayRow({ duration }: DelayRowProps) {
  const delayTime = millisToDelayString(duration, 'expanded');

  return (
@@ -17,9 +17,13 @@ interface ParentFocusableInput extends HTMLInputElement {

 export default memo(DurationInput);

-function DurationInput(props: PropsWithChildren<DurationInputProps>) {
-  const { initialValue, lockedValue, delayed, onSubmit, children } = props;
-
+function DurationInput({
+  initialValue,
+  lockedValue,
+  delayed,
+  onSubmit,
+  children,
+}: PropsWithChildren<DurationInputProps>) {
  const [isEditing, setIsEditing] = useState(false);
  const [value, setValue] = useState(initialValue);
  const inputRef = useRef<ParentFocusableInput>(null);
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Input } from '@chakra-ui/react';
+
+import Input from '../../../../common/components/input/input/Input';

 import style from './EditableImage.module.scss';

@@ -10,9 +11,7 @@ interface EditableImageProps {

 export default memo(EditableImage);

-function EditableImage(props: EditableImageProps) {
-  const { initialValue, updateValue } = props;
-
+function EditableImage({ initialValue, updateValue }: EditableImageProps) {
  const handleUpdate = (newValue: string) => {
    if (newValue === initialValue) {
      return;
@@ -26,10 +25,8 @@ function EditableImage(props: EditableImageProps) {
  if (!initialValue) {
    return (
      <Input
-        size='sm'
-        variant='ontime-transparent'
-        padding={0}
-        fontSize='md'
+        variant='ghosted'
+        fluid
        placeholder='Paste image URL'
        onBlur={(event) => handleUpdate(event.currentTarget.value)}
        onKeyDown={(event) => {
@@ -38,8 +35,6 @@ function EditableImage(props: EditableImageProps) {
          }
        }}
        defaultValue={initialValue}
-        spellCheck={false}
-        autoComplete='off'
      />
    );
  }
@@ -39,8 +39,7 @@ export default memo(EventRow, (prevProps, nextProps) => {
  );
 });

-function EventRow(props: EventRowProps) {
-  const { rowId, event, eventIndex, rowIndex, isPast, selectedRef, rowBgColour, table } = props;
+function EventRow({ rowId, event, eventIndex, rowIndex, isPast, selectedRef, rowBgColour, table }: EventRowProps) {
  const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
  const ownRef = useRef<HTMLTableRowElement>(null);
  const [isVisible, setIsVisible] = useState(false);
@@ -10,8 +10,7 @@ interface MultiLineCellProps {

 export default memo(MultiLineCell);

-function MultiLineCell(props: MultiLineCellProps) {
-  const { initialValue, handleUpdate } = props;
+function MultiLineCell({ initialValue, handleUpdate }: MultiLineCellProps) {
  const ref = useRef<HTMLInputElement | null>(null);
  const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);

@@ -1,6 +1,6 @@
 import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react';
-import { Input } from '@chakra-ui/react';

+import Input from '../../../../common/components/input/input/Input';
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';

 interface SingleLineCellProps {
@@ -10,50 +10,47 @@ interface SingleLineCellProps {
  handleCancelUpdate?: () => void;
 }

-const SingleLineCell = forwardRef((props: SingleLineCellProps, inputRef) => {
-  const { initialValue, allowSubmitSameValue, handleUpdate, handleCancelUpdate } = props;
-  const ref = useRef<HTMLInputElement | null>(null);
-  const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
+const SingleLineCell = forwardRef(
+  ({ initialValue, allowSubmitSameValue, handleUpdate, handleCancelUpdate }: SingleLineCellProps, inputRef) => {
+    const ref = useRef<HTMLInputElement | null>(null);
+    const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);

-  const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
-    allowSubmitSameValue,
-    allowKeyboardNavigation: true,
-    submitOnEnter: true, // single line should submit on enter
-    submitOnCtrlEnter: true,
-    onCancelUpdate: handleCancelUpdate,
-  });
+    const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
+      allowSubmitSameValue,
+      allowKeyboardNavigation: true,
+      submitOnEnter: true, // single line should submit on enter
+      submitOnCtrlEnter: true,
+      onCancelUpdate: handleCancelUpdate,
+    });

-  // expose a subset of the methods to the parent
-  useImperativeHandle(inputRef, () => {
-    return {
-      focus() {
-        ref.current?.focus();
-      },
-      select() {
-        ref.current?.select();
-      },
-      focusParentElement() {
-        ref.current?.parentElement?.focus();
-      },
-    };
-  }, [ref]);
+    // expose a subset of the methods to the parent
+    useImperativeHandle(inputRef, () => {
+      return {
+        focus() {
+          ref.current?.focus();
+        },
+        select() {
+          ref.current?.select();
+        },
+        focusParentElement() {
+          ref.current?.parentElement?.focus();
+        },
+      };
+    }, [ref]);

-  return (
-    <Input
-      ref={ref}
-      size='sm'
-      variant='ontime-transparent'
-      padding={0}
-      fontSize='md'
-      value={value}
-      onChange={onChange}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      spellCheck={false}
-      autoComplete='off'
-    />
-  );
-});
+    return (
+      <Input
+        ref={ref}
+        variant='ghosted'
+        fluid
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+      />
+    );
+  },
+);

 SingleLineCell.displayName = 'SingleLineCell';

@@ -18,9 +18,9 @@ const TextLikeInput = forwardRef((props: PropsWithChildren<TextLikeInputProps>,
    return {
      focusParentElement() {
        ref.current?.parentElement?.focus();
-      }
-    }
-  })
+      },
+    };
+  });

  return (
    <div className={classes} {...elementProps} tabIndex={0} ref={ref}>
@@ -19,9 +19,13 @@ interface ParentFocusableInput extends HTMLInputElement {

 export default memo(TimeInputDuration);

-function TimeInputDuration(props: PropsWithChildren<TimeInputDurationProps>) {
-  const { initialValue, lockedValue, delayed, onSubmit, children } = props;
-
+function TimeInputDuration({
+  initialValue,
+  lockedValue,
+  delayed,
+  onSubmit,
+  children,
+}: PropsWithChildren<TimeInputDurationProps>) {
  const [isEditing, setIsEditing] = useState(false);
  const [value, setValue] = useState(initialValue);
  const inputRef = useRef<ParentFocusableInput>(null);