diff --git a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx index 5f1b9b370cedc2cce9607b3a9505bf271e2d522a..e4e7b5dff9125335d18d36529af0945ea7279ccd 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 0b24fb651c2efe0e00b7181300dad75de34b3d83..c2ff8ceb3c7cf61f6cfcff199baf68e6c350815f 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 ab951b24652758e318e84ae716cde284b6c15919..0000000000000000000000000000000000000000 --- 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 ea39f107dea046d02b4bbc6aed5bff3b172f5443..9c717426ccd154aa4cc5f870aa2e8a27c618830a 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 0000000000000000000000000000000000000000..e9362b86ce8a50b078b63b0c1399c5c20fcf2f9c --- /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