diff --git a/packages/desktop-client/src/components/common/CustomSelect.tsx b/packages/desktop-client/src/components/common/CustomSelect.tsx index 9f47c3deb8c6bed0a910d12a87d3153a56fee9de..5f95acee3b4912d47240288485060e7bbe5d1c34 100644 --- a/packages/desktop-client/src/components/common/CustomSelect.tsx +++ b/packages/desktop-client/src/components/common/CustomSelect.tsx @@ -12,22 +12,39 @@ import ExpandArrow from '../../icons/v0/ExpandArrow'; type CustomSelectProps = { options: Array<[string, string]>; value: string; + defaultLabel?: string; onChange?: (newValue: string) => void; style?: CSSProperties; wrapperStyle?: CSSProperties; disabledKeys?: string[]; }; +/** + * @param {Array<[string, string]>} options - An array of options value-label pairs. + * @param {string} value - The currently selected option value. + * @param {string} [defaultLabel] - The label to display when the selected value is not in the options. + * @param {function} [onChange] - A callback function invoked when the selected value changes. + * @param {CSSProperties} [style] - Custom styles to apply to the selected button. + * @param {CSSProperties} [wrapperStyle] - Custom style to apply to the select wrapper. + * @param {string[]} [disabledKeys] - An array of option values to disable. + * + * @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} /> + */ + export default function CustomSelect({ options, value, + defaultLabel = '', onChange, style, wrapperStyle, disabledKeys = [], }: CustomSelectProps) { const arrowSize = 7; - const label = options.filter(option => option[0] === value)[0][1]; + const targetOption = options.filter(option => option[0] === value); return ( <ListboxInput value={value} @@ -52,7 +69,7 @@ export default function CustomSelect({ alignItems: 'center', }} > - {label} + {targetOption.length !== 0 ? targetOption[0][1] : defaultLabel} </span> </ListboxButton> <ListboxPopover style={{ zIndex: 10000, outline: 0, borderRadius: 4 }}> diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js index 25f7da76127e61ad0061982792c481da78829dd1..ede50cf7d3a82e8f3d4e9efe20df2a9ffa2c1095 100644 --- a/packages/desktop-client/src/components/reports/Header.js +++ b/packages/desktop-client/src/components/reports/Header.js @@ -96,6 +96,7 @@ function Header({ onChangeDates(...validateStart(allMonths, newValue, end)) } value={start} + defaultLabel={monthUtils.format(start, 'MMMM, yyyy')} options={allMonths.map(({ name, pretty }) => [name, pretty])} /> <View>to</View> diff --git a/upcoming-release-notes/1325.md b/upcoming-release-notes/1325.md new file mode 100644 index 0000000000000000000000000000000000000000..d349d3bcc51c2ca1444e13be8e9839f842465bcf --- /dev/null +++ b/upcoming-release-notes/1325.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [aleetsaiya] +--- + +Fix the CashFlow report crash because of the new CustomSelect \ No newline at end of file