Skip to content

Commit 50a5114

Browse files
youlunayouluna
committed
feat(*): upgrade motion of Drawer/Select
1 parent c6139f5 commit 50a5114

23 files changed

+242
-172
lines changed

‎docs/select/demo/basic.md

+160-33
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ simple usage, has clear, show search
1414
---
1515

1616
````jsx
17-
import { Select } from '@alifd/next';
17+
import { Select, Button, Radio, TreeSelect, Drawer, Dialog, Message, DatePicker, DatePicker2, CascaderSelect } from '@alifd/next';
18+
import 'whatwg-fetch';
19+
20+
const TreeNode = TreeSelect.Node;
1821

1922
const Option = Select.Option;
2023

@@ -34,8 +37,155 @@ const onBlur = () => {
3437
console.log('blur');
3538
};
3639

40+
41+
class Demo extends React.Component {
42+
state = {
43+
visible: false,
44+
placement: 'right'
45+
};
46+
47+
onOpen = () => {
48+
this.setState({
49+
visible: true
50+
});
51+
};
52+
53+
onClose = (reason) => {
54+
55+
this.setState({
56+
visible: false
57+
});
58+
};
59+
60+
onPlacementChange = dir => {
61+
this.setState({
62+
placement: dir
63+
});
64+
}
65+
66+
render() {
67+
return (
68+
<div>
69+
<Radio.Group
70+
dataSource={['right', 'bottom', 'left', 'top']}
71+
defaultValue={'right'}
72+
onChange={this.onPlacementChange}
73+
/>
74+
<br/>
75+
<br/>
76+
<Button type="primary" onClick={this.onOpen}> open </Button>
77+
<Drawer
78+
title="标题"
79+
visible={this.state.visible}
80+
placement={this.state.placement}
81+
onClose={this.onClose}>
82+
Start your business here by searching a popular product
83+
</Drawer>
84+
</div>
85+
);
86+
}
87+
}
88+
89+
90+
const popupCustomIcon = () => {
91+
Dialog.confirm({
92+
title: "Confirm",
93+
content: 'set icon as "warning" ',
94+
closeMode: ['mask', 'icon', 'esc'],
95+
messageProps: {
96+
type: "warning"
97+
},
98+
onOk: () => console.log("ok"),
99+
onCancel: () => console.log("cancel")
100+
});
101+
};
102+
103+
const notice = () => {
104+
Message.notice('This is a Toast Message Notice');
105+
};
106+
107+
108+
class Demo3 extends React.Component {
109+
constructor(props) {
110+
super(props);
111+
112+
this.state = {
113+
data: []
114+
};
115+
}
116+
117+
componentDidMount() {
118+
fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
119+
.then(response => response.json())
120+
.then(data => {
121+
this.setState({ data });
122+
})
123+
.catch(e => console.log(e));
124+
}
125+
126+
handleChange = (value, data, extra) => {
127+
console.log(value, data, extra);
128+
}
129+
130+
render() {
131+
return <CascaderSelect dataSource={this.state.data} onChange={this.handleChange} />;
132+
}
133+
}
134+
135+
136+
class Demo4 extends React.Component {
137+
constructor(props) {
138+
super(props);
139+
140+
this.handleChange = this.handleChange.bind(this);
141+
}
142+
143+
handleChange(value, data) {
144+
console.log(value, data);
145+
}
146+
147+
render() {
148+
return (
149+
<TreeSelect
150+
treeDefaultExpandAll
151+
onChange={this.handleChange}
152+
style={{ width: 200 }}
153+
>
154+
<TreeNode key="1" value="1" label="Component">
155+
<TreeNode key="2" value="2" label="Form">
156+
<TreeNode key="4" value="4" label="Input" />
157+
<TreeNode key="5" value="5" label="Select" disabled />
158+
</TreeNode>
159+
<TreeNode key="3" value="3" label="Display">
160+
<TreeNode key="6" value="6" label="Table" />
161+
</TreeNode>
162+
</TreeNode>
163+
</TreeSelect>
164+
);
165+
}
166+
}
167+
168+
37169
ReactDOM.render(
38170
<div>
171+
Drawer:
172+
<br />
173+
<Demo />
174+
<br />
175+
Dialog:
176+
<br />
177+
<Button onClick={popupCustomIcon}>custom</Button>
178+
<br />
179+
<br />
180+
Toast:
181+
<br />
182+
<Button type="primary" onClick={notice}>
183+
Display Toast Message Notice
184+
</Button>
185+
<br />
186+
<br />
187+
Select:
188+
<br />
39189
<Select
40190
id="basic-demo"
41191
onChange={onChange}
@@ -50,38 +200,15 @@ ReactDOM.render(
50200
<Option value="frank">Frank</Option>
51201
<Option value="hugo">Hugo</Option>
52202
</Select>
53-
54-
55-
<Select
56-
defaultValue="clear"
57-
hasClear
58-
style={{marginRight: 8}}
59-
>
60-
<Option value="jack">Jack</Option>
61-
<Option value="frank">Frank</Option>
62-
<Option value="clear">clear</Option>
63-
</Select>
64-
65-
<Select
66-
placeholder="show search"
67-
showSearch
68-
hasClear
69-
style={{marginRight: 8}}
70-
>
71-
<Option value="jack">Jack</Option>
72-
<Option value="frank">Frank</Option>
73-
<Option value="hugo">Hugo</Option>
74-
</Select>
75-
76-
<Select
77-
disabled
78-
defaultValue="frank"
79-
style={{marginRight: 8}}
80-
>
81-
<Option value="jack">Jack</Option>
82-
<Option value="frank">Frank</Option>
83-
<Option value="hugo">Hugo</Option>
84-
</Select>
203+
<br /><br />
204+
<DatePicker />
205+
<br /><br />
206+
<DatePicker2 />
207+
<br /><br />
208+
<Demo3 />
209+
<br /><br />
210+
<Demo4 />
211+
<br /><br />
85212

86213
</div>,
87214
mountNode

‎src/animate/main.scss

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import "scss/_fading-exits/_fadeOutLeft.scss";
1111
@import "scss/_fading-exits/_fadeOutRight.scss";
1212
@import "scss/_fading-exits/_fadeOutUp.scss";
13+
@import "scss/_fading-exits/_fadeOutUpSmall.scss";
1314
@import "scss/_sliding-exits/sliding-exits.scss";
1415
@import "scss/_sliding-entrances/sliding-entrances.scss";
1516
@import "scss/_zooming-entrances/_zoomIn.scss";
@@ -62,6 +63,10 @@
6263
@include fadeOutUp();
6364
}
6465

66+
.fadeOutUpSmall {
67+
@include fadeOutUpSmall();
68+
}
69+
6570
.slideInUp {
6671
@include slideInUp();
6772
}

‎src/animate/scss/_fading-entrances/_fadeInDown.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@include keyframes(fadeInDown) {
22
0% {
33
opacity: 0;
4-
@include transform(translateY(-100px));
4+
@include transform(translateY(-8px));
55
}
66
100% {
77
opacity: 1;

‎src/animate/scss/_fading-exits/_fadeOut.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88
}
99

10-
@mixin fadeOut($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
10+
@mixin fadeOut($count: $countDefault, $duration: $durationBigDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1111
@include animation-name(fadeOut);
1212
@include count($count);
1313
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutDown.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutDown($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutDown($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutDown);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutDownBig.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutDownBig($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutDownBig($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutDownBig);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutLeft.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutLeft($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutLeft($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutLeft);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutLeftBig.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutLeftBig($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutLeftBig($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutLeftBig);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutRight.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutRight($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutRight($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutRight);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutRightBig.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutRightBig($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutRightBig($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutRightBig);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutUpBig.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin fadeOutUpBig($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin fadeOutUpBig($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(fadeOutUpBig);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_fading-exits/_fadeOutUpSmall.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@include keyframes(fadeOutUp) {
2+
0% {
3+
opacity: 1;
4+
@include transform(translateY(0));
5+
}
6+
100% {
7+
opacity: 0;
8+
@include transform(translateY(-8px));
9+
}
10+
}
11+
12+
@mixin fadeOutUpSmall($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $motion-default, $fill: $fillDefault, $visibility: $visibilityDefault) {
13+
@include animation-name(fadeOutUp);
14+
@include count($count);
15+
@include duration($duration);
16+
@include delay($delay);
17+
@include function($function);
18+
@include fill-mode($fill);
19+
@include visibility($visibility);
20+
}

‎src/animate/scss/_fading-exits/fading-exits.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@
77
@import "_fadeOutLeftBig";
88
@import "_fadeOutRight";
99
@import "_fadeOutRightBig";
10+
@import "_fadeOutUpSmall";
1011
@import "_fadeOutUp";
1112
@import "_fadeOutUpBig";

‎src/animate/scss/_sliding-entrances/_slideInDown.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin slideInDown($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin slideInDown($count: $countDefault, $duration: $durationBigDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(slideInDown);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_sliding-entrances/_slideInLeft.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin slideInLeft($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin slideInLeft($count: $countDefault, $duration: $durationBigDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(slideInLeft);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_sliding-entrances/_slideInRight.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin slideInRight($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin slideInRight($count: $countDefault, $duration: $durationBigDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(slideInRight);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/_sliding-entrances/_slideInUp.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@mixin slideInUp($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
12+
@mixin slideInUp($count: $countDefault, $duration: $durationBigDefault, $delay: $delayDefault, $function: $ease-in-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
1313
@include animation-name(slideInUp);
1414
@include count($count);
1515
@include duration($duration);

‎src/animate/scss/variable.scss

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ $countDefault: 1 !default;
88

99
$durationSmallDefault: .2s !default;
1010
$durationDefault: .3s !default;
11+
$motion-duration-standard-out: .25s !default;
1112
$durationBigDefault: .35s !default;
1213

1314
$delayDefault: 0s !default;

0 commit comments

Comments
 (0)