Skip to content

Commit 4a9636c

Browse files
JoshK2JoshK2
committed
update all style files to be css modules and exported a new version of the library
1 parent 5bf05a6 commit 4a9636c

41 files changed

Lines changed: 2859 additions & 1230 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.babelrc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": [["react-app", { "absoluteRuntime": false }]]
3-
}
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎.prettierrc.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"trailingComma": "es5",
3-
"tabWidth": 4,
3+
"tabWidth": 2,
44
"semi": false,
55
"singleQuote": true,
66
"printWidth": 120
7-
}
7+
}

‎package-lock.json‎

Lines changed: 1729 additions & 167 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spinners-css",
3-
"version": "1.1.9",
3+
"version": "1.2.1",
44
"private": false,
55
"main": "dist/index.js",
66
"module": "dist/index.js",
@@ -53,10 +53,13 @@
5353
"not op_mini all"
5454
],
5555
"dependencies": {
56+
"classnames": "^2.2.6",
5657
"prop-types": "^15.7.2"
5758
},
5859
"devDependencies": {
5960
"@babel/cli": "^7.2.3",
61+
"@babel/preset-env": "^7.10.3",
62+
"@babel/preset-react": "^7.10.1",
6063
"@bit/joshk.jotils.get-random-color": "^2.0.8",
6164
"prettier": "^1.18.2",
6265
"react": "^16.8.6",

‎src/components/Circle/index.js‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import './style.css'
3+
import classNames from 'classnames'
4+
import styles from './style.module.css'
45

56
export default function Circle({ color, size, className, style }) {
6-
return (
7-
<div className={`lds-circle ${className}`} style={{ background: color, width: size, height: size, ...style }} />
8-
)
7+
return (
8+
<div
9+
className={classNames(styles['lds-circle'], className)}
10+
style={{ background: color, width: size, height: size, ...style }}
11+
/>
12+
)
913
}
1014

1115
Circle.propTypes = {
12-
/** hex color */
13-
color: PropTypes.string,
14-
/** size in pixel */
15-
size: PropTypes.number,
16-
/** class name */
17-
className: PropTypes.string,
18-
/** style object */
19-
style: PropTypes.object,
16+
/** hex color */
17+
color: PropTypes.string,
18+
/** size in pixel */
19+
size: PropTypes.number,
20+
/** class name */
21+
className: PropTypes.string,
22+
/** style object */
23+
style: PropTypes.object,
2024
}
2125

2226
Circle.defaultProps = {
23-
color: '#7f58af',
24-
size: 64,
25-
className: '',
26-
style: {},
27+
color: '#7f58af',
28+
size: 64,
29+
className: '',
30+
style: {},
2731
}

src/components/Circle/style.css renamed to src/components/Circle/style.module.css

File renamed without changes.

‎src/components/Default/index.js‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import './style.css'
3+
import classNames from 'classnames'
4+
import styles from './style.module.css'
45

56
export default function Default({ color, className, style, size }) {
6-
const circles = [...Array(12)].map((_, index) => (
7-
<div key={index} style={{ background: `${color}`, width: size * 0.075, height: size * 0.075 }} />
8-
))
7+
const circles = [...Array(12)].map((_, index) => (
8+
<div key={index} style={{ background: `${color}`, width: size * 0.075, height: size * 0.075 }} />
9+
))
910

10-
return (
11-
<div className={`lds-default ${className}`} style={{ height: size, width: size, ...style }}>
12-
{circles}
13-
</div>
14-
)
11+
return (
12+
<div className={classNames(styles['lds-default'], className)} style={{ height: size, width: size, ...style }}>
13+
{circles}
14+
</div>
15+
)
1516
}
1617

1718
Default.propTypes = {
18-
/** hex color */
19-
color: PropTypes.string,
20-
/** size in pixel */
21-
size: PropTypes.number,
22-
/** class name */
23-
className: PropTypes.string,
24-
/** style object */
25-
style: PropTypes.object,
19+
/** hex color */
20+
color: PropTypes.string,
21+
/** size in pixel */
22+
size: PropTypes.number,
23+
/** class name */
24+
className: PropTypes.string,
25+
/** style object */
26+
style: PropTypes.object,
2627
}
2728

2829
Default.defaultProps = {
29-
color: '#7f58af',
30-
size: 80,
31-
className: '',
32-
style: {},
30+
color: '#7f58af',
31+
size: 80,
32+
className: '',
33+
style: {},
3334
}

‎src/components/Default/style.css‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎src/components/Default/style.module.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.lds-default {
2+
display: inline-block;
3+
position: relative;
4+
width: 80px;
5+
height: 80px;
6+
}
7+
.lds-default div {
8+
position: absolute;
9+
width: 6px;
10+
height: 6px;
11+
background: #fff;
12+
border-radius: 50%;
13+
animation: lds-default 1.2s linear infinite;
14+
}
15+
.lds-default div:nth-child(1) {
16+
animation-delay: 0s;
17+
top: 46.25%;
18+
left: 82.5%;
19+
}
20+
.lds-default div:nth-child(2) {
21+
animation-delay: -0.1s;
22+
top: 27.5%;
23+
left: 77.5%;
24+
}
25+
.lds-default div:nth-child(3) {
26+
animation-delay: -0.2s;
27+
top: 13.75%;
28+
left: 65%;
29+
}
30+
.lds-default div:nth-child(4) {
31+
animation-delay: -0.3s;
32+
top: 8.75%;
33+
left: 46.25%;
34+
}
35+
.lds-default div:nth-child(5) {
36+
animation-delay: -0.4s;
37+
top: 13.75%;
38+
left: 27.5%;
39+
}
40+
.lds-default div:nth-child(6) {
41+
animation-delay: -0.5s;
42+
top: 27.5%;
43+
left: 13.75%;
44+
}
45+
.lds-default div:nth-child(7) {
46+
animation-delay: -0.6s;
47+
top: 46.25%;
48+
left: 8.75%;
49+
}
50+
.lds-default div:nth-child(8) {
51+
animation-delay: -0.7s;
52+
top: 65%;
53+
left: 13.75%;
54+
}
55+
.lds-default div:nth-child(9) {
56+
animation-delay: -0.8s;
57+
top: 77.5%;
58+
left: 27.5%;
59+
}
60+
.lds-default div:nth-child(10) {
61+
animation-delay: -0.9s;
62+
top: 82.5%;
63+
left: 46.25%;
64+
}
65+
.lds-default div:nth-child(11) {
66+
animation-delay: -1s;
67+
top: 77.5%;
68+
left: 65%;
69+
}
70+
.lds-default div:nth-child(12) {
71+
animation-delay: -1.1s;
72+
top: 65%;
73+
left: 77.5%;
74+
}
75+
@keyframes lds-default {
76+
0%,
77+
20%,
78+
80%,
79+
100% {
80+
transform: scale(1);
81+
}
82+
50% {
83+
transform: scale(1.5);
84+
}
85+
}

‎src/components/DualRing/index.js‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import './style.css'
3+
import classNames from 'classnames'
4+
import styles from './style.module.css'
45

56
export default function DualRing({ color, className, style, size }) {
6-
return (
7-
<div className={`lds-dual-ring ${className}`} style={{ width: size, height: size, ...style }}>
8-
<div
9-
className="lds-dual-ring-after"
10-
style={{
11-
borderColor: `${color} transparent`,
12-
borderWidth: size * 0.1,
13-
width: size * 0.7 - 6,
14-
height: size * 0.7 - 6,
15-
}}
16-
></div>
17-
</div>
18-
)
7+
return (
8+
<div className={classNames(styles['lds-dual-ring'], className)} style={{ width: size, height: size, ...style }}>
9+
<div
10+
className={classNames(styles['lds-dual-ring-after'])}
11+
style={{
12+
borderColor: `${color} transparent`,
13+
borderWidth: size * 0.1,
14+
width: size * 0.7 - 6,
15+
height: size * 0.7 - 6,
16+
}}
17+
></div>
18+
</div>
19+
)
1920
}
2021

2122
DualRing.propTypes = {
22-
/** hex color */
23-
color: PropTypes.string,
24-
/** class name */
25-
className: PropTypes.string,
26-
/** style object */
27-
style: PropTypes.object,
28-
/** size in pixel */
29-
size: PropTypes.number,
23+
/** hex color */
24+
color: PropTypes.string,
25+
/** class name */
26+
className: PropTypes.string,
27+
/** style object */
28+
style: PropTypes.object,
29+
/** size in pixel */
30+
size: PropTypes.number,
3031
}
3132

3233
DualRing.defaultProps = {
33-
color: '#7f58af',
34-
className: '',
35-
style: {},
36-
size: 80,
34+
color: '#7f58af',
35+
className: '',
36+
style: {},
37+
size: 80,
3738
}

0 commit comments

Comments
 (0)