Add AlphabetPicker

src/apps/experimental/components/library/AlphabetPicker.tsx

@@ -0,0 +1,85 @@
+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 handelValue = 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={handelValue}
+            >
+                {letters.map((l) => (
+                    <ToggleButton
+                        key={l}
+                        value={l}
+                        className={btnClassName}
+                    >
+                        {l}
+                    </ToggleButton>
+                ))}
+            </ToggleButtonGroup>
+        </Box>
+    );
+};
+
+export default AlphabetPicker;

src/types/library.ts

@@ -62,6 +62,5 @@ export interface LibraryViewSettings {
     ShowTitle: boolean;
     ShowYear?: boolean;
     Filters?: Filters;
-    NameLessThan?: string | null;
+    Alphabet?: string | null;
-    NameStartsWith?: string | null;
 }