Skip to content

Commit ce4fdeb

Browse files
woothuwoothu
committed
fix: rewrite Brand components - make Brands simple wrappers
1 parent 7c824c4 commit ce4fdeb

File tree

4 files changed

+60
-234
lines changed

4 files changed

+60
-234
lines changed

‎src/CBrand.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import classNames from 'classnames'
4+
import { tagPropType, mapToCssModules } from './Shared/helper.js';
5+
import CLink from './CLink'
6+
7+
//component - CoreUI / CBrand
8+
const CBrand = props => {
9+
10+
const {
11+
tag,
12+
className,
13+
cssModule,
14+
//
15+
innerRef,
16+
...attributes
17+
} = props
18+
19+
//render
20+
21+
const classes = mapToCssModules(classNames(className), cssModule)
22+
23+
const Tag = attributes.to || attributes.href ? CLink : tag
24+
return (
25+
<Tag {...attributes} className={classes} ref={innerRef} />
26+
)
27+
}
28+
29+
CBrand.propTypes = {
30+
tag: tagPropType,
31+
children: PropTypes.node,
32+
cssModule: PropTypes.object,
33+
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
34+
//
35+
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
36+
};
37+
38+
CBrand.defaultProps = {
39+
tag: 'div'
40+
};
41+
42+
export default CBrand

‎src/CHeaderBrand.js

+6-36
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,12 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
1+
import React from 'react'
2+
import CBrand from './CBrand'
43

54
//component - CoreUI / CHeaderBrand
65

7-
const CHeaderBrand = props=>{
8-
9-
const {
10-
tag: Tag,
11-
className,
12-
//
13-
innerRef,
14-
...attributes
15-
} = props;
16-
17-
//render
18-
19-
const classes = classNames(
20-
className,
21-
'c-header-brand'
22-
);
23-
6+
const CHeaderBrand = props => {
247
return (
25-
<Tag {...attributes} className={classes} ref={innerRef} />
26-
);
27-
8+
<CBrand {...props} className={['c-header-brand', props.className]}/>
9+
)
2810
}
2911

30-
CHeaderBrand.propTypes = {
31-
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
32-
children: PropTypes.node,
33-
className: PropTypes.string,
34-
//
35-
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
36-
};
37-
38-
CHeaderBrand.defaultProps = {
39-
tag: 'img'
40-
};
41-
42-
export default CHeaderBrand;
12+
export default CHeaderBrand

‎src/CNavbarBrand.js

+6-82
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,12 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import {tagPropType} from './Shared/helper.js';
1+
import React from 'react'
2+
import CBrand from './CBrand'
53

64
//component - CoreUI / CNavbarBrand
75

8-
const CNavbarBrand = props=>{
9-
10-
const {
11-
tag: Tag,
12-
className,
13-
children,
14-
//
15-
innerRef,
16-
...attributes
17-
} = props;
18-
19-
const imgSrc = brand=>{
20-
return brand.src ? brand.src : '';
21-
}
22-
const imgWidth = brand=>{
23-
return brand.width ? brand.width : 'auto';
24-
}
25-
const imgHeight = brand=>{
26-
return brand.height ? brand.height : 'auto';
27-
}
28-
const imgAlt = brand=>{
29-
return brand.alt ? brand.alt : '';
30-
}
31-
const navbarBrandImg = (props, classBrand, key)=>{
32-
return (
33-
<img
34-
src={imgSrc(props)}
35-
width={imgWidth(props)}
36-
height={imgHeight(props)}
37-
alt={imgAlt(props)}
38-
className={classBrand}
39-
key={key.toString()}
40-
/>
41-
);
42-
}
43-
44-
//render
45-
46-
const classes = classNames(
47-
className,
48-
'navbar-brand'
49-
);
50-
51-
const img = [];
52-
if (props.brand) {
53-
const classBrand = 'navbar-brand';//navbar-brand
54-
img.push(navbarBrandImg(props.brand, classBrand, img.length + 1));
55-
}
56-
if (props.full) {
57-
const classBrand = 'navbar-brand-full';
58-
img.push(navbarBrandImg(props.full, classBrand, img.length + 1));
59-
}
60-
if (props.minimized) {
61-
const classBrand = 'navbar-brand-minimized';
62-
img.push(navbarBrandImg(props.minimized, classBrand, img.length + 1));
63-
}
64-
6+
const CNavbarBrand = props => {
657
return (
66-
<Tag {...attributes} className={classes} ref={innerRef}>
67-
{children || img}
68-
</Tag>
69-
);
70-
8+
<CBrand {...props} className={['navbar-brand', props.className]}/>
9+
)
7110
}
7211

