Skip to content

Commit 20eff1a

Browse files
LIUSHANYINLIUSHANYIN
committed
fix
1 parent eb6c8ce commit 20eff1a

File tree

2 files changed

+124
-68
lines changed

2 files changed

+124
-68
lines changed

‎src/components/Stepper/index.scss

+82-34
Original file line numberDiff line numberDiff line change
@@ -48,32 +48,39 @@ $baseClass: 'vant-stepper';
4848
align-items: center;
4949
padding: 0px;
5050
margin: 0;
51-
}
52-
.load-background {
53-
display: inline-block;
54-
border: 4px solid rgba(0, 0, 0, 0.1);
55-
border-left-color: white;
56-
border-radius: 50%;
57-
width: 28px;
58-
height: 28px;
59-
animation: donut-spin 1.2s linear infinite;
6051
position: relative;
52+
}
53+
button:first-child {
54+
::before {
55+
content: '';
56+
position: absolute;
57+
border-top: 1px solid black;
6158

62-
opacity: 0;
59+
width: 10px;
60+
left: 50%;
61+
top: 50%;
62+
transform: translate(-50%, -50%);
63+
}
6364
}
64-
.load {
65-
width: 85px;
66-
height: 85px;
67-
position: absolute;
68-
top: 30%;
69-
background-color: rgba(0, 0, 0, 0.836);
70-
display: flex;
71-
justify-content: center;
72-
align-items: center;
73-
border-radius: 10px;
74-
margin: auto;
75-
opacity: 0;
76-
65+
button:last-child {
66+
::before {
67+
content: '';
68+
position: absolute;
69+
border-top: 1px solid black;
70+
width: 10px;
71+
left: 50%;
72+
top: 50%;
73+
transform: translate(-50%, -50%);
74+
}
75+
::after {
76+
content: '';
77+
position: absolute;
78+
left: 50%;
79+
top: 50%;
80+
transform: translate(-50%, -50%);
81+
height: 10px;
82+
border-left: 1px solid black;
83+
}
7784
}
7885
}
7986

