Skip to content

Commit 3686094

Browse files
FhasghrgeFhasghrge
committed
fix: autofocus input from dialog no effect
1 parent 87d6291 commit 3686094

6 files changed

Lines changed: 181 additions & 0 deletions

File tree

‎assets/autofocus.less‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
.rc-dialog {
2+
position: relative;
3+
width: auto;
4+
margin: 10px;
5+
6+
&-wrap {
7+
position: fixed;
8+
overflow: auto;
9+
top: 0;
10+
right: 0;
11+
bottom: 0;
12+
left: 0;
13+
z-index: 1050;
14+
-webkit-overflow-scrolling: touch;
15+
outline: 0;
16+
}
17+
18+
&-title {
19+
margin: 0;
20+
font-size: 14px;
21+
line-height: 21px;
22+
font-weight: bold;
23+
}
24+
25+
&-content {
26+
position: relative;
27+
background-color: #ffffff;
28+
border: none;
29+
border-radius: 6px 6px;
30+
background-clip: padding-box;
31+
}
32+
33+
&-close {
34+
cursor: pointer;
35+
border: 0;
36+
background: transparent;
37+
font-size: 21px;
38+
position: absolute;
39+
right: 20px;
40+
top: 12px;
41+
font-weight: 700;
42+
line-height: 1;
43+
color: #000;
44+
text-shadow: 0 1px 0 #fff;
45+
filter: alpha(opacity=20);
46+
opacity: .2;
47+
text-decoration: none;
48+
49+
&-x:after {
50+
content: '×'
51+
}
52+
53+
&:hover {
54+
opacity: 1;
55+
filter: alpha(opacity=100);
56+
text-decoration: none;
57+
}
58+
}
59+
60+
&-header {
61+
padding: 13px 20px 14px 20px;
62+
border-radius: 5px 5px 0 0;
63+
background: #fff;
64+
color: #666;
65+
border-bottom: 1px solid #e9e9e9;
66+
}
67+
68+
&-body {
69+
padding: 20px;
70+
}
71+
72+
&-footer {
73+
border-top: 1px solid #e9e9e9;
74+
padding: 10px 20px;
75+
text-align: right;
76+
border-radius: 0 0 5px 5px;
77+
}
78+
79+
.effect() {
80+
animation-duration: 0.3s;
81+
animation-fill-mode: both;
82+
}
83+
84+
&-zoom-enter, &-zoom-appear {
85+
opacity: 0;
86+
.effect();
87+
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
88+
animation-play-state: paused;
89+
}
90+
91+
&-zoom-leave {
92+
.effect();
93+
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
94+
animation-play-state: paused;
95+
}
96+
97+
&-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
98+
animation-name: rcDialogZoomIn;
99+
animation-play-state: running;
100+
}
101+
102+
&-zoom-leave&-zoom-leave-active {
103+
animation-name: rcDialogZoomOut;
104+
animation-play-state: running;
105+
}
106+
107+
@keyframes rcDialogZoomIn {
108+
0% {
109+
opacity: 0;
110+
transform: scale(0, 0);
111+
}
112+
100% {
113+
opacity: 1;
114+
transform: scale(1, 1);
115+
}
116+
}
117+
@keyframes rcDialogZoomOut {
118+
0% {
119+
120+
transform: scale(1, 1);
121+
}
122+
100% {
123+
opacity: 0;
124+
transform: scale(0, 0);
125+
}
126+
}
127+
}
128+
129+
@media (min-width: 768px) {
130+
.rc-dialog {
131+
width: 600px;
132+
margin: 30px auto;
133+
}
134+
}

‎assets/index.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@
2626
}
2727
}
2828
}
29+
@import './autofocus.less';

‎docs/demo/autofocus.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: AutoFocus
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/autofocus.tsx"></code>

‎docs/examples/autofocus.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Dialog from 'rc-dialog';
2+
import Input from 'rc-input';
3+
import type { FC } from 'react';
4+
import React from 'react';
5+
import '../../assets/index.less';
6+
7+
const Demo: FC = () => {
8+
const [vis, setVis] = React.useState(false);
9+
return (
10+
<div>
11+
normal:
12+
<Input placeholder="input" autoFocus />
13+
<br />
14+
<br />
15+
dialog:
16+
<button onClick={() => setVis((pre) => !pre)}>
17+
toggle autoFocus input{' '}
18+
</button>
19+
<Dialog
20+
visible={vis}
21+
onClose={() => setVis(false)}
22+
style={{ width: 600 }}
23+
title={<div>第二个弹框</div>}
24+
>
25+
<Input placeholder="input" autoFocus />
26+
</Dialog>
27+
</div>
28+
);
29+
};
30+
31+
export default Demo;

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"np": "^7.0.0",
7070
"prettier": "^2.0.5",
7171
"pretty-quick": "^3.0.0",
72+
"rc-dialog": "^9.1.0",
7273
"react": "^18.0.0",
7374
"react-dom": "^18.0.0",
7475
"typescript": "^4.0.5",

‎src/Input.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
7474
setFocused((prev) => (prev && disabled ? false : prev));
7575
}, [disabled]);
7676

77+
useEffect(() => {
78+
if (rest.autoFocus) {
79+
focus();
80+
}
81+
}, [rest.autoFocus]);
82+
7783
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
7884
if (props.value === undefined) {
7985
setValue(e.target.value);

0 commit comments

Comments
 (0)