73-
CNavbarBrand.propTypes = {
74-
tag: tagPropType,
75-
className: PropTypes.string,
76-
children: PropTypes.node,
77-
//
78-
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
79-
brand: PropTypes.any,
80-
full: PropTypes.any,
81-
minimized: PropTypes.any
82-
};
83-
84-
CNavbarBrand.defaultProps = {
85-
tag: 'div'
86-
};
87-
88-
export default CNavbarBrand;
12+
export default CNavbarBrand

‎src/CSidebarBrand.js

+6-116
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,12 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import CLink from './CLink';
1+
import React from 'react'
2+
import CBrand from './CBrand'
53

64
//component - CoreUI / CSidebarBrand
75

8-
const CSidebarBrand = props=>{
9-
10-
let {
11-
tag: Tag,
12-
children,
13-
className,
14-
custom,
15-
//
16-
innerRef,
17-
img,
18-
imgFull,
19-
imgMinimized,
20-
wrappedInLink,
21-
linkClassName,
22-
linkProps,
23-
...attributes
24-
} = props;
25-
26-
const imgSrc = brand=>{
27-
return brand.src ? brand.src : '';
28-
}
29-
const imgWidth = brand=>{
30-
return brand.width ? brand.width : 'auto';
31-
}
32-
const imgHeight = brand=>{
33-
return brand.height ? brand.height : 'auto';
34-
}
35-
const imgAlt = brand=>{
36-
return brand.alt ? brand.alt : '';
37-
}
38-
const navbarBrandImg = (props, classBrand, key)=>{
39-
/*
40-
const {
41-
src,
42-
width,
43-
alt,
44-
height,
45-
...attributes
46-
} = props;
47-
*/
48-
return (
49-
<img
50-
src={imgSrc(props)}
51-
width={imgWidth(props)}
52-
height={imgHeight(props)}
53-
alt={imgAlt(props)}
54-
className={classBrand}
55-
{...props}
56-
key={key.toString()}
57-
/>
58-
);
59-
}
60-
61-
// render
62-
63-
const classes = classNames(
64-
className,
65-
'c-sidebar-brand'
66-
);
67-
68-
if (custom){
69-
return (
70-
<Tag className={classes} {...attributes} ref={innerRef}>
71-
{children}
72-
</Tag>
73-
);
74-
}
75-
76-
const classesLink = classNames(
77-
linkClassName,
78-
'c-sidebar-brand'
79-
);
80-
81-
const imgChildren = [];
82-
if (imgFull) {
83-
imgChildren.push(navbarBrandImg(imgFull||img, 'c-sidebar-brand-full', 1));
84-
}
85-
if (imgMinimized) {
86-
imgChildren.push(navbarBrandImg(imgMinimized||img, 'c-sidebar-brand-minimized', imgChildren.length + 1));
87-
}
88-
6+
const CSidebarBrand = props => {
897
return (
90-
<Tag {...attributes} className={classes} ref={innerRef}>
91-
{
92-
wrappedInLink ?
93-
<CLink className={classesLink} {...linkProps} >
94-
{imgChildren}
95-
</CLink>
96-
:imgChildren
97-
}
98-
</Tag>
99-
);
100-
8+
<CBrand {...props} className={['c-sidebar-brand', props.className]}/>
9+
)
10110
}
10211

103-
CSidebarBrand.propTypes = {
104-
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
105-
children: PropTypes.node,
106-
className: PropTypes.string,
107-
custom: PropTypes.bool,
108-
//
109-
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
110-
img: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
111-
imgFull: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
112-
imgMinimized: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
113-
linkClassName: PropTypes.string,
114-
linkProps: PropTypes.object,
115-
wrappedInLink: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
116-
};
117-
118-
CSidebarBrand.defaultProps = {
119-
tag: 'div'
120-
};
121-
122-
export default CSidebarBrand;
12+
export default CSidebarBrand

0 commit comments

Comments
 (0)