@cashub/ui 0.12.0 → 0.13.0

package/dropzone/ImageDropzone.js

@@ -136,28 +136,33 @@ var ImageDropzone = function ImageDropzone(_ref) {
   };
 
   var handleAddFiles = (0, _react.useCallback)(function (newFiles) {
-    if (files.length + newFiles.length > maxFiles) {
-      newFiles.splice(maxFiles - files.length);
-    }
+    setFiles(function (previous) {
+      if (previous.length + newFiles.length > maxFiles) {
+        newFiles.splice(maxFiles - previous.length);
+      }
+
+      return [].concat(_toConsumableArray(previous), _toConsumableArray(newFiles));
+    });
 
     for (var index = 0; index < newFiles.length; index += 1) {
       newFiles[index].url = URL.createObjectURL(newFiles[index]);
     }
 
-    setFiles([].concat(_toConsumableArray(files), _toConsumableArray(newFiles)));
     setAddedFiles(newFiles);
-  }, [files, maxFiles]);
+  }, [maxFiles]);
   var handleRemoveFile = (0, _react.useCallback)(function (event, index) {
     if (event) {
       event.stopPropagation();
     }
 
-    var newFiles = _toConsumableArray(files);
+    setFiles(function (previous) {
+      var newFiles = _toConsumableArray(previous);
 
-    newFiles.splice(index, 1);
-    setFiles(newFiles);
+      newFiles.splice(index, 1);
+      return newFiles;
+    });
     if (onRemovedFile) onRemovedFile(index);
-  }, [files, onRemovedFile]);
+  }, [onRemovedFile]);
   var handleChangeFile = (0, _react.useCallback)(function (event) {
     var files = event.target.files;
     var newFiles = [];
@@ -190,7 +195,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
         });
       }
     });
-  }, [cropper]);
+  }, [width, height, cropper]);
 
   var previewItem = function previewItem() {
     return files.map(function (file, index) {

package/package.json

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

package/table/GridTable.js

@@ -31,7 +31,7 @@ var _Popover = _interopRequireDefault(require("../popover/Popover"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var _excluded = ["title", "fieldName", "render", "custom"];
 
@@ -83,8 +83,13 @@ var GridTable = function GridTable(_ref) {
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
-      restWidth = _useState2[0],
-      setRestWidth = _useState2[1];
+      tableWidth = _useState2[0],
+      setTableWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      restWidth = _useState4[0],
+      setRestWidth = _useState4[1];
 
   var texts = (0, _react.useMemo)(function () {
     var defaultTexts = {
@@ -99,6 +104,7 @@ var GridTable = function GridTable(_ref) {
     }
   }, [onSortChange]);
   var handleResize = (0, _react.useCallback)(function () {
+    setTableWidth(tableRef.current.offsetWidth);
     setRestWidth(function (previousWidth) {
       var containerWidth = wrapperRef.current.offsetWidth;
       var tableWidth = tableRef.current.offsetWidth - previousWidth;
@@ -110,6 +116,10 @@ var GridTable = function GridTable(_ref) {
       return 0;
     });
   }, []);
+  var handleScroll = (0, _react.useCallback)(function (event) {
+    var target = event.target;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
   var showFullValue = (0, _react.useCallback)(function (event) {
     var id = event.target.id;
 
@@ -225,6 +235,11 @@ var GridTable = function GridTable(_ref) {
   (0, _react.useEffect)(function () {
     handleResize();
   }, [columns, handleResize]);
+  (0, _react.useEffect)(function () {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
       ref: wrapperRef,
@@ -239,6 +254,10 @@ var GridTable = function GridTable(_ref) {
           children: tableRows || generateEmptyMessage()
         })]
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scrollbar, {
+      backgroundReverse: backgroundReverse,
+      width: tableWidth,
+      onScroll: handleScroll
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTableFooter.default, {
       backgroundReverse: backgroundReverse,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooterInfo.default, {
@@ -277,12 +296,10 @@ var GridTable = function GridTable(_ref) {
   });
 };
 
-var TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: auto;\n  background: ", ";\n\n  ", "\n"])), function (_ref2) {
+var TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  background: ", ";\n"])), function (_ref2) {
   var backgroundReverse = _ref2.backgroundReverse;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
-}, (0, _scrollbar.default)({
-  size: 'large'
-}));
+});
 
 var ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  width: 0px;\n  color: var(--font-on-primary);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
 
@@ -294,5 +311,15 @@ var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _t
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });
 
+var Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 48px;\n  width: 100%;\n  overflow: auto;\n  background: ", ";\n\n  ::before {\n    display: block;\n    content: '';\n    width: ", ";\n    height: 1px;\n  }\n\n  ", "\n"])), function (_ref5) {
+  var backgroundReverse = _ref5.backgroundReverse;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}, function (_ref6) {
+  var width = _ref6.width;
+  return "".concat(width, "px");
+}, (0, _scrollbar.default)({
+  size: 'large'
+}));
+
 var _default = GridTable;
 exports.default = _default;

package/table/subComponent/GridTableFooter.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var GridTableFooter = (0, _styledComponents.default)(_TableFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  background: ", ";\n"])), function (_ref) {
+var GridTableFooter = (0, _styledComponents.default)(_TableFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  background: ", ";\n"])), function (_ref) {
   var backgroundReverse = _ref.backgroundReverse;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });