groovinads-ui 1.2.29 → 1.2.30

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/Navigation/SideBar/Sidebar.jsx +129 -129
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "groovinads-ui",
3
3
  "description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
4
- "version": "1.2.29",
4
+ "version": "1.2.30",
5
5
  "keywords": [
6
6
  "css",
7
7
  "sass",
package/src/components/Navigation/SideBar/Sidebar.jsx CHANGED
@@ -1,145 +1,145 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useEffect, useState } from 'react';
2
2
 
3
3
  // SERVICES
4
- import { ComponentsService } from "../../../services";
4
+ import { ComponentsService } from '../../../services';
5
5
 
6
6
  // PROP TYPES
7
- import PropTypes from "prop-types";
7
+ import PropTypes from 'prop-types';
8
8
 
9
9
  // COMPONENTES
10
- import { Icon } from "../../Labels";
10
+ import { Icon } from '../../Labels';
11
11
 
12
12
  // REACT BOOTSTRAP
13
- import { Collapse } from "react-bootstrap";
13
+ import { Collapse } from 'react-bootstrap';
14
14
 
15
15
  const Sidebar = ({ api, customLinks, defaultOpened = false }) => {
16
- const url = window.location.pathname; // to get current url
17
-
18
- const [sidebarLinks, setSidebarLinks] = useState([]);
19
- const [openIndex, setOpenIndex] = useState(null);
20
-
21
- const [isOpened, setIsOpened] = useState(defaultOpened);
22
-
23
- const handleToggle = (index) => {
24
- setOpenIndex(openIndex === index ? null : index);
25
- };
26
-
27
- const fetchData = async () => {
28
- // const resp = await ComponentsService.getSidebarInfo(api);
29
- const resp = [
30
- {
31
- name: "Reports",
32
- icon: "table", // Sin el 'fa-'
33
- url: "",
34
- children: [
35
- {
36
- name: "Year impressions by...",
37
- url: "/impressions",
38
- },
39
- {
40
- name: "Monthly impressions by...",
41
- url: "/impressions1",
42
- },
43
- {
44
- name: "Daily impressions by...",
45
- url: "/impressions2",
46
- },
47
- ],
48
- },
49
- ];
50
- setSidebarLinks(resp);
51
- };
52
-
53
- useEffect(() => {
54
- if (api) fetchData();
55
- }, []);
56
-
57
- return (
58
- <Collapse in={isOpened} dimension={'width'}>
59
- <nav id="sidebarMenu" className="sidebar">
60
- <div>
61
- <button
62
- className="collapse-button"
63
- //Receives state and update function setSideBarOpen from parent component, whoever calls must have boolean and have that settter
64
- onClick={() => setIsOpened((prev) => !prev)}
65
- >
66
- <Icon className="collapse-icon" iconName="angle-left" />
67
- </button>
68
- </div>
69
-
70
- {/* SECTIONS */}
71
- <div className="scroll">
72
- {customLinks.map((section, i) => (
73
- <div key={`sectionIndex${i}`}>
74
- <h4>{section.title}</h4>
75
-
76
- {/* PROPS LINKS */}
77
- {(section.backData ? sidebarLinks : section.links || []).map(
78
- (linkSection, y) => (
79
- <ul className="nav" key={`linksSections${y}`}>
80
- <li className="nav-item">
81
- {/* CHILDREN - If has children, the collapse is expanded */}
82
- {linkSection.children && linkSection.children.length ? (
83
- <>
84
- <button
85
- className={`btn-toggle ${
86
- openIndex !== i ? "collapsed" : ""
87
- }`}
88
- onClick={() => handleToggle(i)}
89
- aria-controls="example-collapse-text"
90
- aria-expanded={openIndex === i}
91
- >
92
- <Icon iconName={linkSection.icon} />
93
- {linkSection.name}
94
- </button>
95
-
96
- {/* COLLAPSE */}
97
- <Collapse in={openIndex === i}>
98
- <ul className="btn-toggle-nav">
99
- {linkSection.children.map((childSection, x) => (
100
- <li key={`childSectionIndex${x}`}>
101
- <a
102
- className={`nav-link ${
103
- url === childSection.url ? "active" : ""
104
- }`}
105
- href={childSection.url}
106
- >
107
- {childSection.name}
108
- </a>
109
- </li>
110
- ))}
111
- </ul>
112
- </Collapse>
113
- </>
114
- ) : (
115
- <>
116
- <a
117
- className={`nav-link ${
118
- url === linkSection.url ? "active" : ""
119
- }`}
120
- href={linkSection.url}
121
- >
122
- <Icon iconName={linkSection.icon} />
123
- {linkSection.name}
124
- </a>
125
- </>
126
- )}
127
- </li>
128
- </ul>
129
- )
130
- )}
131
- </div>
132
- ))}
133
- </div>
134
- </nav>
135
- </Collapse>
136
- );
16
+ const url = window.location.pathname; // to get current url
17
+
18
+ const [sidebarLinks, setSidebarLinks] = useState([]);
19
+ const [openIndex, setOpenIndex] = useState(null);
20
+
21
+ const [isOpened, setIsOpened] = useState(defaultOpened);
22
+
23
+ const handleToggle = (index) => {
24
+ setOpenIndex(openIndex === index ? null : index);
25
+ };
26
+
27
+ const fetchData = async () => {
28
+ // const resp = await ComponentsService.getSidebarInfo(api);
29
+ const resp = [
30
+ {
31
+ name: 'Reports',
32
+ icon: 'table', // Sin el 'fa-'
33
+ url: '',
34
+ children: [
35
+ {
36
+ name: 'Year impressions by...',
37
+ url: '/impressions',
38
+ },
39
+ {
40
+ name: 'Monthly impressions by...',
41
+ url: '/impressions1',
42
+ },
43
+ {
44
+ name: 'Daily impressions by...',
45
+ url: '/impressions2',
46
+ },
47
+ ],
48
+ },
49
+ ];
50
+ setSidebarLinks(resp);
51
+ };
52
+
53
+ useEffect(() => {
54
+ if (api) fetchData();
55
+ }, []);
56
+
57
+ return (
58
+ <Collapse in={isOpened} dimension={'width'}>
59
+ <nav id='sidebarMenu' className='sidebar'>
60
+ <div className='position-relative d-none d-lg-block'>
61
+ <button
62
+ className='collapse-button'
63
+ //Receives state and update function setSideBarOpen from parent component, whoever calls must have boolean and have that settter
64
+ onClick={() => setIsOpened((prev) => !prev)}
65
+ >
66
+ <Icon className='collapse-icon' iconName='angle-left' />
67
+ </button>
68
+ </div>
69
+
70
+ {/* SECTIONS */}
71
+ <div className='scroll'>
72
+ {customLinks.map((section, i) => (
73
+ <div key={`sectionIndex${i}`}>
74
+ <h4>{section.title}</h4>
75
+
76
+ {/* PROPS LINKS */}
77
+ {(section.backData ? sidebarLinks : section.links || []).map(
78
+ (linkSection, y) => (
79
+ <ul className='nav' key={`linksSections${y}`}>
80
+ <li className='nav-item'>
81
+ {/* CHILDREN - If has children, the collapse is expanded */}
82
+ {linkSection.children && linkSection.children.length ? (
83
+ <>
84
+ <button
85
+ className={`btn-toggle ${
86
+ openIndex !== i ? 'collapsed' : ''
87
+ }`}
88
+ onClick={() => handleToggle(i)}
89
+ aria-controls='example-collapse-text'
90
+ aria-expanded={openIndex === i}
91
+ >
92
+ <Icon iconName={linkSection.icon} />
93
+ {linkSection.name}
94
+ </button>
95
+
96
+ {/* COLLAPSE */}
97
+ <Collapse in={openIndex === i}>
98
+ <ul className='btn-toggle-nav'>
99
+ {linkSection.children.map((childSection, x) => (
100
+ <li key={`childSectionIndex${x}`}>
101
+ <a
102
+ className={`nav-link ${
103
+ url === childSection.url ? 'active' : ''
104
+ }`}
105
+ href={childSection.url}
106
+ >
107
+ {childSection.name}
108
+ </a>
109
+ </li>
110
+ ))}
111
+ </ul>
112
+ </Collapse>
113
+ </>
114
+ ) : (
115
+ <>
116
+ <a
117
+ className={`nav-link ${
118
+ url === linkSection.url ? 'active' : ''
119
+ }`}
120
+ href={linkSection.url}
121
+ >
122
+ <Icon iconName={linkSection.icon} />
123
+ {linkSection.name}
124
+ </a>
125
+ </>
126
+ )}
127
+ </li>
128
+ </ul>
129
+ ),
130
+ )}
131
+ </div>
132
+ ))}
133
+ </div>
134
+ </nav>
135
+ </Collapse>
136
+ );
137
137
  };
138
138
 
139
139
  Sidebar.propTypes = {
140
- api: PropTypes.string.isRequired,
141
- customLinks: PropTypes.array.isRequired,
142
- defaultOpened: PropTypes.bool
140
+ api: PropTypes.string.isRequired,
141
+ customLinks: PropTypes.array.isRequired,
142
+ defaultOpened: PropTypes.bool,
143
143
  };
144
144
 
145
145
  export default Sidebar;