dtable-ui-component 7.0.2 → 7.0.4

package/lib/DTableFiltersPopover/index.js

@@ -147,28 +147,29 @@ var _jsxRuntime = require("react/jsx-runtime");
           addIconClassName: "popover-add-icon"
         }), isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "add-buttons",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter mr-4",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
+            className: "mr-4",
             onClick: canAddFilter ? () => this.addFilter() : () => {},
-            role: "button",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter'),
+            color: "filled",
+            size: "middle",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter')
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "btn-add-filter-group",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
             onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
-            role: "button",
+            color: "filled",
+            size: "middle",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter_group'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table popover-add-icon"
+              className: "dtable-font dtable-icon-add-table"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter_group')

package/lib/DTableFiltersPopover/widgets/filter-group.js

@@ -138,7 +138,7 @@ class FilterGroup extends _react.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.deleteFilterGroup,
         role: "button",
         tabIndex: 0,

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -709,7 +709,7 @@ class FilterItem extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filter-item",
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.onDeleteFilter,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font dtable-icon-fork-number"

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -289,8 +289,8 @@
 }
 
 .dtable-ui-filters-list .delete-filter {
-  width: 12px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin-right: 14px;
   text-align: center;
 }
@@ -302,7 +302,7 @@
 .dtable-ui-filters-list .delete-filter .dtable-icon-fork-number {
   display: inline-block;
   font-size: 12px;
-  color: #999;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .multiple-option-name {
@@ -388,7 +388,7 @@
 }
 
 .dtable-ui-filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: #555555;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .filter-container-readonly .dtable-select .selected-option-show,

package/lib/DTableModalHeader/index.js

@@ -10,22 +10,15 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
-require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const DTableModalHeader = _ref => {
   let children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    className: "close dtable-modal-close",
-    "data-dismiss": "modal",
+  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    icon: "x",
     "aria-label": "Close",
-    onClick: props.toggle,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      icon: "x",
-      className: "dtable-modal-close-inner"
-    })
+    onClick: props.toggle
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     close: customCloseBtn,

package/lib/FieldDisplaySetting/index.js

@@ -63,7 +63,7 @@ function FieldDisplaySetting(_ref) {
         className: "mb-0",
         children: textProperties.titleValue
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+        className: "seatable-icon-btn dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
       nodeRef: nodeRef,

package/lib/SelectItem/index.js

@@ -37,7 +37,7 @@ const SelectItem = _ref => {
       title: option.name,
       children: option.name
     }), isShowRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "dtable-ui-select-item-remove-btn",
+      className: "dtable-ui-select-item-remove-btn seatable-icon-btn",
       style: removeBtnStyle,
       onClick: onRemove,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",

package/lib/DTableModalHeader/index.css

@@ -1,22 +0,0 @@
-.modal-header .dtable-modal-close.close {
-  padding: 14px 16px;
-  opacity: 1;
-  margin: -1rem -1rem -1rem auto;
-  background-color: transparent;
-  border: 0;
-  float: right;
-  font-size: 1.40625rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #000;
-}
-
-.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
-  opacity: 1;
-}
-
-.modal-header .dtable-modal-close .dtable-modal-close-inner {
-  width: 28px;
-  height: 28px;
-  font-size: 22.5px; /* same with Seafile close icon */
-}