Merge pull request #156 from react-component/builtinplacments

feat: making builtinplacements configurable

Author: picodoth

README.md

@@ -186,6 +186,12 @@ ReactDOM.render(<Menu>
             <th>() => document.body</th>
             <td>Where to render the DOM node of popup menu when the mode is horizontal or vertical</td>
         </tr>
+        <tr>
+            <td>builtinPlacements</td>
+            <td>Object of alignConfigs for <a href="https://github.com/yiminghe/dom-align">dom-align</a></td>
+            <th>see <a href="./src/placements.jsx">placements.jsx</a></th>
+            <td>Describes how the popup menus should be positioned</td>
+        </tr>
     </tbody>
 </table>
 

src/Menu.jsx

@@ -31,6 +31,7 @@ class Menu extends React.Component {
     style: PropTypes.object,
     activeKey: PropTypes.string,
     prefixCls: PropTypes.string,
+    builtinPlacements: PropTypes.object,
   };
 
   static defaultProps = {
@@ -48,6 +49,7 @@ class Menu extends React.Component {
     className: '',
     mode: 'vertical',
     style: {},
+    builtinPlacements: {},
   };
 
   constructor(props) {

src/SubMenu.jsx

@@ -359,6 +359,7 @@ export class SubMenu extends React.Component {
       subMenuCloseDelay: props.subMenuCloseDelay,
       forceSubMenuRender: props.forceSubMenuRender,
       triggerSubMenuAction: props.triggerSubMenuAction,
+      builtinPlacements: props.builtinPlacements,
       defaultActiveFirst: props.store.getState()
         .defaultActiveFirst[getMenuIdFromSubMenuEventKey(props.eventKey)],
       multiple: props.multiple,
@@ -489,6 +490,7 @@ export class SubMenu extends React.Component {
       subMenuOpenDelay,
       forceSubMenuRender,
       subMenuCloseDelay,
+      builtinPlacements,
     } = props;
     menuAllProps.forEach(key => delete props[key]);
     // Set onClick to null, to ignore propagated onClick event
@@ -508,7 +510,7 @@ export class SubMenu extends React.Component {
             prefixCls={prefixCls}
             popupClassName={`${prefixCls}-popup ${popupClassName}`}
             getPopupContainer={getPopupContainer}
-            builtinPlacements={placements}
+            builtinPlacements={Object.assign({}, placements, builtinPlacements)}
             popupPlacement={popupPlacement}
             popupVisible={isOpen}
             popupAlign={popupAlign}

src/SubPopupMenu.js

@@ -285,6 +285,7 @@ export class SubPopupMenu extends React.Component {
       onOpenChange: this.onOpenChange,
       onDeselect: this.onDeselect,
       onSelect: this.onSelect,
+      builtinPlacements: props.builtinPlacements,
       ...extraProps,
     };
     if (props.mode === 'inline') {

src/util.js

@@ -95,6 +95,7 @@ export const menuAllProps = [
   'isSelected',
   'store',
   'activeKey',
+  'builtinPlacements',
 
   // the following keys found need to be removed from test regression
   'attribute',

tests/Menu.spec.js

@@ -263,4 +263,29 @@ describe('Menu', () => {
       wrapper.find('li').first().hasClass('rc-menu-item-active')
     ).toBe(true);
   });
+
+  it('should accept builtinPlacements', () => {
+    const builtinPlacements = {
+      leftTop: {
+        points: ['tr', 'tl'],
+        overflow: {
+          adjustX: 0,
+          adjustY: 0,
+        },
+        offset: [0, 0],
+      },
+    };
+
+    const wrapper = mount(
+      <Menu builtinPlacements={builtinPlacements}>
+        <MenuItem>menuItem</MenuItem>
+        <SubMenu title="submenu">
+          <MenuItem>menuItem</MenuItem>
+        </SubMenu>
+      </Menu>
+    );
+
+    expect(wrapper.find('Trigger').prop('builtinPlacements').leftTop)
+      .toEqual(builtinPlacements.leftTop);
+  });
 });