feat: datepicker: adds date and time picker components

package.json

@@ -69,7 +69,6 @@
     "peerDependencies": {
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.11",
-        "moment": "2.24.0",
         "react": "17.0.2",
         "react-app-polyfill": "3.0.0",
         "react-dom": "17.0.2"
@@ -154,7 +153,6 @@
         "lint-staged": "12.3.6",
         "mini-css-extract-plugin": "2.6.0",
         "mockdate": "3.0.2",
-        "moment": "2.24.0",
         "postcss": "8.4.4",
         "postcss-flexbugs-fixes": "5.0.2",
         "postcss-loader": "6.2.1",

src/components/Align/Align.tsx

@@ -6,7 +6,7 @@ import {
 } from '../../shared/utilities';
 import { alignElement, alignPoint } from 'dom-align';
 import { isEqual } from '@ngard/tiny-isequal';
-import { isSamePoint, restoreFocus, monitorResize } from './util';
+import { isSamePoint, restoreFocus, onViewportResize } from './util';
 import type {
     AlignType,
     AlignResult,
@@ -21,13 +21,13 @@ export interface AlignProps {
     align: AlignType;
     target: TargetType;
     onAlign?: OnAlign;
-    monitorBufferTime?: number;
-    monitorWindowResize?: boolean;
+    viewportBufferTime?: number;
+    viewportResize?: boolean;
     disabled?: boolean;
     children: React.ReactElement;
 }
 
-interface MonitorRef {
+interface ViewportRef {
     element?: HTMLElement;
     cancel: () => void;
 }
@@ -53,8 +53,8 @@ const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
         target,
         align,
         onAlign,
-        monitorWindowResize,
-        monitorBufferTime = 0,
+        viewportResize,
+        viewportBufferTime = 0,
     },
     ref
 ) => {
@@ -118,24 +118,24 @@ const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
         }
 
         return false;
-    }, monitorBufferTime);
+    }, viewportBufferTime);
 
     // Listen for target updated
