Use nested component to configure context menu position (#124)

Author: tar-g

templates/react/application/src/components/user-panel/user-panel.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ContextMenu from 'devextreme-react/context-menu';
+import ContextMenu, { Position } from 'devextreme-react/context-menu';
 import List from 'devextreme-react/list';
 import './user-panel.scss';
 
@@ -21,9 +21,10 @@ export default class UserPanel extends React.Component {
             target={'.user-button'}
             showEvent={'dxclick'}
             width={170}
-            position={{ my: 'top center', at: 'bottom center' }}
             cssClass={'user-menu'}
-          />
+          >
+            <Position my={'top center'} at={'bottom center'} />
+          </ContextMenu>
         )}
         {menuMode === 'list' && (
           <List className={'dx-toolbar-menu-action'} items={menuItems} />

templates/vue/application/src/components/user-panel.vue

@@ -12,10 +12,11 @@
       target=".user-button"
       :items="menuItems"
       :width="170"
-      :position="menuPositionConfig"
       show-event="dxclick"
       css-class="user-menu"
-    />
+    >
+      <dx-position my="top center" at="bottom center" />
+    </dx-context-menu>
 
     <dx-list
       v-if="menuMode === 'list'"
@@ -26,24 +27,17 @@
 </template>
 
 <script>
-import DxContextMenu from "devextreme-vue/context-menu";
+import DxContextMenu, { DxPosition } from "devextreme-vue/context-menu";
 import DxList from "devextreme-vue/list";
 
 export default {
   props: {
     menuMode: String,
     menuItems: Array
   },
-  data() {
-    return {
-      menuPositionConfig: {
-        my: "top center",
-        at: "bottom center"
-      }
-    };
-  },
   components: {
     DxContextMenu,
+    DxPosition,
     DxList
   }
 };