@@ -95,9 +102,37 @@ button.#{$baseClass} {
95102
outline: none;
96103
width: 22px;
97104
height: 22px;
98-
background-color: rgb(132, 225, 241);
99-
}
100-
105+
background-color: red;
106+
border-color: white;
107+
.minus::before {
108+
content: '';
109+
position: absolute;
110+
border-top: 1px solid white;
111+
112+
width: 10px;
113+
left: 50%;
114+
top: 50%;
115+
transform: translate(-50%, -50%);
116+
}
117+
.add::before {
118+
content: '';
119+
position: absolute;
120+
border-top: 1px solid white;
121+
width: 10px;
122+
left: 50%;
123+
top: 50%;
124+
transform: translate(-50%, -50%);
125+
}
126+
.add::after {
127+
content: '';
128+
position: absolute;
129+
left: 50%;
130+
top: 50%;
131+
transform: translate(-50%, -50%);
132+
height: 10px;
133+
border-left: 1px solid white;
134+
}
135+
}
101136
}
102137
input.#{$baseClass} {
103138
width: 32px;
@@ -114,15 +149,28 @@ input.#{$baseClass} {
114149
background-color: white;
115150
}
116151
}
117-
.step-container button p {
152+
.load-background {
153+
display: inline-block;
154+
border: 4px solid rgba(0, 0, 0, 0.1);
155+
border-left-color: white;
156+
border-radius: 50%;
157+
width: 28px;
158+
height: 28px;
159+
animation: donut-spin 1.2s linear infinite;
160+
position: relative;
161+
162+
opacity: 0;
163+
}
164+
.load {
165+
width: 85px;
166+
height: 85px;
167+
position: absolute;
168+
top: 30%;
169+
background-color: rgba(0, 0, 0, 0.836);
118170
display: flex;
119171
justify-content: center;
120172
align-items: center;
121-
text-align: center;
122-
height: inherit;
123-
width: inherit;
124-
padding: 0;
125-
font-size: 20px;
126-
margin: 0;
173+
border-radius: 10px;
174+
margin: auto;
175+
opacity: 0;
127176
}
128-

‎src/components/Stepper/index.tsx

+42-34
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default function Stepper({
112112
ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
113113
ReactDOM.findDOMNode(animationBackground).style.opacity = 1;
114114
const changeInput = () => {
115-
setValue(result);
115+
setValue(Number(result));
116116
ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
117117
ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
118118
};
@@ -121,35 +121,39 @@ export default function Stepper({
121121
setValue(Number(e.target.value));
122122
}
123123
};
124+
124125
useEffect(() => {
125126
if (disabled) {
127+
const btStyle = {
128+
cursor: 'not-allowed',
129+
opacity: '0.2'
130+
};
131+
setMinusBt(btStyle);
132+
setPlusBt(btStyle);
126133
setIsPlus(true);
127134
setIsMinus(true);
128-
} else {
129-
if (value === 0 || value === min) {
130-
setIsMinus(true);
131-
} else if (value === max) {
132-
setIsPlus(true);
133-
} else {
134-
setIsMinus(false);
135-
setIsPlus(false);
136-
}
137-
}
138-
}, [disabled, value, max, min, handleDecrementProps, handleIncrementBtProps]);
139-
useEffect(() => {
140-
if (size) {
135+
Object.assign(handleDecrementProps, { disabled });
136+
Object.assign(handleIncrementBtProps, { disabled });
137+
} else if (size) {
141138
const Size = `${size}px`;
142139
setMinusBt({ width: Size, height: Size });
143140
setInputBt({ width: Size, height: Size });
144-
setPlusBt({ width: Size, height: Size });
141+
setPlusBt({ cursor: 'pointer' });
142+
145143
if (value === 0 || value === min) {
146144
const btStyle = {
147145
cursor: 'not-allowed',
148146
width: Size,
149147
height: Size,
150148
opacity: '0.2'
151149
};
150+
const btnStyle = {
151+
cursor: 'pointer',
152+
width: Size,
153+
height: Size
154+
};
152155
setMinusBt(btStyle);
156+
setPlusBt(btnStyle);
153157
} else if (value === max) {
154158
const btStyle = {
155159
cursor: 'not-allowed',
@@ -159,20 +163,30 @@ export default function Stepper({
159163
};
160164
setPlusBt(btStyle);
161165
} else {
162-
setMinusBt({ width: Size, height: Size });
163-
setInputBt({ width: Size, height: Size });
164-
setPlusBt({ width: Size, height: Size });
166+
const btnStyle = {
167+
cursor: 'pointer',
168+
width: Size,
169+
height: Size
170+
};
171+
setMinusBt(btnStyle);
172+
setInputBt(btnStyle);
173+
setPlusBt(btnStyle);
165174
}
166175
} else {
167176
if (value === 0 || value === min) {
168177
const btStyle = { cursor: 'not-allowed', opacity: '0.2' };
178+
const btnStyle = { cursor: 'pointer' };
169179
setMinusBt(btStyle);
180+
setPlusBt(btnStyle);
170181
} else if (value === max) {
171182
const btStyle = { cursor: 'not-allowed', opacity: '0.2' };
172183
setPlusBt(btStyle);
173184
} else {
174-
setMinusBt({});
175-
setPlusBt({});
185+
const btnStyle = {
186+
cursor: 'pointer'
187+
};
188+
setMinusBt(btnStyle);
189+
setPlusBt(btnStyle);
176190
}
177191
}
178192
}, [value]);
@@ -187,15 +201,13 @@ export default function Stepper({
187201
return (
188202
<div className='step-container'>
189203
<button
204+
id='minus'
190205
onClick={handleDecrement}
191206
{...handleDecrementProps}
192207
disabled={isMinus}
193208
style={minusBt}
194209
>
195-
<img
196-
src='https://res.cloudinary.com/dlapk94rx/image/upload/v1595307854/icons8-minus-24_y8dnmc.png'
197-
alt=''
198-
/>{' '}
210+
<div className='minus' />
199211
</button>
200212
<input
201213
value={value}
@@ -204,23 +216,19 @@ export default function Stepper({
204216
disabled={isInput}
205217
style={inputBt}
206218
/>
207-
219+
{loading && (
220+
<div id='loading-background' className='load'>
221+
<div id='loading' className='load-background' />
222+
</div>
223+
)}
208224
<button
209225
onClick={handleIncrement}
210226
{...handleIncrementBtProps}
211227
disabled={isPlus}
212228
style={plusBt}
213229
>
214-
<img
215-
src='https://res.cloudinary.com/dlapk94rx/image/upload/v1595307854/icons8-plus-24_wnv2uo.png'
216-
alt=''
217-
/>
230+
<div className='add' />
218231
</button>
219-
{loading && (
220-
<div id='loading-background' className='load'>
221-
<div id='loading' className='load-background' />
222-
</div>
223-
)}
224232
</div>
225233
);
226234
}

0 commit comments

Comments
 (0)