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

#2648: Completion.jsx

projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx React-Komponente, projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx 30 Zeilen · 27 Code · 0 Kommentare · 3 leer
Zweck: React-Webapp: Completion.jsx. Completion.jsx ist Teil der Open-Source-Projektmanagement-Anwendung ProjectForge.

Quellcode (erste 100 Zeilen)

import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import styles from './AutoCompletion.module.scss';

function Completion({ displayName, selected = false, ...props }) {
    return (
        <li
            className={classNames(styles.entry, { [styles.selected]: selected })}
            role="option"
            aria-selected="false"
            {...props}
        >
            {displayName}
            <FontAwesomeIcon
                icon={faChevronRight}
                className={styles.icon}
            />
        </li>
    );
}

Completion.propTypes = {
    displayName: PropTypes.string.isRequired,
    selected: PropTypes.bool,
};

export default Completion;

Git-Verlauf

3685edd6c Umstellung auf React 18 (WIP)
ca98b7b46 Implementierung der Autovervollständigungs-Pfeilnavigation
d6b3b5af3 Verschieben der Schnellauswahl in die Autovervollständigung

3685edd6c

Umstellung auf React 18 (WIP) 
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
index 7dbcacbc8..1dbd48a40 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './AutoCompletion.module.scss';
 
-function Completion({ displayName, selected, ...props }) {
+function Completion({ displayName, selected = false, ...props }) {
     return (
         <li
             className={classNames(styles.entry, { [styles.selected]: selected })}
@@ -27,8 +27,4 @@ Completion.propTypes = {
     selected: PropTypes.bool,
 };
 
-Completion.defaultProps = {
-    selected: false,
-};
-
 export default Completion;

ca98b7b46

Implementierung der Autovervollständigungs-Pfeilnavigation 
ca98b7b46943c73e47c9a2a4f5d94516b04d90b1
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
index 9f3d40aa2..7dbcacbc8 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
@@ -1,13 +1,14 @@
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './AutoCompletion.module.scss';
 
-function Completion({ displayName, ...props }) {
+function Completion({ displayName, selected, ...props }) {
     return (
         <li
-            className={styles.entry}
+            className={classNames(styles.entry, { [styles.selected]: selected })}
             role="option"
             aria-selected="false"
             {...props}
@@ -23,8 +24,11 @@ function Completion({ displayName, ...props }) {
 
 Completion.propTypes = {
     displayName: PropTypes.string.isRequired,
+    selected: PropTypes.bool,
 };
 
-Completion.defaultProps = {};
+Completion.defaultProps = {
+    selected: false,
+};
 
 export default Completion;

d6b3b5af3

Verschieben der Schnellauswahl in die Autovervollständigung 
d6b3b5af32f7799e86363d9c47e015bff4798640
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
new file mode 100644
index 000000000..9f3d40aa2
--- /dev/null
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/Completion.jsx
@@ -0,0 +1,30 @@
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './AutoCompletion.module.scss';
+
+function Completion({ displayName, ...props }) {
+    return (
+        <li
+            className={styles.entry}
+            role="option"
+            aria-selected="false"
+            {...props}
+        >
+            {displayName}
+            <FontAwesomeIcon
+                icon={faChevronRight}
+                className={styles.icon}
+            />
+        </li>
+    );
+}
+
+Completion.propTypes = {
+    displayName: PropTypes.string.isRequired,
+};
+
+Completion.defaultProps = {};
+
+export default Completion;