mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
[MM-57727] Convert SearchDateSuggestion to functional component (#26708)
* 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:
parent
98712737e6
commit
1dd7046eff
@ -2,7 +2,7 @@
|
|||||||
// See LICENSE.txt for license information.
|
// See LICENSE.txt for license information.
|
||||||
|
|
||||||
import type {Locale} from 'date-fns';
|
import type {Locale} from 'date-fns';
|
||||||
import React from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {DayPicker} from 'react-day-picker';
|
import {DayPicker} from 'react-day-picker';
|
||||||
|
|
||||||
import Constants from 'utils/constants';
|
import Constants from 'utils/constants';
|
||||||
@ -20,66 +20,63 @@ type Props = SuggestionProps<never> & {
|
|||||||
preventClose?: () => void;
|
preventClose?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class SearchDateSuggestion extends React.PureComponent<Props> {
|
const IconLeft = () => {
|
||||||
private loadedLocales: Record<string, Locale> = {};
|
return (
|
||||||
|
<i className='icon icon-chevron-left'/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
state = {
|
const IconRight = () => {
|
||||||
datePickerFocused: false,
|
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];
|
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) => {
|
useEffect(() => {
|
||||||
if (Keyboard.isKeyPressed(e, Constants.KeyCodes.DOWN) && document.activeElement?.id === 'searchBox') {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
this.setState({datePickerFocused: true});
|
if (Keyboard.isKeyPressed(e, Constants.KeyCodes.DOWN) && document.activeElement?.id === 'searchBox') {
|
||||||
} else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) {
|
setDatePickerFocused(true);
|
||||||
this.props.handleEscape?.();
|
} else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) {
|
||||||
}
|
handleEscape?.();
|
||||||
};
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, [handleEscape]);
|
||||||
|
|
||||||
componentDidMount() {
|
return (
|
||||||
document.addEventListener('keydown', this.handleKeyDown);
|
<DayPicker
|
||||||
}
|
onDayClick={handleDayClick}
|
||||||
|
showOutsideDays={true}
|
||||||
componentWillUnmount() {
|
mode={'single'}
|
||||||
document.removeEventListener('keydown', this.handleKeyDown);
|
locale={loadedLocales[locale]}
|
||||||
}
|
initialFocus={datePickerFocused}
|
||||||
|
onMonthChange={preventClose}
|
||||||
iconLeft = () => {
|
id='searchDatePicker'
|
||||||
return (
|
selected={currentDate}
|
||||||
<i className='icon icon-chevron-left'/>
|
components={DAY_PICKER_ICONS}
|
||||||
);
|
/>
|
||||||
};
|
);
|
||||||
|
};
|
||||||
iconRight = () => {
|
export default React.memo(SearchDateSuggestion);
|
||||||
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,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user