EN · DE · RU · FR · ES
← Índice · ← Índice de archivos · ← Anterior · Siguiente → · 📄 fuente

#2660: TimeInputUnit.jsx

projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx Componente React, projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx 50 líneas · 44 código · 0 comentarios · 6 en blanco
Propósito: Aplicación web React: TimeInputUnit.jsx. TimeInputUnit.jsx es parte de la aplicación de gestión de proyectos de código abierto ProjectForge.

Fuente (primeras 100 líneas)

import PropTypes from 'prop-types';
import React from 'react';
import { formatTimeUnit } from '../../../../utilities/layout';

function TimeInputUnit(
    {
        children,
        onClick,
        precision = 1,
        selected = -1,
        ...props
    },
) {
    const handleClick = () => onClick(children);

    const distance = children - selected;
    const style = {};

    if (selected >= 0 && Math.abs(distance) < precision) {
        style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
        style.color = '#fff';
        if (distance < 0) {
            style.borderBottomLeftRadius = 0;
            style.borderBottomRightRadius = 0;
        } else if (distance > 0) {
            style.borderTopLeftRadius = 0;
            style.borderTopRightRadius = 0;
        }
    }

    return (
        <li
            style={style}
            onClick={handleClick}
            role="presentation"
            {...props}
        >
            {formatTimeUnit(children)}
        </li>
    );
}

TimeInputUnit.propTypes = {
    children: PropTypes.number.isRequired,
    onClick: PropTypes.func.isRequired,
    precision: PropTypes.number,
    selected: PropTypes.number,
};

export default TimeInputUnit;

Historial Git

3685edd6c actualización a React 18 wip
63678e216 wip: implementar TimeRange
cf67f10dd corregir color de selección en input unit
e0bf4e914 habilitado nuevo selector de intervalo de tiempo
ee7116516 wip: input de tiempo

3685edd6c

actualización a React 18 wip
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index e2e6ad4a5..2c204b414 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -6,8 +6,8 @@ function TimeInputUnit(
     {
         children,
         onClick,
-        precision,
-        selected,
+        precision = 1,
+        selected = -1,
         ...props
     },
 ) {
@@ -47,9 +47,4 @@ TimeInputUnit.propTypes = {
     selected: PropTypes.number,
 };
 
-TimeInputUnit.defaultProps = {
-    precision: 1,
-    selected: -1,
-};
-
 export default TimeInputUnit;

63678e216

wip: implementar TimeRange
63678e216dfa3251a2862423d31df05ee88682d8
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index b032bcf0b..e2e6ad4a5 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { formatTimeUnit } from '../../../../utilities/layout';
 
 function TimeInputUnit(
     {
@@ -15,7 +16,7 @@ function TimeInputUnit(
     const distance = children - selected;
     const style = {};
 
-    if (Math.abs(distance) < precision) {
+    if (selected >= 0 && Math.abs(distance) < precision) {
         style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
         style.color = '#fff';
         if (distance < 0) {
@@ -34,7 +35,7 @@ function TimeInputUnit(
             role="presentation"
             {...props}
         >
-            {children}
+            {formatTimeUnit(children)}
         </li>
     );
 }

cf67f10dd

corregir color de selección en input unit
cf67f10dd45997597ea1f149b91fca9060852bfb
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index 817f8c8e9..b032bcf0b 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -17,6 +17,7 @@ function TimeInputUnit(
 
     if (Math.abs(distance) < precision) {
         style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
+        style.color = '#fff';
         if (distance < 0) {
             style.borderBottomLeftRadius = 0;
             style.borderBottomRightRadius = 0;

e0bf4e914

habilitado nuevo selector de intervalo de tiempo
e0bf4e914b7336dfb5b64a5c077c117b1fbd5a9b
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index a7aa3b42c..817f8c8e9 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -1,26 +1,37 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import style from './CalendarInput.module.scss';
 
 function TimeInputUnit(
     {
         children,
-        className,
         onClick,
+        precision,
         selected,
+        ...props
     },
 ) {
     const handleClick = () => onClick(children);
 
+    const distance = children - selected;
+    const style = {};
+
+    if (Math.abs(distance) < precision) {
+        style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
+        if (distance < 0) {
+            style.borderBottomLeftRadius = 0;
+            style.borderBottomRightRadius = 0;
+        } else if (distance > 0) {
+            style.borderTopLeftRadius = 0;
+            style.borderTopRightRadius = 0;
+        }
+    }
+
     return (
         <li
-            className={classNames(
-                className,
-                { [style.selected]: selected === children },
-            )}
+            style={style}
             onClick={handleClick}
             role="presentation"
+            {...props}
         >
             {children}
         </li>
@@ -30,12 +41,12 @@ function TimeInputUnit(
 TimeInputUnit.propTypes = {
     children: PropTypes.number.isRequired,
     onClick: PropTypes.func.isRequired,
-    className: PropTypes.string,
+    precision: PropTypes.number,
     selected: PropTypes.number,
 };
 
 TimeInputUnit.defaultProps = {

ee7116516

wip: input de tiempo
ee71165161055fa67c721ab00d5c58d6462c2366
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
new file mode 100644
index 000000000..a7aa3b42c
--- /dev/null
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import style from './CalendarInput.module.scss';
+
+function TimeInputUnit(
+    {
+        children,
+        className,
+        onClick,
+        selected,
+    },
+) {
+    const handleClick = () => onClick(children);
+
+    return (
+        <li
+            className={classNames(
+                className,
+                { [style.selected]: selected === children },
+            )}
+            onClick={handleClick}
+            role="presentation"
+        >
+            {children}
+        </li>
+    );
+}
+
+TimeInputUnit.propTypes = {
+    children: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    selected: PropTypes.number,
+};
+
+TimeInputUnit.defaultProps = {
+    className: undefined,
+    selected: -1,
+};
+
+export default TimeInputUnit;