jellyfin-web/src/apps/experimental/components/library/AlphabetPicker.tsx

import React, { useCallback } from 'react';
import classNames from 'classnames';

import Box from '@mui/material/Box';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

import { LibraryViewSettings } from 'types/library';
import 'components/alphaPicker/style.scss';

interface AlphabetPickerProps {
    className?: string;
    libraryViewSettings: LibraryViewSettings;
    setLibraryViewSettings: React.Dispatch<
        React.SetStateAction<LibraryViewSettings>
    >;
}

const AlphabetPicker: React.FC<AlphabetPickerProps> = ({
    className,
    libraryViewSettings,
    setLibraryViewSettings
}) => {
    const handleValue = useCallback(
        (
            event: React.MouseEvent<HTMLElement>,
            newValue: string | null | undefined
        ) => {
            setLibraryViewSettings((prevState) => ({
                ...prevState,
                StartIndex: 0,
                Alphabet: newValue
            }));
        },
        [setLibraryViewSettings]
    );

    const containerClassName = classNames(
        'alphaPicker',
        className,
        'alphaPicker-fixed-right'
    );

    const btnClassName = classNames(
        'paper-icon-button-light',
        'alphaPickerButton'
    );

    const letters = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    return (
        <Box
            className={containerClassName}
            sx={{
                position: 'fixed',
                bottom: '1.5em',
                fontSize: {
                    xs: '80%',
                    lg: '88%'
                }
            }}
        >
            <ToggleButtonGroup
                orientation='vertical'
                value={libraryViewSettings.Alphabet}
                exclusive
                color='primary'
                size='small'
                onChange={handleValue}
            >
                {letters.map((l) => (
                    <ToggleButton
                        key={l}
                        value={l}
                        className={btnClassName}
                    >
                        {l}
                    </ToggleButton>
                ))}
            </ToggleButtonGroup>
        </Box>
    );
};

export default AlphabetPicker;