IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-56606] Upgrade to "@floating-ui/react" for date_picker component (#25978)

Browse Source
This commit is contained in:
M-ZubairAhmed 2024-01-24 04:29:52 +00:00 committed by GitHub
parent 028ad7d33f
commit df79ebed79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/channels/src/components/custom_status/date_time_input.tsx
View File

@ -26,7 +26,6 @@ import Constants, {A11yCustomEventTypes} from 'utils/constants';
import type {A11yFocusEventDetail} from 'utils/constants';
import {isKeyPressed} from 'utils/keyboard';
import {getCurrentMomentForTimezone} from 'utils/timezone';
import {localizeMessage} from 'utils/utils';
const CUSTOM_STATUS_TIME_PICKER_INTERVALS_IN_MINUTES = 30;
@ -172,7 +171,7 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
id='customStatus__calendar-input'
readOnly={true}
className='dateTime__calendar-input'
label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
label={formatMessage({id: 'dnd_custom_time_picker_modal.date', defaultMessage: 'Date'})}
onClick={() => handlePopperOpenState(true)}
tabIndex={-1}
inputPrefix={inputIcon}

8
webapp/channels/src/components/date_picker/date_picker.tsx
View File

@ -10,7 +10,7 @@ import {
useInteractions,
FloatingFocusManager,
useDismiss,
} from '@floating-ui/react-dom-interactions';
} from '@floating-ui/react';
import type {Locale} from 'date-fns';
import React, {useCallback, useEffect, useState} from 'react';
import {DayPicker} from 'react-day-picker';
@ -31,7 +31,7 @@ type Props = {
const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenState, locale}: Props) => {
const [loadedLocales, setLoadedLocales] = useState<Record<string, Locale>>({});
const {x, y, reference, floating, strategy, context} = useFloating({
const {x, y, strategy, context, refs: {setReference, setFloating}} = useFloating({
open: isPopperOpen,
onOpenChange: () => handlePopperOpenState(false),
placement: 'bottom-start',
@ -69,7 +69,7 @@ const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenSt
return (
<div>
<div
ref={reference}
ref={setReference}
{...getReferenceProps()}
>
{children}
@ -81,7 +81,7 @@ const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenSt
initialFocus={-1}
>
<div
ref={floating}
ref={setFloating}
style={{
position: strategy,
top: y ?? 0,