From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 19:32:43 +0200
Subject: Adding upstream version 1:115.7.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../aboutwelcome/components/MultiSelect.jsx        | 52 ++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 browser/components/newtab/content-src/aboutwelcome/components/MultiSelect.jsx

(limited to 'browser/components/newtab/content-src/aboutwelcome/components/MultiSelect.jsx')

diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiSelect.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiSelect.jsx
new file mode 100644
index 0000000000..0c1824215a
--- /dev/null
+++ b/browser/components/newtab/content-src/aboutwelcome/components/MultiSelect.jsx
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { useEffect } from "react";
+import { Localized } from "./MSLocalized";
+
+export const MultiSelect = props => {
+  let handleChange = event => {
+    if (event.currentTarget.checked) {
+      props.setActiveMultiSelect([
+        ...props.activeMultiSelect,
+        event.currentTarget.value,
+      ]);
+    } else {
+      props.setActiveMultiSelect(
+        props.activeMultiSelect.filter(id => id !== event.currentTarget.value)
+      );
+    }
+  };
+
+  let { data } = props.content.tiles;
+  // When screen renders for first time, update state
+  // with checkbox ids that has defaultvalue true
+  useEffect(() => {
+    if (!props.activeMultiSelect) {
+      props.setActiveMultiSelect(
+        data.map(item => item.defaultValue && item.id).filter(item => !!item)
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="multi-select-container">
+      {props.content.tiles.data.map(({ label, id }) => (
+        <div key={id + label} className="checkbox-container multi-select-item">
+          <input
+            type="checkbox"
+            id={id}
+            value={id}
+            checked={props.activeMultiSelect?.includes(id)}
+            onChange={handleChange}
+          />
+          <Localized text={label}>
+            <label htmlFor={id}></label>
+          </Localized>
+        </div>
+      ))}
+    </div>
+  );
+};
-- 
cgit v1.2.3