fix(vue-grid): fix functional components (#1350)

Fixes #1345
DevExpress · Aug 23, 2018 · 5aa21a2 · 5aa21a2
1 parent 5784cda
commit 5aa21a2
Show file tree

Hide file tree

Showing 17 changed files with 18 additions and 37 deletions.
diff --git a/packages/dx-vue-grid-bootstrap4/src/grid.js b/packages/dx-vue-grid-bootstrap4/src/grid.js
@@ -9,7 +9,7 @@ export const DxGrid = {
     return (
       <DxGridBase
         rootComponent={GridRoot}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       >
         {context.children}
       </DxGridBase>

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js b/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js
@@ -14,7 +14,7 @@ export const DxColumnChooser = {
         containerComponent={Container}
         itemComponent={Item}
         toggleButtonComponent={ToggleButton}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
@@ -23,7 +23,7 @@ export const DxGroupingPanel = {
         itemComponent={GroupPanelItem}
         emptyMessageComponent={GroupPanelEmptyMessage}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
@@ -19,7 +19,7 @@ export const DxPagingPanel = {
       <DxPagingPanelBase
         containerComponent={Pager}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
@@ -18,7 +18,7 @@ export const DxSearchPanel = {
       <DxSearchPanelBase
         inputComponent={SearchPanelInput}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js
@@ -14,7 +14,7 @@ export const DxTableBandHeader = {
         rowComponent={TableRow}
         bandedHeaderCellComponent={BandedHeaderCell}
         invisibleCellComponent={InvisibleCell}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
@@ -18,7 +18,7 @@ export const DxTableColumnVisibility = {
       <DxTableColumnVisibilityBase
         emptyMessageComponent={EmptyMessage}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
@@ -28,7 +28,7 @@ export const DxTableEditColumn = {
         headerCellComponent={EditCommandHeadingCell}
         commandComponent={CommandButton}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js
@@ -10,7 +10,7 @@ export const DxTableEditRow = {
       <DxTableEditRowBase
         cellComponent={EditCell}
         rowComponent={TableRow}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
@@ -36,7 +36,7 @@ export const DxTableFilterRow = {
         iconComponent={Icon}
         editorComponent={Editor}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js
@@ -11,7 +11,7 @@ export const DxTableGroupRow = {
         cellComponent={TableGroupCell}
         rowComponent={TableRow}
         indentColumnWidth={33}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
@@ -10,7 +10,7 @@ export const DxTableHeaderRow = {
       <DxTableHeaderRowBase
         cellComponent={TableHeaderCell}
         rowComponent={TableRow}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js
@@ -13,7 +13,7 @@ export const DxTableRowDetail = {
         cellComponent={TableDetailCell}
         rowComponent={TableRow}
         toggleColumnWidth={48}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js
@@ -13,7 +13,7 @@ export const DxTableSelection = {
         cellComponent={TableSelectCell}
         headerCellComponent={TableSelectAllCell}
         selectionColumnWidth={40}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
@@ -40,7 +40,7 @@ export const DxTable = {
         stubCellComponent={TableStubCell}
         stubHeaderCellComponent={TableHeaderStubCell}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.data.attrs, on: context.listeners }}
+        {...context.data}
       />
     );
   },

diff --git a/packages/dx-vue-grid-bootstrap4/src/templates/table.js b/packages/dx-vue-grid-bootstrap4/src/templates/table.js
@@ -1,17 +1,3 @@
-let globalStickyProp;
-const testCSSProp = (property, value, noPrefixes) => {
-  const prop = `${property}:`;
-  const el = document.createElement('test');
-  const mStyle = el.style;
-
-  if (!noPrefixes) {
-    mStyle.cssText = `${prop + ['-webkit-', '-moz-', '-ms-', '-o-', ''].join(`${value};${prop}`) + value};`;
-  } else {
-    mStyle.cssText = prop + value;
-  }
-  return mStyle[property];
-};
-
 export const Table = {
   name: 'Table',
   props: {
@@ -25,22 +11,17 @@ export const Table = {
   data() {
     return ({
       backgroundColor: 'white',
-      stickyProp: globalStickyProp,
     });
   },
   mounted() {
     this.checkStyles();
   },
   methods: {
     checkStyles() {
-      globalStickyProp = testCSSProp('position', 'sticky');
-
       const body = document.getElementsByTagName('body')[0];
       const { backgroundColor } = window.getComputedStyle(body);
 
-      if (this.backgroundColor !== backgroundColor
-        || this.stickyProp !== globalStickyProp) {
-        this.stickyProp = globalStickyProp;
+      if (this.backgroundColor !== backgroundColor) {
         this.backgroundColor = backgroundColor;
       }
     },
@@ -51,11 +32,11 @@ export const Table = {
         class={{
           'table mb-0 dx-g-bs4-overflow-hidden dx-g-bs4-table': true,
           'dx-g-bs4-table-head': this.use === 'head',
+          'dx-g-bs4-table-sticky': !!this.use,
         }}
         style={{
           minWidth: this.minWidth,
           ...this.use === 'head' ? {
-            position: this.stickyProp,
             backgroundColor: this.backgroundColor,
           } : null,
         }}

diff --git a/packages/dx-vue-grid/src/grid.js b/packages/dx-vue-grid/src/grid.js
@@ -8,7 +8,7 @@ export const DxGrid = {
     return (
       <DxPluginHost>
         <GridCore
-          {...{ attrs: context.props, on: context.listeners }}
+          {...context.data}
         />
         {context.children}
       </DxPluginHost>