@visns-studio/visns-components 3.9.9 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import styles from './styles/TableFilter.module.css';
|
|
3
|
+
|
|
4
|
+
function TableFilter({
|
|
5
|
+
collapsible = false,
|
|
6
|
+
filters,
|
|
7
|
+
setFilters,
|
|
8
|
+
setSettings,
|
|
9
|
+
type,
|
|
10
|
+
}) {
|
|
11
|
+
const [visibleChildren, setVisibleChildren] = useState(null);
|
|
2
12
|
|
|
3
|
-
function TableFilter({ filters, setFilters, setSettings, type }) {
|
|
4
13
|
const filterTable = (e) => {
|
|
5
14
|
const { id, parent, filtertype, url, value } = e.target.dataset;
|
|
6
15
|
|
|
@@ -89,6 +98,11 @@ function TableFilter({ filters, setFilters, setSettings, type }) {
|
|
|
89
98
|
});
|
|
90
99
|
}
|
|
91
100
|
}
|
|
101
|
+
|
|
102
|
+
// Handle collapsible functionality
|
|
103
|
+
if (collapsible && filtertype === 'parent') {
|
|
104
|
+
setVisibleChildren((prevState) => (prevState === id ? null : id));
|
|
105
|
+
}
|
|
92
106
|
};
|
|
93
107
|
|
|
94
108
|
const renderContent = (d) => {
|
|
@@ -119,8 +133,14 @@ function TableFilter({ filters, setFilters, setSettings, type }) {
|
|
|
119
133
|
>
|
|
120
134
|
{d.label}
|
|
121
135
|
</a>
|
|
122
|
-
{d.children && d.children.length > 0
|
|
123
|
-
<ul
|
|
136
|
+
{d.children && d.children.length > 0 && (
|
|
137
|
+
<ul
|
|
138
|
+
className={`${styles.collapsibleMenu} ${
|
|
139
|
+
visibleChildren === d.id
|
|
140
|
+
? styles.visibleMenu
|
|
141
|
+
: ''
|
|
142
|
+
}`}
|
|
143
|
+
>
|
|
124
144
|
{d.children.map((child, key) => (
|
|
125
145
|
<li key={`table-filter-child-${d.id}-${key}`}>
|
|
126
146
|
<a
|
|
@@ -141,7 +161,7 @@ function TableFilter({ filters, setFilters, setSettings, type }) {
|
|
|
141
161
|
</li>
|
|
142
162
|
))}
|
|
143
163
|
</ul>
|
|
144
|
-
)
|
|
164
|
+
)}
|
|
145
165
|
</li>
|
|
146
166
|
);
|
|
147
167
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* TableFilter.module.css */
|
|
2
|
+
.collapsibleMenu {
|
|
3
|
+
max-height: 0;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
transition: max-height 0.3s ease-out;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.collapsibleMenu li {
|
|
9
|
+
transition: opacity 0.3s ease-out;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.visibleMenu {
|
|
13
|
+
max-height: 500px; /* Adjust this value based on the expected height of your child menu */
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
package/package.json
CHANGED
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"akar-icons": "^1.9.31",
|
|
11
11
|
"array-move": "^4.0.0",
|
|
12
12
|
"awesome-debounce-promise": "^2.1.0",
|
|
13
|
-
"axios": "^1.
|
|
13
|
+
"axios": "^1.7.2",
|
|
14
14
|
"dayjs": "^1.11.11",
|
|
15
15
|
"file-saver": "^2.0.5",
|
|
16
|
-
"framer-motion": "^11.
|
|
16
|
+
"framer-motion": "^11.2.6",
|
|
17
17
|
"html-react-parser": "^5.1.10",
|
|
18
18
|
"lodash": "^4.17.21",
|
|
19
19
|
"lodash.debounce": "^4.0.8",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"reactjs-popup": "^2.0.6",
|
|
45
45
|
"truncate": "^3.0.0",
|
|
46
46
|
"uuid": "^9.0.1",
|
|
47
|
-
"validator": "^13.
|
|
47
|
+
"validator": "^13.12.0",
|
|
48
48
|
"yarn": "^1.22.22"
|
|
49
49
|
},
|
|
50
50
|
"devDependecies": {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"react-dom": "^17.0.1"
|
|
57
57
|
},
|
|
58
58
|
"name": "@visns-studio/visns-components",
|
|
59
|
-
"version": "
|
|
59
|
+
"version": "4.0.0",
|
|
60
60
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
61
61
|
"main": "index.js",
|
|
62
62
|
"scripts": {
|