From cfc2700d19d1ee52d84f89b3ca14e4ddbbb360eb Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh
 <140876993+MuhammadKhalilzadeh@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:42:31 +0330
Subject: [PATCH] Autocomplete (#774)

* autocomplete implementation

* autocomplete implementation

* autocomplete implementation

* fetched upstream

* fixes after fetched upstream

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete

* autocomplete
---
 .../Components/Inputs/Autocomplete/index.jsx  | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 Client/src/Components/Inputs/Autocomplete/index.jsx

diff --git a/Client/src/Components/Inputs/Autocomplete/index.jsx b/Client/src/Components/Inputs/Autocomplete/index.jsx
new file mode 100644
index 000000000..5256efccc
--- /dev/null
+++ b/Client/src/Components/Inputs/Autocomplete/index.jsx
@@ -0,0 +1,116 @@
+import { Autocomplete, TextField } from "@mui/material";
+import React from "react";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+
+/**
+ * @example
+ *
+ * const options = [
+ * { _id: "66d6119ef959cbc681e034f0", name: "Googler" },
+ * { _id: "66d6119ef959cbc681e034f0", name: "CNN" },
+ * { _id: "66d61a1bf959cbc681e0353f", name: "X Corp." },
+ * ];
+ *
+ * <AutoCompleteField options={options} />
+ *
+ */
+
+/**
+ * AutoCompleteField component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} props.id - The ID of the autocomplete field.
+ * @param {string} props.type - The type of the input field (text or number).
+ * @param {Array} props.options - The options for the autocomplete field.
+ * @param {string} props.placeholder - The placeholder text for the input field.
+ * @param {boolean} props.disabled - Indicates if the field is disabled.
+ * @returns {JSX.Element} The AutoCompleteField component.
+ */
+
+const AutoCompleteField = ({
+  id,
+  type,
+  options,
+  placeholder = "Type to search",
+  disabled,
+}) => {
+  const [value, setValue] = React.useState();
+  const [inputValue, setInputValue] = React.useState("");
+  const theme = useTheme();
+
+  return (
+    <Autocomplete
+      freeSolo
+      className="auto-complete-field"
+      id={id}
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      options={options}
+      getOptionLabel={(option) => option.name}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          type={type}
+          placeholder={placeholder}
+          disabled={disabled}
+          InputProps={{
+            ...params.InputProps,
+            sx: {
+              width: 360,
+              height: 34,
+              fontSize: 13,
+              p: 0,
+              borderRadius: theme.shape.borderRadius,
+              "& input": {
+                p: 0,
+              },
+            },
+          }}
+        />
+      )}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={option._id} {...optionProps}>
+            <div>{<span>{option.name}</span>}</div>
+          </li>
+        );
+      }}
+      slotProps={{
+        popper: {
+          sx: {
+            "& ul": { p: 0 },
+            "& li": { borderRadius: theme.shape.borderRadius },
+          },
+        },
+        paper: {
+          sx: {
+            p: 2,
+            fontSize: 13,
+          },
+        },
+      }}
+    />
+  );
+};
+
+AutoCompleteField.displayName = "AutoCompleteField";
+
+AutoCompleteField.propTypes = {
+  id: PropTypes.string,
+  type: PropTypes.oneOf(["text", "number"]),
+  options: PropTypes.array,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  setWidth: PropTypes.string,
+};
+
+export default AutoCompleteField;