EN · DE · RU · FR · ES
← Index · ← Dateiindex · ← Vorherige · Nächste → · 📄 Quelle

#2644: ReadonlyField.jsx

projectforge-webapp/src/components/design/input/ReadonlyField.jsx React-Komponente, projectforge-webapp/src/components/design/input/ReadonlyField.jsx 140 Zeilen · 129 Code · 3 Kommentare · 8 Leerzeilen
Zweck: React-Webapp: ReadonlyField.jsx. ReadonlyField.jsx ist Teil der Open-Source-Projektmanagement-Anwendung ProjectForge.

Quelltext (erste 100 Zeilen)

import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import { faBan, faCheck, faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import copy from 'clipboard-copy';
import PropTypes from 'prop-types';
import React from 'react';
import UncontrolledTooltip from 'reactstrap/lib/UncontrolledTooltip';
import selectNodeText from '../../../utilities/select';
import TooltipIcon from '../TooltipIcon';
import AdditionalLabel from './AdditionalLabel';
import styles from './Input.module.scss';
import InputContainer from './InputContainer';

/**
 * ReadonlyField-Text (mit Label und optionalem Tooltip)
 */
function ReadonlyField(
    {
        dataType,
        additionalLabel,
        canCopy = false,
        coverUp = false,
        id,
        label,
        tooltip,
        value,
        ...props
    },
) {
    const [showCover, setShowCover] = React.useState(true);
    const [isCopied, setIsCopied] = React.useState(0);
    const valueRef = React.useRef(null);

    const copyValue = () => {
        const cleanValue = String(value).trim();
        return copy(cleanValue)
            .then(() => {
                setIsCopied(1);
                setTimeout(() => setIsCopied(0), 1500);
            })
            .catch(() => {
                setIsCopied(-1);
                setTimeout(() => setIsCopied(0), 1500);
            });
    };

    const getValue = (v) => {
        if (dataType === 'BOOLEAN') {
            return <FontAwesomeIcon icon={v ? faCheck : faBan} />;
        }
        return v;
    };

    React.useEffect(() => setIsCopied(0), [value]);

    const handleContainerClick = () => {
        if (valueRef.current) {
            selectNodeText(valueRef.current);
        }
    };

    return (
        <>
            <InputContainer
                className={styles.readOnly}
                label={(
                    <>
                        {label}
                        {tooltip && (
                            <>
                                <TooltipIcon />
                                <UncontrolledTooltip placement="auto" target={String.idify(id)}>
                                    {tooltip}
                                </UncontrolledTooltip>
                            </>
                        )}
                    </>
                )}
                id={String.idify(id)}
                isActive
                onClick={handleContainerClick}
                readOnly
                withMargin
                {...props}
            >
                {value && (
                    <>
                        <div className={styles.icons}>
                            {coverUp && (
                                <FontAwesomeIcon
                                    icon={showCover ? faEye : faEyeSlash}
                                    onClick={() => setShowCover(!showCover)}
                                />
                            )}
                            {(coverUp || canCopy) && (
                                <FontAwesomeIcon
                                    className={classNames({
                                        [styles.success]: isCopied === 1,
                                        [styles.error]: isCopied === -1,

Git-Verlauf

bc3580597 ReadonlyField.jsx: Mehrfachkopien von canCopy-Werten erlauben.
3685edd6c Upgrade auf React 18 wip
3c2420fad ReadonlyField.jsx: ID für korrekte Tooltip-Behandlung bei IDs mit Punkt etc. stringifizieren.
36bfe1dbe Neue React-Version, eslint von Fin überprüft.
c23bfbdf5 es-lint: Überprüfung mit Fin erforderlich.

bc3580597

ReadonlyField.jsx: Mehrfachkopien von canCopy-Werten erlauben.
bc3580597d3482f0458021efb8798dc97dff5aec
diff --git a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
index 91a13df18..e493767b0 100644
--- a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
+++ b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
@@ -32,9 +32,18 @@ function ReadonlyField(
     const [isCopied, setIsCopied] = React.useState(0);
     const valueRef = React.useRef(null);
 
-    const copyValue = () => copy(value)
-        .then(() => setIsCopied(1))
-        .catch(() => setIsCopied(-1));
+    const copyValue = () => {
+        const cleanValue = String(value).trim();
+        return copy(cleanValue)
+            .then(() => {
+                setIsCopied(1);
+                setTimeout(() => setIsCopied(0), 1500);
+            })
+            .catch(() => {
+                setIsCopied(-1);
+                setTimeout(() => setIsCopied(0), 1500);
+            });
+    };
 
     const getValue = (v) => {
         if (dataType === 'BOOLEAN') {

3685edd6c

Upgrade auf React 18 wip
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
index 0a3f2dd10..91a13df18 100644
--- a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
+++ b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
@@ -19,8 +19,8 @@ function ReadonlyField(
     {
         dataType,
         additionalLabel,
-        canCopy,
-        coverUp,
+        canCopy = false,
+        coverUp = false,
         id,
         label,
         tooltip,
@@ -128,13 +128,4 @@ ReadonlyField.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-ReadonlyField.defaultProps = {
-    dataType: undefined,
-    additionalLabel: undefined,
-    canCopy: false,
-    coverUp: false,
-    tooltip: undefined,
-    value: undefined,
-};
-
 export default ReadonlyField;

3c2420fad

ReadonlyField.jsx: ID für korrekte Tooltip-Behandlung bei IDs mit Punkt etc. stringifizieren.
3c2420fad8f8252c8402c33e62c602153ddbe11d
diff --git a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
index bcf51ad6d..0a3f2dd10 100644
--- a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
+++ b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
@@ -61,14 +61,14 @@ function ReadonlyField(
                         {tooltip && (
                             <>
                                 <TooltipIcon />
-                                <UncontrolledTooltip placement="auto" target={id}>
+                                <UncontrolledTooltip placement="auto" target={String.idify(id)}>
                                     {tooltip}
                                 </UncontrolledTooltip>
                             </>
                         )}
                     </>
                 )}
-                id={id}
+                id={String.idify(id)}
                 isActive
                 onClick={handleContainerClick}
                 readOnly

36bfe1dbe

Neue React-Version, eslint von Fin überprüft.
36bfe1dbe1091ce01c65ef320ec3610e7d3f3900
diff --git a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
index 133ef4f72..bcf51ad6d 100644
--- a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
+++ b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
@@ -73,7 +73,6 @@ function ReadonlyField(
                 onClick={handleContainerClick}
                 readOnly
                 withMargin
-                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
             >
                 {value && (

c23bfbdf5

es-lint: Überprüfung mit Fin erforderlich.
c23bfbdf5b54c9e3c7c3b2537375d9fb255a2730
diff --git a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
index 24095ed85..133ef4f72 100644
--- a/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
+++ b/projectforge-webapp/src/components/design/input/ReadonlyField.jsx
@@ -1,7 +1,6 @@
-import { faCopy, faEye, faEyeSlash} from '@fortawesome/free-regular-svg-icons';
-import { faBan, faCheck } from '@fortawesome/free-solid-svg-icons';
-import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
+import { faBan, faCheck, faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import copy from 'clipboard-copy';
 import PropTypes from 'prop-types';
@@ -37,14 +36,12 @@ function ReadonlyField(
         .then(() => setIsCopied(1))
         .catch(() => setIsCopied(-1));
 
-    const getValue = (value) => {
-        if (dataType == 'BOOLEAN') {
-            return <FontAwesomeIcon
-                icon={value ? faCheck : faBan}
-            />
+    const getValue = (v) => {
+        if (dataType === 'BOOLEAN') {
+            return <FontAwesomeIcon icon={v ? faCheck : faBan} />;
         }
-        return value;
-    }
+        return v;
+    };
 
     React.useEffect(() => setIsCopied(0), [value]);
 
@@ -55,31 +52,32 @@ function ReadonlyField(
     };
 
     return (
-        <React.Fragment>
+        <>
             <InputContainer
                 className={styles.readOnly}
                 label={(
-                    <React.Fragment>
+                    <>
                         {label}
                         {tooltip && (
-                            <React.Fragment>
-                                <TooltipIcon/>
+                            <>
+                                <TooltipIcon />
                                 <UncontrolledTooltip placement="auto" target={id}>
                                     {tooltip}
                                 </UncontrolledTooltip>
-                            </React.Fragment>
+                            </>
                         )}
-                    </React.Fragment>