Skip to content

Commit 52cdd8c

Browse files
mxdi9i7mxdi9i7
authored
Merge pull request mxdi9i7#71 from mxdi9i7/shanyin/fixstepper
fix distance
2 parents 2fd8b24 + e5bd351 commit 52cdd8c

File tree

3 files changed

+90
-56
lines changed

3 files changed

+90
-56
lines changed

‎src/components/Stepper/index.scss

+11-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@
1212
transform: rotate(360deg);
1313
}
1414
}
15+
.stepper {
16+
display: flex;
17+
position: absolute;
18+
left: 50%;
19+
top: 50%;
20+
transform: translate(-50%, -50%);
21+
}
1522

1623
$baseClass: 'vant-stepper';
1724
.step-container {
@@ -158,7 +165,6 @@ input.#{$baseClass} {
158165
height: 28px;
159166
animation: donut-spin 1.2s linear infinite;
160167
position: relative;
161-
162168
opacity: 0;
163169
}
164170
.load {
@@ -174,3 +180,7 @@ input.#{$baseClass} {
174180
margin: auto;
175181
opacity: 0;
176182
}
183+
.load {
184+
position: absolute;
185+
bottom: 150px;
186+
}

‎src/components/Stepper/index.stories.tsx

+12-8
Original file line numberDiff line numberDiff line change
@@ -9,48 +9,52 @@ export default {
99

1010
export const BasicStepper = () => (
1111
<div className='container stepper'>
12-
<Stepper />
12+
<Stepper onChange={(value) => console.log(value)} />
1313
</div>
1414
);
1515

1616
export const DisableStepper = () => (
1717
<div className='container stepper'>
18-
<Stepper disabled />
18+
<Stepper disabled onChange={(value) => console.log(value)} />
1919
</div>
2020
);
2121

2222
export const StepStepper = () => (
2323
<div className='container stepper'>
24-
<Stepper step={2} />
24+
<Stepper step={2} onChange={(value) => console.log(value)} />
2525
</div>
2626
);
2727

2828
export const RangeStepper = () => (
2929
<div className='container stepper'>
30-
<Stepper min={0} max={8} />
30+
<Stepper min={0} max={8} onChange={(value) => console.log(value)} />
3131
</div>
3232
);
3333

3434
export const SizeStepper = () => (
3535
<div className='container stepper'>
36-
<Stepper size={50} />
36+
<Stepper size={50} onChange={(value) => console.log(value)} />
3737
</div>
3838
);
3939

4040
export const RoundStepper = () => (
4141
<div className='container stepper'>
42-
<Stepper theme />
42+
<Stepper theme onChange={(value) => console.log(value)} />
4343
</div>
4444
);
4545

4646
export const DisableInputStepper = () => (
4747
<div className='container stepper'>
48-
<Stepper disableInput />
48+
<Stepper disableInput onChange={(value) => console.log(value)} />
4949
</div>
5050
);
5151

5252
export const AsyncStepper = () => (
5353
<div className='container stepper'>
54-
<Stepper loading />
54+
<Stepper
55+
loading
56+
asyncChange={() => {}}
57+
onChange={(value) => console.log(value)}
58+
/>
5559
</div>
5660
);

‎src/components/Stepper/index.tsx

+67-47
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, { useState, useEffect } from 'react';
2-
import ReactDOM from 'react-dom';
1+
import React, { useState, useEffect, ReactElement, createRef } from 'react';
32

43
import classnames from '../../utils/classNames';
54

@@ -20,6 +19,9 @@ export interface IProps {
2019
minus?: Boolean;
2120
size?: number;
2221
loading?: Boolean;
22+
tag?: ReactElement;
23+
onChange: Function;
24+
asyncChange?: Function | any;
2325
}
2426

2527
export default function Stepper({
@@ -30,17 +32,20 @@ export default function Stepper({
3032
disableInput,
3133
size,
3234
theme,
33-
loading
35+
loading,
36+
onChange,
37+
asyncChange
3438
}: IProps) {
3539
const [value, setValue] = useState(0);
3640
const [isMinus, setIsMinus] = useState(false);
3741
const [isPlus, setIsPlus] = useState(false);
3842
const [isInput, setIsInput] = useState(false);
39-
const animationDiv = document.getElementById('loading');
40-
const animationBackground = document.getElementById('loading-background');
43+
4144
const [minusBt, setMinusBt] = useState({});
4245
const [plusBt, setPlusBt] = useState({});
4346
const [inputBt, setInputBt] = useState({});
47+
const animationDiv = createRef<HTMLDivElement>();
48+
const animationBackgroundDiv = createRef<HTMLDivElement>();
4449

4550
const handleIncrementBtProps = {
4651
className: classnames(baseClass, [{ disabled }, { theme }]),
@@ -57,68 +62,82 @@ export default function Stepper({
5762

5863
const handleIncrement = () => {
5964
if (loading) {
60-
ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
61-
ReactDOM.findDOMNode(animationBackground).style.opacity = 1;
65+
const aniNode = animationDiv.current;
66+
const aniBgNode = animationBackgroundDiv.current;
67+
if (aniNode && aniBgNode) {
68+
aniNode.style.opacity = '1';
69+
aniBgNode.style.opacity = '1';
70+
}
71+
6272
const handlePlus = () => {
63-
if (step) {
64-
setValue(value + step);
65-
ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
66-
ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
67-
} else {
68-
setValue(value + 1);
69-
ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
70-
ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
73+
const nextValue = value + (step || 1);
74+
setValue(nextValue);
75+
76+
if (aniNode && aniBgNode) {
77+
aniNode.style.opacity = '0';
78+
aniBgNode.style.opacity = '0';
7179
}
80+
onChange(nextValue);
81+
asyncChange();
7282
};
73-
74-
setTimeout(handlePlus, 2000);
75-
} else if (step) {
76-
setValue(value + step);
83+
setTimeout(handlePlus, 1000);
7784
} else {
78-
setValue(value + 1);
85+
const nextValue = value + (step || 1);
86+
setValue(nextValue);
87+
onChange(nextValue);
7988
}
8089
};
90+
8191
const handleDecrement = () => {
82-
const canMinus = value - step;
92+
setIsPlus(false);
8393
if (loading) {
84-
ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
85-
ReactDOM.findDOMNode(animationBackground).style.opacity = 1;
86-
87-
const Decrement = () => {
88-
if (step) {
89-
setValue(value - step);
90-
ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
91-
ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
92-
} else {
93-
setValue(value - 1);
94-
ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
95-
ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
94+
const aniNode = animationDiv.current;
95+
const aniBgNode = animationBackgroundDiv.current;
96+
if (aniNode && aniBgNode) {
97+
aniNode.style.opacity = '1';
98+
aniBgNode.style.opacity = '1';
99+
}
100+
101+
const decrement = () => {
102+
const nextValue = value - (step || 1);
103+
setValue(nextValue);
104+
onChange(nextValue);
105+
if (aniNode && aniBgNode) {
106+
aniNode.style.opacity = '0';
107+
aniBgNode.style.opacity = '0';
96108
}
97109
};
98-
setTimeout(Decrement, 2000);
99-
} else if (step) {
100-
if (canMinus >= 0) {
101-
setValue(value - step);
102-
}
110+
setTimeout(decrement, 1000);
103111
} else {
104-
if (value > 0) {
105-
setValue(value - 1);
112+
const nextValue = value - (step || 1);
113+
if (nextValue >= 0) {
114+
setValue(nextValue);
115+
onChange(nextValue);
106116
}
107117
}
108118
};
119+
109120
const handleInputChange = (e) => {
110121
const result = e.target.value;
111122
if (loading) {
112-
ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
113-
ReactDOM.findDOMNode(animationBackground).style.opacity = 1;
123+
const aniNode = animationDiv.current;
124+
const aniBgNode = animationBackgroundDiv.current;
125+
if (aniNode && aniBgNode) {
126+
aniNode.style.opacity = '1';
127+
aniBgNode.style.opacity = '1';
128+
}
114129
const changeInput = () => {
115130
setValue(Number(result));
116-
ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
117-
ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
131+
onChange(Number(result));
132+
if (aniNode && aniBgNode) {
133+
aniNode.style.opacity = '0';
134+
aniBgNode.style.opacity = '0';
135+
}
118136
};
119137
setTimeout(changeInput, 2000);
120138
} else {
121139
setValue(Number(e.target.value));
140+
onChange(Number(e.target.value));
122141
}
123142
};
124143

@@ -162,6 +181,7 @@ export default function Stepper({
162181
opacity: '0.2'
163182
};
164183
setPlusBt(btStyle);
184+
setIsPlus(true);
165185
} else {
166186
const btnStyle = {
167187
cursor: 'pointer',
@@ -181,6 +201,7 @@ export default function Stepper({
181201
} else if (value === max) {
182202
const btStyle = { cursor: 'not-allowed', opacity: '0.2' };
183203
setPlusBt(btStyle);
204+
setIsPlus(true);
184205
} else {
185206
const btnStyle = {
186207
cursor: 'pointer'
@@ -197,7 +218,6 @@ export default function Stepper({
197218
Object.assign(inputProps, { disabled });
198219
}
199220
}, [disableInput]);
200-
201221
return (
202222
<div className='step-container'>
203223
<button
@@ -217,8 +237,8 @@ export default function Stepper({
217237
style={inputBt}
218238
/>
219239
{loading && (
220-
<div id='loading-background' className='load'>
221-
<div id='loading' className='load-background' />
240+
<div ref={animationBackgroundDiv} className='load'>
241+
<div ref={animationDiv} className='load-background' />
222242
</div>
223243
)}
224244
<button

0 commit comments

Comments
 (0)