message: Support more positioning options on context menus
diff: @@ -33,6 +33,7 @@ module.exports = {
  menuHeight: React.PropTypes.number,
  chevronOffset: React.PropTypes.number,
  menuColour: React.PropTypes.string,
  + chevronFace: React.PropTypes.string, // top, bottom, left, right
  },
  getOrCreateContainer: function() {
  @@ -58,12 +59,30 @@ module.exports = {
  }
  };
  - const position = {
  - top: props.top,
  - };
  + const position = {};
  + let chevronFace = null;
  +
  + if (props.top) {
  + position.top = props.top;
  + } else {
  + position.bottom = props.bottom;
  + }
  +
  + if (props.left) {
  + position.left = props.left;
  + chevronFace = 'left';
  + } else {
  + position.right = props.right;
  + chevronFace = 'right';
  + }
  const chevronOffset = {};
  - if (props.chevronOffset) {
  + if (props.chevronFace) {
  + chevronFace = props.chevronFace;
  + }
  + if (chevronFace === 'top' || chevronFace === 'bottom') {
  + chevronOffset.left = props.chevronOffset;
  + } else {
  chevronOffset.top = props.chevronOffset;
  }
  @@ -74,28 +93,27 @@ module.exports = {
  .mx_ContextualMenu_chevron_left:after {
  border-right-color: ${props.menuColour};
  }
  -
  .mx_ContextualMenu_chevron_right:after {
  border-left-color: ${props.menuColour};
  }
  - `;
  + .mx_ContextualMenu_chevron_top:after {
  + border-left-color: ${props.menuColour};
  }
  -
  - let chevron = null;
  - if (props.left) {
  - chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_left"></div>;
  - position.left = props.left;
  - } else {
  - chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_right"></div>;
  - position.right = props.right;
  + .mx_ContextualMenu_chevron_bottom:after {
  + border-left-color: ${props.menuColour};
  + }
  + `;
  }
  + const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace}></div>;
  const className = 'mx_ContextualMenu_wrapper';
  const menuClasses = classNames({
  'mx_ContextualMenu': true,
  - 'mx_ContextualMenu_left': props.left,
  - 'mx_ContextualMenu_right': !props.left,
  + 'mx_ContextualMenu_left': chevronFace === 'left',
  + 'mx_ContextualMenu_right': chevronFace === 'right',
  + 'mx_ContextualMenu_top': chevronFace === 'top',
  + 'mx_ContextualMenu_bottom': chevronFace === 'bottom',
  });
  const menuStyle = {};
  