From cca8ebc516f08adfdf1cb9ece6e42e124f5a4a41 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Fri, 6 Jan 2023 17:45:53 +0300 Subject: [PATCH] chore: two-month-picker to tsx with one calendar component --- .../CompositeCalendar/composite-calendar.jsx | 2 +- ...-month-picker.jsx => two-month-picker.tsx} | 80 ++++++++++++------- 2 files changed, 50 insertions(+), 32 deletions(-) rename packages/reports/src/Components/Form/CompositeCalendar/{two-month-picker.jsx => two-month-picker.tsx} (63%) diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx index b409a1b88d24..3c7a73e8b7c3 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx @@ -10,7 +10,7 @@ import SideList from './side-list.jsx'; import CalendarIcon from './calendar-icon'; const TwoMonthPicker = Loadable({ - loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker.jsx'), + loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker'), loading: () => null, render(loaded, props) { const Component = loaded.default; diff --git a/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx similarity index 63% rename from packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx rename to packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx index d671140e0529..9541120f7b9b 100644 --- a/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx +++ b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.tsx @@ -1,63 +1,86 @@ -import PropTypes from 'prop-types'; import moment from 'moment'; import React from 'react'; import { Calendar } from '@deriv/components'; import { addMonths, diffInMonths, epochToMoment, subMonths, toMoment } from '@deriv/shared'; -const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }) => { - const [left_pane_date, setLeftPaneDate] = React.useState(subMonths(value, 1).unix()); +type TTwoMonthPicker = { + onChange: (date: moment.MomentInput) => void; + isPeriodDisabled: (date: moment.MomentInput) => boolean; + value: number; +}; + +const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }: TTwoMonthPicker) => { + const [left_pane_date, setLeftPaneDate] = React.useState( + subMonths(value ? new Date(value * 1000).toISOString() : '', 1).unix() + ); const [right_pane_date, setRightPaneDate] = React.useState(value); - const navigateFrom = e => { - setLeftPaneDate(e.unix()); - setRightPaneDate(addMonths(e, 1).unix()); + /** + * Navigate from date + * + * @param {moment.Moment} date + * @returns {void} + */ + const navigateFrom = (date: moment.Moment): void => { + setLeftPaneDate(date.unix()); + setRightPaneDate(addMonths(date.toISOString(), 1).unix()); }; /** - * Only allow previous months to be available to navigate. Disable other periods + * Navigate to date * - * @param date - * @param range - * @returns {boolean} + * @param {moment.Moment} date + * @returns {void} */ - const validateFromArrows = (date, range) => { - return range === 'year' || diffInMonths(epochToMoment(left_pane_date), date) !== -1; + const navigateTo = (date: moment.Moment): void => { + setLeftPaneDate(subMonths(date.toISOString(), 1).unix()); + setRightPaneDate(toMoment(date).unix()); }; /** - * Validate values to be date_from < date_to + * Only allow previous months to be available to navigate. Disable other periods + * + * @param {moment.Moment} date + * @param {Extract} range + * @returns {boolean} */ - const shouldDisableDate = date => { - return isPeriodDisabled(date.unix()); + const validateFromArrows = (date: moment.Moment, range: Extract): boolean => { + // return range === 'year' || diffInMonths(epochToMoment(left_pane_date), date) !== -1; + return diffInMonths(epochToMoment(left_pane_date), date) !== -1; }; /** * Only allow next month to be available to navigate (unless next month is in the future). * Disable other periods * - * @param date - * @param range + * @param {moment.Moment} date + * @param {Extract} range * @returns {boolean} */ - const validateToArrows = (date, range) => { - if (range === 'year') return true; // disallow year arrows + const validateToArrows = (date: moment.Moment, range: Extract): boolean => { + // if (range === 'year') return true; // disallow year arrows const r_date = epochToMoment(right_pane_date).startOf('month'); if (diffInMonths(toMoment().startOf('month'), r_date) === 0) return true; // future months are disallowed return diffInMonths(r_date, date) !== 1; }; - const jumpToCurrentMonth = () => { + /** + * Validate values to be date_from < date_to + * + * @param {moment.Moment} date + * @return {boolean} + */ + const shouldDisableDate = (date: moment.Moment): boolean => { + return isPeriodDisabled(date.unix()); + }; + + const jumpToCurrentMonth = (): void => { const current_month = toMoment().endOf('month').unix(); setLeftPaneDate(epochToMoment(current_month).endOf('month').subtract(1, 'month').unix()); setRightPaneDate(current_month); }; - const navigateTo = e => { - setLeftPaneDate(subMonths(e, 1).unix()); - setRightPaneDate(toMoment(e).unix()); - }; - - const updateSelectedDate = e => { + const updateSelectedDate = (e: React.MouseEvent): void => { onChange(moment.utc(e.currentTarget.dataset.date, 'YYYY-MM-DD').unix()); }; @@ -108,9 +131,4 @@ const TwoMonthPicker = React.memo(({ onChange, isPeriodDisabled, value }) => { TwoMonthPicker.displayName = 'TwoMonthPicker'; -TwoMonthPicker.propTypes = { - isPeriodDisabled: PropTypes.func, - onChange: PropTypes.func, - value: PropTypes.number, -}; export default TwoMonthPicker;