@wix/design-system 1.0.3 → 1.1.0

package/dist/cjs/Table/DataTable/DataTable.js

@@ -37,6 +37,7 @@ var DataTableHeader = props => {
     stickyColumns,
     rowVerticalPadding
   } = props;
+  var headerContainerRef = _react.default.useRef();
   var wrapWithHorizontalScroll = table => /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_DataTableSt.classes.scrollWrapper, {
       [_DataTableSt.classes.leftShadowVisible]: !!leftShadowVisible,
@@ -46,26 +47,28 @@ var DataTableHeader = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 33,
+      lineNumber: 35,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_reactScrollSync.ScrollSyncPane, {
+    attachTo: headerContainerRef,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 40,
+      lineNumber: 42,
       columnNumber: 7
     }
   }, table));
   var table = /*#__PURE__*/_react.default.createElement("div", {
     "data-hook": dataHook,
+    ref: headerContainerRef,
     className: (0, _classnames.default)({
       [_DataTableSt.classes.tableHeaderScrollContent]: horizontalScroll
     }),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 45,
+      lineNumber: 47,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
@@ -78,14 +81,14 @@ var DataTableHeader = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 51,
+      lineNumber: 54,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, props, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 57,
+      lineNumber: 60,
       columnNumber: 9
     }
   }))));
@@ -128,12 +131,12 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 181,
+          lineNumber: 184,
           columnNumber: 7
         }
       }, table);
     };
-    this.wrapWithHorizontalScroll = table => {
+    this.wrapWithHorizontalScroll = (table, attachTo) => {
       var {
         leftShadowVisible,
         rightShadowVisible,
@@ -148,14 +151,15 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 204,
+          lineNumber: 207,
           columnNumber: 7
         }
       }, /*#__PURE__*/_react.default.createElement(_reactScrollSync.ScrollSyncPane, {
+        attachTo: attachTo,
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 211,
+          lineNumber: 214,
           columnNumber: 9
         }
       }, table));
@@ -189,14 +193,14 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 239,
+          lineNumber: 242,
           columnNumber: 7
         }
       }, !this.props.hideHeader && /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, this.props, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 240,
+          lineNumber: 243,
           columnNumber: 36
         }
       })), this.renderBody(rowsToRender));
@@ -222,7 +226,7 @@ class DataTable extends _react.default.Component {
               __self: this,
               __source: {
                 fileName: _jsxFileName,
-                lineNumber: 261,
+                lineNumber: 264,
                 columnNumber: 15
               }
             }, table);
@@ -234,7 +238,7 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 249,
+            lineNumber: 252,
             columnNumber: 9
           }
         }, table);
@@ -249,7 +253,7 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 283,
+          lineNumber: 286,
           columnNumber: 7
         }
       }), table);
@@ -263,19 +267,33 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 303,
+          lineNumber: 306,
           columnNumber: 7
         }
       }, _ref => {
+        var _BodyElementType$prop;
         var {
           maskingClassNames
         } = _ref;
-        return /*#__PURE__*/_react.default.createElement(BodyElementType, {
+        return BodyElementType != null && (_BodyElementType$prop = BodyElementType.propTypes) != null && _BodyElementType$prop.styleRowCallbacks ? /*#__PURE__*/_react.default.createElement(BodyElementType, {
+          styleRowCallbacks: rows.map((rowData, index) => this.renderRowWrapper({
+            rowData,
+            rowNum: index,
+            maskingClassNames,
+            isApplyCellWidth: true
+          })),
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 305,
-            columnNumber: 11
+            lineNumber: 309,
+            columnNumber: 13
+          }
+        }) : /*#__PURE__*/_react.default.createElement(BodyElementType, {
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 320,
+            columnNumber: 13
           }
         }, rows.map((rowData, index) => this.renderRow({
           rowData,
@@ -304,7 +322,7 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 327,
+          lineNumber: 343,
           columnNumber: 5
         }
       }, _ref3 => {
@@ -320,14 +338,34 @@ class DataTable extends _react.default.Component {
         });
       });
     };
