dtable-ui-component 6.0.118 → 6.0.119

package/lib/Comment/footer/participants/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../DTableToolTip"));
 var _participant = _interopRequireDefault(require("./participant"));
 var _participantSelect = _interopRequireDefault(require("./participant-select"));
 var _lang = require("../../../lang");
@@ -50,11 +50,7 @@ class Participants extends _react.default.Component {
           "aria-hidden": "true",
           className: "dtable-font dtable-icon-add"
         })
-      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-        delay: {
-          show: 0,
-          hide: 0
-        },
+      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         target: this.addIcon,
         placement: "bottom",
         children: (0, _lang.getLocale)('Add_participants')

package/lib/Comment/footer/participants/participant/index.js

@@ -1,12 +1,13 @@
 "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 _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../../DTableToolTip"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const Participant = _ref => {
@@ -21,11 +22,7 @@ const Participant = _ref => {
       className: "avatar",
       ref: ref,
       alt: "avatar"
-    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-      delay: {
-        show: 0,
-        hide: 0
-      },
+    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
       target: ref,
       placement: "bottom",
       children: participant.name

package/lib/DTableDropdownItem/index.js

@@ -9,6 +9,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 var _svgIcon = _interopRequireDefault(require("../DTableIcon/svg-icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownItem = _ref => {
@@ -74,21 +75,9 @@ const DTableDropdownItem = _ref => {
     }), typeof content !== 'string' && (content || ''), rightSlotContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-dropdown-item-right-slot ml-2",
       children: rightSlotContent
-    }), tooltip && id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+    }), tooltip && id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
       target: id,
-      trigger: "hover",
       placement: "right",
-      fade: false,
-      delay: {
-        show: 0,
-        hide: 0
-      },
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset: [0, 8]
-        }
-      }],
       children: tooltip
     })]
   }));

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _dtableUtils = require("dtable-utils");
 var _DTableCustomizeSelect = _interopRequireDefault(require("../../DTableCustomizeSelect"));
 var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
@@ -694,10 +694,9 @@ class FilterItem extends _react.default.Component {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           ref: this.invalidFilterTip,
           className: "dtable-font dtable-icon-exclamation-triangle invalid-filter"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
           target: this.invalidFilterTip,
           placement: "bottom",
-          fade: false,
           children: (0, _lang.getLocale)('Invalid_filter')
         })]
       });
@@ -820,7 +819,7 @@ class FilterItem extends _react.default.Component {
               style: {
                 color: '#FFC92C'
               }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
               placement: "bottom",
               target: this.filterToolTip,
               children: (0, _lang.getLocale)('filter_tip_message')

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _jsxRuntime = require("react/jsx-runtime");
 class RateItem extends _react.default.Component {
   constructor(props) {
@@ -71,7 +71,7 @@ class RateItem extends _react.default.Component {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font ".concat(rateShowType),
         ref: this.tooltipRef
-      }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+      }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         placement: "bottom",
         target: this.tooltipRef,
         children: rateItemIndex

package/lib/DTableToolTip/index.css

@@ -0,0 +1,45 @@
+.dtable-tooltip {
+  position: relative;
+  z-index: 99999;
+}
+
+.dtable-tooltip .tooltip {
+  opacity: 1;
+}
+
+.dtable-tooltip .tooltip .tooltip-inner {
+  width: fit-content;
+  max-width: 242px;
+  font-size: 14px;
+  text-align: start;
+  background-color: var(--bs-body-color);
+  color: var(--bs-body-bg);
+  border-radius: 4px;
+  padding: 4px 8px;
+  line-height: 20px;
+  font-weight: normal;
+}
+
+.dtable-tooltip-shortcut-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  line-height: 20px;
+}
+
+.dtable-tooltip-shortcut-keys {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.dtable-tooltip-shortcut-key {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid #999;
+  border-radius: 4px;
+  white-space: nowrap;
+  line-height: 14px;
+}

package/lib/DTableToolTip/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableToolTip = _ref => {
+  let {
+    target,
+    placement = 'bottom',
+    className,
+    children,
+    shortcut
+  } = _ref;
+  const hasShortcut = Boolean(shortcut);
+  const renderContent = () => {
+    if (hasShortcut) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-tooltip-shortcut-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-tooltip-text",
+          children: children
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dtable-tooltip-shortcut-keys",
+          children: shortcut.map((key, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-tooltip-shortcut-key",
+            children: key
+          }, index))
+        })]
+      });
+    }
+    return children;
+  };
+  const tooltipProps = {
+    target,
+    placement,
+    className: "dtable-tooltip ".concat(className ? className : ''),
+    innerClassName: hasShortcut ? 'dtable-tooltip-shortcut-inner' : '',
+    delay: {
+      show: 0,
+      hide: 0
+    },
+    hideArrow: true,
+    autohide: false,
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [0, -2.5]
+      }
+    }, {
+      name: 'preventOverflow',
+      options: {
+        boundariesElement: 'window'
+      }
+    }]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tooltipProps), {}, {
+    children: renderContent()
+  }));
+};
+var _default = exports.default = DTableToolTip;

