From 22370b13e49a4a5f58a60ebd4bc40ce4b141eb11 Mon Sep 17 00:00:00 2001 From: Martin Jagodic Date: Thu, 23 Nov 2023 12:48:58 +0100 Subject: [PATCH] perf: replace moment with dayjs (#6980) * perf: replace moment with dayjs - replace react-datetime with datetime-local input * fix: format code * feat: add clear button to datetime widget --- package.json | 1 + packages/decap-cms-app/package.json | 2 +- packages/decap-cms-app/src/index.js | 4 +- packages/decap-cms-core/package.json | 2 +- .../src/components/Workflow/WorkflowList.js | 6 +- packages/decap-cms-core/src/formats/toml.ts | 4 +- packages/decap-cms-core/src/lib/formatters.ts | 2 +- .../decap-cms-default-exports/package.json | 2 +- .../decap-cms-default-exports/src/index.js | 4 +- packages/decap-cms-lib-widgets/package.json | 4 +- .../src/stringTemplate.ts | 10 +- packages/decap-cms-locales/src/bg/index.js | 1 + packages/decap-cms-locales/src/ca/index.js | 1 + packages/decap-cms-locales/src/cs/index.js | 1 + packages/decap-cms-locales/src/da/index.js | 1 + packages/decap-cms-locales/src/de/index.js | 1 + packages/decap-cms-locales/src/en/index.js | 1 + packages/decap-cms-locales/src/es/index.js | 1 + packages/decap-cms-locales/src/fr/index.js | 1 + packages/decap-cms-locales/src/he/index.js | 1 + packages/decap-cms-locales/src/hr/index.js | 1 + packages/decap-cms-locales/src/ja/index.js | 1 + packages/decap-cms-locales/src/ko/index.js | 1 + packages/decap-cms-locales/src/lt/index.js | 1 + packages/decap-cms-locales/src/nb_no/index.js | 1 + packages/decap-cms-locales/src/nl/index.js | 1 + packages/decap-cms-locales/src/nn_no/index.js | 1 + packages/decap-cms-locales/src/pl/index.js | 1 + packages/decap-cms-locales/src/pt/index.js | 1 + packages/decap-cms-locales/src/ro/index.js | 1 + packages/decap-cms-locales/src/ru/index.js | 1 + packages/decap-cms-locales/src/sl/index.js | 1 + packages/decap-cms-locales/src/sv/index.js | 1 + packages/decap-cms-locales/src/th/index.js | 1 + packages/decap-cms-locales/src/tr/index.js | 1 + packages/decap-cms-locales/src/vi/index.js | 1 + .../decap-cms-locales/src/zh_Hans/index.js | 1 + .../decap-cms-locales/src/zh_Hant/index.js | 1 + .../decap-cms-widget-datetime/package.json | 4 +- .../src/DateTimeControl.js | 109 ++++++------------ scripts/externals.js | 12 +- scripts/webpack.js | 7 +- yarn.lock | 14 +-- 43 files changed, 93 insertions(+), 121 deletions(-) diff --git a/package.json b/package.json index d5d65745e816..0da8d120fdca 100644 --- a/package.json +++ b/package.json @@ -186,6 +186,7 @@ "@emotion/babel-preset-css-prop": "^11.11.0", "browserify": "^17.0.0", "buffer": "^6.0.3", + "dayjs": "^1.11.10", "emotion": "^11.0.0", "eslint-config-prettier": "^8.0.0", "eslint-plugin-babel": "^5.3.0", diff --git a/packages/decap-cms-app/package.json b/packages/decap-cms-app/package.json index f8b24c3fad72..81b54e4a11d9 100644 --- a/packages/decap-cms-app/package.json +++ b/packages/decap-cms-app/package.json @@ -60,12 +60,12 @@ "decap-cms-widget-text": "^3.1.0-beta.0", "immutable": "^3.7.6", "lodash": "^4.17.11", - "moment": "^2.24.0", "prop-types": "^15.7.2", "react-immutable-proptypes": "^2.1.0", "uuid": "^8.3.2" }, "peerDependencies": { + "dayjs": "^1.11.10", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/packages/decap-cms-app/src/index.js b/packages/decap-cms-app/src/index.js index cfd6fcba7e10..9545ebc35a49 100644 --- a/packages/decap-cms-app/src/index.js +++ b/packages/decap-cms-app/src/index.js @@ -1,5 +1,5 @@ import { DecapCmsCore as CMS } from 'decap-cms-core'; -import moment from 'moment'; +import dayjs from 'dayjs'; import './extensions.js'; // Log version @@ -11,6 +11,6 @@ if (typeof window !== 'undefined') { export const DecapCmsApp = { ...CMS, - moment, + dayjs, }; export default CMS; diff --git a/packages/decap-cms-core/package.json b/packages/decap-cms-core/package.json index 6092ad6e4997..38169706e3ed 100644 --- a/packages/decap-cms-core/package.json +++ b/packages/decap-cms-core/package.json @@ -77,6 +77,7 @@ "peerDependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "dayjs": "^1.11.10", "decap-cms-editor-component-image": "^3.0.0", "decap-cms-lib-auth": "^3.0.0", "decap-cms-lib-util": "^3.0.0", @@ -84,7 +85,6 @@ "decap-cms-ui-default": "^3.0.0", "immutable": "^3.7.6", "lodash": "^4.17.11", - "moment": "^2.24.0", "prop-types": "^15.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/decap-cms-core/src/components/Workflow/WorkflowList.js b/packages/decap-cms-core/src/components/Workflow/WorkflowList.js index 18fd2dc99b69..7d929b2f6cb9 100644 --- a/packages/decap-cms-core/src/components/Workflow/WorkflowList.js +++ b/packages/decap-cms-core/src/components/Workflow/WorkflowList.js @@ -3,7 +3,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { translate } from 'react-polyglot'; import { colors, lengths } from 'decap-cms-ui-default'; @@ -205,9 +205,7 @@ class WorkflowList extends React.Component { return (
{entries.map(entry => { - const timestamp = moment(entry.get('updatedOn')).format( - t('workflow.workflow.dateFormat'), - ); + const timestamp = dayjs(entry.get('updatedOn')).format(t('workflow.workflow.dateFormat')); const slug = entry.get('slug'); const collectionName = entry.get('collection'); const editLink = `collections/${collectionName}/entries/${slug}?ref=workflow`; diff --git a/packages/decap-cms-core/src/formats/toml.ts b/packages/decap-cms-core/src/formats/toml.ts index a1b8a1413ba9..dff2050ba7c5 100644 --- a/packages/decap-cms-core/src/formats/toml.ts +++ b/packages/decap-cms-core/src/formats/toml.ts @@ -1,12 +1,12 @@ import toml from '@iarna/toml'; import tomlify from 'tomlify-j0.4'; -import moment from 'moment'; +import dayjs from 'dayjs'; import AssetProxy from '../valueObjects/AssetProxy'; import { sortKeys } from './helpers'; function outputReplacer(_key: string, value: unknown) { - if (moment.isMoment(value)) { + if (dayjs.isDayjs(value)) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore return value.format(value._f); diff --git a/packages/decap-cms-core/src/lib/formatters.ts b/packages/decap-cms-core/src/lib/formatters.ts index c64b145ea167..edb37e0ebbd0 100644 --- a/packages/decap-cms-core/src/lib/formatters.ts +++ b/packages/decap-cms-core/src/lib/formatters.ts @@ -195,7 +195,7 @@ export function previewUrlFormatter( compiledPath = compileStringTemplate(pathTemplate, date, slug, fields, processSegment); } catch (err) { // Print an error and ignore `preview_path` if both: - // 1. Date is invalid (according to Moment), and + // 1. Date is invalid (according to DayJs), and // 2. A date expression (eg. `{{year}}`) is used in `preview_path` if (err.name === SLUG_MISSING_REQUIRED_DATE) { console.error(stripIndent` diff --git a/packages/decap-cms-default-exports/package.json b/packages/decap-cms-default-exports/package.json index 658a249d67c9..b3e246b55b73 100644 --- a/packages/decap-cms-default-exports/package.json +++ b/packages/decap-cms-default-exports/package.json @@ -23,12 +23,12 @@ "@emotion/styled": "^11.11.0", "immutable": "^3.7.6", "lodash": "^4.17.11", - "moment": "^2.24.0", "prop-types": "^15.7.2", "react-immutable-proptypes": "^2.1.0", "uuid": "^8.3.2" }, "peerDependencies": { + "dayjs": "^1.11.10", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/packages/decap-cms-default-exports/src/index.js b/packages/decap-cms-default-exports/src/index.js index e582e41028ca..84bbb991a4fe 100644 --- a/packages/decap-cms-default-exports/src/index.js +++ b/packages/decap-cms-default-exports/src/index.js @@ -13,7 +13,7 @@ import EmotionStyled from '@emotion/styled'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Lodash from 'lodash/lodash'; -import Moment from 'moment'; +import Dayjs from 'dayjs'; import PropTypes from 'prop-types'; import React from 'react'; import ReactDOM from 'react-dom'; @@ -35,7 +35,7 @@ export const DecapCmsDefaultExports = { Immutable, ImmutablePropTypes, Lodash, - Moment, + Dayjs, PropTypes, React, ReactDOM, diff --git a/packages/decap-cms-lib-widgets/package.json b/packages/decap-cms-lib-widgets/package.json index a3771e5fa172..e35c4d4629d2 100644 --- a/packages/decap-cms-lib-widgets/package.json +++ b/packages/decap-cms-lib-widgets/package.json @@ -17,8 +17,8 @@ "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\"" }, "peerDependencies": { + "dayjs": "^1.11.10", "immutable": "^3.7.6", - "lodash": "^4.17.11", - "moment": "^2.24.0" + "lodash": "^4.17.11" } } diff --git a/packages/decap-cms-lib-widgets/src/stringTemplate.ts b/packages/decap-cms-lib-widgets/src/stringTemplate.ts index 43f16a16d866..1675756f1db0 100644 --- a/packages/decap-cms-lib-widgets/src/stringTemplate.ts +++ b/packages/decap-cms-lib-widgets/src/stringTemplate.ts @@ -1,6 +1,6 @@ import { Map } from 'immutable'; import { get, trimEnd, truncate } from 'lodash'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { basename, dirname, extname } from 'path'; const filters = [ @@ -11,7 +11,7 @@ const filters = [ }, { pattern: /^date\('(.+)'\)$/, - transform: (str: string, match: RegExpMatchArray) => moment(str).format(match[1]), + transform: (str: string, match: RegExpMatchArray) => dayjs(str).format(match[1]), }, { pattern: /^default\('(.+)'\)$/, @@ -60,9 +60,9 @@ export function parseDateFromEntry(entry: Map, dateFieldName?: } const dateValue = entry.getIn(['data', dateFieldName]); - const dateMoment = dateValue && moment(dateValue); - if (dateMoment && dateMoment.isValid()) { - return dateMoment.toDate(); + const dateDayjs = dateValue && dayjs(dateValue); + if (dateDayjs && dateDayjs.isValid()) { + return dateDayjs.toDate(); } } diff --git a/packages/decap-cms-locales/src/bg/index.js b/packages/decap-cms-locales/src/bg/index.js index f047e9f826a6..9c70a652125d 100644 --- a/packages/decap-cms-locales/src/bg/index.js +++ b/packages/decap-cms-locales/src/bg/index.js @@ -195,6 +195,7 @@ const bg = { }, datetime: { now: 'Сега', + clear: 'Изчисти', }, }, }, diff --git a/packages/decap-cms-locales/src/ca/index.js b/packages/decap-cms-locales/src/ca/index.js index cd4fc94f2a59..0218949ae095 100644 --- a/packages/decap-cms-locales/src/ca/index.js +++ b/packages/decap-cms-locales/src/ca/index.js @@ -193,6 +193,7 @@ const ca = { }, datetime: { now: 'Ara', + clear: 'Netejar', }, }, }, diff --git a/packages/decap-cms-locales/src/cs/index.js b/packages/decap-cms-locales/src/cs/index.js index 96cfcd52c50f..25accc2fa61e 100644 --- a/packages/decap-cms-locales/src/cs/index.js +++ b/packages/decap-cms-locales/src/cs/index.js @@ -194,6 +194,7 @@ const cs = { }, datetime: { now: 'Teď', + clear: 'Vymazat', }, }, }, diff --git a/packages/decap-cms-locales/src/da/index.js b/packages/decap-cms-locales/src/da/index.js index 700352eb281f..6404be48a7db 100644 --- a/packages/decap-cms-locales/src/da/index.js +++ b/packages/decap-cms-locales/src/da/index.js @@ -205,6 +205,7 @@ const da = { }, datetime: { now: 'Nu', + clear: 'Ryd', }, list: { add: 'Tilføj %{item}', diff --git a/packages/decap-cms-locales/src/de/index.js b/packages/decap-cms-locales/src/de/index.js index 5e96416f2776..0fd385cea27f 100644 --- a/packages/decap-cms-locales/src/de/index.js +++ b/packages/decap-cms-locales/src/de/index.js @@ -204,6 +204,7 @@ const de = { }, datetime: { now: 'Jetzt', + clear: 'Löschen', }, list: { add: '%{item} hinzufügen', diff --git a/packages/decap-cms-locales/src/en/index.js b/packages/decap-cms-locales/src/en/index.js index f3f968cd0acb..5cba0d853d43 100644 --- a/packages/decap-cms-locales/src/en/index.js +++ b/packages/decap-cms-locales/src/en/index.js @@ -206,6 +206,7 @@ const en = { }, datetime: { now: 'Now', + clear: 'Clear', }, list: { add: 'Add %{item}', diff --git a/packages/decap-cms-locales/src/es/index.js b/packages/decap-cms-locales/src/es/index.js index 6f49732c1b79..a99fc99ef2b1 100644 --- a/packages/decap-cms-locales/src/es/index.js +++ b/packages/decap-cms-locales/src/es/index.js @@ -159,6 +159,7 @@ const es = { }, datetime: { now: 'Ahora', + clear: 'Limpiar', }, }, }, diff --git a/packages/decap-cms-locales/src/fr/index.js b/packages/decap-cms-locales/src/fr/index.js index ba160efea89f..eb11b2709f60 100644 --- a/packages/decap-cms-locales/src/fr/index.js +++ b/packages/decap-cms-locales/src/fr/index.js @@ -196,6 +196,7 @@ const fr = { }, datetime: { now: 'Maintenant', + clear: 'Effacer', }, list: { add: 'Ajouter %{item}', diff --git a/packages/decap-cms-locales/src/he/index.js b/packages/decap-cms-locales/src/he/index.js index 18237423173b..293266fa0ab2 100644 --- a/packages/decap-cms-locales/src/he/index.js +++ b/packages/decap-cms-locales/src/he/index.js @@ -197,6 +197,7 @@ const he = { }, datetime: { now: 'עכשיו', + clear: 'ניקוי', }, list: { add: 'הוספת %{item}', diff --git a/packages/decap-cms-locales/src/hr/index.js b/packages/decap-cms-locales/src/hr/index.js index aa6c463b7017..96b54ff3dfb6 100644 --- a/packages/decap-cms-locales/src/hr/index.js +++ b/packages/decap-cms-locales/src/hr/index.js @@ -184,6 +184,7 @@ const hr = { }, datetime: { now: 'Sad', + clear: 'Očisti', }, }, }, diff --git a/packages/decap-cms-locales/src/ja/index.js b/packages/decap-cms-locales/src/ja/index.js index db7ba980f041..ff4c85ba8571 100644 --- a/packages/decap-cms-locales/src/ja/index.js +++ b/packages/decap-cms-locales/src/ja/index.js @@ -198,6 +198,7 @@ const ja = { }, datetime: { now: '現時刻', + clear: 'クリア', }, }, }, diff --git a/packages/decap-cms-locales/src/ko/index.js b/packages/decap-cms-locales/src/ko/index.js index 6e8dba0bf997..c7c9e31e19a9 100644 --- a/packages/decap-cms-locales/src/ko/index.js +++ b/packages/decap-cms-locales/src/ko/index.js @@ -205,6 +205,7 @@ const ko = { }, datetime: { now: '현재시각', + clear: '지우기', }, list: { add: '%{item} 추가', diff --git a/packages/decap-cms-locales/src/lt/index.js b/packages/decap-cms-locales/src/lt/index.js index 1b3ce684cfa6..12101ef86fdb 100644 --- a/packages/decap-cms-locales/src/lt/index.js +++ b/packages/decap-cms-locales/src/lt/index.js @@ -186,6 +186,7 @@ const lt = { }, datetime: { now: 'Dabar', + clear: 'Išvalyti', }, }, }, diff --git a/packages/decap-cms-locales/src/nb_no/index.js b/packages/decap-cms-locales/src/nb_no/index.js index d1fa0e2ca5c8..569d2d2688b2 100644 --- a/packages/decap-cms-locales/src/nb_no/index.js +++ b/packages/decap-cms-locales/src/nb_no/index.js @@ -156,6 +156,7 @@ const nb_no = { }, datetime: { now: 'Nå', + clear: 'Nullstill', }, }, }, diff --git a/packages/decap-cms-locales/src/nl/index.js b/packages/decap-cms-locales/src/nl/index.js index 6baefaad427b..5aa89ccf7f87 100644 --- a/packages/decap-cms-locales/src/nl/index.js +++ b/packages/decap-cms-locales/src/nl/index.js @@ -193,6 +193,7 @@ const nl = { }, datetime: { now: 'Nu', + clear: 'Wissen', }, list: { add: 'Voeg %{item} toe', diff --git a/packages/decap-cms-locales/src/nn_no/index.js b/packages/decap-cms-locales/src/nn_no/index.js index c59391d8e159..a42129127251 100644 --- a/packages/decap-cms-locales/src/nn_no/index.js +++ b/packages/decap-cms-locales/src/nn_no/index.js @@ -157,6 +157,7 @@ const nn_no = { }, datetime: { now: 'No', + clear: 'Nullstill', }, }, }, diff --git a/packages/decap-cms-locales/src/pl/index.js b/packages/decap-cms-locales/src/pl/index.js index 3331e2eecf7b..a7b797bb9fea 100644 --- a/packages/decap-cms-locales/src/pl/index.js +++ b/packages/decap-cms-locales/src/pl/index.js @@ -198,6 +198,7 @@ const pl = { }, datetime: { now: 'Teraz', + clear: 'Wyczyść', }, list: { add: 'Dodaj %{item}', diff --git a/packages/decap-cms-locales/src/pt/index.js b/packages/decap-cms-locales/src/pt/index.js index 0031761df1aa..bd05036d65b5 100644 --- a/packages/decap-cms-locales/src/pt/index.js +++ b/packages/decap-cms-locales/src/pt/index.js @@ -199,6 +199,7 @@ const pt = { }, datetime: { now: 'Agora', + clear: 'Limpar', }, list: { add: 'Adicionar %{item}', diff --git a/packages/decap-cms-locales/src/ro/index.js b/packages/decap-cms-locales/src/ro/index.js index 4a4a88294ffb..12a3eab09abe 100644 --- a/packages/decap-cms-locales/src/ro/index.js +++ b/packages/decap-cms-locales/src/ro/index.js @@ -196,6 +196,7 @@ const ro = { }, datetime: { now: 'Acum', + clear: 'Șterge', }, }, }, diff --git a/packages/decap-cms-locales/src/ru/index.js b/packages/decap-cms-locales/src/ru/index.js index f2ec4c3ab020..02dcaedb6400 100644 --- a/packages/decap-cms-locales/src/ru/index.js +++ b/packages/decap-cms-locales/src/ru/index.js @@ -209,6 +209,7 @@ const ru = { }, datetime: { now: 'Сейчас', + clear: 'Очистить', }, list: { add: 'Добавить %{item}', diff --git a/packages/decap-cms-locales/src/sl/index.js b/packages/decap-cms-locales/src/sl/index.js index f9e7dc0b48d0..33266b29c712 100644 --- a/packages/decap-cms-locales/src/sl/index.js +++ b/packages/decap-cms-locales/src/sl/index.js @@ -206,6 +206,7 @@ const sl = { }, datetime: { now: 'Zdaj', + clear: 'Počisti', }, list: { add: 'Dodaj %{item}', diff --git a/packages/decap-cms-locales/src/sv/index.js b/packages/decap-cms-locales/src/sv/index.js index e874cdb41b5e..961d628d6093 100644 --- a/packages/decap-cms-locales/src/sv/index.js +++ b/packages/decap-cms-locales/src/sv/index.js @@ -195,6 +195,7 @@ const sv = { }, datetime: { now: 'Nu', + clear: 'Rensa', }, }, }, diff --git a/packages/decap-cms-locales/src/th/index.js b/packages/decap-cms-locales/src/th/index.js index 89e8a36e277f..72e0f74085fb 100644 --- a/packages/decap-cms-locales/src/th/index.js +++ b/packages/decap-cms-locales/src/th/index.js @@ -167,6 +167,7 @@ const th = { }, datetime: { now: 'เวลาตอนนี้', + clear: 'ล้าง', }, }, }, diff --git a/packages/decap-cms-locales/src/tr/index.js b/packages/decap-cms-locales/src/tr/index.js index 1d46b2b215f0..c6c3358e3b94 100644 --- a/packages/decap-cms-locales/src/tr/index.js +++ b/packages/decap-cms-locales/src/tr/index.js @@ -203,6 +203,7 @@ const tr = { }, datetime: { now: 'Şimdi', + clear: 'Temizle', }, list: { add: '%{item} Ekle', diff --git a/packages/decap-cms-locales/src/vi/index.js b/packages/decap-cms-locales/src/vi/index.js index 8c5c71789ad8..efedd2c081c0 100644 --- a/packages/decap-cms-locales/src/vi/index.js +++ b/packages/decap-cms-locales/src/vi/index.js @@ -165,6 +165,7 @@ const vi = { }, datetime: { now: 'Ngay lúc này', + clear: 'Xóa', }, }, }, diff --git a/packages/decap-cms-locales/src/zh_Hans/index.js b/packages/decap-cms-locales/src/zh_Hans/index.js index e0059feeff25..af1df505f82a 100644 --- a/packages/decap-cms-locales/src/zh_Hans/index.js +++ b/packages/decap-cms-locales/src/zh_Hans/index.js @@ -191,6 +191,7 @@ const zh_Hans = { }, datetime: { now: '现在', + clear: '清除', }, }, }, diff --git a/packages/decap-cms-locales/src/zh_Hant/index.js b/packages/decap-cms-locales/src/zh_Hant/index.js index 1856ce1d6c12..9b1c09ba140f 100644 --- a/packages/decap-cms-locales/src/zh_Hant/index.js +++ b/packages/decap-cms-locales/src/zh_Hant/index.js @@ -174,6 +174,7 @@ const zh_Hant = { }, datetime: { now: '現在', + clear: '清除', }, }, }, diff --git a/packages/decap-cms-widget-datetime/package.json b/packages/decap-cms-widget-datetime/package.json index 1a066231181c..9fcdd9f88517 100644 --- a/packages/decap-cms-widget-datetime/package.json +++ b/packages/decap-cms-widget-datetime/package.json @@ -23,9 +23,7 @@ }, "peerDependencies": { "@emotion/react": "^11.11.1", + "dayjs": "^1.11.10", "react": "^18.2.0" - }, - "dependencies": { - "react-datetime": "^3.1.1" } } diff --git a/packages/decap-cms-widget-datetime/src/DateTimeControl.js b/packages/decap-cms-widget-datetime/src/DateTimeControl.js index 797ec9620744..edff14f8d647 100644 --- a/packages/decap-cms-widget-datetime/src/DateTimeControl.js +++ b/packages/decap-cms-widget-datetime/src/DateTimeControl.js @@ -2,20 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { jsx, css } from '@emotion/react'; -import reactDateTimeStyles from 'react-datetime/css/react-datetime.css'; -import DateTime from 'react-datetime'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { buttons } from 'decap-cms-ui-default'; -function NowButton({ t, handleChange }) { +function Buttons({ t, handleChange }) { return (
+
); } @@ -44,24 +47,10 @@ export default class DateTimeControl extends React.Component { value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), }; - getFormats() { + getFormat() { const { field } = this.props; const format = field.get('format'); - - // dateFormat and timeFormat are strictly for modifying - // input field with the date/time pickers - const dateFormat = field.get('date_format'); - // show time-picker? false hides it, true shows it using default format - let timeFormat = field.get('time_format'); - if (typeof timeFormat === 'undefined') { - timeFormat = true; - } - - return { - format, - dateFormat, - timeFormat, - }; + return format; } getDefaultValue() { @@ -70,15 +59,8 @@ export default class DateTimeControl extends React.Component { return defaultValue; } - getPickerUtc() { - const { field } = this.props; - const pickerUtc = field.get('picker_utc'); - return pickerUtc; - } - - formats = this.getFormats(); + format = this.getFormat(); defaultValue = this.getDefaultValue(); - pickerUtc = this.getPickerUtc(); componentDidMount() { const { value } = this.props; @@ -94,10 +76,9 @@ export default class DateTimeControl extends React.Component { } } - // Date is valid if datetime is a moment or Date object otherwise it's a string. + // Date is valid if datetime is a dayjs or Date object otherwise it's a string. // Handle the empty case, if the user wants to empty the field. - isValidDate = datetime => - moment.isMoment(datetime) || datetime instanceof Date || datetime === ''; + isValidDate = datetime => dayjs.isDayjs(datetime) || datetime instanceof Date || datetime === ''; handleChange = datetime => { /** @@ -108,59 +89,43 @@ export default class DateTimeControl extends React.Component { } const { onChange } = this.props; - const { format } = this.formats; /** * Produce a formatted string only if a format is set in the config. * Otherwise produce a date object. */ - if (format) { - const formattedValue = datetime ? moment(datetime).format(format) : ''; + if (this.format) { + const formattedValue = datetime ? dayjs(datetime).format(this.format) : ''; onChange(formattedValue); } else { - const value = moment.isMoment(datetime) ? datetime.toDate() : datetime; + const value = dayjs.isDayjs(datetime) ? datetime.toDate() : datetime; onChange(value); } }; - onClose = datetime => { - const { setInactiveStyle } = this.props; - - if (!this.isValidDate(datetime)) { - const parsedDate = moment(datetime); - - if (parsedDate.isValid()) { - this.handleChange(datetime); - } else { - window.alert('The date you entered is invalid.'); - } - } - - setInactiveStyle(); - }; - render() { - const { forID, value, classNameWrapper, setActiveStyle, t, isDisabled } = this.props; - const { format, dateFormat, timeFormat } = this.formats; + const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle, t, isDisabled } = + this.props; return (
- this.handleChange(dayjs(e.target.value))} + onFocus={setActiveStyle} + onBlur={setInactiveStyle} + disabled={isDisabled} /> - {!isDisabled && this.handleChange(v)} />} + {!isDisabled && this.handleChange(v)} />}
); } diff --git a/scripts/externals.js b/scripts/externals.js index f0f491d25a65..133fc8768873 100644 --- a/scripts/externals.js +++ b/scripts/externals.js @@ -70,12 +70,12 @@ module.exports = { amd: 'immutable', umd: 'immutable', }, - moment: { - root: ['DecapCmsDefaultExports', 'Moment'], - commonjs2: 'moment', - commonjs: 'moment', - amd: 'moment', - umd: 'moment', + dayjs: { + root: ['DecapCmsDefaultExports', 'Dayjs'], + commonjs2: 'dayjs', + commonjs: 'dayjs', + amd: 'dayjs', + umd: 'dayjs', }, 'prop-types': { root: ['DecapCmsDefaultExports', 'PropTypes'], diff --git a/scripts/webpack.js b/scripts/webpack.js index acd639b39a18..9c1c68a37a79 100644 --- a/scripts/webpack.js +++ b/scripts/webpack.js @@ -28,7 +28,7 @@ function rules() { css: () => [ { test: /\.css$/, - include: ['ol', 'react-toastify', 'react-datetime', 'codemirror'].map(moduleNameToPath), + include: ['ol', 'react-toastify', 'codemirror'].map(moduleNameToPath), use: ['to-string-loader', 'css-loader'], }, ], @@ -56,8 +56,6 @@ function plugins() { return { ignoreEsprima: () => new webpack.IgnorePlugin({ resourceRegExp: /^esprima$/, contextRegExp: /js-yaml/ }), - ignoreMomentOptionalDeps: () => - new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }), friendlyErrors: () => new FriendlyErrorsWebpackPlugin(), buffer: () => new webpack.ProvidePlugin({ @@ -142,9 +140,6 @@ function baseConfig({ target = isProduction ? 'umd' : 'umddir' } = {}) { }, resolve: { extensions: ['.ts', '.tsx', '.js', '.json'], - alias: { - moment$: 'moment/moment.js', - }, fallback: { path: require.resolve('path-browserify'), stream: require.resolve('stream-browserify'), diff --git a/yarn.lock b/yarn.lock index 8a7c9b66caef..4ea57b39db11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7133,7 +7133,7 @@ dateformat@^3.0.0: resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== -dayjs@^1.10.4: +dayjs@^1.10.4, dayjs@^1.11.10: version "1.11.10" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0" integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ== @@ -12471,11 +12471,6 @@ module-deps@^6.2.3: through2 "^2.0.0" xtend "^4.0.0" -moment@^2.24.0: - version "2.29.4" - resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" - integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== - morgan@^1.9.1: version "1.10.0" resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7" @@ -14073,13 +14068,6 @@ react-color@^2.18.1: reactcss "^1.2.0" tinycolor2 "^1.4.1" -react-datetime@^3.1.1: - version "3.2.0" - resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-3.2.0.tgz#fdfa4dced5a9b59724f4c478a1ecc3cb6a6a80cf" - integrity sha512-w5XdeNIGzBht9CadaZIJhKUhEcDTgH0XokKxGPCxeeJRYL7B3HIKA8CM6Q0xej2JFJt0n5d+zi3maMwaY3262A== - dependencies: - prop-types "^15.5.7" - react-dnd-html5-backend@^14.0.0: version "14.1.0" resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz#b35a3a0c16dd3a2bfb5eb7ec62cf0c2cace8b62f"