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-57727] Convert SearchDateSuggestion to functional component (#26708)

Browse Source 
* Convert SearchDateSuggestion to functional component

* Review fixes

* Review fix

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* Another review fix

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
This commit is contained in:
MeHow25 2024-04-12 13:09:12 +02:00 committed by GitHub
parent 98712737e6
commit 1dd7046eff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
webapp/channels/src/components/suggestion/search_date_suggestion/search_date_suggestion.tsx
View File

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import type {Locale} from 'date-fns';
import React from 'react';
import React, {useCallback, useEffect, useState} from 'react';
import {DayPicker} from 'react-day-picker';
import Constants from 'utils/constants';
@ -20,66 +20,63 @@ type Props = SuggestionProps<never> & {
preventClose?: () => void;
}
export default class SearchDateSuggestion extends React.PureComponent<Props> {
private loadedLocales: Record<string, Locale> = {};
const IconLeft = () => {
return (
<i className='icon icon-chevron-left'/>
);
};
state = {
datePickerFocused: false,
};
const IconRight = () => {
return (
<i className='icon icon-chevron-right'/>
);
};
handleDayClick = (day: Date) => {
const DAY_PICKER_ICONS = {IconRight, IconLeft};
const SearchDateSuggestion = ({
currentDate,
handleEscape,
locale,
preventClose,
matchedPretext,
onClick,
}: Props) => {
let loadedLocales: Record<string, Locale> = {};
loadedLocales = Utils.getDatePickerLocalesForDateFns(locale, loadedLocales);
const [datePickerFocused, setDatePickerFocused] = useState(false);
const handleDayClick = useCallback((day: Date) => {
const dayString = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate())).toISOString().split('T')[0];
this.props.onClick(dayString, this.props.matchedPretext);
};
onClick(dayString, matchedPretext);
}, [onClick, matchedPretext]);
handleKeyDown = (e: KeyboardEvent) => {
if (Keyboard.isKeyPressed(e, Constants.KeyCodes.DOWN) && document.activeElement?.id === 'searchBox') {
this.setState({datePickerFocused: true});
} else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) {
this.props.handleEscape?.();
}
};
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (Keyboard.isKeyPressed(e, Constants.KeyCodes.DOWN) && document.activeElement?.id === 'searchBox') {
setDatePickerFocused(true);
} else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) {
handleEscape?.();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [handleEscape]);
componentDidMount() {
document.addEventListener('keydown', this.handleKeyDown);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyDown);
}
iconLeft = () => {
return (
<i className='icon icon-chevron-left'/>
);
};
iconRight = () => {
return (
<i className='icon icon-chevron-right'/>
);
};
render() {
const locale: string = this.props.locale;
this.loadedLocales = Utils.getDatePickerLocalesForDateFns(locale, this.loadedLocales);
return (
<DayPicker
onDayClick={this.handleDayClick}
showOutsideDays={true}
mode={'single'}
locale={this.loadedLocales[locale]}
initialFocus={this.state.datePickerFocused}
onMonthChange={this.props.preventClose}
id='searchDatePicker'
selected={this.props.currentDate}
components={{
IconRight: this.iconRight,
IconLeft: this.iconLeft,
}}
/>
);
}
}
return (
<DayPicker
onDayClick={handleDayClick}
showOutsideDays={true}
mode={'single'}
locale={loadedLocales[locale]}
initialFocus={datePickerFocused}
onMonthChange={preventClose}
id='searchDatePicker'
selected={currentDate}
components={DAY_PICKER_ICONS}
/>
);
};
export default React.memo(SearchDateSuggestion);