Rename <CustomSelect> to <Select> (#1348)

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

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 = '',

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'
                   ? [

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)}

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={[
                       [',', ','],
                       [';', ';'],

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))

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)}

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])}

upcoming-release-notes/1348.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Rename `CustomSelect` component to `Select`