diff --git a/packages/desktop-client/src/components/common/CustomSelect.tsx b/packages/desktop-client/src/components/common/CustomSelect.tsx
index d85ae87143cc93f5bb5cdb3a3f40194e5e2cf938..9f47c3deb8c6bed0a910d12a87d3153a56fee9de 100644
--- a/packages/desktop-client/src/components/common/CustomSelect.tsx
+++ b/packages/desktop-client/src/components/common/CustomSelect.tsx
@@ -14,6 +14,7 @@ type CustomSelectProps = {
value: string;
onChange?: (newValue: string) => void;
style?: CSSProperties;
+ wrapperStyle?: CSSProperties;
disabledKeys?: string[];
};
@@ -22,18 +23,38 @@ export default function CustomSelect({
value,
onChange,
style,
+ wrapperStyle,
disabledKeys = [],
}: CustomSelectProps) {
+ const arrowSize = 7;
+ const label = options.filter(option => option[0] === value)[0][1];
return (
<ListboxInput
value={value}
onChange={onChange}
- style={{ lineHeight: '1em' }}
+ style={{ lineHeight: '1em', ...wrapperStyle }}
>
<ListboxButton
- {...css([{ borderWidth: 0, padding: 5, borderRadius: 4 }, style])}
- arrow={<ExpandArrow style={{ width: 7, height: 7, paddingTop: 3 }} />}
- />
+ {...css([
+ { borderWidth: 0, padding: '2px 5px', borderRadius: 4 },
+ style,
+ ])}
+ arrow={<ExpandArrow style={{ width: arrowSize, height: arrowSize }} />}
+ >
+ <span
+ style={{
+ display: 'flex',
+ overflowX: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ maxWidth: `calc(100% - ${arrowSize + 5}px)`,
+ minHeight: '18px',
+ alignItems: 'center',
+ }}
+ >
+ {label}
+ </span>
+ </ListboxButton>
<ListboxPopover style={{ zIndex: 10000, outline: 0, borderRadius: 4 }}>
<ListboxList style={{ maxHeight: 250, overflowY: 'auto' }}>
{options.map(([value, label]) => (
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js
index b954e5bba042ea13b50e25cfbaa226572c7bfd99..0ac731ca03534845359139ae823dd6180d8474cd 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,
- Select,
+ CustomSelect,
Input,
Button,
ButtonWithLoading,
@@ -339,18 +339,16 @@ function SubLabel({ title }) {
function SelectField({ width, style, options, value, onChange }) {
return (
- <Select
- value={value}
- style={style}
- onChange={e => onChange(e.target.value)}
- >
- <option value="">Choose field...</option>
- {options.map(x => (
- <option key={x} value={x}>
- {x}
- </option>
- ))}
- </Select>
+ <CustomSelect
+ options={[
+ ['choose-field', 'Choose field...'],
+ ...options.map(option => [option, option]),
+ ]}
+ value={value === null ? 'choose-field' : value}
+ style={{ borderWidth: 1, width: '100%' }}
+ wrapperStyle={style}
+ onChange={value => onChange(value)}
+ />
);
}
@@ -374,16 +372,15 @@ function DateFormatSelect({
return (
<View style={{ width: 120 }}>
<SectionLabel title="Date format" />
- <Select
+ <CustomSelect
+ options={dateFormats.map(f => [
+ f.format,
+ f.label.replace(/ /g, delimiter),
+ ])}
value={parseDateFormat || ''}
- onChange={e => onChange(e.target.value)}
- >
- {dateFormats.map(f => (
- <option key={f.format} value={f.format}>
- {f.label.replace(/ /g, delimiter)}
- </option>
- ))}
- </Select>
+ onChange={value => onChange(value)}
+ style={{ borderWidth: 1, width: '100%' }}
+ />
</View>
);
}
@@ -465,12 +462,11 @@ function FieldMappings({ transactions, mappings, onChange, splitMode }) {
spacing={1}
style={{ marginTop: 5 }}
>
- <View style={{ width: 200 }}>
+ <View style={{ flex: 1 }}>
<SubLabel title="Date" />
<SelectField
- width={200}
options={options}
- value={mappings.date || ''}
+ value={mappings.date}
style={{ marginRight: 5 }}
onChange={name => onChange('date', name)}
/>
@@ -478,9 +474,8 @@ function FieldMappings({ transactions, mappings, onChange, splitMode }) {
<View style={{ flex: 1 }}>
<SubLabel title="Payee" />
<SelectField
- width="flex"
options={options}
- value={mappings.payee || ''}
+ value={mappings.payee}
style={{ marginRight: 5 }}
onChange={name => onChange('payee', name)}
/>
@@ -488,41 +483,37 @@ function FieldMappings({ transactions, mappings, onChange, splitMode }) {
<View style={{ flex: 1 }}>
<SubLabel title="Notes" />
<SelectField
- width="flex"
options={options}
- value={mappings.notes || ''}
+ value={mappings.notes}
style={{ marginRight: 5 }}
onChange={name => onChange('notes', name)}
/>
</View>
{splitMode ? (
<>
- <View style={{ width: 90 }}>
+ <View style={{ flex: 0.5 }}>
<SubLabel title="Outflow" />
<SelectField
- width={90}
options={options}
- value={mappings.outflow || ''}
+ value={mappings.outflow}
onChange={name => onChange('outflow', name)}
/>
</View>
- <View style={{ width: 90 }}>
+ <View style={{ flex: 0.5 }}>
<SubLabel title="Inflow" />
<SelectField
- width={90}
options={options}
- value={mappings.inflow || ''}
+ value={mappings.inflow}
onChange={name => onChange('inflow', name)}
/>
</View>
</>
) : (
- <View style={{ width: 90 }}>
+ <View style={{ flex: 1 }}>
<SubLabel title="Amount" />
<SelectField
- width={90}
options={options}
- value={mappings.amount || ''}
+ value={mappings.amount}
onChange={name => onChange('amount', name)}
/>
</View>
@@ -899,16 +890,18 @@ function ImportTransactions({
{filetype === 'csv' && (
<View style={{ marginLeft: 25 }}>
<SectionLabel title="CSV DELIMITER" />
- <Select
+ <CustomSelect
+ options={[
+ [',', ','],
+ [';', ';'],
+ ]}
value={csvDelimiter}
- onChange={e => {
- setCsvDelimiter(e.target.value);
- parse(filename, { delimiter: e.target.value });
+ onChange={value => {
+ setCsvDelimiter(value);
+ parse(filename, { delimiter: value });
}}
- >
- <option value=",">,</option>
- <option value=";">;</option>
- </Select>
+ style={{ borderWidth: 1, width: '100%' }}
+ />
</View>
)}
</View>
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
index 0e30714a8a126fb43e10c25bfe3741186f65c52f..b6626dcc476b38ac923661e4b1257024494f10e9 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
@@ -8,7 +8,15 @@ 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, Select, Input, Tooltip, View, Text, Stack } from '../common';
+import {
+ Button,
+ CustomSelect,
+ Input,
+ Tooltip,
+ View,
+ Text,
+ Stack,
+} from '../common';
import { useTooltip } from '../tooltips';
import DateSelect from './DateSelect';
@@ -191,38 +199,35 @@ function MonthlyPatterns({ config, dispatch }) {
flexDirection: 'row',
}}
>
- <Select
- style={{ marginRight: 10 }}
+ <CustomSelect
+ options={[
+ [-1, 'Last'],
+ ['-', '---'],
+ ...DAY_OF_MONTH_OPTIONS.map(opt => [opt, opt]),
+ ]}
value={recurrence.value}
- onChange={e =>
- updateRecurrence(
- recurrence,
- 'value',
- parsePatternValue(e.target.value),
- )
+ onChange={value =>
+ updateRecurrence(recurrence, 'value', parsePatternValue(value))
}
- >
- <option value={-1}>Last</option>
- <option disabled>---</option>
- {DAY_OF_MONTH_OPTIONS.map(opt => (
- <option key={opt} value={opt}>
- {opt}
- </option>
- ))}
- </Select>
- <Select
- style={{ marginRight: 10 }}
+ disabledKeys={['-']}
+ wrapperStyle={{ flex: 1, marginRight: 10 }}
+ style={{
+ borderWidth: 1,
+ width: '100%',
+ }}
+ />
+ <CustomSelect
+ options={[
+ ['day', 'Day'],
+ ['-', '---'],
+ ...DAY_OF_WEEK_OPTIONS.map(opt => [opt.id, opt.name]),
+ ]}
value={recurrence.type}
- onChange={e => updateRecurrence(recurrence, 'type', e.target.value)}
- >
- <option value="day">Day</option>
- <option disabled>---</option>
- {DAY_OF_WEEK_OPTIONS.map(opt => (
- <option key={opt.id} value={opt.id}>
- {opt.name}
- </option>
- ))}
- </Select>
+ onChange={value => updateRecurrence(recurrence, 'type', value)}
+ disabledKeys={['-']}
+ wrapperStyle={{ flex: 1, marginRight: 10 }}
+ style={{ borderWidth: 1, width: '100%' }}
+ />
<Button
bare
style={{ padding: 7 }}
@@ -322,17 +327,12 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
onEnter={e => updateField('interval', e.target.value)}
defaultValue={config.interval || 1}
></Input>
- <Select
- onChange={e => updateField('frequency', e.target.value)}
+ <CustomSelect
+ options={FREQUENCY_OPTIONS.map(opt => [opt.id, opt.name])}
value={config.frequency}
- style={{ flex: 0 }}
- >
- {FREQUENCY_OPTIONS.map(opt => (
- <option key={opt.id} value={opt.id}>
- {opt.name}
- </option>
- ))}
- </Select>
+ onChange={value => updateField('frequency', value)}
+ style={{ borderWidth: 1, height: 27.5 }}
+ />
{config.frequency === 'monthly' &&
(config.patterns == null || config.patterns.length === 0) ? (
<Button onClick={() => dispatch({ type: 'add-recurrence' })}>
diff --git a/packages/desktop-client/src/components/settings/Format.js b/packages/desktop-client/src/components/settings/Format.js
index aae3a66c319381db3502955227d74c84f9afeae3..5c8e844b701243d6f14e85ad610d72fb0b2fe4b7 100644
--- a/packages/desktop-client/src/components/settings/Format.js
+++ b/packages/desktop-client/src/components/settings/Format.js
@@ -95,7 +95,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
f.value,
prefs.hideFraction ? f.labelNoFraction : f.label,
])}
- style={{ padding: '5px 10px', fontSize: 15 }}
+ style={{ padding: '2px 10px', fontSize: 15 }}
/>
</Button>
@@ -115,7 +115,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
value={dateFormat}
onChange={onDateFormat}
options={dateFormats.map(f => [f.value, f.label])}
- style={{ padding: '5px 10px', fontSize: 15 }}
+ style={{ padding: '2px 10px', fontSize: 15 }}
/>
</Button>
</Column>
@@ -126,7 +126,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
value={firstDayOfWeekIdx}
onChange={onFirstDayOfWeek}
options={daysOfWeek.map(f => [f.value, f.label])}
- style={{ padding: '5px 10px', fontSize: 15 }}
+ style={{ padding: '2px 10px', fontSize: 15 }}
/>
</Button>
</Column>
diff --git a/upcoming-release-notes/1277.md b/upcoming-release-notes/1277.md
new file mode 100644
index 0000000000000000000000000000000000000000..7f6c5008fc59fe1958d4d4ba90d3d822e685771f
--- /dev/null
+++ b/upcoming-release-notes/1277.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [aleetsaiya]
+---
+
+Refactor some usages of `Select` component to `CustomSelect`
\ No newline at end of file