package/lib/FileEditor/files-previewer/pc-previewer/file-previewer/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../../DTableToolTip"));
 var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
 var _fileNameEditor = _interopRequireDefault(require("./file-name-editor"));
 var _utils = require("../../../utils");
@@ -139,11 +139,7 @@ class FilePreviewer extends _react.default.Component {
             })]
           })]
         })]
-      }), !isShowRename && isItemFreezed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-        delay: {
-          show: 0,
-          hide: 0
-        },
+      }), !isShowRename && isItemFreezed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         placement: "bottom",
         target: this.renameRef,
         children: fileItem.name
@@ -159,11 +155,7 @@ class FilePreviewer extends _react.default.Component {
               "aria-hidden": "true",
               className: "dtable-font dtable-icon-download disable file-download-icon",
               ref: ref => this.disabledDownloadRef = ref
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-              delay: {
-                show: 0,
-                hide: 0
-              },
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
               placement: "bottom",
               target: this.disabledDownloadRef,
               children: errorMessage

package/lib/FileEditor/pc-editor/addition-previewer/local-file-addition/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../../DTableToolTip"));
 var _UploadProgress = _interopRequireDefault(require("../../../../UploadProgress"));
 var _url = require("../../../../utils/url");
 var _FileUploader = _interopRequireDefault(require("../../../../FileUploader"));
@@ -193,15 +193,9 @@ class LocalFileAddition extends _react.default.Component {
               className: "image-delete-span",
               children: "x"
             })
-          }), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
-            toggle: this.tooltipToggle,
-            delay: {
-              show: 0,
-              hide: 0
-            },
+          }), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
             target: "file-content-tip-".concat(index),
             placement: "bottom",
-            isOpen: this.state.tooltipOpen,
             children: fileItem.name
           })]
         }, 'dtable-ui-image-wrapper-' + index);
@@ -262,7 +256,6 @@ class LocalFileAddition extends _react.default.Component {
       isFileTipShow: false,
       isShowDeleteIcon: false,
       enterFileIndex: -1,
-      tooltipOpen: false,
       uploadMessageList: [],
       thumbnailSrcList: [],
       reUploadFile: null

package/lib/ImageEditor/images-previewer/image-preview/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../DTableToolTip"));
 var _DeleteTip = _interopRequireDefault(require("../../../DeleteTip"));
 var _url = require("../../../utils/url");
 var _constants = require("../../../constants");
@@ -84,7 +84,6 @@ class ImagePreviewer extends _react.default.Component {
       });
     };
     this.state = {
-      isTooltipOpen: false,
       imageThumbnailUrl: ''
     };
     this.canDownLoad = props.canDownLoad;
@@ -140,16 +139,9 @@ class ImagePreviewer extends _react.default.Component {
           src: this.state.imageThumbnailUrl,
           alt: ""
         }), enterImageItemIndex === itemIndex && this.renderImageIcons()]
-      }), !_constants.isMobile && enterImageItemIndex === itemIndex && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
+      }), !_constants.isMobile && enterImageItemIndex === itemIndex && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         placement: "bottom",
-        isOpen: this.state.isTooltipOpen,
-        toggle: this.toggle,
         target: this.ref,
-        delay: {
-          show: 0,
-          hide: 0
-        },
-        fade: false,
         children: (0, _url.getFileName)(imageItemUrl)
       }), this.state.showTip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteTip.default, {
         position: this.position,

package/lib/ImageThumbnail/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
 var _url = require("../utils/url");
@@ -61,15 +61,9 @@ class ImageThumbnail extends _react.default.Component {
         showTip: false
       });
     };
-    this.toggle = () => {
-      this.setState({
-        isTooltipOpen: !this.state.isTooltipOpen
-      });
-    };
     this.state = {
       imageThumbnailUrl: '',
-      showTip: false,
-      isTooltipOpen: false
+      showTip: false
     };
     this.ref = null;
     const {
@@ -128,16 +122,9 @@ class ImageThumbnail extends _react.default.Component {
         toggle: this.closeTip,
         handleDelete: this.deleteImage,
         deleteTip: this.props.deleteTip || (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-      }), !_constants.isMobile && this.ref && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
+      }), !_constants.isMobile && this.ref && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         placement: "bottom",
-        isOpen: this.state.isTooltipOpen,
-        toggle: this.toggle,
         target: this.ref,
