Skip to content

Commit 8706cf0

Browse files
woothuwoothu
committed
fix: Sidebar components rewrite: make them similar to Vue version
1 parent d17c8ff commit 8706cf0

File tree

5 files changed

+113
-398
lines changed

5 files changed

+113
-398
lines changed

‎src/CSidebarNav.js

+21-183
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,44 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import PerfectScrollbar from 'react-perfect-scrollbar';
5-
import 'react-perfect-scrollbar/dist/css/styles.css';
6-
import CSidebarNavTitle from './CSidebarNavTitle';
7-
import CSidebarNavDivider from './CSidebarNavDivider';
8-
import CSidebarNavDropdown from './CSidebarNavDropdown';
9-
import CSidebarNavItem from './CSidebarNavItem';
10-
1+
import React, { useContext } from 'react'
2+
import PropTypes from 'prop-types'
3+
import classNames from 'classnames'
4+
import PerfectScrollbar from 'react-perfect-scrollbar'
5+
import 'react-perfect-scrollbar/dist/css/styles.css'
6+
import { Context } from './CSidebar'
117
//component - CoreUI / CSidebarNav
128

13-
const CSidebarNav = props=>{
9+
const CSidebarNav = props => {
1410

1511
const {
16-
tag: Tag,
17-
children,
1812
className,
1913
//
2014
innerRef,
21-
navConfig,
2215
...attributes
2316
} = props;
2417

25-
const isExternal = url=>{
26-
const link = url ? url.substring(0, 4) : '';
27-
return link === 'http';
28-
}
29-
30-
// render items
31-
32-
// nav dropdown
33-
const navDropdown = (item, key)=>{
34-
return (
35-
<CSidebarNavDropdown
36-
key={key}
37-
icon={item.icon}
38-
name={item.name}
39-
show={props.location.pathname.indexOf(item.url)>-1}
40-
>
41-
{navList(item.children)}
42-
</CSidebarNavDropdown>
43-
)
44-
}
45-
// nav item with nav link
46-
const navItem = (item, key)=>{
47-
48-
let badgeProps;
49-
if (item.badge){
50-
badgeProps={
51-
text: item.badge.text,
52-
color: item.badge.variant,
53-
className: item.badge.class
54-
}
55-
}
56-
else {
57-
badgeProps={};
58-
}
59-
60-
61-
let linkProps;
62-
//
63-
if (item.attributes){
64-
linkProps = item.attributes;
65-
//replace, innerRef (func, object)
66-
//activeStyle, exact: bool, strict: bool
67-
}
68-
else {
69-
linkProps = {};
70-
}
71-
//
72-
let disabled = false;
73-
if (item.attributes && item.attributes.disabled){
74-
disabled = true;
75-
}
76-
disabled && (linkProps['disabled'] = disabled);
77-
78-
79-
let classes;
80-
if (item.class)
81-
classes = item.class;
82-
else {
83-
classes = '';
84-
}
85-
86-
if (isExternal(item.url))
87-
linkProps['href'] = item.url;
88-
else
89-
linkProps['to'] = item.url;
90-
91-
let compProps;
92-
if (item.itemAttr)
93-
compProps = item.itemAttr;
94-
else {
95-
compProps = {}
96-
}
97-
98-
return <CSidebarNavItem
99-
{...compProps}
100-
className={classes}
101-
key={key}
102-
icon = {item.icon}
103-
badge = {badgeProps}
104-
linkClassName={props.location&&props.location.pathname.indexOf(item.url)>-1 ? 'c-active' : null}
105-
linkProps={linkProps}
106-
custom={false}
107-
>
108-
{item.name}
109-
</CSidebarNavItem>
110-
111-
}
112-
113-
// simple wrapper for nav-title item
114-
const navWrapper = item=>{
115-
return item.wrapper && item.wrapper.element ? React.createElement(item.wrapper.element, item.wrapper.attributes, item.name) : item.name;
116-
}
117-
// nav list section title
118-
const navTitle = (title, key)=>{
119-
return <CSidebarNavTitle key={key} className={title.class}>{navWrapper(title)}</CSidebarNavTitle>;
120-
}
18+
const { scrollbarExist } = useContext(Context)
12119

122-
// nav list divider
123-
const navDivider = (divider, key)=>{
124-
return <CSidebarNavDivider key={key} className={divider.class} />;
125-
}
126-
127-
// nav label with nav link
128-
const navLabel = (item, key)=>{
129-
130-
const classes = classNames(
131-
item.label.class ? item.label.class : null,
132-
item.label.variant ? 'text-'+item.label.variant : null,
133-
)
134-
135-
return <CSidebarNavItem
136-
key={key}
137-
linkClassName={classes}
138-
linkProps={{
139-
icon: item.icon ? item.icon : 'user',
140-
to: item.url,
141-
label: true
142-
}}
143-
custom={false}
144-
>
145-
{item.name}
146-
</CSidebarNavItem>
147-
148-
}
149-
150-
// select nav type
151-
const navType = (item, idx)=>{
152-
return (
153-
item.title ? navTitle(item, idx)
154-
: item.divider ? navDivider(item, idx)
155-
: item.label ? navLabel(item, idx)
156-
: item.children ? navDropdown(item, idx)
157-
: navItem(item, idx)
158-
);
159-
}
160-
161-
// nav list
162-
const navList = items=>{
163-
return items.map((item, index) => navType(item, index));
164-
}
165-
166-
//render
167-
168-
delete attributes.Tag;
169-
170-
const navClasses = classNames(
171-
className,
172-
'c-sidebar-nav',
173-
'h-100'
174-
);
20+
const navClasses = classNames('c-sidebar-nav', 'h-100', className)
17521

17622
//state
17723

17824
const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
179-
180-
// sidebar-nav root
181-
182-
return (
183-
<PerfectScrollbar options={{ suppressScrollX: !isRtl }} className={navClasses} ref={innerRef} component={Tag} {...attributes}>
184-
{navConfig.items ? navList(navConfig.items) : null}
185-
{children}
186-
</PerfectScrollbar>
187-
);
25+
return !scrollbarExist ?
26+
<ul className={navClasses} {...attributes} ref={innerRef}>
27+
{props.children}
28+
</ul> :
29+
<PerfectScrollbar
30+
options={{ suppressScrollX: !isRtl }}
31+
className={navClasses}
32+
ref={innerRef}
33+
component="ul"
34+
{...attributes}
35+
/>
18836
}
18937

19038
CSidebarNav.propTypes = {
191-
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
192-
children: PropTypes.node,
19339
className: PropTypes.string,
19440
//
195-
location: PropTypes.object,
196-
//
19741
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
198-
navConfig: PropTypes.any
199-
};
200-
201-
CSidebarNav.defaultProps = {
202-
tag: 'ul',
203-
navConfig: {}
20442
};
20543

206-
export default CSidebarNav;
44+
export default CSidebarNav

0 commit comments

Comments
 (0)