Skip to content

Commit ea0e113

Browse files
woothuwoothu
committed
fix: CIconRaw fixes:
- fix component classes, - fix toCamelCase function, - delete tag prop, - optimize component, - clean component
1 parent 8d973b5 commit ea0e113

File tree

2 files changed

+77
-89
lines changed

2 files changed

+77
-89
lines changed

‎src/CIconRaw.js

Lines changed: 75 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import {mapToCssModules, colog} from './Shared/helper';
5-
import style from './CIcon.module.css';
1+
import React, { useMemo, useState } from 'react'
2+
import PropTypes from 'prop-types'
3+
import classNames from 'classnames'
4+
import { mapToCssModules, colog } from './Shared/helper'
65

7-
//component - CoreUI / CIconRaw
6+
const toCamelCase = (str) => {
7+
return str.replace(/([-_][a-z0-9])/ig, ($1) => {
8+
return $1.toUpperCase()
9+
}).replaceAll('-', '')
10+
}
811

9-
const CIconRaw = props=>{
12+
//component - CoreUI / CIconRaw
13+
const CIconRaw = props => {
1014

1115
const {
1216
className,
17+
cssModule,
1318
//
1419
name,
1520
content,
@@ -19,120 +24,102 @@ const CIconRaw = props=>{
1924
title,
2025
use,
2126
...attributes
22-
} = props;
23-
24-
// methods
27+
} = props
2528

26-
const toCamelCase = (str)=>{
27-
return str.replace(/([-_][a-z0-9])/ig, ($1) => {
28-
return $1.toUpperCase().replace('-', '')
29-
})
30-
};
29+
const [change, setChange] = useState(0)
3130

32-
//vars
31+
useMemo(() => setChange(change + 1), [name, JSON.stringify[content]])
3332

34-
const iconName = (()=>{
33+
const iconName = useMemo(()=>{
3534
const iconNameIsKebabCase = name && name.includes('-');
3635
return iconNameIsKebabCase ? toCamelCase(name) : name
37-
})();
38-
const titleCode = (()=>{
39-
return title ? `<title>${title}</title>` : ''
40-
})();
41-
const code = (()=>{
36+
}, [change])
37+
38+
const titleCode = title ? `<title>${title}</title>` : ''
39+
40+
const code = useMemo(() => {
4241
if (content) {
4342
return content
44-
} else if (React.icons) {
45-
return React.icons[iconName] ?
46-
React.icons[iconName] :
47-
React.icons['cil'+iconName] ?
48-
React.icons['cil'+iconName] :
49-
colog('Not existing icon: '+iconName)
43+
} else if (name && React.icons) {
44+
return React.icons[iconName] ? React.icons[iconName] :
45+
colog('Not existing icon: '+ iconName + ' in React.icons object')
5046
}
51-
return content;
52-
})();
53-
const iconCode = (()=>{
47+
}, [change])
48+
49+
const iconCode = useMemo(()=>{
5450
return Array.isArray(code) ? code[1] || code[0] : code
55-
})();
51+
}, [change])
52+
5653
const scale = (()=>{
5754
return Array.isArray(code) && code.length > 1 ? code[0] : '64 64'
58-
})();
55+
})()
56+
5957
const viewBox = (()=>{
6058
return attributes.viewBox || `0 0 ${scale}`
61-
})();
59+
})()
60+
6261
const computedSize = (()=>{
6362
const addCustom = !size && (attributes.width || attributes.height);
6463
return size === 'custom' || addCustom ? 'custom-size' : size
65-
})();
66-
//console.log(iconName, computedSize)
67-
/*
68-
computedClasses () {
69-
const size = this.computedSize
70-
return this.customClasses || ['c-icon', { [`c-icon-${size}`]: size }]
71-
}
72-
*/
64+
})()
7365

7466
//render
75-
76-
const class1 = mapToCssModules(classNames(
77-
className,
67+
const computedClasses = mapToCssModules(classNames(
7868
'c-icon',
79-
computedSize ? `c-icon-${computedSize}` : ''
80-
));
81-
82-
const class2 = mapToCssModules(classNames(
83-
'c-icon',
84-
computedSize ? `c-icon-${computedSize}` : ''
85-
), style);
86-
87-
const classes = customClasses || (class1 + ' ' + class2);
69+
computedSize && `c-icon-${computedSize}`,
70+
className
71+
), cssModule)
8872

89-
//console.log(code, viewBox, classes, titleCode+' - '+iconCode);
90-
//v-html={titleCode+iconCode}
73+
const classes = customClasses || computedClasses
9174

9275
return (
9376
<React.Fragment>
94-
{!src && !use ?
95-
<svg
96-
{...attributes}
97-
xmlns="http://www.w3.org/2000/svg"
98-
viewBox={viewBox}
99-
className={classes}
100-
role="img"
101-
dangerouslySetInnerHTML={{__html: titleCode+iconCode}}
102-
></svg> : src ?
103-
<img
104-
{...attributes}
105-
src={src}
106-
role="img"
107-
/> : use ?
108-
<svg
109-
{...attributes}
110-
xmlns="http://www.w3.org/2000/svg"
111-
className={classes}
112-
role="img"
113-
>
114-
<use href={use}></use>
115-
</svg> : ''}
77+
{ !src && !use &&
78+
<svg
79+
{...attributes}
80+
xmlns="http://www.w3.org/2000/svg"
81+
viewBox={viewBox}
82+
className={classes}
83+
role="img"
84+
dangerouslySetInnerHTML={{__html: titleCode + iconCode}}
85+
/>
86+
}
87+
{ src && !use &&
88+
<img
89+
{...attributes}
90+
className={className}
91+
src={src}
92+
role="img"
93+
/>
94+
}
95+
{ !src && use &&
96+
<svg
97+
{...attributes}
98+
xmlns="http://www.w3.org/2000/svg"
99+
className={classes}
100+
role="img"
101+
>
102+
<use href={use}></use>
103+
</svg>
104+
}
116105
</React.Fragment>
117-
);
118-
119-
};
106+
)
107+
}
120108

121109
CIconRaw.propTypes = {
122-
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
123110
className: PropTypes.string,
111+
cssModule: PropTypes.object,
124112
//
125113
name: PropTypes.string,
126114
content: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
127-
size: PropTypes.oneOf(['custom', 'custom-size', 'sm', 'lg', 'xl',
128-
'2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl']),
115+
size: PropTypes.oneOf([
116+
'custom', 'custom-size', 'sm', 'lg', 'xl',
117+
'2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'
118+
]),
129119
customClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
130120
src: PropTypes.string,
131121
title: PropTypes.string,
132122
use: PropTypes.string
133123
};
134124

135-
CIconRaw.defaultProps = {
136-
};
137-
138-
export default CIconRaw;
125+
export default CIconRaw

‎src/Shared/helper.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ const mapToCssModules = (className = '', cssModule = globalCssModule) => {
1212
export {mapToCssModules};
1313

1414
export function colog() {
15-
if (process.env.NODE_ENV === 'development')
15+
if (process && process.env && process.env.NODE_ENV === 'development') {
1616
console.log.apply(this, arguments);
17+
}
1718
}
1819

1920

0 commit comments

Comments
 (0)