feishin/src/renderer/components/virtual-table/cells/row-index-cell.tsx

import type { ICellRendererParams } from '@ag-grid-community/core';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';

const AnimatedSvg = () => {
    return (
        <div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
            <svg
                viewBox="100 130 57 80"
                xmlns="http://www.w3.org/2000/svg"
            >
                <g>
                    <rect
                        fill="var(--primary-color)"
                        height="80"
                        id="bar-1"
                        width="12"
                        x="100"
                        y="130"
                    >
                        <animate
                            attributeName="height"
                            begin="0.1s"
                            calcMode="spline"
                            dur="0.95s"
                            keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
                            keyTimes="0; 0.47368; 1"
                            repeatCount="indefinite"
                            values="80;15;80"
                        />
                    </rect>
                    <rect
                        fill="var(--primary-color)"
                        height="80"
                        id="bar-2"
                        width="12"
                        x="115"
                        y="130"
                    >
                        <animate
                            attributeName="height"
                            begin="0.1s"
                            calcMode="spline"
                            dur="0.95s"
                            keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
                            keyTimes="0; 0.44444; 1"
                            repeatCount="indefinite"
                            values="25;80;25"
                        />
                    </rect>
                    <rect
                        fill="var(--primary-color)"
                        height="80"
                        id="bar-3"
                        width="12"
                        x="130"
                        y="130"
                    >
                        <animate
                            attributeName="height"
                            begin="0.1s"
                            calcMode="spline"
                            dur="0.85s"
                            keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"
                            keyTimes="0; 0.42105; 1"
                            repeatCount="indefinite"
                            values="80;10;80"
                        />
                    </rect>
                    <rect
                        fill="var(--primary-color)"
                        height="80"
                        id="bar-4"
                        width="12"
                        x="145"
                        y="130"
                    >
                        <animate
                            attributeName="height"
                            begin="0.1s"
                            calcMode="spline"
                            dur="1.05s"
                            keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
                            keyTimes="0; 0.31579; 1"
                            repeatCount="indefinite"
                            values="30;80;30"
                        />
                    </rect>
                </g>
            </svg>
        </div>
    );
};

const StaticSvg = () => {
    return (
        <div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
            <svg
                viewBox="100 130 57 80"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect
                    fill="var(--primary-color)"
                    height="20"
                    width="12"
                    x="100"
                    y="130"
                />
                <rect
                    fill="var(--primary-color)"
                    height="60"
                    width="12"
                    x="115"
                    y="130"
                />
                <rect
                    fill="var(--primary-color)"
                    height="80"
                    width="12"
                    x="130"
                    y="130"
                />
                <rect
                    fill="var(--primary-color)"
                    height="45"
                    width="12"
                    x="145"
                    y="130"
                />
            </svg>
        </div>
    );
};

export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => {
    const classList = eGridCell.classList;
    const isFocused = classList.contains('focused');
    const isPlaying = classList.contains('playing');
    const isCurrentSong =
        classList.contains('current-song-cell') || classList.contains('current-playlist-song-cell');

    return (
        <CellContainer $position="right">
            {isPlaying &&
                (isFocused && isCurrentSong ? (
                    <AnimatedSvg />
                ) : isCurrentSong ? (
                    <StaticSvg />
                ) : null)}
            <Text
                $secondary
                align="right"
                className="current-song-child current-song-index"
                overflow="hidden"
                size="md"
            >
                {value}
            </Text>
        </CellContainer>
    );
};