Use Overlay component in drawers
parent
2c17688db1
commit
cadc3e2bc7
|
@ -1,18 +1,20 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import Overlay from '../overlay';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const Drawer = (props) => {
|
const Drawer = (props) => {
|
||||||
let className = `${style.drawer} ${style[props.type]}`;
|
let className = `${style.root} ${style[props.type]}`;
|
||||||
if (props.active) className += ` ${style.active}`;
|
if (props.active) className += ` ${style.active}`;
|
||||||
if (props.className) className += ` ${props.className}`;
|
if (props.className) className += ` ${props.className}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='drawer' className={className}>
|
<Overlay active={props.active} onClick={props.onOverlayClick}>
|
||||||
<div className={style.overlay} onClick={props.onOverlayClick}></div>
|
<div data-react-toolbox='drawer' className={className}>
|
||||||
<aside className={style.content}>
|
<aside className={style.content}>
|
||||||
{ props.children }
|
{ props.children }
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
</Overlay>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,59 +1,7 @@
|
||||||
@import "../base";
|
@import "../base";
|
||||||
@import "./config";
|
@import "./config";
|
||||||
|
|
||||||
.drawer {
|
.root {
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: $z-index-high;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
pointer-events: all;
|
|
||||||
> .content {
|
|
||||||
transition-delay: $animation-delay;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
> .overlay {
|
|
||||||
opacity: $color-overlay-opacity;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
> .content {
|
|
||||||
left: 0;
|
|
||||||
border-right: 1px solid $drawer-border-color;
|
|
||||||
}
|
|
||||||
&:not(.active) > .content {
|
|
||||||
transform: translateX(- 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
> .content {
|
|
||||||
right: 0;
|
|
||||||
border-left: 1px solid $drawer-border-color;
|
|
||||||
}
|
|
||||||
&:not(.active) > .content {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: $drawer-overlay-color;
|
|
||||||
opacity: 0;
|
|
||||||
transition-timing-function: $animation-curve-default;
|
|
||||||
transition-duration: $animation-duration;
|
|
||||||
transition-property: opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
@include shadow-2dp();
|
@include shadow-2dp();
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -62,6 +10,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
color: $drawer-text-color;
|
color: $drawer-text-color;
|
||||||
|
pointer-events: none;
|
||||||
background-color: $drawer-background-color;
|
background-color: $drawer-background-color;
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
transition-timing-function: $animation-curve-default;
|
transition-timing-function: $animation-curve-default;
|
||||||
|
@ -69,4 +18,23 @@
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
&.active {
|
||||||
|
pointer-events: all;
|
||||||
|
transition-delay: $animation-delay;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
right: 0;
|
||||||
|
border-left: 1px solid $drawer-border-color;
|
||||||
|
&:not(.active) {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.left {
|
||||||
|
left: 0;
|
||||||
|
border-right: 1px solid $drawer-border-color;
|
||||||
|
&:not(.active) {
|
||||||
|
transform: translateX(- 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue