@cashub/ui 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/table/GridTable.js

@@ -62,6 +62,7 @@ var GridTable = function GridTable(_ref) {
       onSortChange = _ref.onSortChange,
       backgroundReverse = _ref.backgroundReverse,
       translation = _ref.translation;
+  var wrapperRef = (0, _react.useRef)(null);
   var tableRef = (0, _react.useRef)(null);
 
   var _useCalculateDataRang = (0, _hooks.useCalculateDataRange)(currentPage, limit, total),
@@ -126,7 +127,9 @@ var GridTable = function GridTable(_ref) {
             onClick: showFullValue,
             children: title
           }), sortable && generateSort(fieldName)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {})]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {
+          container: wrapperRef.current
+        })]
       }, "TH".concat(index));
     });
   }, [backgroundReverse, columns, handleSortChange, generateSort, showFullValue]);
@@ -182,8 +185,10 @@ var GridTable = function GridTable(_ref) {
   }, [backgroundReverse, columns, texts]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
+      ref: wrapperRef,
       backgroundReverse: backgroundReverse,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ResponsiveTable, {
+        ref: tableRef,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
             children: tableHeads

package/table/subComponent/Resizer.js

@@ -29,7 +29,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Resizer = function Resizer() {
+var Resizer = function Resizer(_ref) {
+  var container = _ref.container;
+
   var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
       parentNode = _useState2[0],
@@ -38,10 +40,10 @@ var Resizer = function Resizer() {
   var handleMouseMove = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     event.preventDefault();
-    var horizontalScrollOffset = document.documentElement.scrollLeft;
-    var targetWitch = horizontalScrollOffset + event.clientX - parentNode.offsetLeft;
-    parentNode.style.width = "".concat(targetWitch, "px");
-  }, [parentNode]);
+    var horizontalScrollOffset = container ? container.scrollLeft : document.documentElement.scrollLeft;
+    var targetWidth = horizontalScrollOffset + event.clientX - parentNode.getBoundingClientRect().left;
+    parentNode.style.width = "".concat(targetWidth, "px");
+  }, [container, parentNode]);
   var handleMouseUp = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     event.preventDefault();
@@ -50,8 +52,8 @@ var Resizer = function Resizer() {
     setParentNode(null);
   }, [handleMouseMove]);
 
-  var initResize = function initResize(_ref) {
-    var target = _ref.target;
+  var initResize = function initResize(_ref2) {
+    var target = _ref2.target;
     setParentNode(target.parentNode);
   };