tracker SongTrackerPatternRowIndexColumn.tsx

0% Statements 0/10

0% Branches 0/2

0% Functions 0/4

0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { memo } from "react";
import { TRACKER_PATTERN_LENGTH } from "consts";
import {
  StyledTrackerPatternRowIndexCell,
  StyledTrackerPatternRowIndexColumn,
  StyledTrackerRowIndexField,
} from "./style";
 
const renderCounter = (n: number): string => {
  return n.toString().padStart(2, "0");
};
 
const ROW_INDICES = Array.from(
  { length: TRACKER_PATTERN_LENGTH },
  (_, index) => index,
);
 
interface SongTrackerPatternRowIndexColumnProps {
  renderSequenceId: number;
  defaultStartPlaybackSequence: number;
  defaultStartPlaybackRow: number;
}
 
export const SongTrackerPatternRowIndexColumn = memo(
  ({
    renderSequenceId,
    defaultStartPlaybackSequence,
    defaultStartPlaybackRow,
  }: SongTrackerPatternRowIndexColumnProps) => {
    return (
      <StyledTrackerPatternRowIndexColumn $sticky>
        {ROW_INDICES.map((rowIndex) => (
          <StyledTrackerPatternRowIndexCell
            key={rowIndex}
            id={`tracker_playhead_${renderSequenceId}_${rowIndex}`}
            $isDefaultPlayhead={
              defaultStartPlaybackSequence === renderSequenceId &&
              defaultStartPlaybackRow === rowIndex
            }
            data-row={rowIndex}
            data-sequenceid={renderSequenceId}
          >
            <StyledTrackerRowIndexField
              id={`cell_${renderSequenceId}_${rowIndex}`}
            >
              {renderCounter(rowIndex)}
            </StyledTrackerRowIndexField>
          </StyledTrackerPatternRowIndexCell>
        ))}
      </StyledTrackerPatternRowIndexColumn>
    );
  },
);