dtable-ui-component 7.0.19 → 7.0.20

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

@@ -12,6 +12,7 @@ require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
+var _clearIcon = _interopRequireDefault(require("../../common/clear-icon"));
 var _lang = require("../../lang");
 var _columnUtils = require("../../utils/column-utils");
 require("@seafile/seafile-calendar/assets/index.css");
@@ -118,17 +119,6 @@ class FilterCalendar extends _react.Component {
       disabled: true
     });
     const calendarFormat = this.getCalendarFormat();
-    const clearStyle = {
-      position: 'absolute',
-      top: '8px',
-      left: '225px',
-      color: 'gray',
-      fontSize: '12px'
-    };
-    const clearIcon = /*#__PURE__*/_react.default.createElement('i', {
-      className: 'item-icon dtable-font dtable-icon-x',
-      style: clearStyle
-    });
     const calendar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileCalendar.default, {
       className: "dtable-rc-calendar",
       locale: (0, _lang.translateCalendar)(),
@@ -140,7 +130,7 @@ class FilterCalendar extends _react.Component {
       showDateInput: true,
       focusablePanel: false,
       onClear: this.onClear,
-      clearIcon: clearIcon,
+      clearIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {}),
       firstDayOfWeek: firstDayOfWeek
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DateEditor/pc-editor.js

@@ -10,6 +10,7 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
+var _clearIcon = _interopRequireDefault(require("../common/clear-icon"));
 var _editorUtils = require("../utils/editor-utils");
 var _constants = require("../constants");
 var _lang = require("../lang");
@@ -157,6 +158,7 @@ class PCDateEditor extends _react.default.Component {
         showDateInput: true,
         focusablePanel: false,
         onClear: this.onClear,
+        clearIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {}),
         firstDayOfWeek: firstDayOfWeek
       });
     };

package/lib/common/clear-icon/index.css

@@ -0,0 +1,15 @@
+.dtable-ui-clear-icon {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--bs-icon-color);
+  pointer-events: all;
+}
+
+.dtable-ui-clear-icon:hover {
+  background-color: var(--bs-icon-btn-hover-bg-color, var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04)));
+  border-radius: 4px;
+}

package/lib/common/clear-icon/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
+var _lang = require("../../lang");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function ClearIcon() {
+  const tooltipId = `dtable-ui-clear-icon-${(0, _react.useId)().replace(/:/g, '')}`;
+  const label = (0, _lang.getLocale)('Clear');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    id: tooltipId,
+    className: "dtable-ui-clear-icon",
+    "aria-label": label,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      symbol: "close",
+      ariaHidden: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
+      target: tooltipId,
+      placement: "bottom",
+      children: label
+    })]
+  });
+}
+var _default = exports.default = ClearIcon;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.19",
+  "version": "7.0.20",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",
-    "@seafile/seafile-calendar": "^1.0.33",
+    "@seafile/seafile-calendar": "^1.0.34",
     "@seafile/seafile-editor": "^3.0.34",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",