New: Indexer flags

(cherry picked from commit 7a768b5d0faf9aa57e78aee19cefee8fb19a42d5)

frontend/src/Components/Form/IndexerFlagsSelectInput.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+const selectIndexerFlagsValues = (selectedFlags: number) =>
+  createSelector(
+    (state: AppState) => state.settings.indexerFlags,
+    (indexerFlags) => {
+      const value = indexerFlags.items.reduce((acc: number[], { id }) => {
+        // eslint-disable-next-line no-bitwise
+        if ((selectedFlags & id) === id) {
+          acc.push(id);
+        }
+
+        return acc;
+      }, []);
+
+      const values = indexerFlags.items.map(({ id, name }) => ({
+        key: id,
+        value: name,
+      }));
+
+      return {
+        value,
+        values,
+      };
+    }
+  );
+
+interface IndexerFlagsSelectInputProps {
+  name: string;
+  indexerFlags: number;
+  onChange(payload: object): void;
+}
+
+function IndexerFlagsSelectInput(props: IndexerFlagsSelectInputProps) {
+  const { indexerFlags, onChange } = props;
+
+  const { value, values } = useSelector(selectIndexerFlagsValues(indexerFlags));
+
+  const onChangeWrapper = useCallback(
+    ({ name, value }: { name: string; value: number[] }) => {
+      const indexerFlags = value.reduce((acc, flagId) => acc + flagId, 0);
+
+      onChange({ name, value: indexerFlags });
+    },
+    [onChange]
+  );
+
+  return (
+    <EnhancedSelectInput
+      {...props}
+      value={value}
+      values={values}
+      onChange={onChangeWrapper}
+    />
+  );
+}
+
+export default IndexerFlagsSelectInput;