web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx - develop - vshmidt/label-studio

web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx

76 строк2 KB

Raul Martin

feat: Migrate SCSS to plain CSS with PostCSS, replace Stylelint with Biome (#9584)

12 мар 2026, 20:57

12 мар 2026, 20:573f31128

import type { FC } from "react";
import { cn } from "../../utils/bem";

import "./TimeDurationControl.prefix.css";
import { TimeBox } from "./TimeBox";

export interface TimerProps {
  isSidepanel: boolean | undefined;
  startTime: number;
  endTime: number | undefined;
  minTime: number;
  maxTime: number | undefined;
  currentTime?: number;
  startTimeReadonly?: boolean;
  endTimeReadonly?: boolean;
  onChangeStartTime?: (value: number) => void;
  onChangeEndTime?: (value: number) => void;
  showDuration?: boolean;
  showLabels?: boolean;
}

export const TimeDurationControl: FC<TimerProps> = ({
  isSidepanel = false,
  startTime,
  endTime = 0,
  minTime,
  maxTime = 0,
  currentTime,
  startTimeReadonly = false,
  endTimeReadonly = false,
  onChangeStartTime,
  onChangeEndTime,
  showDuration = false,
  showLabels = false,
}) => {
  const _currentTime = !currentTime ? startTime : currentTime;

  const handleChangeCurrentTime = (value: number) => {
    if (value >= minTime && value <= maxTime && value <= endTime) onChangeStartTime?.(value);
  };

  const handleChangeEndTime = (value: number) => {
    if (value >= minTime && value <= maxTime && value >= _currentTime) onChangeEndTime?.(value);
  };

  return (
    <div className={cn("timer-duration-control").toClassName()}>
      <TimeBox
        sidepanel={isSidepanel}
        readonly={startTimeReadonly}
        value={_currentTime}
        onChange={handleChangeCurrentTime}
        label={showLabels ? "Start" : undefined}
        data-testid="timebox-current-time"
      />
      <TimeBox
        sidepanel={isSidepanel}
        readonly={endTimeReadonly}
        value={endTime}
        onChange={handleChangeEndTime}
        data-testid="timebox-end-time"
        label={showLabels ? "End" : undefined}
      />
      {showDuration && (
        <TimeBox
          sidepanel={isSidepanel}
          readonly={true}
          value={endTime - startTime}
          onChange={() => {}}
          data-testid="timebox-duration-time"
          label={showLabels ? "Duration" : undefined}
        />
      )}
    </div>
  );
};