From 8682bcd6a48821ea67ce52d21764bd4810fe56a5 Mon Sep 17 00:00:00 2001
From: Max Frederiksen <max.frederiksen@ess.eu>
Date: Mon, 17 Mar 2025 14:18:58 +0100
Subject: [PATCH] CE-3632: .jsx -> .tsx + Implement typing for Autocomplete
---
.../common/Autocomplete/Autocomplete.jsx | 60 -------------------
.../common/Autocomplete/Autocomplete.tsx | 53 ++++++++++++++++
.../Autocomplete/{index.js => index.ts} | 0
.../{EllipsisText.jsx => EllipsisText.tsx} | 0
.../EllipsisText/{index.js => index.ts} | 0
...t.stories.jsx => EllipsisText.stories.tsx} | 0
...e.stories.jsx => Autocomplete.stories.tsx} | 20 +++++--
7 files changed, 67 insertions(+), 66 deletions(-)
delete mode 100644 src/components/common/Autocomplete/Autocomplete.jsx
create mode 100644 src/components/common/Autocomplete/Autocomplete.tsx
rename src/components/common/Autocomplete/{index.js => index.ts} (100%)
rename src/components/common/EllipsisText/{EllipsisText.jsx => EllipsisText.tsx} (100%)
rename src/components/common/EllipsisText/{index.js => index.ts} (100%)
rename src/stories/common/EllipsisText/{EllipsisText.stories.jsx => EllipsisText.stories.tsx} (100%)
rename src/stories/fields/{Autocomplete.stories.jsx => Autocomplete.stories.tsx} (65%)
diff --git a/src/components/common/Autocomplete/Autocomplete.jsx b/src/components/common/Autocomplete/Autocomplete.jsx
deleted file mode 100644
index acc1f1df..00000000
--- a/src/components/common/Autocomplete/Autocomplete.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
- TextField,
- Autocomplete as MuiAutocomplete,
- styled,
- CircularProgress
-} from "@mui/material";
-import { bool, shape, object } from "prop-types";
-import { theme } from "../../../style/Theme";
-
-const propTypes = {
- loading: bool,
- autocompleteProps: object,
- /* eslint-disable react/forbid-foreign-prop-types */
- textFieldProps: shape(TextField.propTypes)
-};
-
-/**
- * Wraps the MUI Autocomplete with default loading behaviors in async use cases.
- */
-const Autocomplete = styled(
- ({ loading, autocompleteProps, textFieldProps }) => {
- return (
- <MuiAutocomplete
- autoHighlight
- loading={loading}
- clearOnBlur={false}
- autoSelect
- renderInput={(params) => (
- <TextField
- {...params}
- {...textFieldProps}
- InputProps={{
- ...params.InputProps,
- endAdornment: (
- <>
- {loading ? (
- <CircularProgress
- color="inherit"
- size={20}
- />
- ) : null}
- {params.InputProps.endAdornment}
- </>
- )
- }}
- />
- )}
- {...autocompleteProps}
- // MUI's component will display options even though the component
- // may be loading; this enforces that options will only be visible
- // if the component is finished loading.
- options={loading ? [] : autocompleteProps.options}
- />
- );
- }
-)(theme);
-
-Autocomplete.propTypes = propTypes;
-
-export { Autocomplete };
diff --git a/src/components/common/Autocomplete/Autocomplete.tsx b/src/components/common/Autocomplete/Autocomplete.tsx
new file mode 100644
index 00000000..8d257be4
--- /dev/null
+++ b/src/components/common/Autocomplete/Autocomplete.tsx
@@ -0,0 +1,53 @@
+import {
+ TextField,
+ Autocomplete as MuiAutocomplete,
+ CircularProgress,
+ TextFieldProps,
+ AutocompleteProps as MuiAutocompleteProps
+} from "@mui/material";
+
+interface AutocompleteProps<Value> {
+ loading: boolean;
+ autocompleteProps: MuiAutocompleteProps<Value, false, true, false>;
+ textFieldProps: TextFieldProps;
+}
+
+/**
+ * Wraps the MUI Autocomplete with default loading behaviors in async use cases.
+ */
+export const Autocomplete = <Value,>({
+ loading,
+ autocompleteProps,
+ textFieldProps
+}: AutocompleteProps<Value>) => {
+ return (
+ <MuiAutocomplete
+ autoHighlight
+ loading={loading}
+ clearOnBlur={false}
+ autoSelect
+ {...autocompleteProps}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ {...textFieldProps}
+ InputProps={{
+ ...params.InputProps,
+ endAdornment: (
+ <>
+ {loading && (
+ <CircularProgress
+ color="inherit"
+ size={20}
+ />
+ )}
+ {params.InputProps.endAdornment}
+ </>
+ )
+ }}
+ />
+ )}
+ options={loading ? [] : autocompleteProps.options}
+ />
+ );
+};
diff --git a/src/components/common/Autocomplete/index.js b/src/components/common/Autocomplete/index.ts
similarity index 100%
rename from src/components/common/Autocomplete/index.js
rename to src/components/common/Autocomplete/index.ts
diff --git a/src/components/common/EllipsisText/EllipsisText.jsx b/src/components/common/EllipsisText/EllipsisText.tsx
similarity index 100%
rename from src/components/common/EllipsisText/EllipsisText.jsx
rename to src/components/common/EllipsisText/EllipsisText.tsx
diff --git a/src/components/common/EllipsisText/index.js b/src/components/common/EllipsisText/index.ts
similarity index 100%
rename from src/components/common/EllipsisText/index.js
rename to src/components/common/EllipsisText/index.ts
diff --git a/src/stories/common/EllipsisText/EllipsisText.stories.jsx b/src/stories/common/EllipsisText/EllipsisText.stories.tsx
similarity index 100%
rename from src/stories/common/EllipsisText/EllipsisText.stories.jsx
rename to src/stories/common/EllipsisText/EllipsisText.stories.tsx
diff --git a/src/stories/fields/Autocomplete.stories.jsx b/src/stories/fields/Autocomplete.stories.tsx
similarity index 65%
rename from src/stories/fields/Autocomplete.stories.jsx
rename to src/stories/fields/Autocomplete.stories.tsx
index 589ef17f..c72ccca3 100644
--- a/src/stories/fields/Autocomplete.stories.jsx
+++ b/src/stories/fields/Autocomplete.stories.tsx
@@ -1,8 +1,10 @@
+import { Meta } from "@storybook/react";
+import { TextField } from "@mui/material";
import { Autocomplete } from "../../components/common/Autocomplete";
export default {
title: "Fields/Autocomplete"
-};
+} as Meta<typeof Autocomplete>;
const data = [
{
@@ -22,11 +24,14 @@ const data = [
}
];
-const Template = ({ loading, ...args }) => {
+interface AutocompleteProps {
+ loading?: boolean;
+}
+
+const Template = ({ loading, ...args }: AutocompleteProps) => {
return (
<Autocomplete
- id="my-autocomplete-input"
- loading={loading}
+ loading={loading || false}
autocompleteProps={{
options: data,
getOptionLabel: (option) => {
@@ -37,6 +42,9 @@ const Template = ({ loading, ...args }) => {
},
onInputChange: (event, value, reason) => {
console.debug({ onChange: { event, value, reason } });
+ },
+ renderInput: (params) => {
+ return <TextField {...params} />;
}
}}
textFieldProps={{
@@ -49,9 +57,9 @@ const Template = ({ loading, ...args }) => {
);
};
-export const Default = (args) => <Template {...args} />;
+export const Default = (args: typeof Autocomplete) => <Template {...args} />;
-export const Loading = (args) => (
+export const Loading = (args: typeof Autocomplete) => (
<Template
loading
{...args}
--
GitLab