-    this.renderRow = _ref4 => {
+    this.renderRowWrapper = _ref4 => {
       var {
         rowData,
         rowNum,
-        style,
         maskingClassNames,
-        isDragOverlay
+        isDragOverlay,
+        isApplyCellWidth
       } = _ref4;
+      return (style, cellStyle) => this.renderRow({
+        rowData,
+        rowNum,
+        style,
+        cellStyle,
+        maskingClassNames,
+        isDragOverlay,
+        isApplyCellWidth
+      });
+    };
+    this.renderRow = _ref5 => {
+      var {
+        rowData,
+        rowNum,
+        style,
+        maskingClassNames,
+        isDragOverlay,
+        cellStyle,
+        isApplyCellWidth
+      } = _ref5;
       var {
         onRowClick,
         onMouseEnterRow,
@@ -357,11 +395,11 @@ class DataTable extends _react.default.Component {
         rowEventHandler: onMouseLeaveRow,
         eventHandler: 'onMouseLeave'
       }];
-      handlers.forEach(_ref5 => {
+      handlers.forEach(_ref6 => {
         var {
           rowEventHandler,
           eventHandler
-        } = _ref5;
+        } = _ref6;
         if (rowEventHandler) {
           optionalRowProps[eventHandler] = event => {
             if (event.isDefaultPrevented()) {
@@ -404,7 +442,7 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 419,
+          lineNumber: 456,
           columnNumber: 7
         }
       }), columns.map((column, colNum) => this.renderCell({
@@ -413,7 +451,9 @@ class DataTable extends _react.default.Component {
         rowNum,
         colNum,
         maskingClassNames,
-        isDragOverlay
+        isDragOverlay,
+        overriddenStyle: cellStyle,
+        isApplyCellWidth
       })));
       if (dragAndDrop) {
         var {
@@ -428,7 +468,7 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 444,
+            lineNumber: 483,
             columnNumber: 9
           }
         }, tr);
@@ -442,7 +482,7 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 461,
+            lineNumber: 500,
             columnNumber: 9
           }
         }, /*#__PURE__*/_react.default.createElement("td", {
@@ -452,7 +492,7 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 462,
+            lineNumber: 501,
             columnNumber: 11
           }
         }, /*#__PURE__*/_react.default.createElement("div", {
@@ -460,7 +500,7 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 470,
+            lineNumber: 509,
             columnNumber: 13
           }
         }, /*#__PURE__*/_react.default.createElement(_Toggle.default, {
@@ -470,19 +510,19 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 471,
+            lineNumber: 510,
             columnNumber: 15
           }
         }, rowDetails(rowData, rowNum))))));
       }
       return rowsToRender;
     };
-    this.getCellClasses = _ref6 => {
+    this.getCellClasses = _ref7 => {
       var {
         column,
         colNum,
         rowData
-      } = _ref6;
+      } = _ref7;
       var {
         stickyColumns,
         rowDetails
@@ -502,7 +542,7 @@ class DataTable extends _react.default.Component {
         [this.style.rowDetailsExtended]: !!selectedRows.get(rowData) && rowDetails(rowData)
       });
     };
-    this.renderCell = _ref7 => {
+    this.renderCell = _ref8 => {
       var _column$key;
       var {
         rowData,
@@ -510,8 +550,10 @@ class DataTable extends _react.default.Component {
         rowNum,
         colNum,
         maskingClassNames,
-        isDragOverlay
-      } = _ref7;
+        isDragOverlay,
+        overriddenStyle = {},
+        isApplyCellWidth = false
+      } = _ref8;
       var {
         virtualized,
         stickyColumns,
@@ -527,27 +569,32 @@ class DataTable extends _react.default.Component {
         colNum,
         rowData
       });
+      var widthStyle = isApplyCellWidth ? column.width ? {
+        width: column.width
+      } : {
+        flex: 1
+      } : {};
       return /*#__PURE__*/_react.default.createElement("td", {
         key: (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : colNum,
         "data-mask": !!maskingClassNames,
         "data-hook": column.dataHook,
-        style: _objectSpread(_objectSpread({}, style), stickyColumnStyle),
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), stickyColumnStyle), overriddenStyle), widthStyle),
         width: width,
         className: (0, _DataTableSt.st)(cellClasses, {}, maskingClassNames),
         onClick: column.onCellClick ? event => column.onCellClick(column, rowData, rowNum, event) : undefined,
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 545,
+          lineNumber: 592,
           columnNumber: 7
         }
       }, column.render && column.render(rowData, rowNum));
     };
