dtable-ui-component 5.2.18 → 5.2.19-beta

package/lib/DTableModalHeader/index.css

@@ -8,17 +8,7 @@
 }
 
 .modal-header .dtable-modal-close .dtable-modal-close-inner {
-  display: inline-block;
   width: 28px;
   height: 28px;
-  border-radius: 3px;
   font-size: 22.5px; /* same with Seafile close icon */
 }
-
-.modal-header .dtable-modal-close .dtable-modal-close-inner:hover {
-  background-color: #efefef;
-}
-
-.modal-header .dtable-modal-close .dtable-modal-close-inner .dtable-font {
-  color: #666;
-}

package/lib/DTableModalHeader/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 require("./index.css");
 const DTableModalHeader = _ref => {
   let {
@@ -19,12 +20,10 @@ const DTableModalHeader = _ref => {
     "data-dismiss": "modal",
     "aria-label": "Close",
     onClick: props.toggle
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    icon: "x",
     className: "dtable-modal-close-inner"
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-x",
-    "aria-hidden": "true"
-  })));
+  }));
   return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, Object.assign({}, props, {
     close: customCloseBtn
   }), children);

package/lib/IconButton/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+const IconButton = _ref => {
+  let {
+    disabled,
+    className,
+    icon,
+    children,
+    ...otherProperties
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    className: (0, _classnames.default)('seatable-icon-btn', className, {
+      'disabled': disabled
+    })
+  }, otherProperties), icon && /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
+    "aria-hidden": "true"
+  }), children);
+};
+var _default = exports.default = IconButton;

package/lib/index.js

@@ -232,6 +232,12 @@ Object.defineProperty(exports, "GeolocationFormatter", {
     return _GeolocationFormatter.default;
   }
 });
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _IconButton.default;
+  }
+});
 Object.defineProperty(exports, "ImageFormatter", {
   enumerable: true,
   get: function () {
@@ -500,4 +506,5 @@ var _DTableFiltersPopover = _interopRequireDefault(require("./DTableFiltersPopov
 var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
 var _CollapsibleSettingLayout = _interopRequireDefault(require("./CollapsibleSettingLayout"));
 var _DTableRadioGroup = _interopRequireDefault(require("./DTableRadioGroup"));
-var _DTableEmptyTip = _interopRequireDefault(require("./DTableEmptyTip"));
+var _DTableEmptyTip = _interopRequireDefault(require("./DTableEmptyTip"));
+var _IconButton = _interopRequireDefault(require("./IconButton"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.18",
+  "version": "5.2.19beta",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",