@widergy/energy-ui 1.110.1 → 1.110.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.110.2](https://github.com/widergy/energy-ui/compare/v1.110.1...v1.110.2) (2022-02-11)
+
+
+### Bug Fixes
+
+* uttable actions optimization ([#259](https://github.com/widergy/energy-ui/issues/259)) ([ddfed55](https://github.com/widergy/energy-ui/commit/ddfed55c16c19f2f998ba316e8eb1953c0340b6c))
+
 ## [1.110.1](https://github.com/widergy/energy-ui/compare/v1.110.0...v1.110.1) (2022-02-10)
 
 

package/dist/components/UTTable/components/ActionIcons/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEAULT_LOADING_SIZE = void 0;
+var DEAULT_LOADING_SIZE = 24;
+exports.DEAULT_LOADING_SIZE = DEAULT_LOADING_SIZE;

package/dist/components/UTTable/components/ActionIcons/index.js

@@ -13,7 +13,7 @@ var _propTypes = require("prop-types");
 
 var _array = require("@widergy/web-utils/lib/array");
 
-var _UTIconButton = _interopRequireDefault(require("../../../UTIconButton"));
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
 
 var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
 
@@ -21,6 +21,8 @@ var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
 
 var _types = require("../../types");
 
+var _constants = require("./constants");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -60,6 +62,8 @@ var ActionIcons = function ActionIcons(_ref) {
         iconClassName = _ref2.iconClassName,
         disabledIconClassName = _ref2.disabledIconClassName,
         loadingClassName = _ref2.loadingClassName,
+        _ref2$loadingSize = _ref2.loadingSize,
+        loadingSize = _ref2$loadingSize === void 0 ? _constants.DEAULT_LOADING_SIZE : _ref2$loadingSize,
         _ref2$isVisible = _ref2.isVisible,
         isVisible = _ref2$isVisible === void 0 ? function () {
       return true;
@@ -126,17 +130,18 @@ var ActionIcons = function ActionIcons(_ref) {
       content: tooltipContent,
       stringContentClassName: _stylesModule.default.tooltip,
       tippyProps: tippyProps
-    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
-      className: "".concat(_stylesModule.default.iconButton, " ").concat(classes.actionIconButton, " ").concat(buttonClassName),
-      loadingClassName: loadingClassName,
-      loading: isLoading(rowData),
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_stylesModule.default.iconButton, " ").concat(classes.actionIconButton, " \n                ").concat((isDisabled(rowData) || isLoading(rowData)) && _stylesModule.default.disabled, " ").concat(buttonClassName),
       onClick: function onClick(event) {
         return handleActionClick(event, rowData);
       },
-      disabled: isDisabled(rowData)
-    }, /*#__PURE__*/_react.default.createElement(Icon, {
+      role: "button"
+    }, isLoading(rowData) ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+      className: "".concat(classes.actionLoading, " ").concat(loadingClassName),
+      size: loadingSize
+    }) : /*#__PURE__*/_react.default.createElement(Icon, {
       className: "".concat(classes.actionIcon, " ").concat(iconClassName, " ").concat(isDisabled(rowData) && disabledIconClassName)
-    })), !(0, _array.isEmpty)(menuItems) && /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+    })), !!menuAnchor && !(0, _array.isEmpty)(menuItems) && /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
       anchor: menuAnchor,
       contextData: menuRowContextData,
       onClose: closeMenu,

package/dist/components/UTTable/components/ActionIcons/styles.module.scss

@@ -1,6 +1,25 @@
+@import '../../../../scss//variables/colors';
+
 .iconButton {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
   margin: -4px 0;
   padding: 8px;
+  transition: 0.5s;
+
+  &:not(.disabled) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: darken($white, 10%);
+    }
+  }
+}
+
+.disabled {
+  pointer-events: none;
 }
 
 .tooltip {

package/dist/components/UTTable/theme.js

@@ -346,6 +346,9 @@ var retrieveStyle = function retrieveStyle(theme) {
       '&:before': {
         backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerDecorator', 'unSelected', 'color'], _colors.default.gray3)
       }
+    },
+    actionLoading: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'color'], _colors.default.loadingBase)
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "1.110.1",
+  "version": "1.110.2",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",