diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx b/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx index 17ee82e87c29c5de3077183eaa75c7d580a9824e..4c29f179bb89c818d4a5c2f498611d165cab6036 100644 --- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx +++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useReducer, useState } from 'react'; +import React, { useEffect, useReducer, useRef, useState } from 'react'; import { sendCatch } from 'loot-core/src/platform/client/fetch'; import * as monthUtils from 'loot-core/src/shared/months'; @@ -9,12 +9,12 @@ import { SvgAdd, SvgSubtract } from '../../icons/v0'; import { theme } from '../../style'; import { Button } from '../common/Button'; import { Input } from '../common/Input'; +import { Popover } from '../common/Popover'; import { Select } from '../common/Select'; import { Stack } from '../common/Stack'; import { Text } from '../common/Text'; import { View } from '../common/View'; import { Checkbox } from '../forms'; -import { useTooltip, Tooltip } from '../tooltips'; import { DateSelect } from './DateSelect'; @@ -48,19 +48,18 @@ function parsePatternValue(value) { } function parseConfig(config) { - return ( - config || { - start: monthUtils.currentDay(), - interval: 1, - frequency: 'monthly', - patterns: [createMonthlyRecurrence(monthUtils.currentDay())], - skipWeekend: false, - weekendSolveMode: 'before', - endMode: 'never', - endOccurrences: '1', - endDate: monthUtils.currentDay(), - } - ); + return { + start: monthUtils.currentDay(), + interval: 1, + frequency: 'monthly', + patterns: [createMonthlyRecurrence(monthUtils.currentDay())], + skipWeekend: false, + weekendSolveMode: 'before', + endMode: 'never', + endOccurrences: '1', + endDate: monthUtils.currentDay(), + ...config, + }; } function unparseConfig(parsed) { @@ -309,12 +308,7 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) { } return ( - <Tooltip - style={{ padding: 10, width: 380 }} - offset={1} - position="bottom-left" - onClose={onClose} - > + <> <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}> <label htmlFor="start">From</label> <DateSelect @@ -471,36 +465,45 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) { Apply </Button> </div> - </Tooltip> + </> ); } export function RecurringSchedulePicker({ value, buttonStyle, onChange }) { - const { isOpen, close, getOpenEvents } = useTooltip(); + const triggerRef = useRef(null); + const [isOpen, setIsOpen] = useState(false); const dateFormat = useDateFormat() || 'MM/dd/yyyy'; function onSave(config) { onChange(config); - close(); + setIsOpen(false); } return ( <View> <Button - {...getOpenEvents()} + ref={triggerRef} style={{ textAlign: 'left', ...buttonStyle }} + onClick={() => setIsOpen(true)} > {value ? getRecurringDescription(value, dateFormat) : 'No recurring date'} </Button> - {isOpen && ( + + <Popover + triggerRef={triggerRef} + style={{ padding: 10, width: 380 }} + placement="bottom start" + isOpen={isOpen} + onOpenChange={() => setIsOpen(false)} + > <RecurringScheduleTooltip config={value} - onClose={close} + onClose={() => setIsOpen(false)} onSave={onSave} /> - )} + </Popover> </View> ); } diff --git a/upcoming-release-notes/2766.md b/upcoming-release-notes/2766.md new file mode 100644 index 0000000000000000000000000000000000000000..cc9a4e48974784f78b7b8f16caafc5528f978678 --- /dev/null +++ b/upcoming-release-notes/2766.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Migrating recurring schedule `Tooltip` component to react-aria Tooltip/Popover (vol.5)