Skip to content

Commit 0770736

Browse files
gcornutgcornut
committed
feat(date-picker): replace moment with vanilla JS
1 parent 52d4732 commit 0770736

26 files changed

+532
-71
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
### Changed
11+
12+
- `@lumx/react` no long depend on `moment` or `moment-range` to generate the date picker.
13+
1014
## [3.5.3][] - 2023-08-30
1115

1216
### Changed
@@ -1807,8 +1811,6 @@ _Failed released_
18071811
[3.5.0]: https://github.com/lumapps/design-system/tree/v3.5.0
18081812
[unreleased]: https://github.com/lumapps/design-system/compare/v3.5.1...HEAD
18091813
[3.5.1]: https://github.com/lumapps/design-system/tree/v3.5.1
1810-
1811-
1812-
[Unreleased]: https://github.com/lumapps/design-system/compare/v3.5.3...HEAD
1814+
[unreleased]: https://github.com/lumapps/design-system/compare/v3.5.3...HEAD
18131815
[3.5.3]: https://github.com/lumapps/design-system/compare/v3.5.2...v3.5.3
18141816
[3.5.2]: https://github.com/lumapps/design-system/tree/v3.5.2

‎packages/lumx-react/.storybook/preview.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import type { Preview } from '@storybook/react';
22
import { withStoryBlockDecorator } from './story-block/decorator';
33
import { Theme } from '@lumx/react';
44

