@visns-studio/visns-components 4.0.3 → 4.0.5

package/components/crm/TableFilter.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from './styles/TableFilter.module.css';
 
 function TableFilter({
@@ -9,14 +9,17 @@ function TableFilter({
     type,
 }) {
     const [visibleChildren, setVisibleChildren] = useState(null);
+    const isFirstRender = useRef(true);
 
     useEffect(() => {
         if (
+            isFirstRender.current &&
             filters.length > 0 &&
             filters[0].children &&
             filters[0].children.length > 0
         ) {
             setVisibleChildren(filters[0].id);
+            isFirstRender.current = false;
         }
     }, [filters]);
 
@@ -116,9 +119,13 @@ function TableFilter({
     };
 
     const renderContent = (d) => {
+        const parentClass = `${styles.link} ${styles[d.class] || ''}`;
+        const childClass = (child) =>
+            `${styles.link} ${styles[child.class] || ''}`;
+
         if (type === 'simple') {
             return (
-                <li className={d.class}>
+                <li className={styles[d.class]}>
                     <button
                         data-id={d.id}
                         data-filtertype="parent"
@@ -131,6 +138,7 @@ function TableFilter({
                 </li>
             );
         } else {
+            console.info(d.class);
             return (
                 <li>
                     <a
@@ -139,7 +147,7 @@ function TableFilter({
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
                         onClick={filterTable}
-                        className={d.class}
+                        className={parentClass}
                     >
                         {d.label}
                     </a>
@@ -153,8 +161,9 @@ function TableFilter({
                         >
                             {d.children.map((child, key) => (
                                 <li key={`table-filter-child-${d.id}-${key}`}>
+                                    {console.info(child.class)}
                                     <a
-                                        className={child.class}
+                                        className={childClass(child)}
                                         data-id={child.id}
                                         data-value={
                                             child.hasOwnProperty('value')
@@ -178,7 +187,7 @@ function TableFilter({
     };
 
     return (
-        <ul>
+        <ul className={styles.tableFilter}>
             {filters.map((item, key) => (
                 <React.Fragment key={'table-filter-' + key}>
                     {renderContent(item)}

package/components/crm/styles/TableFilter.module.css

@@ -1,4 +1,9 @@
-/* TableFilter.module.css */
+.tableFilter {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
 .collapsibleMenu {
     max-height: 0;
     overflow: hidden;
@@ -10,3 +15,36 @@
     max-height: 500px; /* Adjust this value based on the expected height of your child menu */
     opacity: 1;
 }
+
+.subactive {
+    font-weight: 700;
+    background: var(--primary-color) !important;
+    color: var(--paragraph-color) !important;
+}
+
+.subactivechildren {
+    font-weight: 700;
+}
+
+.tableFilter li {
+    margin-bottom: 1px;
+}
+
+.link {
+    display: block;
+    padding: 8px 20px;
+    text-decoration: none;
+    background: var(--item-color);
+    color: var(--paragraph-color);
+    border-radius: 3px;
+    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.link:hover {
+    background: var(--item-color) !important;
+}
+
+.activetab {
+    background: var(--primary-color) !important;
+    color: var(--paragraph-color) !important;
+}

package/package.json

@@ -56,7 +56,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.0.3",
+    "version": "4.0.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {