Skip to content

Commit b071db0

Browse files
ssrdjan-fadvssrdjan-fadv
committed
refactoring
1 parent eb7c679 commit b071db0

File tree

4 files changed

+200
-31
lines changed

4 files changed

+200
-31
lines changed

‎example/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"scripts": {
77
"debug": "esbuild app.js --bundle --format=cjs --outfile=bundle.js --loader:.js=jsx --sourcemap --preserve-symlinks",
88
"build": "esbuild app.js --bundle --format=cjs --outfile=bundle.js --loader:.js=jsx",
9-
"start": "serve"
9+
"start": "npx serve"
1010
},
1111
"alias": {
1212
"react": "./node_modules/react"
@@ -16,6 +16,6 @@
1616
"react-dom": "17.0.2"
1717
},
1818
"devDependencies": {
19-
"esbuild": "0.12.22"
19+
"esbuild": "0.12.26"
2020
}
2121
}

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-multistep",
3-
"version": "5.2.3",
3+
"version": "5.2.4",
44
"description": "Responsive ReactJS multistep form component",
55
"main": "dist/index.js",
66
"files": [
@@ -27,7 +27,7 @@
2727
"goober": "2.0.41"
2828
},
2929
"devDependencies": {
30-
"esbuild": "0.12.25",
30+
"esbuild": "0.12.26",
3131
"react": "17.0.2"
3232
},
3333
"peerDependencies": {

‎src/index.js‎

Lines changed: 114 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react'
2-
import { css, styled, setup } from 'goober'
2+
import { styled, setup } from 'goober'
33

44
setup(React.createElement)
55

@@ -8,29 +8,98 @@ const Ol = styled('ol')`
88
padding-bottom: 2.2rem;
99
list-style-type: none;
1010
`
11+
const LiTodo = styled('li')`
12+
display: inline-block;
13+
text-align: center;
14+
line-height: 4.8rem;
15+
padding: 0 0.7rem;
16+
cursor: pointer;
17+
18+
color: silver;
19+
border-bottom: 2px solid silver;
20+
21+
&::before {
22+
position: relative;
23+
bottom: -3.99rem;
24+
float: left;
25+
left: 50%;
26+
27+
content: "\u039F";
28+
color: silver;
29+
background-color: white;
30+
width: 1.2em;
31+
line-height: 1.2em;
32+
border-radius: 0;
33+
}
34+
&:hover,
35+
&:before {
36+
color: #0FA0CE;
37+
}
38+
&:after {
39+
content: "\\00a0\\00a0";
40+
}
41+
span {
42+
padding: 0 1.5rem;
43+
}
44+
`
45+
46+
const LiDoing = styled('li')`
47+
display: inline-block;
48+
text-align: center;
49+
line-height: 4.8rem;
50+
padding: 0 0.7rem;
51+
cursor: pointer;
52+
53+
color: black;
54+
border-bottom: 2px solid #33C3F0;
55+
56+
&::before {
57+
position: relative;
58+
bottom: -3.99rem;
59+
float: left;
60+
left: 50%;
61+
62+
content: "\u2022";
63+
color: white;
64+
background-color: #33C3F0;
65+
width: 1.2em;
66+
line-height: 1.4em;
67+
border-radius: 1.2em;
68+
}
69+
&:hover,
70+
&:before {
71+
color: #0FA0CE;
72+
}
73+
&:after {
74+
content: "\\00a0\\00a0";
75+
}
76+
span {
77+
padding: 0 1.5rem;
78+
}
79+
`
1180

12-
const LiClass = props => css`
81+
const LiDone = styled('li')`
1382
display: inline-block;
1483
text-align: center;
15-
line-height: 4.5rem;
84+
line-height: 4.8rem;
1685
padding: 0 0.7rem;
1786
cursor: pointer;
1887
19-
color: ${props.state === 'todo' ? 'silver' : 'black'};
20-
border-bottom: 4px solid ${props.state === 'todo' ? 'silver' : '#33C3F0'};
88+
color: black;
89+
border-bottom: 2px solid #33C3F0;
2190
2291
&::before {
2392
position: relative;
2493
bottom: -3.99rem;
2594
float: left;
2695
left: 50%;
2796
28-
${props.state === 'todo' ? 'content: "\u039F";' : props.state === 'doing' ? 'content: "\u2022";' : 'content: "\u2713";'}
29-
color: ${props.state === 'todo' ? 'silver' : 'white'};
30-
background-color: ${props.state === 'todo' ? 'white' : '#33C3F0'};
97+
content: "\u2713";
98+
color: 'white';
99+
background-color: '#33C3F0';
31100
width: 1.2em;
32-
line-height: ${props.state === 'todo' ? '1.2em' : '1.4em'};
33-
border-radius: ${props.state === 'todo' ? '0' : '1.2em'};
101+
line-height: 1.4em;
102+
border-radius: 1.2em;
34103
}
35104
&:hover,
36105
&:before {
@@ -43,6 +112,7 @@ const LiClass = props => css`
43112
padding: 0 1.5rem;
44113
}
45114
`
115+
46116
const getTopNavStyles = (indx, length) => {
47117
const styles = []
48118
for (let i = 0; i < length; i++) {
@@ -79,7 +149,7 @@ const getButtonsState = (indx, length) => {
79149
export default function MultiStep (props) {
80150
const { activeComponentClassName, inactiveComponentClassName } = props
81151
const showNav =
82-
typeof props.showNavigation === "undefined" ? true : props.showNavigation;
152+
typeof props.showNavigation === 'undefined' ? true : props.showNavigation
83153

84154
const [stylesState, setStyles] = useState(getTopNavStyles(0, props.steps.length))
85155
const [compState, setComp] = useState(0)
@@ -106,16 +176,39 @@ export default function MultiStep (props) {
106176
}
107177

108178
const renderSteps = () =>
109-
props.steps.map((s, i) => (
110-
<li
111-
className={LiClass({ state: stylesState[i] })}
112-
onClick={handleOnClick}
113-
key={i}
114-
value={i}
115-
>
116-
<span>{i + 1}</span>
117-
</li>
118-
))
179+
props.steps.map((s, i) => {
180+
if (stylesState[i] === 'todo') {
181+
return (
182+
<LiTodo
183+
onClick={handleOnClick}
184+
key={i}
185+
value={i}
186+
>
187+
<span>{i + 1}</span>
188+
</LiTodo>
189+
)
190+
} else if (stylesState[i] === 'doing') {
191+
return (
192+
<LiDoing
193+
onClick={handleOnClick}
194+
key={i}
195+
value={i}
196+
>
197+
<span>{i + 1}</span>
198+
</LiDoing>
199+
)
200+
} else {
201+
return (
202+
<LiDone
203+
onClick={handleOnClick}
204+
key={i}
205+
value={i}
206+
>
207+
<span>{i + 1}</span>
208+
</LiDone>
209+
)
210+
}
211+
})
119212

120213
const renderNav = (show) =>
121214
show && (

0 commit comments

Comments
 (0)