Merge pull request #1943 from epam/refactor-date-picker

[DatePicker] Rewrite DatePicker to functional component
epam · Apr 4, 2024 · 4df85f7 · 4df85f7
2 parents b974e8b + 8a8a13a
commit 4df85f7
Show file tree

Hide file tree

Showing 52 changed files with 2,463 additions and 1,836 deletions.
diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml
@@ -3,7 +3,7 @@ name: qa
 # Controls when the action will run.
 on:
     push:
-        branches: [ rc-5.2.0 ]
+        branches: [ refactor-date-picker ]
     # Allows you to run this workflow manually from the Actions tab
     workflow_dispatch:
 

diff --git a/app/src/demo/tables/masterDetailedTable/FilterPanel/FiltersBlock/Filter/Filter.tsx b/app/src/demo/tables/masterDetailedTable/FilterPanel/FiltersBlock/Filter/Filter.tsx
@@ -1,24 +1,29 @@
 import React, { useCallback, useState } from 'react';
 import css from './Filter.module.scss';
 import {
-    DatePicker, IconContainer, PickerList, RangeDatePicker,
+    DatePicker, IconContainer, PickerList, RangeDatePicker, RangeDatePickerValue,
 } from '@epam/uui';
-import { TableFiltersConfig, IEditable, RangeDatePickerValue } from '@epam/uui-core';
+import { TableFiltersConfig, IEditable } from '@epam/uui-core';
 import { ReactComponent as ArrowDown } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
 
 interface IFilterProps<TFilter extends Record<string, any>> extends IEditable<TFilter> {
     filterConfig: TableFiltersConfig<TFilter> | undefined;
 }
 
 function FilterImpl<TFilter extends Record<string, any>>(props: IFilterProps<TFilter>) {
-    const { filterConfig, value, onValueChange } = props;
+    const {
+        filterConfig, value, onValueChange,
+    } = props;
     const [isOpened, setIsOpened] = useState(false);
 
     const toggle = () => setIsOpened(!isOpened);
 
     const handleChange = useCallback(
         (filterValue: TFilter[keyof TFilter]) => {
-            onValueChange({ ...value, [filterConfig.field]: filterValue } as TFilter);
+            onValueChange({
+                ...value,
+                [filterConfig.field]: filterValue,
+            } as TFilter);
         },
         [filterConfig.field, value, onValueChange],
     );
@@ -46,7 +51,13 @@ function FilterImpl<TFilter extends Record<string, any>>(props: IFilterProps<TFi
                     />
                 );
             case 'datePicker':
-                return <DatePicker format="DD/MM/YYYY" value={ value?.[filterConfig.field] as string } onValueChange={ handleChange } />;
+                return (
+                    <DatePicker
+                        format="DD/MM/YYYY"
+                        value={ value?.[filterConfig.field] as string }
+                        onValueChange={ handleChange }
+                    />
+                );
             case 'rangeDatePicker':
                 return <RangeDatePicker value={ value?.[filterConfig.field] as RangeDatePickerValue } onValueChange={ handleChange } />;
             default:
@@ -58,7 +69,11 @@ function FilterImpl<TFilter extends Record<string, any>>(props: IFilterProps<TFi
         <div>
             <div className={ css.title } onClick={ toggle }>
                 <div>{props.filterConfig.title}</div>
-                <IconContainer icon={ ArrowDown } flipY={ isOpened } cx={ css.icon } />
+                <IconContainer
+                    icon={ ArrowDown }
+                    flipY={ isOpened }
+                    cx={ css.icon }
+                />
             </div>
 
             {isOpened && <div>{renderPicker()}</div>}

diff --git a/app/src/docs/_examples/datePicker/CustomRenderDay.example.tsx b/app/src/docs/_examples/datePicker/CustomRenderDay.example.tsx
@@ -29,8 +29,14 @@ export default function DatePickerCustomDayExample() {
                 value={ value }
                 onValueChange={ onValueChange }
                 format="MMM D, YYYY"
-                renderDay={ (day: Dayjs, onDayClick: (day: Dayjs) => void) => {
-                    return <Day renderDayNumber={ getCustomDay } value={ day } onValueChange={ onDayClick } isSelected={ day && day.isSame(value) } />;
+                renderDay={ (renderProps) => {
+                    return (
+                        <Day
+                            { ...renderProps }
+                            renderDayNumber={ getCustomDay }
+                            isSelected={ renderProps.value && renderProps.value.isSame(value) }
+                        />
+                    );
                 } }
             />
         </FlexRow>

diff --git a/app/src/docs/datePicker/datePickerExamples.tsx b/app/src/docs/datePicker/datePickerExamples.tsx
@@ -1,17 +1,25 @@
 import dayjs, { Dayjs } from 'dayjs';
-import { Day, IconContainer } from '@epam/uui-components';
+import {
+    Day, DayProps, IconContainer,
+} from '@epam/uui-components';
 import * as React from 'react';
 import { ReactComponent as Point } from '@epam/assets/icons/common/radio-point-10.svg';
 import { IPropSamplesCreationContext } from '@epam/uui-docs';
-import { DatePickerProps, FlexRow, LinkButton } from '@epam/uui';
+import {
+    DatePickerProps, FlexRow, LinkButton,
+} from '@epam/uui';
 import css from './datePickerExamples.module.scss';
 
 export const renderFooter = (ctx: IPropSamplesCreationContext<DatePickerProps>) => [
     {
         name: 'footer',
         value: () => (
             <FlexRow cx={ css.footer } size="48">
-                <LinkButton size="36" caption="Today" onClick={ () => ctx.getSelectedProps().onValueChange(dayjs().format('YYYY-MM-DD')) } />
+                <LinkButton
+                    size="36"
+                    caption="Today"
+                    onClick={ () => ctx.getSelectedProps().onValueChange(dayjs().format('YYYY-MM-DD')) }
+                />
             </FlexRow>
         ),
     },
@@ -21,14 +29,19 @@ export const renderCustomDayExample = (ctx: IPropSamplesCreationContext<DatePick
     return [
         {
             name: 'Render custom day',
-            value: (day: Dayjs, onDayClick: (day: Dayjs) => void) => {
+            value: (renderProps: DayProps) => {
                 const getCustomDay = (dayInner: Dayjs) => {
                     return (
                         <>
                             {dayInner.format('D')}
                             <IconContainer
                                 style={ {
-                                    fill: '#fcaa00', height: '4px', width: '4px', position: 'absolute', top: '7px', right: '10px',
+                                    fill: '#fcaa00',
+                                    height: '4px',
+                                    width: '4px',
+                                    position: 'absolute',
+                                    top: '7px',
+                                    right: '10px',
                                 } }
                                 icon={ Point }
                             />
@@ -37,10 +50,9 @@ export const renderCustomDayExample = (ctx: IPropSamplesCreationContext<DatePick
                 };
                 return (
                     <Day
+                        { ...renderProps }
                         renderDayNumber={ getCustomDay }
-                        value={ day }
-                        onValueChange={ onDayClick }
-                        isSelected={ day && day.isSame(ctx.getSelectedProps().value) }
+                        isSelected={ renderProps.value && renderProps.value.isSame(ctx.getSelectedProps().value) }
                         filter={ ctx.getSelectedProps().filter }
                     />
                 );

diff --git a/app/src/docs/rangeDatePicker/rangeDatePickerExamples.tsx b/app/src/docs/rangeDatePicker/rangeDatePickerExamples.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
-import { Day } from '@epam/uui-components';
+import { Day, DayProps } from '@epam/uui-components';
 import { IPropSamplesCreationContext } from '@epam/uui-docs';
-import { Text, RangeDatePickerProps, RangeDatePickerValue, rangeDatePickerPresets } from '@epam/uui';
+import {
+    Text, RangeDatePickerProps, RangeDatePickerValue, rangeDatePickerPresets,
+} from '@epam/uui';
 import css from './rangeDatePickerExamples.module.scss';
 import isBetween from 'dayjs/plugin/isBetween.js';
 
@@ -32,7 +34,10 @@ export const filterExamples = () => {
     ];
 };
 export const presetsExamples = () => [
-    { name: 'default', value: rangeDatePickerPresets },
+    {
+        name: 'default',
+        value: rangeDatePickerPresets,
+    },
     {
         name: 'custom',
         value: {
@@ -41,7 +46,11 @@ export const presetsExamples = () => [
             last3Days: {
                 name: 'Last 3 days (custom)',
                 getRange: () => {
-                    return { from: dayjs().subtract(2, 'day').toString(), to: dayjs().toString(), order: 11 };
+                    return {
+                        from: dayjs().subtract(2, 'day').toString(),
+                        to: dayjs().toString(),
+                        order: 11,
+                    };
                 },
             },
         },
@@ -78,7 +87,7 @@ export const renderDayExamples = (ctx: IPropSamplesCreationContext<RangeDatePick
     return [
         {
             name: 'Render custom day',
-            value: (day: Dayjs, onDayClick: (day: Dayjs) => void) => {
+            value: (renderProps: DayProps) => {
                 const getCustomDay = (dayInner: Dayjs) => {
                     return (
                         <>
@@ -89,11 +98,17 @@ export const renderDayExamples = (ctx: IPropSamplesCreationContext<RangeDatePick
                 };
                 return (
                     <Day
+                        { ...renderProps }
                         renderDayNumber={ getCustomDay }
-                        value={ day }
-                        onValueChange={ onDayClick }
                         isSelected={
-                            day && ctx.getSelectedProps().value && day.isBetween(ctx.getSelectedProps().value.from, ctx.getSelectedProps().value.to, undefined, '[]')
+                            renderProps.value
+                            && ctx.getSelectedProps().value
+                            && renderProps.value.isBetween(
+                                ctx.getSelectedProps().value.from,
+                                ctx.getSelectedProps().value.to,
+                                undefined,
+                                '[]',
+                            )
                         }
                         filter={ ctx.getSelectedProps().filter }
                     />

diff --git a/changelog.md b/changelog.md
@@ -68,6 +68,12 @@
 * [FlexRow]: deprecated property `spacing`, it will be removed in future releases. Please use `columnGap` instead. `spacing` prop now works via `columnGap`.
 * [FlexRow]: added property `topBorder` to add border on the top of the FlexRow
 * [FileUpload]: move wordings to the i18n
+* [Modals]: added property `maxHeight` it equals `80dvh` in desktop mode and `100dvh` in mobile.
+* [ColumnsConfigurationModal]: set `height` and `maxHeight` equals to `95dvh` and `mobile breakpoint` changed from 640px to `720px` as in all other modals.
+* [DatePicker] renderDay prop callback signature updated
+* [RangeDatePicker] renderDay prop callback signature updated
+* [DatePickerBody] props breaking changes
+* [RangeDatePickerBody] props breaking changes
 * [ColumnsConfigurationModal]: small visual tweaks
 * [Avatar]: changed default avatar img
 

diff --git a/uui-components/src/inputs/DatePicker/BaseDatePicker.tsx b/uui-components/src/inputs/DatePicker/BaseDatePicker.tsx