Extract column select component

1 files changed, 27 insertions, 0 deletions

diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
new file mode 100644
index 00000000..98e97420
--- /dev/null
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -0,0 +1,27 @@
+import { useTranslation } from "../../common/components/LocalizationProvider";
+import { useFilterStyles } from "./ReportFilter";
+
+const ColumnSelect = ({ columns, setColumns, columnsArray }) => {
+  const classes = useFilterStyles();
+  const t = useTranslation();
+  
+  return (
+    <div className={classes.item}>
+      <FormControl variant="filled" fullWidth>
+        <InputLabel>{t('sharedColumns')}</InputLabel>
+        <Select
+          value={columns}
+          onChange={(e) => setColumns(e.target.value)}
+          renderValue={(it) => it.length}
+          multiple
+        >
+          {columnsArray.map(([key, string]) => (
+            <MenuItem value={key}>{t(string)}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+  
+export default ColumnSelect;