-        delay: {
-          show: 0,
-          hide: 0
-        },
-        fade: false,
         children: name || (0, _url.getFileName)(src)
       })]
     });

package/lib/RowExpandDialog/column-content/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _DTableColumnIcon = _interopRequireDefault(require("../../DTableColumnIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -40,12 +41,9 @@ const ColumnContent = _ref => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "dtable-font dtable-icon-description dtable-ui-column-tip-icon ml-2",
           ref: descriptionRef
-        }), descriptionRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-          innerClassName: "dtable-ui-column-description-tip",
-          popperClassName: "dtable-ui-row-expand-column-tip",
+        }), descriptionRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
           target: descriptionRef.current,
           placement: "bottom",
-          fade: false,
           children: description
         })]
       })]

package/lib/RowExpandFormatter/file-formatter/row-expand-file-item-formatter.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _lang = require("../../lang");
 var _url = require("../../utils/url");
 var _DeleteTip = _interopRequireDefault(require("../../DeleteTip"));
@@ -15,11 +15,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandFileItemFormatter extends _react.Component {
   constructor(props) {
     super(props);
-    this.toggleTooltip = () => {
-      this.setState({
-        isTooltipOpen: !this.state.isTooltipOpen
-      });
-    };
     this.closeDeleteTip = () => {
       this.setState({
         isDeleteTipOpen: false
@@ -41,7 +36,6 @@ class RowExpandFileItemFormatter extends _react.Component {
       this.props.deleteFile(this.props.index);
     };
     this.state = {
-      isTooltipOpen: false,
       isDeleteTipOpen: false
     };
   }
@@ -88,16 +82,9 @@ class RowExpandFileItemFormatter extends _react.Component {
         toggle: this.closeDeleteTip,
         handleDelete: this.onDelete,
         deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_file')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         placement: "bottom",
-        isOpen: this.state.isTooltipOpen,
-        toggle: this.toggleTooltip,
         target: id,
-        delay: {
-          show: 0,
-          hide: 0
-        },
-        fade: false,
         children: file.name
       })]
     });

package/lib/RowExpandFormatter/image-formatter/row-expand-image-item-formatter.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../DTableToolTip"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lang = require("../../lang");
 var _DeleteTip = _interopRequireDefault(require("../../DeleteTip"));
@@ -15,11 +15,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandImageItemFormatter extends _react.Component {
   constructor(props) {
     super(props);
-    this.toggleTooltip = () => {
-      this.setState({
-        isTooltipOpen: !this.state.isTooltipOpen
-      });
-    };
     this.closeDeleteTip = () => {
       this.setState({
         isDeleteTipOpen: false
@@ -50,7 +45,6 @@ class RowExpandImageItemFormatter extends _react.Component {
       this.props.onImageClick(this.props.index);
     };
     this.state = {
-      isTooltipOpen: false,
       isDeleteTipOpen: false
     };
   }
@@ -97,16 +91,9 @@ class RowExpandImageItemFormatter extends _react.Component {
         deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
         query: '(min-width: 768px)',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Tooltip, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
           placement: "bottom",
-          isOpen: this.state.isTooltipOpen,
-          toggle: this.toggleTooltip,
           target: id,
-          delay: {
-            show: 0,
-            hide: 0
-          },
-          fade: false,
           children: name
         })
       })]

package/lib/index.js

@@ -226,6 +226,12 @@ Object.defineProperty(exports, "DTableSwitch", {
     return _DTableSwitch.default;
   }
 });
+Object.defineProperty(exports, "DTableToolTip", {
+  enumerable: true,
+  get: function () {
+    return _DTableToolTip.default;
+  }
+});
 Object.defineProperty(exports, "DateEditor", {
   enumerable: true,
   get: function () {
@@ -685,6 +691,7 @@ var _FileItemFormatter = _interopRequireDefault(require("./FileItemFormatter"));
 var _DigitalSignFormatter = _interopRequireDefault(require("./DigitalSignFormatter"));
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("./DepartmentSingleSelectFormatter"));
 var _SimpleLongTextFormatter = _interopRequireDefault(require("./SimpleLongTextFormatter"));
+var _DTableToolTip = _interopRequireDefault(require("./DTableToolTip"));
 var _RowExpandFormatter = _interopRequireDefault(require("./RowExpandFormatter"));
 var _RowExpandEditor = _interopRequireDefault(require("./RowExpandEditor"));
 var _RowExpand = _interopRequireDefault(require("./RowExpand"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.118",
+  "version": "6.0.119",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.8",