Skip to content

Commit 1896845

Browse files
stomitastomita
authored
Merge pull request #421 from mashmatrix/replace-momentjs
Replace moment.js to day.js
2 parents 57b4c00 + 7bad032 commit 1896845

File tree

5 files changed

+57
-43
lines changed

5 files changed

+57
-43
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
"dependencies": {
5252
"@babel/runtime": "^7.17.9",
5353
"classnames": "^2.3.1",
54+
"dayjs": "^1.11.2",
5455
"keycoder": "^1.1.1",
55-
"moment": "^2.13.0",
5656
"nanoid": "^3.3.4",
5757
"react-merge-refs": "^1.1.0",
5858
"react-relative-portal": "github:stomita/react-relative-portal#dist",

‎src/scripts/DateInput.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import React, {
1010
useContext,
1111
} from 'react';
1212
import classnames from 'classnames';
13-
import moment from 'moment';
13+
import dayjs from 'dayjs';
14+
import localizedFormat from 'dayjs/plugin/localizedFormat';
1415
import { Button } from './Button';
1516
import { FormElement } from './FormElement';
1617
import { Input, InputProps } from './Input';
@@ -26,6 +27,11 @@ import {
2627
} from './hooks';
2728
import { createFC } from './common';
2829

30+
/**
31+
*
32+
*/
33+
dayjs.extend(localizedFormat);
34+
2935
/**
3036
*
3137
*/
@@ -165,13 +171,13 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
165171
const [value, setValue] = useControlledValue(value_, defaultValue ?? null);
166172
const valueFormat = includeTime ? 'YYYY-MM-DDTHH:mm:ss.SSSZ' : 'YYYY-MM-DD';
167173
const inputValueFormat = dateFormat || (includeTime ? 'L HH:mm' : 'L');
168-
const mvalue = moment(value ?? undefined, valueFormat);
174+
const dvalue = dayjs(value ?? undefined, valueFormat);
169175
const [inputValue_, setInputValue] = useState<string | null>(null);
170176
const inputValue =
171177
inputValue_ != null
172178
? inputValue_
173-
: value != null && mvalue.isValid()
174-
? mvalue.format(inputValueFormat)
179+
: value != null && dvalue.isValid()
180+
? dvalue.format(inputValueFormat)
175181
: '';
176182

177183
const elRef = useRef<HTMLDivElement | null>(null);
@@ -195,9 +201,9 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
195201
if (!inputValue) {
196202
newValue = '';
197203
} else {
198-
const mvalue = moment(inputValue, inputValueFormat);
199-
if (mvalue.isValid()) {
200-
newValue = mvalue.format(valueFormat);
204+
const dvalue = dayjs(inputValue, inputValueFormat);
205+
if (dvalue.isValid()) {
206+
newValue = dvalue.format(valueFormat);
201207
} else {
202208
newValue = '';
203209
}
@@ -217,9 +223,9 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
217223
const showDatepicker = useEventCallback(() => {
218224
let newValue = value;
219225
if (inputValue != null) {
220-
const mvalue = moment(inputValue, inputValueFormat);
221-
if (mvalue.isValid()) {
222-
newValue = mvalue.format(valueFormat);
226+
const dvalue = dayjs(inputValue, inputValueFormat);
227+
if (dvalue.isValid()) {
228+
newValue = dvalue.format(valueFormat);
223229
}
224230
}
225231
setOpened(true);
@@ -280,7 +286,7 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
280286
);
281287

282288
const onDatepickerSelect = useEventCallback((dvalue: string) => {
283-
const value = moment(dvalue).format(valueFormat);
289+
const value = dayjs(dvalue).format(valueFormat);
284290
onChangeValue(value);
285291
setInputValue(null);
286292
setTimeout(() => {
@@ -342,7 +348,7 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
342348
portalClassName={className}
343349
elementRef={datepickerRef}
344350
dateValue={
345-
mvalue.isValid() ? mvalue.format('YYYY-MM-DD') : undefined
351+
dvalue.isValid() ? dvalue.format('YYYY-MM-DD') : undefined
346352
}
347353
minDate={minDate}
348354
maxDate={maxDate}

‎src/scripts/Datepicker.tsx‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,21 @@ import React, {
1414
useState,
1515
} from 'react';
1616
import classnames from 'classnames';
17-
import moment from 'moment';
17+
import dayjs from 'dayjs';
18+
import weekday from 'dayjs/plugin/weekday';
19+
import localeData from 'dayjs/plugin/localeData';
1820
import { Button } from './Button';
1921
import { Select, Option } from './Select';
2022
import { getToday, isElInChildren } from './util';
2123
import { ComponentSettingsContext } from './ComponentSettings';
2224
import { useEventCallback, useMergeRefs } from './hooks';
2325

26+
/**
27+
*
28+
*/
29+
dayjs.extend(weekday);
30+
dayjs.extend(localeData);
31+
2432
/**
2533
*
2634
*/
@@ -42,12 +50,12 @@ type Calendar = {
4250
function createCalendarObject(date?: string, mnDate?: string, mxDate?: string) {
4351
let minDate;
4452
let maxDate;
45-
let d = moment(date, 'YYYY-MM-DD');
53+
let d = dayjs(date, 'YYYY-MM-DD');
4654
if (!d.isValid()) {
47-
d = moment(getToday(), 'YYYY-MM-DD');
55+
d = dayjs(getToday(), 'YYYY-MM-DD');
4856
}
4957
if (mnDate) {
50-
const minD = moment(mnDate, 'YYYY-MM-DD');
58+
const minD = dayjs(mnDate, 'YYYY-MM-DD');
5159
if (minD.isValid()) {
5260
minDate = {
5361
year: minD.year(),
@@ -58,7 +66,7 @@ function createCalendarObject(date?: string, mnDate?: string, mxDate?: string) {
5866
}
5967
}
6068
if (mxDate) {
61-
const maxD = moment(mxDate, 'YYYY-MM-DD');
69+
const maxD = dayjs(mxDate, 'YYYY-MM-DD');
6270
if (maxD.isValid()) {
6371
maxDate = {
6472
year: maxD.year(),
@@ -70,8 +78,8 @@ function createCalendarObject(date?: string, mnDate?: string, mxDate?: string) {
7078
}
7179
const year = d.year();
7280
const month = d.month();
73-
const first = moment(d).startOf('month').startOf('week');
74-
const last = moment(d).endOf('month').endOf('week');
81+
const first = dayjs(d).startOf('month').startOf('week');
82+
const last = dayjs(d).endOf('month').endOf('week');
7583
const weeks = [];
7684
let days = [];
7785
for (let dd = first; dd.isBefore(last); dd = dd.add(1, 'd')) {
@@ -144,7 +152,7 @@ const DatepickerFilter: FC<DatepickerFilterProps> = (props) => {
144152
onClick={onPrevMonth}
145153
/>
146154
</div>
147-
<h2 className='slds-align-middle'>{moment.monthsShort()[cal.month]}</h2>
155+
<h2 className='slds-align-middle'>{dayjs.monthsShort()[cal.month]}</h2>
148156
<div className='slds-align-middle'>
149157
<Button
150158
className='slds-align-middle'
@@ -218,15 +226,15 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
218226
let selectable = true;
219227
let enabled = date.year === cal.year && date.month === cal.month;
220228
if (cal.minDate) {
221-
const min = moment(date.value, 'YYYY-MM-DD').isAfter(
222-
moment(cal.minDate.value, 'YYYY-MM-DD')
229+
const min = dayjs(date.value, 'YYYY-MM-DD').isAfter(
230+
dayjs(cal.minDate.value, 'YYYY-MM-DD')
223231
);
224232
selectable = selectable && min;
225233
enabled = enabled && min;
226234
}
227235
if (cal.maxDate) {
228-
const max = moment(date.value, 'YYYY-MM-DD').isBefore(
229-
moment(cal.maxDate.value, 'YYYY-MM-DD')
236+
const max = dayjs(date.value, 'YYYY-MM-DD').isBefore(
237+
dayjs(cal.maxDate.value, 'YYYY-MM-DD')
230238
);
231239
selectable = selectable && max;
232240
enabled = enabled && max;
@@ -241,7 +249,7 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
241249
return (
242250
<td
243251
className={dateClassName}
244-
headers={moment.weekdays(dayIndex)}
252+
headers={dayjs().weekday(dayIndex).format('ddd')}
245253
role='gridcell'
246254
aria-disabled={!enabled}
247255
aria-selected={selected}
@@ -292,10 +300,10 @@ const DatepickerMonth = forwardRef(
292300
>
293301
<thead>
294302
<tr>
295-
{moment.weekdaysMin(true).map((wd, i) => (
303+
{dayjs.weekdaysMin(true).map((wd, i) => (
296304
// eslint-disable-next-line react/no-array-index-key
297305
<th key={i}>
298-
<abbr title={moment.weekdays(true, i)}>{wd}</abbr>
306+
<abbr title={dayjs().weekday(i).format('ddd')}>{wd}</abbr>
299307
</th>
300308
))}
301309
</tr>
@@ -406,20 +414,20 @@ export const Datepicker: FC<DatepickerProps> = (props) => {
406414
e.stopPropagation();
407415
} else if (e.keyCode >= 37 && e.keyCode <= 40) {
408416
// cursor key
409-
let m;
417+
let d;
410418
if (e.keyCode === 37) {
411-
m = moment(targetDate).add(-1, e.shiftKey ? 'months' : 'days');
419+
d = dayjs(targetDate).add(-1, e.shiftKey ? 'months' : 'days');
412420
} else if (e.keyCode === 39) {
413421
// right arrow key
414-
m = moment(targetDate).add(1, e.shiftKey ? 'months' : 'days');
422+
d = dayjs(targetDate).add(1, e.shiftKey ? 'months' : 'days');
415423
} else if (e.keyCode === 38) {
416424
// up arrow key
417-
m = moment(targetDate).add(-1, e.shiftKey ? 'years' : 'weeks');
425+
d = dayjs(targetDate).add(-1, e.shiftKey ? 'years' : 'weeks');
418426
} else if (e.keyCode === 40) {
419427
// down arrow key
420-
m = moment(targetDate).add(1, e.shiftKey ? 'years' : 'weeks');
428+
d = dayjs(targetDate).add(1, e.shiftKey ? 'years' : 'weeks');
421429
}
422-
const newTargetDate = m?.format('YYYY-MM-DD') ?? targetDate;
430+
const newTargetDate = d?.format('YYYY-MM-DD') ?? targetDate;
423431
setTargetDate(newTargetDate);
424432
setFocusDate(true);
425433
e.preventDefault();
@@ -438,15 +446,15 @@ export const Datepicker: FC<DatepickerProps> = (props) => {
438446

439447
const onYearChange = useEventCallback(
440448
(e: React.ChangeEvent<HTMLSelectElement>) => {
441-
const newTargetDate = moment(targetDate)
449+
const newTargetDate = dayjs(targetDate)
442450
.year(Number(e.target.value))
443451
.format('YYYY-MM-DD');
444452
setTargetDate(newTargetDate);
445453
}
446454
);
447455

448456
const onMonthChange = useEventCallback((month: number) => {
449-
const newTargetDate = moment(targetDate)
457+
const newTargetDate = dayjs(targetDate)
450458
.add(month, 'months')
451459
.format('YYYY-MM-DD');
452460
setTargetDate(newTargetDate);

‎stories/Datepicker.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ComponentProps, useCallback } from 'react';
2-
import moment from 'moment';
2+
import dayjs from 'dayjs';
33
import { Datepicker, Button } from '../src/scripts';
44
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
55
import { containerDecorator } from './util';
@@ -11,7 +11,7 @@ const TodayButtonExtensionRenderer = (props: {
1111
onSelect?: (date: string) => void;
1212
}) => {
1313
const { onSelect } = props;
14-
const today = moment().format('YYYY-MM-DD');
14+
const today = dayjs().format('YYYY-MM-DD');
1515
const onSelectToday = useCallback(() => {
1616
onSelect?.(today);
1717
}, [onSelect, today]);

‎yarn.lock‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5298,6 +5298,11 @@ date-now@^0.1.4:
52985298
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
52995299
integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
53005300

5301+
dayjs@^1.11.2:
5302+
version "1.11.2"
5303+
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
5304+
integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
5305+
53015306
debounce@^1.0.0:
53025307
version "1.2.0"
53035308
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
@@ -9193,11 +9198,6 @@ mkdirp@^1.0.0, mkdirp@^1.0.3, mkdirp@^1.0.4:
91939198
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
91949199
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
91959200

9196-
moment@^2.13.0:
9197-
version "2.24.0"
9198-
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
9199-
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
9200-
92019201
move-concurrently@^1.0.1:
92029202
version "1.0.1"
92039203
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"

0 commit comments

Comments
 (0)