From 986dc6c1c004e3d54482695c0c8c14650e8e344a Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Mon, 17 Jul 2023 18:24:51 -0400
Subject: [PATCH] Rename <CustomSelect> to <Select> (#1348)
---
.../desktop-client/src/components/common.tsx | 2 +-
.../common/{CustomSelect.tsx => Select.tsx} | 6 +++---
.../src/components/filters/FiltersMenu.js | 12 ++----------
.../src/components/modals/EditRule.js | 14 +++-----------
.../src/components/modals/ImportTransactions.js | 8 ++++----
.../src/components/reports/Header.js | 6 +++---
.../components/select/RecurringSchedulePicker.js | 16 ++++------------
.../src/components/settings/Format.js | 8 ++++----
upcoming-release-notes/1348.md | 6 ++++++
9 files changed, 30 insertions(+), 48 deletions(-)
rename packages/desktop-client/src/components/common/{CustomSelect.tsx => Select.tsx} (89%)
create mode 100644 upcoming-release-notes/1348.md
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
index 7cbd456c1..a96458ec7 100644
--- a/packages/desktop-client/src/components/common.tsx
+++ b/packages/desktop-client/src/components/common.tsx
@@ -19,7 +19,7 @@ export { default as AlignedText } from './common/AlignedText';
export { default as Block } from './common/Block';
export { default as Button, ButtonWithLoading } from './common/Button';
export { default as Card } from './common/Card';
-export { default as CustomSelect } from './common/CustomSelect';
+export { default as Select } from './common/Select';
export { default as FormError } from './common/FormError';
export { default as HoverTarget } from './common/HoverTarget';
export { default as InitialFocus } from './common/InitialFocus';
diff --git a/packages/desktop-client/src/components/common/CustomSelect.tsx b/packages/desktop-client/src/components/common/Select.tsx
similarity index 89%
rename from packages/desktop-client/src/components/common/CustomSelect.tsx
rename to packages/desktop-client/src/components/common/Select.tsx
index 5f95acee3..8f9b85e88 100644
--- a/packages/desktop-client/src/components/common/CustomSelect.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -30,11 +30,11 @@ type CustomSelectProps = {
*
* @example
* // Usage:
- * // <CustomSelect options={[['1', 'Option 1'], ['2', 'Option 2']]} value="1" onChange={handleOnChange} />
- * // <CustomSelect options={[['1', 'Option 1'], ['2', 'Option 2']]} value="3" defaultLabel="Select an option" onChange={handleOnChange} />
+ * // <Select options={[['1', 'Option 1'], ['2', 'Option 2']]} value="1" onChange={handleOnChange} />
+ * // <Select options={[['1', 'Option 1'], ['2', 'Option 2']]} value="3" defaultLabel="Select an option" onChange={handleOnChange} />
*/
-export default function CustomSelect({
+export default function Select({
options,
value,
defaultLabel = '',
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
index b63b2d6cc..5680cb86f 100644
--- a/packages/desktop-client/src/components/filters/FiltersMenu.js
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -26,15 +26,7 @@ import { titleFirst } from 'loot-core/src/shared/util';
import DeleteIcon from '../../icons/v0/Delete';
import SettingsSliderAlternate from '../../icons/v2/SettingsSliderAlternate';
import { colors } from '../../style';
-import {
- View,
- Text,
- Tooltip,
- Stack,
- Button,
- Menu,
- CustomSelect,
-} from '../common';
+import { View, Text, Tooltip, Stack, Button, Menu, Select } from '../common';
import { Value } from '../ManageRules';
import GenericInput from '../util/GenericInput';
@@ -173,7 +165,7 @@ function ConfigureField({
<FocusScope>
<View style={{ marginBottom: 10 }}>
{field === 'amount' || field === 'date' ? (
- <CustomSelect
+ <Select
options={
field === 'amount'
? [
diff --git a/packages/desktop-client/src/components/modals/EditRule.js b/packages/desktop-client/src/components/modals/EditRule.js
index 7856d248d..c9733abc7 100644
--- a/packages/desktop-client/src/components/modals/EditRule.js
+++ b/packages/desktop-client/src/components/modals/EditRule.js
@@ -30,15 +30,7 @@ import AddIcon from '../../icons/v0/Add';
import SubtractIcon from '../../icons/v0/Subtract';
import InformationOutline from '../../icons/v1/InformationOutline';
import { colors } from '../../style';
-import {
- View,
- Text,
- Modal,
- Button,
- Stack,
- CustomSelect,
- Tooltip,
-} from '../common';
+import { View, Text, Modal, Button, Stack, Select, Tooltip } from '../common';
import { StatusBadge } from '../schedules/StatusBadge';
import SimpleTransactionsTable from '../transactions/SimpleTransactionsTable';
import { BetweenAmountInput } from '../util/AmountInput';
@@ -81,7 +73,7 @@ function getTransactionFields(conditions, actions) {
export function FieldSelect({ fields, style, value, onChange }) {
return (
<View style={style}>
- <CustomSelect
+ <Select
options={fields}
value={value}
onChange={value => onChange('field', value)}
@@ -106,7 +98,7 @@ export function OpSelect({
}
return (
- <CustomSelect
+ <Select
options={ops.map(op => [op, formatOp(op, type)])}
value={value}
onChange={value => onChange('op', value)}
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js
index 94fe6b0ac..cdec28e88 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactions.js
+++ b/packages/desktop-client/src/components/modals/ImportTransactions.js
@@ -17,7 +17,7 @@ import {
Text,
Stack,
Modal,
- CustomSelect,
+ Select,
Input,
Button,
ButtonWithLoading,
@@ -339,7 +339,7 @@ function SubLabel({ title }) {
function SelectField({ width, style, options, value, onChange }) {
return (
- <CustomSelect
+ <Select
options={[
['choose-field', 'Choose field...'],
...options.map(option => [option, option]),
@@ -372,7 +372,7 @@ function DateFormatSelect({
return (
<View style={{ width: 120 }}>
<SectionLabel title="Date format" />
- <CustomSelect
+ <Select
options={dateFormats.map(f => [
f.format,
f.label.replace(/ /g, delimiter),
@@ -890,7 +890,7 @@ function ImportTransactions({
{filetype === 'csv' && (
<View style={{ marginLeft: 25 }}>
<SectionLabel title="CSV DELIMITER" />
- <CustomSelect
+ <Select
options={[
[',', ','],
[';', ';'],
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index ede50cf7d..70dc7d054 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@@ -2,7 +2,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import ArrowLeft from '../../icons/v1/ArrowLeft';
import { styles } from '../../style';
-import { View, Button, ButtonLink, CustomSelect } from '../common';
+import { View, Button, ButtonLink, Select } from '../common';
import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
function validateStart(allMonths, start, end) {
@@ -90,7 +90,7 @@ function Header({
gap: 5,
}}
>
- <CustomSelect
+ <Select
style={{ backgroundColor: 'white' }}
onChange={newValue =>
onChangeDates(...validateStart(allMonths, newValue, end))
@@ -100,7 +100,7 @@ function Header({
options={allMonths.map(({ name, pretty }) => [name, pretty])}
/>
<View>to</View>
- <CustomSelect
+ <Select
style={{ backgroundColor: 'white' }}
onChange={newValue =>
onChangeDates(...validateEnd(allMonths, start, newValue))
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
index 816177c46..2f5533350 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
@@ -8,15 +8,7 @@ import { getRecurringDescription } from 'loot-core/src/shared/schedules';
import AddIcon from '../../icons/v0/Add';
import SubtractIcon from '../../icons/v0/Subtract';
import { colors } from '../../style';
-import {
- Button,
- CustomSelect,
- Input,
- Tooltip,
- View,
- Text,
- Stack,
-} from '../common';
+import { Button, Select, Input, Tooltip, View, Text, Stack } from '../common';
import { useTooltip } from '../tooltips';
import DateSelect from './DateSelect';
@@ -199,7 +191,7 @@ function MonthlyPatterns({ config, dispatch }) {
flexDirection: 'row',
}}
>
- <CustomSelect
+ <Select
options={[
[-1, 'Last'],
['-', '---'],
@@ -216,7 +208,7 @@ function MonthlyPatterns({ config, dispatch }) {
width: '100%',
}}
/>
- <CustomSelect
+ <Select
options={[
['day', 'Day'],
['-', '---'],
@@ -327,7 +319,7 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
onEnter={e => updateField('interval', e.target.value)}
defaultValue={config.interval || 1}
/>
- <CustomSelect
+ <Select
options={FREQUENCY_OPTIONS.map(opt => [opt.id, opt.name])}
value={config.frequency}
onChange={value => updateField('frequency', value)}
diff --git a/packages/desktop-client/src/components/settings/Format.js b/packages/desktop-client/src/components/settings/Format.js
index 5c8e844b7..009cc0930 100644
--- a/packages/desktop-client/src/components/settings/Format.js
+++ b/packages/desktop-client/src/components/settings/Format.js
@@ -3,7 +3,7 @@ import React from 'react';
import { numberFormats } from 'loot-core/src/shared/util';
import tokens from '../../tokens';
-import { Button, CustomSelect, Text, View } from '../common';
+import { Button, Select, Text, View } from '../common';
import { useSidebar } from '../FloatableSidebar';
import { Checkbox } from '../forms';
@@ -87,7 +87,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
>
<Column title="Numbers">
<Button bounce={false} style={{ padding: 0 }}>
- <CustomSelect
+ <Select
key={prefs.hideFraction} // needed because label does not update
value={numberFormat}
onChange={onNumberFormat}
@@ -111,7 +111,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
<Column title="Dates">
<Button bounce={false} style={{ padding: 0 }}>
- <CustomSelect
+ <Select
value={dateFormat}
onChange={onDateFormat}
options={dateFormats.map(f => [f.value, f.label])}
@@ -122,7 +122,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
<Column title="First day of the week">
<Button bounce={false} style={{ padding: 0 }}>
- <CustomSelect
+ <Select
value={firstDayOfWeekIdx}
onChange={onFirstDayOfWeek}
options={daysOfWeek.map(f => [f.value, f.label])}
diff --git a/upcoming-release-notes/1348.md b/upcoming-release-notes/1348.md
new file mode 100644
index 000000000..0f8445548
--- /dev/null
+++ b/upcoming-release-notes/1348.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Rename `CustomSelect` component to `Select`
--
GitLab