Remove legacy Select and NativeCategorySelect Component (#1343)

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;

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';

packages/desktop-client/src/components/common/Select.tsx

@@ -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;

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>
 

upcoming-release-notes/1343.md

@@ -0,0 +1,5 @@
+---
+category: Maintenance
+authors: [aleetsaiya]
+---
+Remove legacy Select and NativeCategorySelect Component