web/libs/editor/src/components/BottomBar/CurrentTask.jsx - develop - alt3rmann/label-studio

web/libs/editor/src/components/BottomBar/CurrentTask.jsx
71 строка2 KB
yyassi-heartex
chore: OPTIC-1154: biome linting tweaks (#6425)
22 окт 2024, 23:22
22 окт 2024, 23:227ed55c6
import { useMemo } from "react";
import { observer } from "mobx-react";
import { Button } from "../../common/Button/Button";
import { Block, Elem } from "../../utils/bem";
import { guidGenerator } from "../../utils/unique";
import { isDefined } from "../../utils/utilities";
import { FF_LEAP_1173, FF_TASK_COUNT_FIX, isFF } from "../../utils/feature-flags";
import "./CurrentTask.scss";

export const CurrentTask = observer(({ store }) => {
  const currentIndex = useMemo(() => {
    return store.taskHistory.findIndex((x) => x.taskId === store.task.id) + 1;
  }, [store.taskHistory]);

  const historyEnabled = store.hasInterface("topbar:prevnext");

  // @todo some interface?
  const canPostpone =
    !isDefined(store.annotationStore.selected.pk) &&
    !store.canGoNextTask &&
    (!isFF(FF_LEAP_1173) || store.hasInterface("skip")) &&
    !store.hasInterface("review") &&
    store.hasInterface("postpone");

  return (
    <Elem name="section">
      <Block name="current-task" mod={{ "with-history": historyEnabled }}>
        <Elem name="task-id">
          {store.task.id ?? guidGenerator()}
          {historyEnabled &&
            (isFF(FF_TASK_COUNT_FIX) ? (
              <Elem name="task-count">
                {store.queuePosition} of {store.queueTotal}
              </Elem>
            ) : (
              <Elem name="task-count">
                {currentIndex} of {store.taskHistory.length}
              </Elem>
            ))}
        </Elem>
        {historyEnabled && (
          <Elem name="history-controls">
            <Elem
              tag={Button}
              name="prevnext"
              mod={{ prev: true, disabled: !store.canGoPrevTask }}
              type="link"
              disabled={!historyEnabled || !store.canGoPrevTask}
              onClick={store.prevTask}
              style={{ background: "none", backgroundColor: "none" }}
            />
            <Elem
              tag={Button}
              name="prevnext"
              data-testid="next-task"
              mod={{
                next: true,
                disabled: !store.canGoNextTask && !canPostpone,
                postpone: !store.canGoNextTask && canPostpone,
              }}
              type="link"
              disabled={!store.canGoNextTask && !canPostpone}
              onClick={store.canGoNextTask ? store.nextTask : store.postponeTask}
              style={{ background: "none", backgroundColor: "none" }}
            />
          </Elem>
        )}
      </Block>
    </Elem>
  );
});