Added series index selection

frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css

@@ -0,0 +1,36 @@
+.checkContainer {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 3;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--defaultColor);
+}
+
+.icon {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+}
+
+.selected {
+  composes: icon;
+
+  color: var(--sonarrBlue);
+
+  &:hover {
+    color: var(--white);
+  }
+}
+
+.unselected {
+  composes: icon;
+
+  color: var(--white);
+
+  &:hover {
+    color: var(--sonarrBlue);
+  }
+}

frontend/src/Series/Index/Select/SeriesIndexPosterSelect.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import styles from './SeriesIndexPosterSelect.css';
+
+interface SeriesIndexPosterSelectProps {
+  seriesId: number;
+}
+
+function SeriesIndexPosterSelect(props: SeriesIndexPosterSelectProps) {
+  const { seriesId } = props;
+  const [selectState, selectDispatch] = useSelect();
+  const isSelected = selectState.selectedState[seriesId];
+
+  const onSelectPress = useCallback(
+    (event) => {
+      const shiftKey = event.nativeEvent.shiftKey;
+
+      selectDispatch({
+        type: SelectActionType.ToggleSelected,
+        id: seriesId,
+        isSelected: !isSelected,
+        shiftKey,
+      });
+    },
+    [seriesId, isSelected, selectDispatch]
+  );
+
+  return (
+    <IconButton
+      className={styles.checkContainer}
+      iconClassName={isSelected ? styles.selected : styles.unselected}
+      name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
+      size={20}
+      onPress={onSelectPress}
+    />
+  );
+}
+
+export default SeriesIndexPosterSelect;

frontend/src/Series/Index/Select/SeriesIndexSelectAllButton.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import { icons } from 'Helpers/Props';
+
+function SeriesIndexSelectAllButton() {
+  const [selectState, selectDispatch] = useSelect();
+  const { allSelected, allUnselected } = selectState;
+
+  let icon = icons.SQUARE_MINUS;
+
+  if (allSelected) {
+    icon = icons.CHECK_SQUARE;
+  } else if (allUnselected) {
+    icon = icons.SQUARE;
+  }
+
+  const onPress = useCallback(() => {
+    selectDispatch({
+      type: allSelected
+        ? SelectActionType.UnselectAll
+        : SelectActionType.SelectAll,
+    });
+  }, [allSelected, selectDispatch]);
+
+  return (
+    <PageToolbarButton
+      label={allSelected ? 'Unselect All' : 'Select All'}
+      iconName={icon}
+      onPress={onPress}
+    />
+  );
+}
+
+export default SeriesIndexSelectAllButton;