Migrate Menu to themr
Javi Velasco
parent
5f626e262f
commit
140cc2c1a4
|
|
@ -1,17 +1,17 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { themr } from 'react-css-themr';
|
||||
import classnames from 'classnames';
|
||||
import MenuItem from './MenuItem';
|
||||
import { events, utils } from '../utils';
|
||||
import style from './style.menu';
|
||||
|
||||
const POSITION = {
|
||||
AUTO: 'auto',
|
||||
STATIC: 'static',
|
||||
TOP_LEFT: 'top-left',
|
||||
TOP_RIGHT: 'top-right',
|
||||
BOTTOM_LEFT: 'bottom-left',
|
||||
BOTTOM_RIGHT: 'bottom-right'
|
||||
TOP_LEFT: 'topLeft',
|
||||
TOP_RIGHT: 'topRight',
|
||||
BOTTOM_LEFT: 'bottomLeft',
|
||||
BOTTOM_RIGHT: 'bottomRight'
|
||||
};
|
||||
|
||||
class Menu extends React.Component {
|
||||
|
|
@ -26,7 +26,19 @@ class Menu extends React.Component {
|
|||
position: React.PropTypes.string,
|
||||
ripple: React.PropTypes.bool,
|
||||
selectable: React.PropTypes.bool,
|
||||
selected: React.PropTypes.any
|
||||
selected: React.PropTypes.any,
|
||||
theme: React.PropTypes.shape({
|
||||
active: React.PropTypes.string.isRequired,
|
||||
bottomLeft: React.PropTypes.string.isRequired,
|
||||
bottomRight: React.PropTypes.string.isRequired,
|
||||
menu: React.PropTypes.string.isRequired,
|
||||
menuInner: React.PropTypes.string.isRequired,
|
||||
outline: React.PropTypes.string.isRequired,
|
||||
rippled: React.PropTypes.string.isRequired,
|
||||
static: React.PropTypes.string.isRequired,
|
||||
topLeft: React.PropTypes.string.isRequired,
|
||||
topRight: React.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -122,7 +134,7 @@ class Menu extends React.Component {
|
|||
const {height: wh, width: ww} = utils.getViewport();
|
||||
const toTop = top < ((wh / 2) - height / 2);
|
||||
const toLeft = left < ((ww / 2) - width / 2);
|
||||
return `${toTop ? 'top' : 'bottom'}-${toLeft ? 'left' : 'right'}`;
|
||||
return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
|
||||
}
|
||||
|
||||
getMenuStyle () {
|
||||
|
|
@ -173,16 +185,17 @@ class Menu extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { theme } = this.props;
|
||||
const outlineStyle = { width: this.state.width, height: this.state.height };
|
||||
const className = classnames([style.root, style[this.state.position]], {
|
||||
[style.active]: this.state.active,
|
||||
[style.rippled]: this.state.rippled
|
||||
const className = classnames([theme.menu, theme[this.state.position]], {
|
||||
[theme.active]: this.state.active,
|
||||
[theme.rippled]: this.state.rippled
|
||||
}, this.props.className);
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
|
||||
{this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
|
||||
<ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
|
||||
{this.props.outline ? <div className={theme.outline} style={outlineStyle}></div> : null}
|
||||
<ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
|
||||
{this.renderItems()}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -190,4 +203,4 @@ class Menu extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Menu;
|
||||
export default themr('ToolboxMenu')(Menu);
|
||||
|
|
|
|||
|
|
@ -38,12 +38,20 @@ This subcomponent is the default wrapper for a menu and is responsible for the o
|
|||
| `selectable` | `Boolean` | `false` | If true, the menu will keep a value to highlight the active child item. |
|
||||
| `selected` | `Any` | | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
|
||||
|
||||
The menu has state to keep a value with the currently selected item. It also exposes methods to show and hide the menu from the code:
|
||||
### Theming
|
||||
|
||||
- `getValue` is used to get the current value.
|
||||
- `setValue` is used to set a new active value.
|
||||
- `show` is used to show the menu.
|
||||
- `hide` is used to hide the menu.
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `active` | Added to the root element when menu is active.|
|
||||
| `bottomLeft` | Added to the root when position is bottom left.|
|
||||
| `bottomRight` | Added to the root when position is bottom right.|
|
||||
| `menu` | Used for the root element of the menu.|
|
||||
| `menuInner` | Used for the inner wrapper.|
|
||||
| `outline` | Used to draw the outline.|
|
||||
| `rippled` | Added to the menu in case if should have ripple.|
|
||||
| `static` | Added to the root in case its static.|
|
||||
| `topLeft` | Added to the root when position is top left.|
|
||||
| `topRight` | Added to the root when position is top right.|
|
||||
|
||||
## Icon Menu
|
||||
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&.top-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
> .outline {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
&.top-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
> .outline {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
}
|
||||
&.bottom-left {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
> .outline {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
}
|
||||
&.bottom-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
> .outline {
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
&:not(.static) {
|
||||
z-index: $z-index-higher;
|
||||
pointer-events: none;
|
||||
> .outline {
|
||||
opacity: 0;
|
||||
transition: transform $menu-expand-duration $animation-curve-default,
|
||||
opacity $menu-fade-duration $animation-curve-default;
|
||||
transform: scale(0);
|
||||
will-change: transform;
|
||||
}
|
||||
> .menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
&.rippled:not(.active) {
|
||||
> .outline {
|
||||
transition-delay: $menu-ripple-delay;
|
||||
}
|
||||
> .menu {
|
||||
transition-delay: $menu-ripple-delay;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
pointer-events: all;
|
||||
> .outline {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
> .menu {
|
||||
opacity: 1;
|
||||
transition: opacity $menu-fade-duration $animation-curve-default,
|
||||
clip $menu-expand-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline {
|
||||
@include shadow-2dp();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background-color: $menu-background-color;
|
||||
border-radius: $menu-outline-border-radius;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $menu-padding;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -9,3 +9,96 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&.topLeft {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
> .outline {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
&.topRight {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
> .outline {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
}
|
||||
&.bottomLeft {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
> .outline {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
}
|
||||
&.bottomRight {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
> .outline {
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
&:not(.static) {
|
||||
z-index: $z-index-higher;
|
||||
pointer-events: none;
|
||||
> .outline {
|
||||
opacity: 0;
|
||||
transition: transform $menu-expand-duration $animation-curve-default,
|
||||
opacity $menu-fade-duration $animation-curve-default;
|
||||
transform: scale(0);
|
||||
will-change: transform;
|
||||
}
|
||||
> .menuInner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
&.rippled:not(.active) {
|
||||
> .outline {
|
||||
transition-delay: $menu-ripple-delay;
|
||||
}
|
||||
> .menuInner {
|
||||
transition-delay: $menu-ripple-delay;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
pointer-events: all;
|
||||
> .outline {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
> .menuInner {
|
||||
opacity: 1;
|
||||
transition: opacity $menu-fade-duration $animation-curve-default,
|
||||
clip $menu-expand-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline {
|
||||
@include shadow-2dp();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background-color: $menu-background-color;
|
||||
border-radius: $menu-outline-border-radius;
|
||||
}
|
||||
|
||||
.menuInner {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $menu-padding;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue