From b06d87d2ee57855241955fc31c1d6c08426e36b3 Mon Sep 17 00:00:00 2001
From: Sean Tsai <aleetsaiya@gmail.com>
Date: Wed, 12 Jul 2023 03:44:14 +0800
Subject: [PATCH] Fix the CashFlow report crash because of the new CustomSelect
(#1325)
---
.../src/components/common/CustomSelect.tsx | 21 +++++++++++++++++--
.../src/components/reports/Header.js | 1 +
upcoming-release-notes/1325.md | 6 ++++++
3 files changed, 26 insertions(+), 2 deletions(-)
create mode 100644 upcoming-release-notes/1325.md
diff --git a/packages/desktop-client/src/components/common/CustomSelect.tsx b/packages/desktop-client/src/components/common/CustomSelect.tsx
index 9f47c3deb..5f95acee3 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 25f7da761..ede50cf7d 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 000000000..d349d3bcc
--- /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
--
GitLab