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
2026-01-14 13:49:40 -06:00 · 2024-09-03 21:42:31 +03:30
parent f10a7d7f25
commit cfc2700d19
1 changed files with 116 additions and 0 deletions
--- a/Client/src/Components/Inputs/Autocomplete/index.jsx
+++ 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;