From 92ddaa568ac9a337755ba46598a4c20952d30048 Mon Sep 17 00:00:00 2001
From: Sean Tsai <aleetsaiya@gmail.com>
Date: Sun, 16 Jul 2023 07:53:36 +0800
Subject: [PATCH] Remove legacy Select and NativeCategorySelect Component
(#1343)
---
.../autocomplete/CategorySelect.tsx | 28 +------------
.../desktop-client/src/components/common.tsx | 1 -
.../src/components/common/Select.tsx | 40 -------------------
.../modals/ConfirmCategoryDelete.js | 37 ++++-------------
upcoming-release-notes/1343.md | 5 +++
5 files changed, 14 insertions(+), 97 deletions(-)
delete mode 100644 packages/desktop-client/src/components/common/Select.tsx
create mode 100644 upcoming-release-notes/1343.md
diff --git a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
index 5f1b9b370..e4e7b5dff 100644
--- a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
@@ -1,15 +1,13 @@
import React, {
type ComponentProps,
Fragment,
- forwardRef,
useMemo,
type ReactNode,
} from 'react';
import Split from '../../icons/v0/Split';
import { colors } from '../../style';
-import { type HTMLPropsWithStyle } from '../../types/utils';
-import { View, Text, Select } from '../common';
+import { View, Text } from '../common';
import Autocomplete, { defaultFilterSuggestion } from './Autocomplete';
@@ -19,30 +17,6 @@ type CategoryGroup = {
categories: Array<{ id: string; name: string }>;
};
-type NativeCategorySelectProps = HTMLPropsWithStyle<HTMLSelectElement> & {
- categoryGroups: CategoryGroup[];
- emptyLabel: string;
-};
-export const NativeCategorySelect = forwardRef<
- HTMLSelectElement,
- NativeCategorySelectProps
->(({ categoryGroups, emptyLabel, ...nativeProps }, ref) => {
- return (
- <Select {...nativeProps} ref={ref}>
- <option value="">{emptyLabel || 'Select category...'}</option>
- {categoryGroups.map(group => (
- <optgroup key={group.id} label={group.name}>
- {group.categories.map(category => (
- <option key={category.id} value={category.id}>
- {category.name}
- </option>
- ))}
- </optgroup>
- ))}
- </Select>
- );
-});
-
type CategoryListProps = {
items: Array<{
id: string;
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
index 0b24fb651..c2ff8ceb3 100644
--- a/packages/desktop-client/src/components/common.tsx
+++ b/packages/desktop-client/src/components/common.tsx
@@ -32,7 +32,6 @@ export { default as MenuButton } from './common/MenuButton';
export { default as MenuTooltip } from './common/MenuTooltip';
export { default as Modal, ModalButtons } from './common/Modal';
export { default as Search } from './common/Search';
-export { default as Select } from './common/Select';
export { default as Stack } from './Stack';
export { default as Text } from './common/Text';
export { default as TextOneLine } from './common/TextOneLine';
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
deleted file mode 100644
index ab951b246..000000000
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { forwardRef } from 'react';
-
-import { css } from 'glamor';
-
-import { colors } from '../../style';
-import type { HTMLPropsWithStyle } from '../../types/utils';
-
-type SelectProps = HTMLPropsWithStyle<HTMLSelectElement>;
-
-const Select = forwardRef<HTMLSelectElement, SelectProps>(
- ({ style, children, ...nativeProps }, ref) => {
- return (
- <select
- ref={ref}
- {...css(
- {
- backgroundColor: 'transparent',
- height: 28,
- fontSize: 14,
- flex: 1,
- border: '1px solid #d0d0d0',
- borderRadius: 4,
- color: colors.n1,
- ':focus': {
- border: '1px solid ' + colors.b5,
- boxShadow: '0 1px 1px ' + colors.b7,
- outline: 'none',
- },
- },
- style,
- )}
- {...nativeProps}
- >
- {children}
- </select>
- );
- },
-);
-
-export default Select;
diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
index ea39f107d..9c717426c 100644
--- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
+++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
import { colors } from '../../style';
-import { NativeCategorySelect } from '../autocomplete/CategorySelect';
+import CategoryAutocomplete from '../autocomplete/CategorySelect';
import { View, Text, Block, Modal, Button } from '../common';
export default function ConfirmCategoryDelete({
@@ -14,15 +14,6 @@ export default function ConfirmCategoryDelete({
const [transferCategory, setTransferCategory] = useState(null);
const [error, setError] = useState(null);
- const inputRef = useRef(null);
-
- useEffect(() => {
- // Hack: 200ms is the timing of the modal animation
- setTimeout(() => {
- inputRef.current.focus();
- }, 200);
- }, []);
-
const renderError = error => {
let msg;
@@ -77,25 +68,13 @@ export default function ConfirmCategoryDelete({
<Text>Transfer to:</Text>
<View style={{ flex: 1, marginLeft: 10, marginRight: 30 }}>
- <NativeCategorySelect
- ref={inputRef}
- categoryGroups={
- group
- ? categoryGroups.filter(
- g => g.id !== group.id && !!g.is_income === isIncome,
- )
- : categoryGroups
- .filter(g => !!g.is_income === isIncome)
- .map(g => ({
- ...g,
- categories: g.categories.filter(
- c => c.id !== category.id,
- ),
- }))
- }
- name="category"
+ <CategoryAutocomplete
+ categoryGroups={categoryGroups}
value={transferCategory}
- onChange={e => setTransferCategory(e.target.value)}
+ inputProps={{
+ placeholder: 'Select category...',
+ }}
+ onSelect={category => setTransferCategory(category)}
/>
</View>
diff --git a/upcoming-release-notes/1343.md b/upcoming-release-notes/1343.md
new file mode 100644
index 000000000..e9362b86c
--- /dev/null
+++ b/upcoming-release-notes/1343.md
@@ -0,0 +1,5 @@
+---
+category: Maintenance
+authors: [aleetsaiya]
+---
+Remove legacy Select and NativeCategorySelect Component
\ No newline at end of file
--
GitLab