Feature mlaursen#4: Added Dropup Menus

Menus can now be upwards facing by adding a prop value upwards={true}.

README.md

@@ -33,6 +33,7 @@ $ npm install -S react-dd-menu
 * `size`      - the size of the menu. Defaults to auto size.
   * One of `sm`, `md`, `lg`, `xl`
 * `className` - any additional css classes to add the the dropdown menu container. (`.dd-menu`)
+* `upwards`   - boolean if the menu should go upwards. Defaults to `false`
 
 ### Styling
 In the `dist` folder, there is a `react-dd-menu.css` and a `react-dd-menu.min.css` with the default css stylings. If you have SASS, the source is located in `src/scss`.

dist/index.js

@@ -110,14 +110,15 @@ var DropdownMenu = (function (_Component) {
       var menuAlign = _props.menuAlign;
       var children = _props.children;
       var size = _props.size;
+      var upwards = _props.upwards;
 
       var menuClassName = (0, _classnames2['default'])('dd-menu', 'dd-menu-' + (menuAlign || align), { 'dd-menu-inverse': inverse }, className, size ? 'dd-menu-' + size : null);
 
       var listClassName = 'dd-items-' + (textAlign || align);
       var transitionProps = {
-        transitionName: 'grow-from-' + (animAlign || align),
+        transitionName: 'grow-from-' + (upwards ? 'up-' : '') + (animAlign || align),
         component: 'div',
-        className: 'dd-menu-items',
+        className: (0, _classnames2['default'])('dd-menu-items', { 'dd-items-upwards': upwards }),
         onKeyDown: this.handleKeyDown.bind(this),
         ref: 'menuItems'
       };
@@ -152,7 +153,8 @@ DropdownMenu.propTypes = {
   textAlign: _reactAddons.PropTypes.oneOf(['center', 'right', 'left']),
   menuAlign: _reactAddons.PropTypes.oneOf(['center', 'right', 'left']),
   className: _reactAddons.PropTypes.string,
-  size: _reactAddons.PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
+  size: _reactAddons.PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  upwards: _reactAddons.PropTypes.bool
 };
 
 DropdownMenu.defaultProps = {
@@ -162,7 +164,8 @@ DropdownMenu.defaultProps = {
   textAlign: null,
   menuAlign: null,
   className: null,
-  size: null
+  size: null,
+  upwards: false
 };
 
 exports['default'] = DropdownMenu;

dist/react-dd-menu.css

@@ -76,6 +76,84 @@
           transform: scale(0);
 }
 
+.grow-from-up-left-enter {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transform-origin: 0 100%;
+          transform-origin: 0 100%;
+  transition: -webkit-transform 0.15s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+  transition: transform 0.15s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+}
+.grow-from-up-left-enter.grow-from-up-left-enter-active {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
+.grow-from-up-left-leave {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transform-origin: 0 100%;
+          transform-origin: 0 100%;
+  transition: -webkit-transform 0.15s ease-out;
+  transition: transform 0.15s ease-out;
+}
+.grow-from-up-left-leave.grow-from-up-left-leave-active {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+.grow-from-up-center-enter {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+  transition: -webkit-transform 0.15s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+  transition: transform 0.15s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+}
+.grow-from-up-center-enter.grow-from-up-center-enter-active {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
+.grow-from-up-center-leave {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+  transition: -webkit-transform 0.15s ease-out;
+  transition: transform 0.15s ease-out;
+}
+.grow-from-up-center-leave.grow-from-up-center-leave-active {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+.grow-from-up-right-enter {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+  transition: -webkit-transform 0.15s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+  transition: transform 0.15s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+}
+.grow-from-up-right-enter.grow-from-up-right-enter-active {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
+.grow-from-up-right-leave {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+  transition: -webkit-transform 0.15s ease-out;
+  transition: transform 0.15s ease-out;
+}
+.grow-from-up-right-leave.grow-from-up-right-leave-active {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
 .dd-menu {
   display: inline-block;
   position: relative;
@@ -106,7 +184,11 @@
 .dd-menu .dd-menu-items {
   position: absolute;
   z-index: 7;
-  margin-top: 0.5em;
+  margin: 0.5em 0 0 0;
+}
+.dd-menu .dd-menu-items.dd-items-upwards {
+  bottom: 100%;
+  margin: 0 0 0.5em;
 }
 .dd-menu .dd-menu-items > ul, .dd-menu .dd-menu-items > ol {
   list-style: none;