EN · DE · RU · FR · ES
← Index · ← Index des fichiers · ← Précédent · Suivant → · 📄 source

#2656 : DateTimeRange.jsx

projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx Composant React, projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx 270 lignes · 250 code · 0 commentaires · 20 vides
Objectif : Application web React : DateTimeRange.jsx. DateTimeRange.jsx fait partie de l'application open-source de gestion de projet ProjectForge.

Source (100 premières lignes)

import classNames from 'classnames';
import moment from 'moment';
import 'moment/min/locales';
import PropTypes from 'prop-types';
import React from 'react';
import { DayPicker } from 'react-day-picker';
import { useSelector } from 'react-redux';
import { Col, Row } from '../..';
import { getTranslation } from '../../../../utilities/layout';
import style from './CalendarInput.module.scss';
import TimeRange from './TimeRange';

function DateTimeRange(
    {
        from,
        hideTimeInput = false,
        id,
        onChange,
        selectors,
        setFrom,
        setTo,
        to,
        translations = {},
        ...props
    },
) {
    const firstDayOfWeek = useSelector((state) => state.authentication.user.firstDayOfWeekNo) || 1;
    const locale = useSelector((state) => state.authentication.user.locale) || 'en';
    const timeNotation = useSelector((state) => state.authentication.user.timeNotation) || 'H24';
    const [quickSelector, setQuickSelector] = React.useState(undefined);

    const handleQuickSelectorClick = (interval) => () => {
        setQuickSelector(interval);

        const newFrom = new Date();

        switch (interval) {
            case 'LAST_MINUTE':
                newFrom.setMinutes(newFrom.getMinutes() - 1);
                break;
            case 'LAST_MINUTES_10':
                newFrom.setMinutes(newFrom.getMinutes() - 10);
                break;
            case 'LAST_MINUTES_30':
                newFrom.setMinutes(newFrom.getMinutes() - 30);
                break;
            case 'LAST_HOUR':
                newFrom.setHours(newFrom.getHours() - 1);
                break;
            case 'LAST_HOURS_4':
                newFrom.setHours(newFrom.getHours() - 4);
                break;
            case 'TODAY':
                newFrom.setHours(0);
                newFrom.setMinutes(0);
                break;
            case 'SINCE_YESTERDAY':
                newFrom.setHours(0);
                newFrom.setMinutes(0);
                newFrom.setDate(newFrom.getDate() - 1);
                break;
            case 'LAST_DAYS_3':
                newFrom.setDate(newFrom.getDate() - 3);
                break;
            case 'LAST_DAYS_7':
                newFrom.setDate(newFrom.getDate() - 7);
                break;
            case 'LAST_DAYS_30':
                newFrom.setDate(newFrom.getDate() - 30);
                break;
            case 'LAST_DAYS_90':
                newFrom.setDate(newFrom.getDate() - 90);
                break;
            default:
        }

        onChange({
            from: newFrom,
            to: new Date(),
        });
    };

    const handleDayClick = (day) => {
        setQuickSelector();

        const newRange = {
            from,
            to,
        };

        if (!from || day < from) {
            newRange.from = day;
            if (from) {
                newRange.from.setHours(from.getHours());
                newRange.from.setMinutes(from.getMinutes());
            } else {
                newRange.from.setHours(0);
            }
        } else {
            newRange.to = day;

Historique Git

bf988bc6d Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs
f867698d3 wip : mise à jour des versions des packages
3685edd6c migration vers React 18 wip
36bfe1dbe Nouvelle version React, eslint révisé par Fin.
c23bfbdf5 es-lint : révision avec Fin requise.

bf988bc6d

Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs 
bf988bc6d14252863c2a7a54c409c947fb9feb7b
diff --git a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
index 327602d77..20cd9405d 100644
--- a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
@@ -4,7 +4,7 @@ import 'moment/min/locales';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DayPicker } from 'react-day-picker';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Col, Row } from '../..';
 import { getTranslation } from '../../../../utilities/layout';
 import style from './CalendarInput.module.scss';
@@ -12,21 +12,21 @@ import TimeRange from './TimeRange';
 
 function DateTimeRange(
     {
-        firstDayOfWeek = 1,
         from,
         hideTimeInput = false,
         id,
-        locale = 'en',
         onChange,
         selectors,
         setFrom,
         setTo,
-        timeNotation = 'H24',
-        translations = {},
         to,
+        translations = {},
         ...props
     },
 ) {
+    const firstDayOfWeek = useSelector((state) => state.authentication.user.firstDayOfWeekNo) || 1;
+    const locale = useSelector((state) => state.authentication.user.locale) || 'en';
+    const timeNotation = useSelector((state) => state.authentication.user.timeNotation) || 'H24';
     const [quickSelector, setQuickSelector] = React.useState(undefined);
 
     const handleQuickSelectorClick = (interval) => () => {
@@ -259,21 +259,12 @@ DateTimeRange.propTypes = {
     onChange: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
     hideTimeInput: PropTypes.bool,
-    firstDayOfWeek: PropTypes.number,
     from: PropTypes.instanceOf(Date),
-    locale: PropTypes.string,
     setFrom: PropTypes.func,
     setTo: PropTypes.func,
     selectors: PropTypes.arrayOf(PropTypes.string),
-    timeNotation: PropTypes.string,
     translations: PropTypes.shape({}),
     to: PropTypes.instanceOf(Date),
 };
-
-const mapStateToProps = ({ authentication }) => ({
-    firstDayOfWeek: authentication.user.firstDayOfWeekNo,
-    locale: authentication.user.locale,
-    timeNotation: authentication.user.timeNotation,
-});

f867698d3

wip : mise à jour des versions des packages 
f867698d30e539955cc1dd9aacc4986234ff36f2
diff --git a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
index e8e5a78a5..327602d77 100644
--- a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
@@ -3,8 +3,7 @@ import moment from 'moment';
 import 'moment/min/locales';
 import PropTypes from 'prop-types';
 import React from 'react';
-import DayPicker from 'react-day-picker';
-import MomentLocaleUtils from 'react-day-picker/moment';
+import { DayPicker } from 'react-day-picker';
 import { connect } from 'react-redux';
 import { Col, Row } from '../..';
 import { getTranslation } from '../../../../utilities/layout';
@@ -235,7 +234,6 @@ function DateTimeRange(
                     className="range"
                     firstDayOfWeek={firstDayOfWeek}
                     locale={locale}
-                    localeUtils={MomentLocaleUtils}
                     modifiers={{
                         start: from,
                         end: to,

3685edd6c

migration vers React 18 wip 
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
index 6a51c5c04..e8e5a78a5 100644
--- a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
@@ -13,16 +13,17 @@ import TimeRange from './TimeRange';
 
 function DateTimeRange(
     {
-        firstDayOfWeek,
+        firstDayOfWeek = 1,
         from,
-        hideTimeInput,
+        hideTimeInput = false,
         id,
-        locale,
+        locale = 'en',
         onChange,
         selectors,
         setFrom,
         setTo,
-        translations,
+        timeNotation = 'H24',
+        translations = {},
         to,
         ...props
     },
@@ -248,6 +249,7 @@ function DateTimeRange(
                         from,
                         to,
                     }]}
+                    timeNotation={timeNotation}
                     {...props}
                 />
             </Col>
@@ -270,19 +272,6 @@ DateTimeRange.propTypes = {
     to: PropTypes.instanceOf(Date),
 };
 
-DateTimeRange.defaultProps = {
-    hideTimeInput: false,
-    firstDayOfWeek: 1,
-    from: undefined,
-    locale: 'en',
-    setFrom: undefined,
-    setTo: undefined,
-    selectors: undefined,
-    timeNotation: 'H24',
-    translations: {},
-    to: undefined,
-};
-
 const mapStateToProps = ({ authentication }) => ({
     firstDayOfWeek: authentication.user.firstDayOfWeekNo,
     locale: authentication.user.locale,

36bfe1dbe

Nouvelle version React, eslint révisé par Fin. 
36bfe1dbe1091ce01c65ef320ec3610e7d3f3900
diff --git a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
index f596c0acc..6a51c5c04 100644
--- a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
@@ -248,7 +248,6 @@ function DateTimeRange(
                         from,
                         to,
                     }]}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...props}
                 />
             </Col>

c23bfbdf5

es-lint : révision avec Fin requise. 
c23bfbdf5b54c9e3c7c3b2537375d9fb255a2730
diff --git a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
index ecf67f410..f596c0acc 100644
--- a/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/DateTimeRange.jsx
@@ -29,7 +29,7 @@ function DateTimeRange(
 ) {
     const [quickSelector, setQuickSelector] = React.useState(undefined);
 
-    const handleQuickSelectorClick = interval => () => {
+    const handleQuickSelectorClick = (interval) => () => {
         setQuickSelector(interval);
 
         const newFrom = new Date();
@@ -195,7 +195,7 @@ function DateTimeRange(
             {selectors && selectors.includes('UNTIL_NOW') && (
                 <Col sm={3}>
                     <ul className={style.quickSelectors}>
-                        {quickSelectors.map(selector => (
+                        {quickSelectors.map((selector) => (
                             <li
                                 className={classNames(
                                     style.quickSelector,
@@ -248,6 +248,7 @@ function DateTimeRange(
                         from,
                         to,
                     }]}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...props}
                 />
             </Col>