-    this.calcLastPage = _ref8 => {
+    this.calcLastPage = _ref9 => {
       var {
         data,
         itemsPerPage
-      } = _ref8;
+      } = _ref9;
       return Math.ceil(data.length / itemsPerPage) - 1;
     };
     this.loadMore = () => {
@@ -569,12 +616,12 @@ class DataTable extends _react.default.Component {
         selectedRows: newSelectedRows
       });
     };
-    this.renderVirtualizedRow = _ref9 => {
+    this.renderVirtualizedRow = _ref10 => {
       var {
         data,
         index,
         style
-      } = _ref9;
+      } = _ref10;
       return this.renderRow({
         rowData: data.data[index],
         rowNum: index,
@@ -586,11 +633,11 @@ class DataTable extends _react.default.Component {
     this.virtualizedTableElementWithRefForward = /*#__PURE__*/_react.default.forwardRef((props, ref) => this.renderVirtualizedTableElement(_objectSpread(_objectSpread({}, props), {}, {
       ref
     })));
-    this.renderVirtualizedTableElement = _ref10 => {
+    this.renderVirtualizedTableElement = _ref11 => {
       var {
           children
-        } = _ref10,
-        rest = (0, _objectWithoutProperties2.default)(_ref10, _excluded);
+        } = _ref11,
+        rest = (0, _objectWithoutProperties2.default)(_ref11, _excluded);
       var {
         dragAndDrop,
         data,
@@ -604,14 +651,14 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 620,
+          lineNumber: 669,
           columnNumber: 7
         }
       }), /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, this.props, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 621,
+          lineNumber: 670,
           columnNumber: 10
         }
       })), children);
@@ -631,7 +678,7 @@ class DataTable extends _react.default.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 630,
+            lineNumber: 679,
             columnNumber: 9
           }
         }, table);
@@ -650,7 +697,7 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 653,
+          lineNumber: 702,
           columnNumber: 7
         }
       }, /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
@@ -666,7 +713,7 @@ class DataTable extends _react.default.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 654,
+          lineNumber: 703,
           columnNumber: 9
         }
       }, this.renderVirtualizedMemoizedRow));
@@ -746,7 +793,7 @@ class DataTable extends _react.default.Component {
     var rowsToRender = !controlled && infiniteScroll ? data.slice(0, (this.state.currentPage + 1) * itemsPerPage) : data;
     var table = this.renderTable(rowsToRender);
     if (horizontalScroll) {
-      table = this.wrapWithHorizontalScroll(table);
+      table = this.wrapWithHorizontalScroll(table, this.contentRef);
     }
     if (infiniteScroll) {
       table = this.wrapWithInfiniteScroll(table);
@@ -768,7 +815,7 @@ class TableHeader extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 703,
+          lineNumber: 752,
           columnNumber: 7
         }
       }, /*#__PURE__*/_react.default.createElement(Arrow, {
@@ -777,7 +824,7 @@ class TableHeader extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 704,
+          lineNumber: 753,
           columnNumber: 9
         }
       }));
@@ -798,7 +845,7 @@ class TableHeader extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 719,
+          lineNumber: 768,
           columnNumber: 7
         }
       });
@@ -841,7 +888,7 @@ class TableHeader extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 759,
+          lineNumber: 808,
           columnNumber: 7
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
@@ -853,7 +900,7 @@ class TableHeader extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 773,
+          lineNumber: 822,
           columnNumber: 9
         }
       }, column.title, this.renderSortingArrow(column.sortDescending, colNum), this.renderInfoTooltip(column.infoTooltipProps, colNum)));
@@ -879,7 +926,7 @@ class TableHeader extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 796,
+        lineNumber: 845,
         columnNumber: 9
       }
     }) : null;
@@ -890,14 +937,14 @@ class TableHeader extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 807,
+        lineNumber: 856,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement("tr", {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 812,
+        lineNumber: 861,
         columnNumber: 9
       }
     }, dragHandleHeaderCell, columns.map(this.renderHeaderCell)));
@@ -947,7 +994,7 @@ DataTable.defaultProps = {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 848,
+      lineNumber: 897,
       columnNumber: 11
     }
   }, "Loading ..."),