From 072c3504fe7906b41d287d330241e69a33c255a8 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Tue, 4 Apr 2023 18:06:42 +0100
Subject: [PATCH] Ported NewAutocomplete to TypeScript (#831)
Small migration of `NewAutocomplete`.
---------
Co-authored-by: Jed Fox <git@jedfox.com>
---
...NewAutocomplete.js => NewAutocomplete.tsx} | 21 ++++++++++++++++---
.../autocomplete/autocomplete-styles.js | 2 +-
upcoming-release-notes/831.md | 6 ++++++
3 files changed, 25 insertions(+), 4 deletions(-)
rename packages/desktop-client/src/components/autocomplete/{NewAutocomplete.js => NewAutocomplete.tsx} (82%)
create mode 100644 upcoming-release-notes/831.md
diff --git a/packages/desktop-client/src/components/autocomplete/NewAutocomplete.js b/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx
similarity index 82%
rename from packages/desktop-client/src/components/autocomplete/NewAutocomplete.js
rename to packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx
index d082c07b5..f01fc128b 100644
--- a/packages/desktop-client/src/components/autocomplete/NewAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx
@@ -1,5 +1,10 @@
import React, { useState } from 'react';
-import Select from 'react-select';
+import Select, {
+ Props as SelectProps,
+ PropsValue,
+ SingleValue,
+ SelectInstance,
+} from 'react-select';
import CreatableSelect from 'react-select/creatable';
@@ -7,7 +12,17 @@ import { NullComponent } from '../common';
import styles from './autocomplete-styles';
-const Autocomplete = React.forwardRef(
+type OptionValue = string;
+
+interface AutocompleteProps extends SelectProps<OptionValue> {
+ focused: boolean;
+ embedded: boolean;
+ onSelect: (value: PropsValue<OptionValue>) => void;
+ onCreateOption: (value: SingleValue<OptionValue>) => void;
+ isCreatable: boolean;
+}
+
+const Autocomplete = React.forwardRef<SelectInstance, AutocompleteProps>(
(
{
value,
@@ -96,7 +111,7 @@ const Autocomplete = React.forwardRef(
}}
maxMenuHeight={200}
styles={styles}
- embedded={embedded}
+ data-embedded={embedded}
menuPlacement="auto"
menuPortalTarget={embedded ? undefined : document.body}
{...props}
diff --git a/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js b/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js
index 858f0e5cd..3c7acdcdb 100644
--- a/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js
+++ b/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js
@@ -29,7 +29,7 @@ const colourStyles = {
backgroundColor: colors.n1,
marginTop: 2,
marginBottom: 2,
- position: selectProps.embedded ? 'relative' : styles.position,
+ position: selectProps['data-embedded'] ? 'relative' : styles.position,
overflow: 'hidden',
}),
menuList: styles => ({
diff --git a/upcoming-release-notes/831.md b/upcoming-release-notes/831.md
new file mode 100644
index 000000000..9438182e4
--- /dev/null
+++ b/upcoming-release-notes/831.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moved `NewAutocomplete` component to TypeScript
--
GitLab