5-
/**
6-
* Import non default language to test moment local change.
7-
*/
8-
import 'moment/dist/locale/fr';
9-
105
const preview: Preview = {
116
globalTypes: {
127
/** Add Theme switcher in the toolbar */

‎packages/lumx-react/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@
7979
},
8080
"peerDependencies": {
8181
"lodash": "4.17.21",
82-
"moment": ">= 2",
83-
"moment-range": "^4.0.2",
8482
"react": ">= 16.13.0",
8583
"react-dom": ">= 16.13.0"
8684
},

‎packages/lumx-react/src/components/date-picker/DatePicker.stories.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { DatePicker, GridColumn } from '@lumx/react';
2+
import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
3+
import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
4+
import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
5+
import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
6+
7+
export default {
8+
title: 'LumX components/date-picker/DatePicker',
9+
component: DatePicker,
10+
argTypes: {
11+
onChange: { action: true },
12+
},
13+
decorators: [withValueOnChange(), withNestedProps()],
14+
};
15+
16+
/**
17+
* Default date picker
18+
*/
19+
export const Default = {
20+
args: {
21+
defaultMonth: new Date('2023-02'),
22+
'nextButtonProps.label': 'Next month',
23+
'previousButtonProps.label': 'Previous month',
24+
},
25+
};
26+
27+
/**
28+
* Demonstrate variations based on the given locale code
29+
*/
30+
export const LocalesVariations = {
31+
...Default,
32+
decorators: [
33+
withCombinations({
34+
combinations: { sections: { key: 'locale', options: ['fr', 'en-US', 'ar', 'zh-HK', 'ar-eg'] } },
35+
}),
36+
withWrapper({ maxColumns: 5, itemMinWidth: 300 }, GridColumn),
37+
],
38+
};

‎packages/lumx-react/src/components/date-picker/DatePicker.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import moment from 'moment';
21
import React, { forwardRef, useState } from 'react';
32
import { Comp } from '@lumx/react/utils/type';
3+
import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
4+
import { isDateValid } from '@lumx/react/utils/date/isDateValid';
45
import { CLASSNAME, COMPONENT_NAME } from './constants';
56
import { DatePickerControlled } from './DatePickerControlled';
67
import { DatePickerProps } from './types';
@@ -14,17 +15,13 @@ import { DatePickerProps } from './types';
1415
*/
1516
export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
1617
const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
17-
let castedValue;
18-
if (value) {
19-
castedValue = moment(value);
20-
} else if (defaultMonth) {
21-
castedValue = moment(defaultMonth);
22-
}
23-
if (castedValue && !castedValue.isValid()) {
18+
19+
let referenceDate = value || defaultMonth || new Date();
20+
if (!isDateValid(referenceDate)) {
2421
// eslint-disable-next-line no-console
25-
console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);
22+
console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
23+
referenceDate = new Date();
2624
}
27-
const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();
2825

2926
const [monthOffset, setMonthOffset] = useState(0);
3027

@@ -36,7 +33,7 @@ export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((pro
3633
setMonthOffset(0);
3734
};
3835

39-
const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();
36+
const selectedMonth = addMonthResetDay(referenceDate, monthOffset);
4037

4138
return (
4239
<DatePickerControlled

‎packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx‎

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { forwardRef } from 'react';
2-
import moment from 'moment';
32
import classNames from 'classnames';
43
import { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';
54
import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
6-
import { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';
75
import { Comp } from '@lumx/react/utils/type';
6+
import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
7+
import { isSameDay } from '@lumx/react/utils/date/isSameDay';
8+
import { formatMonthYear } from '@lumx/react/utils/date/formatMonthYear';
9+
import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
810
import { CLASSNAME } from './constants';
911

1012
/**
@@ -45,14 +47,10 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
4547
todayOrSelectedDateRef,
4648
value,
4749
} = props;
48-
const days = React.useMemo(() => {
49-
return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));
50+
const { weeks, weekDays } = React.useMemo(() => {
51+
return getMonthCalendar(locale, selectedMonth, minDate, maxDate);
5052
}, [locale, minDate, maxDate, selectedMonth]);
5153

52-
const weekDays = React.useMemo(() => {
53-
return getWeekDays(locale);
54-
}, [locale]);
55-
5654
return (
5755
<div ref={ref} className={`${CLASSNAME}`}>
5856
<Toolbar
@@ -73,51 +71,44 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
7371
onClick={onPrevMonthChange}
7472
/>
7573
}
76-
label={
77-
<span className={`${CLASSNAME}__month`}>
78-
{moment(selectedMonth).locale(locale).format('MMMM YYYY')}
79-
</span>
80-
}
74+
label={<span className={`${CLASSNAME}__month`}>{formatMonthYear(selectedMonth, locale)}</span>}
8175
/>
8276
<div className={`${CLASSNAME}__calendar`}>
8377
<div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>
84-
{weekDays.map((weekDay) => (
85-
<div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>
86-
<span className={`${CLASSNAME}__week-day`}>
87-
{weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}
88-
</span>
78+
{weekDays.map(({ letter, number }) => (
79+
<div key={number} className={`${CLASSNAME}__day-wrapper`}>
80+
<span className={`${CLASSNAME}__week-day`}>{letter.toLocaleUpperCase()}</span>
8981
</div>
9082
))}
9183
</div>
9284

9385
<div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>
94-
{days.map((annotatedDate) => {
95-
if (annotatedDate.isDisplayed) {
86+
{weeks.flatMap((week, weekIndex) => {
87+
return weekDays.map((weekDay, dayIndex) => {
88+
const { date, isOutOfRange } = week[weekDay.number] || {};
89+
const key = `${weekIndex}-${dayIndex}`;
90+
const isToday = !isOutOfRange && date && isSameDay(date, new Date());
91+
const isSelected = date && value && isSameDay(value, date);
92+
9693
return (
97-
<div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>
98-
<button
99-
ref={
100-
(value && annotatedDate.date.isSame(value, 'day')) ||
101-
(!value && annotatedDate.isToday)
102-
? todayOrSelectedDateRef
103-
: null
104-
}
105-
className={classNames(`${CLASSNAME}__month-day`, {
106-
[`${CLASSNAME}__month-day--is-selected`]:
107-
value && annotatedDate.date.isSame(value, 'day'),
108-
[`${CLASSNAME}__month-day--is-today`]:
109-
annotatedDate.isClickable && annotatedDate.isToday,
110-
})}
111-
disabled={!annotatedDate.isClickable}
112-
type="button"
113-
onClick={() => onChange(moment(annotatedDate.date).toDate())}
114-
>
115-
<span>{annotatedDate.date.format('DD')}</span>
116-
</button>
94+
<div key={key} className={`${CLASSNAME}__day-wrapper`}>
95+
{date && (
96+
<button
97+
ref={isSelected || (!value && isToday) ? todayOrSelectedDateRef : null}
98+
className={classNames(`${CLASSNAME}__month-day`, {
99+
[`${CLASSNAME}__month-day--is-selected`]: isSelected,
100+
[`${CLASSNAME}__month-day--is-today`]: isToday,
101+
})}
102+
disabled={isOutOfRange}
103+
type="button"
104+
onClick={() => onChange(date)}
105+
>
106+
<span>{formatDayNumber(date, locale)}</span>
107+
</button>
108+
)}
117109
</div>
118110
);
119-
}
120-
return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;
111+
});
121112
})}
122113
</div>
123114
</div>

‎packages/lumx-react/src/components/date-picker/DatePickerField.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';
2-
import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
3-
4-
import moment from 'moment';
5-
61
import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
72

3+
import { DatePicker, IconButtonProps, Placement, Popover, TextField } from '@lumx/react';
4+
import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
85
import { useFocus } from '@lumx/react/hooks/useFocus';
96
import { Comp, GenericProps } from '@lumx/react/utils/type';
7+
import { formatDate } from '@lumx/react/utils/date/formatDate';
108

119
/**
1210
* Defines the props of the component.
@@ -105,7 +103,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
105103
name={name}
106104
forceFocusStyle={isOpen}
107105
textFieldRef={anchorRef}
108-
value={value ? moment(value).locale(locale).format('LL') : ''}
106+
value={value ? formatDate(value, locale) : ''}
109107
onClick={toggleSimpleMenu}
110108
onChange={onTextFieldChange}
111109
onKeyPress={handleKeyboardNav}

‎packages/lumx-react/src/utils/date/addMonthResetDay.test.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
2+
3+
describe(addMonthResetDay.name, () => {
4+
it('should add month to date', () => {
5+
const actual = addMonthResetDay(new Date('2017-01-30'), 1);
6+
expect(actual).toEqual(new Date('2017-02-01'));
7+
});
8+
9+
it('should remove months to date', () => {
10+
const actual = addMonthResetDay(new Date('2017-01-30'), -2);
11+
expect(actual).toEqual(new Date('2016-11-01'));
12+
});
13+
});

‎packages/lumx-react/src/utils/date/addMonthResetDay.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Add a number of months from a date while resetting the day to prevent month length mismatches.
3+
*/
4+
export function addMonthResetDay(date: Date, monthOffset: number) {
5+
const newDate = new Date(date.getTime());
6+
newDate.setDate(1);
7+
newDate.setMonth(date.getMonth() + monthOffset);
8+
return newDate;
9+
}

‎packages/lumx-react/src/utils/date/formatDate.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Standard date format based on locale.
3+
*/
4+
export const formatDate = (value: Date, locale: string | undefined) =>
5+
value.toLocaleDateString(locale, {
6+
year: 'numeric',
7+
month: 'long',
8+
day: 'numeric',
9+
});

0 commit comments

Comments
 (0)