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

#2706: FilterListEntry.jsx

projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx React-Komponente, projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx 50 Zeilen · 45 Code · 0 Kommentare · 5 leer
Zweck: React-Webanwendung: FilterListEntry.jsx. FilterListEntry.jsx ist Teil der Open-Source-Projektmanagement-Anwendung ProjectForge.

Quellcode (erste 100 Zeilen)

import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addFilter } from '../../../../../actions/list/filter';
import styles from '../../ListPage.module.scss';

function FilterListEntry(
    {
        id,
        label,
        afterSelect,
    },
) {
    const isSelected = useSelector((state) => {
        const listState = state.list;
        return listState.categories[listState.currentCategory].filter.entries
            .filter(({ field }) => field === id).length !== 0;
    });
    const dispatch = useDispatch();
    const onFilterAdd = (filterId) => dispatch(addFilter(filterId));
    const handleSelect = () => {
        if (isSelected) {
            return;
        }

        onFilterAdd(id);
        afterSelect();
    };

    return (
        <li
            className={classNames(styles.filter, { [styles.isSelected]: isSelected })}
            onClick={handleSelect}
            role="option"
            aria-selected="false"
            onKeyPress={undefined}
        >
            {label}
        </li>
    );
}

FilterListEntry.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    afterSelect: PropTypes.func.isRequired,
};

export default FilterListEntry;

Git-Verlauf

bf988bc6d 43 npm-Sicherheitslücken beseitigt: react-scripts→Vite, ESLint 9, Abhängigkeitsbereinigung, Fehlerbehebungen
3685edd6c Upgrade auf React 18 (Work-in-Progress)
bbd81edc3 ESLint, neue JS-Versionen.
f61b44dab Erweitertes Popper-Öffnen bei Klick behoben
14dd20970 Auswahl der magischen Filter behoben

bf988bc6d

43 npm-Sicherheitslücken beseitigt: react-scripts→Vite, ESLint 9, Abhängigkeitsbereinigung, Fehlerbehebungen
bf988bc6d14252863c2a7a54c409c947fb9feb7b
diff --git a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
index dd0c4df6a..eaef49cad 100644
--- a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
+++ b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { addFilter } from '../../../../../actions/list/filter';
 import styles from '../../ListPage.module.scss';
 
@@ -10,10 +10,15 @@ function FilterListEntry(
         id,
         label,
         afterSelect,
-        onFilterAdd,
-        isSelected,
     },
 ) {
+    const isSelected = useSelector((state) => {
+        const listState = state.list;
+        return listState.categories[listState.currentCategory].filter.entries
+            .filter(({ field }) => field === id).length !== 0;
+    });
+    const dispatch = useDispatch();
+    const onFilterAdd = (filterId) => dispatch(addFilter(filterId));
     const handleSelect = () => {
         if (isSelected) {
             return;
@@ -40,17 +45,6 @@ FilterListEntry.propTypes = {
     id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     afterSelect: PropTypes.func.isRequired,
-    onFilterAdd: PropTypes.func.isRequired,
-    isSelected: PropTypes.bool.isRequired,
 };
 
-const mapStateToProps = ({ list }, { id }) => ({
-    isSelected: list.categories[list.currentCategory].filter.entries
-        .filter(({ field }) => field === id).length !== 0,
-});
-
-const actions = (dispatch) => ({
-    onFilterAdd: (filterId) => dispatch(addFilter(filterId)),
-});
-
-export default connect(mapStateToProps, actions)(FilterListEntry);
+export default FilterListEntry;

3685edd6c

Upgrade auf React 18 (Work-in-Progress)
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
index 083dbcb3c..dd0c4df6a 100644
--- a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
+++ b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
@@ -44,8 +44,6 @@ FilterListEntry.propTypes = {
     isSelected: PropTypes.bool.isRequired,
 };
 
-FilterListEntry.defaultProps = {};
-
 const mapStateToProps = ({ list }, { id }) => ({
     isSelected: list.categories[list.currentCategory].filter.entries
         .filter(({ field }) => field === id).length !== 0,

bbd81edc3

ESLint, neue JS-Versionen.
bbd81edc3f6b2fd975756421148651d4d75eaf33
diff --git a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
index 40c06a10b..083dbcb3c 100644
--- a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
+++ b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
@@ -51,8 +51,8 @@ const mapStateToProps = ({ list }, { id }) => ({
         .filter(({ field }) => field === id).length !== 0,
 });
 
-const actions = dispatch => ({
-    onFilterAdd: filterId => dispatch(addFilter(filterId)),
+const actions = (dispatch) => ({
+    onFilterAdd: (filterId) => dispatch(addFilter(filterId)),
 });
 
 export default connect(mapStateToProps, actions)(FilterListEntry);

f61b44dab

Erweitertes Popper-Öffnen bei Klick behoben
f61b44daba7f1cd26fca31f1c51518b4b5d094f6
diff --git a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
index 2f6c7d2d4..40c06a10b 100644
--- a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
+++ b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
@@ -14,14 +14,13 @@ function FilterListEntry(
         isSelected,
     },
 ) {
-    const handleSelect = (event) => {
+    const handleSelect = () => {
         if (isSelected) {
             return;
         }
 
         onFilterAdd(id);
         afterSelect();
-        event.stopPropagation();
     };
 
     return (

14dd20970

Auswahl der magischen Filter behoben
14dd2097028d615d52d80b0ed8f284fb254c8e51
diff --git a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
index d7fb0c974..2f6c7d2d4 100644
--- a/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
+++ b/projectforge-webapp/src/containers/page/list/searchFilter/magicFilter/FilterListEntry.jsx
@@ -14,14 +14,14 @@ function FilterListEntry(
         isSelected,
     },
 ) {
-    const handleSelect = () => {
+    const handleSelect = (event) => {
         if (isSelected) {
             return;
         }
 
         onFilterAdd(id);
-
         afterSelect();
+        event.stopPropagation();
     };
 
     return (