-    const resizeMonitor = React.useRef<MonitorRef>({
+    const resizeViewport = React.useRef<ViewportRef>({
         cancel: () => {},
     });
     // Listen for source updated
-    const sourceResizeMonitor = React.useRef<MonitorRef>({
+    const sourceResizeViewport = React.useRef<ViewportRef>({
         cancel: () => {},
     });
     React.useEffect(() => {
         const element = getElement(target);
         const point = getPoint(target);
 
-        if (nodeRef.current !== sourceResizeMonitor.current.element) {
-            sourceResizeMonitor.current.cancel();
-            sourceResizeMonitor.current.element = nodeRef.current;
-            sourceResizeMonitor.current.cancel = monitorResize(
+        if (nodeRef.current !== sourceResizeViewport.current.element) {
+            sourceResizeViewport.current.cancel();
+            sourceResizeViewport.current.element = nodeRef.current;
+            sourceResizeViewport.current.cancel = onViewportResize(
                 nodeRef.current,
                 forceAlign
             );
@@ -149,10 +149,10 @@ const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
             forceAlign();
 
             // Add resize observer
-            if (resizeMonitor.current.element !== element) {
-                resizeMonitor.current.cancel();
-                resizeMonitor.current.element = element;
-                resizeMonitor.current.cancel = monitorResize(
+            if (resizeViewport.current.element !== element) {
+                resizeViewport.current.cancel();
+                resizeViewport.current.element = element;
+                resizeViewport.current.cancel = onViewportResize(
                     element,
                     forceAlign
                 );
@@ -172,7 +172,7 @@ const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
     // Listen for window resize
     const winResizeRef = React.useRef<{ remove: Function }>(null);
     React.useEffect(() => {
-        if (monitorWindowResize) {
+        if (viewportResize) {
             if (!winResizeRef.current) {
                 winResizeRef.current = addEventListenerWrapper(
                     window,
@@ -184,13 +184,13 @@ const Align: React.ForwardRefRenderFunction<RefAlign, AlignProps> = (
             winResizeRef.current.remove();
             winResizeRef.current = null;
         }
-    }, [monitorWindowResize]);
+    }, [viewportResize]);
 
     // Clear all if unmount
     React.useEffect(
         () => () => {
-            resizeMonitor.current.cancel();
-            sourceResizeMonitor.current.cancel();
+            resizeViewport.current.cancel();
+            sourceResizeViewport.current.cancel();
             if (winResizeRef.current) winResizeRef.current.remove();
             cancelForceAlign();
         },

src/components/Align/Tests/element.test.js

@@ -69,7 +69,7 @@ describe('element align', () => {
     it('resize', () => {
         const onAlign = jest.fn();
 
-        const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} />);
+        const wrapper = mount(<Test viewportResize onAlign={onAlign} />);
         expect(onAlign).toHaveBeenCalled();
 
         // Window resize
@@ -80,21 +80,21 @@ describe('element align', () => {
 
         // Not listen resize
         onAlign.mockReset();
-        wrapper.setProps({ monitorWindowResize: false });
+        wrapper.setProps({ viewportResize: false });
         window.dispatchEvent(new Event('resize'));
         jest.runAllTimers();
         expect(onAlign).not.toHaveBeenCalled();
 
         // Remove should not crash
-        wrapper.setProps({ monitorWindowResize: true });
+        wrapper.setProps({ viewportResize: true });
         wrapper.unmount();
     });
 
     it('disabled should trigger align', () => {
         const onAlign = jest.fn();
 
         const wrapper = mount(
-            <Test monitorWindowResize onAlign={onAlign} disabled />
+            <Test viewportResize onAlign={onAlign} disabled />
         );
         expect(onAlign).not.toHaveBeenCalled();
 
@@ -103,7 +103,6 @@ describe('element align', () => {
         expect(onAlign).toHaveBeenCalled();
     });
 
-    // https://github.com/ant-design/ant-design/issues/31717
     it('changing align should trigger onAlign', () => {
         const onAlign = jest.fn();
         const wrapper = mount(
@@ -128,7 +127,7 @@ describe('element align', () => {
         // exactly in this order:
         // * Render <Align> with `onAlign1`.
         // * The callback in useBuffer is queued using setTimeout, to trigger after
-        //   `monitorBufferTime` ms (which even when it's set to 0 is queued and
+        //   `viewportBufferTime` ms (which even when it's set to 0 is queued and
         //   not synchronously executed).
         // * The onAlign prop is changed to `onAlign2`.
         // * The callback from useBuffer is called. The now correct onAlign

src/components/Align/Tests/util.test.js

@@ -1,4 +1,4 @@
-import { isSamePoint, monitorResize } from '../util';
+import { isSamePoint, onViewportResize } from '../util';
 import 'resize-observer-polyfill';
 
 let observer;
@@ -78,7 +78,7 @@ describe('util', () => {
         });
     });
 
-    describe('monitorResize', () => {
+    describe('viewportResize', () => {
         let element;
 
         beforeEach(() => {
@@ -101,7 +101,7 @@ describe('util', () => {
 
         it('should defer callback to next frame', async () => {
             const callback = jest.fn();
-            monitorResize(element, callback);
+            onViewportResize(element, callback);
             observer.triggerResize();
             jest.runAllTimers();
             await Promise.resolve();
@@ -110,7 +110,7 @@ describe('util', () => {
 
         it('should skip calling if target is removed already', () => {
             const callback = jest.fn();
-            monitorResize(element, callback);
+            onViewportResize(element, callback);
             element.remove();
             observer.triggerResize();
             jest.runAllTimers();

src/components/Align/util.ts

@@ -28,7 +28,7 @@ export function restoreFocus(activeElement: any, container: any) {
     }
 }
 
-export function monitorResize(element: HTMLElement, callback: Function) {
+export function onViewportResize(element: HTMLElement, callback: Function) {
     let prevWidth: number = null;
     let prevHeight: number = null;
 

src/components/DateTimePicker/DatePicker/DatePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import moment from 'moment';
-import type { Moment } from 'moment';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import DatePicker from './';
@@ -105,7 +105,7 @@ const Single_Picker_Disabled_Story: ComponentStory<typeof DatePicker> = (
             <DatePicker {...args} onChange={onChange} />
             <DatePicker
                 {...args}
-                defaultValue={moment('2015-06-06', dateFormat)}
+                defaultValue={dayjs('2015-06-06', dateFormat)}
             />
         </Stack>
     );
@@ -125,7 +125,7 @@ const Single_Picker_Disabled_Date_and_Time_Story: ComponentStory<
     // eslint-disable-next-line arrow-body-style
     const disabledDate: RangePickerProps['disabledDate'] = (current) => {
         // Can not select days before today and today
-        return current && current < moment().endOf('day');
+        return current && current < dayjs().endOf('day');
     };
 
     const disabledDateTime = () => ({
@@ -140,7 +140,7 @@ const Single_Picker_Disabled_Date_and_Time_Story: ComponentStory<
                 format="YYYY-MM-DD HH:mm:ss"
                 disabledDate={disabledDate}
                 disabledTime={disabledDateTime}
-                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
+                showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}
             />
             <DatePicker {...args} picker="month" disabledDate={disabledDate} />
         </Stack>
@@ -214,8 +214,8 @@ const Range_Picker_Disabled_Story: ComponentStory<typeof RangePicker> = (
             <RangePicker
                 {...args}
                 defaultValue={[
-                    moment('2015-06-06', dateFormat),
-                    moment('2015-06-06', dateFormat),
+                    dayjs('2015-06-06', dateFormat),
+                    dayjs('2015-06-06', dateFormat),
                 ]}
             />
         </Stack>
@@ -236,7 +236,7 @@ const Range_Picker_Disabled_Date_and_Time_Story: ComponentStory<
     // eslint-disable-next-line arrow-body-style
     const disabledDate: RangePickerProps['disabledDate'] = (current) => {
         // Can not select days before today and today
-        return current && current < moment().endOf('day');
+        return current && current < dayjs().endOf('day');
     };
 
     const disabledRangeTime: RangePickerProps['disabledTime'] = (_, type) => {
@@ -264,8 +264,8 @@ const Range_Picker_Disabled_Date_and_Time_Story: ComponentStory<
                 showTime={{
                     hideDisabledOptions: true,
                     defaultValue: [
-                        moment('00:00:00', 'HH:mm:ss'),
-                        moment('11:59:59', 'HH:mm:ss'),
+                        dayjs('00:00:00', 'HH:mm:ss'),
+                        dayjs('11:59:59', 'HH:mm:ss'),
                     ],
                 }}
                 format="YYYY-MM-DD HH:mm:ss"
@@ -289,21 +289,21 @@ const Preset_Ranges_Story: ComponentStory<typeof RangePicker> = (args) => {
             <RangePicker
                 {...args}
                 ranges={{
-                    Today: [moment(), moment()],
+                    Today: [dayjs(), dayjs()],
                     'This Month': [
-                        moment().startOf('month'),
-                        moment().endOf('month'),
+                        dayjs().startOf('month'),
+                        dayjs().endOf('month'),
                     ],
                 }}
                 onChange={onChange}
             />
             <RangePicker
                 {...args}
                 ranges={{
-                    Today: [moment(), moment()],
+                    Today: [dayjs(), dayjs()],
                     'This Month': [
-                        moment().startOf('month'),
-                        moment().endOf('month'),
+                        dayjs().startOf('month'),
+                        dayjs().endOf('month'),
                     ],
                 }}
                 showTime
@@ -317,13 +317,13 @@ const Preset_Ranges_Story: ComponentStory<typeof RangePicker> = (args) => {
 const Select_Range_By_Day_Limit_Story: ComponentStory<typeof RangePicker> = (
     args
 ) => {
-    type RangeValue = [Moment | null, Moment | null] | null;
+    type RangeValue = [Dayjs | null, Dayjs | null] | null;
 
     const [dates, setDates] = useState<RangeValue>(null);
     const [hackValue, setHackValue] = useState<RangeValue>(null);
     const [value, setValue] = useState<RangeValue>(null);
 
-    const disabledDate = (current: Moment) => {
+    const disabledDate = (current: Dayjs) => {
         if (!dates) {
             return false;
         }
@@ -360,7 +360,7 @@ const monthFormat = 'YYYY/MM';
 const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
 
 const weekStartEndFormat: DatePickerProps['format'] = (value) =>
-    `${moment(value).startOf('week').format(weekFormat)} to ${moment(value)
+    `${dayjs(value).startOf('week').format(weekFormat)} to ${dayjs(value)
         .endOf('week')
         .format(weekFormat)}`;
 
@@ -372,29 +372,29 @@ const Date_Format_Basic_Story: ComponentStory<typeof DatePicker> = (args) => {
         <Stack direction="vertical" gap="m">
             <DatePicker
                 {...args}
-                defaultValue={moment('2023/01/01', dateFormat)}
+                defaultValue={dayjs('2023/01/01', dateFormat)}
                 format={dateFormat}
             />
             <DatePicker
                 {...args}
-                defaultValue={moment('01/01/2023', dateFormatList[0])}
+                defaultValue={dayjs('01/01/2023', dateFormatList[0])}
                 format={dateFormatList}
             />
             <DatePicker
                 {...args}
-                defaultValue={moment('2023/01', monthFormat)}
+                defaultValue={dayjs('2023/01', monthFormat)}
                 format={monthFormat}
                 picker="month"
             />
             <DatePicker
                 {...args}
-                defaultValue={moment()}
+                defaultValue={dayjs()}
                 format={weekStartEndFormat}
                 picker="week"
             />
             <DatePicker
                 {...args}
-                defaultValue={moment('2023/01/01', dateFormat)}
+                defaultValue={dayjs('2023/01/01', dateFormat)}
                 format={customFormat}
             />
         </Stack>
@@ -405,8 +405,8 @@ const Date_Format_Range_Story: ComponentStory<typeof RangePicker> = (args) => (
     <RangePicker
         {...args}
         defaultValue={[
-            moment('2023/01/01', dateFormat),
-            moment('2023/01/01', dateFormat),
+            dayjs('2023/01/01', dateFormat),
+            dayjs('2023/01/01', dateFormat),
         ]}
         format={dateFormat}
     />

src/components/DateTimePicker/DatePicker/Styles/mixins.scss

@@ -50,7 +50,7 @@ $picker-input-padding-vertical: max(
 }
 
 // Picker scroll bars
-@mixin scrollBars() {
+@mixin scroll-bars() {
     -ms-overflow-style: none;
 
     &::-webkit-scrollbar {