message: menu bottom direction
diff: @@ -6,6 +6,11 @@ import classNames from "classnames";
  import { Transition } from "react-transition-group";
  import "./style.css";
  +export const MenuDirections = {
  + Left: "left",
  + Bottom: "bottom"
  +};
  +
  const duration = 100;
  const transitionStyles = {
  @@ -38,13 +43,15 @@ class Menu extends React.Component {
  children: PropTypes.node,
  node: PropTypes.any,
  width: PropTypes.number,
  + direction: PropTypes.string,
  padding: PropTypes.number,
  onClick: PropTypes.func,
  requestClose: PropTypes.func.isRequired
  };
  static defaultProps = {
  width: 200,
  - padding: 5
  + padding: 5,
  + direction: MenuDirections.Left
  };
  componentWillReceiveProps(nextProps) {
  if (nextProps.node) {
  @@ -56,6 +63,20 @@ class Menu extends React.Component {
  this.props.requestClose();
  }
  render() {
  + let directionStyles = {};
  + if (this.props.direction === MenuDirections.Left) {
  + directionStyles = {
  + top: `${this.state.boundingRect ? this.state.boundingRect.top - this.props.padding : "40"}px`,
  + left: `${this.state.boundingRect ? this.state.boundingRect.left - this.props.width - this.props.padding : "40"}px`,
  + transformOrigin: `${this.props.width}px 0px 0px`
  + };
  + } else if (this.props.direction === MenuDirections.Bottom) {
  + directionStyles = {
  + top: `${this.state.boundingRect ? this.state.boundingRect.bottom + this.props.padding : "40"}px`,
  + left: `${this.state.boundingRect ? this.state.boundingRect.right - this.props.width + Math.abs((this.props.width - this.state.boundingRect.width) / 2) : "40"}px`,
  + transformOrigin: `${this.props.width / 2}px 0px 0px`
  + };
  + }
  return (
  <Transition in={this.props.isOpen} timeout={duration}>
  {(status) => (
  @@ -71,11 +92,8 @@ class Menu extends React.Component {
  backgroundColor: "transparent"
  },
  content: Object.assign({
  - transformOrigin: `${this.props.width}px 0px 0px`,
  - width: `${this.props.width}px`,
  - top: `${this.state.boundingRect ? this.state.boundingRect.top - this.props.padding : "40"}px`,
  - left: `${this.state.boundingRect ? this.state.boundingRect.left - this.props.width - this.props.padding : "40"}px`
  - }, transitionStyles[status])
  + width: `${this.props.width}px`
  + }, directionStyles, transitionStyles[status])
  }}
  >
  <div onClick={this.props.onClick}>
  @@ -101,6 +119,7 @@ export default class MenuContainer extends React.Component {
  opener: PropTypes.element,
  children: PropTypes.node,
  width: PropTypes.number,
  + direction: PropTypes.string,
  padding: PropTypes.number,
  closeOnClick: PropTypes.bool
  };
  @@ -127,6 +146,7 @@ export default class MenuContainer extends React.Component {
  onClick={this.props.closeOnClick ? this.close : null}
  requestClose={this.close}
  width={this.props.width}
  + direction={this.props.direction}
  padding={this.props.padding}>
  {this.props.children}
  </Menu>
  