mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

style: Adjust the edge shadow

Browse Source
This commit is contained in:
陈帅 2018-07-20 13:31:30 +08:00 committed by 偏右
parent 881cef5abf
commit 88981fef22
5 changed files with 40 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/drawer/__tests__/Drawer.test.js
View File

@ -3,45 +3,6 @@ import { mount } from 'enzyme';
import Drawer from '..';
describe('Drawer', () => {
it('render correctly', () => {
const wrapper = mount(
<Drawer
visible
width={400}
getContainer={false}
>
Here is content of Drawer
</Drawer>
);
expect(wrapper.render()).toMatchSnapshot();
});
it('have a title', () => {
const wrapper = mount(
<Drawer
visible
title="Test Title"
getContainer={false}
>
Here is content of Drawer
</Drawer>
);
expect(wrapper.render()).toMatchSnapshot();
});
it('closable is false', () => {
const wrapper = mount(
<Drawer
visible
closable={false}
getContainer={false}
>
Here is content of Drawer
</Drawer>
);
expect(wrapper.render()).toMatchSnapshot();
});
it('destroyOnClose is true', () => {
const wrapper = mount(
<Drawer

28
components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
View File

@ -10,12 +10,13 @@ exports[`Drawer closable is false 1`] = `
/>
<div
class="ant-drawer-content-wrapper"
style="width: 256px;"
>
<div
class="ant-drawer-content"
>
<div
style="overflow: auto; height: 100%; width: 256px;"
style="overflow: auto; height: 100%;"
>
<div
class="ant-drawer-body"
@ -39,13 +40,28 @@ exports[`Drawer destroyOnClose is true 1`] = `
/>
<div
class="ant-drawer-content-wrapper"
style="transform: translateX(100%); width: 256px;"
>
<div
class="ant-drawer-content"
>
<div
style="overflow: auto; height: 100%; width: 256px;"
/>
style="overflow: auto; height: 100%; opacity: 0;"
>
<button
aria-label="Close"
class="ant-drawer-close"
>
<span
class="ant-drawer-close-x"
/>
</button>
<div
class="ant-drawer-body"
>
Here is content of Drawer
</div>
</div>
</div>
</div>
</div>
@ -62,12 +78,13 @@ exports[`Drawer have a title 1`] = `
/>
<div
class="ant-drawer-content-wrapper"
style="width: 256px;"
>
<div
class="ant-drawer-content"
>
<div
style="overflow: auto; height: 100%; width: 256px;"
style="overflow: auto; height: 100%;"
>
<div
class="ant-drawer-header"
@ -108,12 +125,13 @@ exports[`Drawer render correctly 1`] = `
/>
<div
class="ant-drawer-content-wrapper"
style="width: 400px;"
>
<div
class="ant-drawer-content"
>
<div
style="overflow: auto; height: 100%; width: 400px;"
style="overflow: auto; height: 100%;"
>
<button
aria-label="Close"

3
components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
View File

@ -19,12 +19,13 @@ exports[`Drawer render correctly 1`] = `
/>
<div
class="ant-drawer-content-wrapper"
style="width: 256px;"
>
<div
class="ant-drawer-content"
>
<div
style="overflow: auto; height: 100%; width: 256px;"
style="overflow: auto; height: 100%;"
>
<button
aria-label="Close"

9
components/drawer/index.tsx
View File

@ -107,6 +107,11 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
});
}
onDestoryTransitionEnd = () => {
const { destroyOnClose, visible } = this.props;
const isDestroyOnClose = destroyOnClose && !visible;
if (!isDestroyOnClose) {
return;
}
if (!this.props.visible) {
this.destoryClose = true;
this.forceUpdate();
@ -118,12 +123,12 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
}
this.destoryClose = false;
const { destroyOnClose, visible, placement } = this.props;
const isDestroyOnClose = destroyOnClose && !visible;
const containerStyle: React.CSSProperties = placement === 'left'
|| placement === 'right' ? {
overflow: 'auto',
height: '100%',
} : {};
const isDestroyOnClose = destroyOnClose && !visible;
if (isDestroyOnClose) {
// 增加透明渐变，跟关闭的动画时间相同，在关闭后删除子元素；
containerStyle.opacity = 0;
@ -154,7 +159,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
return (
<div
style={containerStyle}
onTransitionEnd={(isDestroyOnClose && this.onDestoryTransitionEnd) as any}
onTransitionEnd={this.onDestoryTransitionEnd}
>
{header}
{closer}

21
components/drawer/style/drawer.less
View File

@ -9,9 +9,9 @@
height: 100%;
pointer-events: none;
z-index: @zindex-modal;
transition: transform .3s @ease-in-out-circ;
>* {
transition: transform .3s @ease-in-out-circ;
transition: transform 0.3s @ease-in-out-circ;
> * {
transition: transform 0.3s @ease-in-out-circ;
}
&-content-wrapper {
@ -27,10 +27,8 @@
}
&-left {
&.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls} {
&-wrapper {
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
.@{dawer-prefix-cls}-content-wrapper {
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
}
}
@ -41,10 +39,8 @@
}
}
&.@{dawer-prefix-cls}-open {
& .@{dawer-prefix-cls} {
&-wrapper {
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}
.@{dawer-prefix-cls}-content-wrapper {
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}
}
}
@ -140,7 +136,7 @@
opacity: 0;
background-color: @modal-mask-bg;
height: 100%;
transition: opacity .3s @ease-in-out-circ;
transition: opacity 0.3s @ease-in-out-circ;
filter: ~"alpha(opacity=50)";
}
@ -151,4 +147,3 @@
}
}
}