dtable-ui-component 6.0.117-beta.8 → 6.0.117-xms.3

package/lib/DTableDropdownItem/index.js

@@ -26,7 +26,9 @@ const DTableDropdownItem = _ref => {
     rightSlotContent,
     icon,
     content,
-    onClick
+    onClick,
+    style,
+    tabIndex
   } = _ref;
   if (divider) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
@@ -48,6 +50,12 @@ const DTableDropdownItem = _ref => {
   if (typeof toggle === 'boolean') {
     customItemProps.toggle = toggle;
   }
+  if (style) {
+    customItemProps.style = style;
+  }
+  if (typeof tabIndex === 'number') {
+    customItemProps.tabIndex = tabIndex;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({
     className: className,
     disabled: disabled,

package/lib/DTableDropdownMenu/index.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownMenu = _ref => {
   let {
+    id,
     className,
     container,
     modifiers,
@@ -20,6 +21,12 @@ const DTableDropdownMenu = _ref => {
     children
   } = _ref;
   let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
+  customMenuProps.modifiers = [{
+    name: 'preventOverflow',
+    options: {
+      boundary: document.body
+    }
+  }, ...((customMenuProps === null || customMenuProps === void 0 ? void 0 : customMenuProps.modifiers) || [])];
   if (container) {
     customMenuProps.container = container;
   }
@@ -33,6 +40,7 @@ const DTableDropdownMenu = _ref => {
     customMenuProps.flip = flip;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    id: id,
     className: (0, _classnames.default)('dtable-dropdown-menu', className)
   }, customMenuProps), {}, {
     children: children

package/lib/DTableModalHeader/index.js

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
@@ -26,7 +27,8 @@ const DTableModalHeader = _ref => {
     onClick: props.toggle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       icon: "x",
-      className: "dtable-modal-close-inner"
+      className: "dtable-modal-close-inner",
+      title: (0, _lang.getLocale)('Close')
     })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {

package/lib/DTableSubDropdownMenu/index.js

@@ -11,6 +11,7 @@ var _DTableDropdownMenu = _interopRequireDefault(require("../DTableDropdownMenu"
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableSubDropdownMenu = _ref => {
   let {
+    id,
     className,
     container,
     modifiers,
@@ -33,6 +34,7 @@ const DTableSubDropdownMenu = _ref => {
     customMenuProps.flip = flip;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownMenu.default, {
+    id: id,
     className: (0, _classnames.default)('dtable-sub-dropdown-menu', className),
     menuProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, customMenuProps), {}, {
       modifiers: [{

package/lib/DTableToolTip/index.css

@@ -0,0 +1,45 @@
+.dtable-tooltip {
+  position: absolute;
+  z-index: 99999;
+}
+
+.dtable-tooltip .tooltip {
+  max-width: 242px;
+  min-width: max-content;
+  opacity: 1;
+}
+
+.dtable-tooltip .tooltip .tooltip-inner {
+  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/IconButton/index.js

@@ -1,33 +1,60 @@
 "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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
+var _dtableUtils = require("dtable-utils");
+require("../css/icon-button-styles.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disabled", "className", "icon", "children"];
+const _excluded = ["disabled", "className", "icon", "color", "children", "title", "tooltipPlacement", "outline", "noBackground"];
 const IconButton = _ref => {
   let {
       disabled,
       className,
       icon,
-      children
+      color,
+      children,
+      title,
+      tooltipPlacement,
+      outline,
+      noBackground
     } = _ref,
     otherProperties = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    className: (0, _classnames.default)('seatable-icon-btn', className, {
-      'disabled': disabled
-    })
-  }, otherProperties), {}, {
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
-      "aria-hidden": "true"
-    }), children]
-  }));
+  const buttonId = (0, _react.useMemo)(() => "dtable-icon-button-".concat((0, _dtableUtils.generatorBase64Code)(8)), []);
+  const [mounted, setMounted] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      id: buttonId,
+      className: (0, _classnames.default)('dtable-icon-btn', className, {
+        'disabled': disabled,
+        'outline': outline,
+        'no-background': noBackground
+      }),
+      "aria-label": title
+    }, otherProperties), {}, {
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
+        "aria-hidden": "true",
+        style: color ? {
+          color
+        } : undefined
+      }), children]
+    })), title && mounted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
+      placement: tooltipPlacement || 'bottom',
+      target: buttonId,
+      children: title
+    })]
+  });
 };
 var _default = exports.default = IconButton;

package/lib/ImagePreviewerLightbox/index.js

@@ -124,7 +124,10 @@ function ImagePreviewerLightbox(props) {
     zoomOutTip: (0, _lang.getLocale)('Zoom_out'),
     rotateTip: (0, _lang.getLocale)('Rotate_image'),
     deleteTip: (0, _lang.getLocale)('Delete_image'),
-    downloadImageTip: (0, _lang.getLocale)('Download_image')
+    downloadImageTip: (0, _lang.getLocale)('Download_image'),
+    preLineMetadaTip: (0, _lang.getLocale)('Pre_Line'),
+    nextLineMetadaTip: (0, _lang.getLocale)('Next_Line'),
+    closeMetadataTip: (0, _lang.getLocale)('Close')
   });
 }
 var _default = exports.default = ImagePreviewerLightbox;

package/lib/NotificationPopover/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class NotificationPopover extends _react.default.Component {
@@ -62,7 +63,8 @@ class NotificationPopover extends _react.default.Component {
           className: "notification-header",
           children: [headerText, /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
             icon: "x",
-            onClick: this.props.onNotificationListToggle
+            onClick: this.props.onNotificationListToggle,
+            title: (0, _lang.getLocale)('Close')
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "notification-body",

package/lib/RoleStatusEditor/index.js

@@ -47,12 +47,6 @@ const RoleStatusEditor = _ref => {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownMenu.default, {
       className: "position-fixed",
-      modifiers: [{
-        name: 'preventOverflow',
-        options: {
-          boundary: document.body
-        }
-      }],
       children: menuOptions.map(option => {
         const {
           value,

package/lib/css/icon-button-styles.css

@@ -0,0 +1,141 @@
+.dtable-icon-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+  color: #666666 !important;
+  cursor: pointer;
+  transition: all 0.2s ease !important;
+  outline: none !important;
+  border-radius: 3px !important;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.dtable-icon-btn:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.dtable-icon-btn:active:focus {
+  box-shadow: none !important;
+}
+
+.dtable-icon-btn.btn-lg,
+.dtable-icon-btn.size-lg {
+  min-width: 40px !important;
+  min-height: 40px !important;
+}
+
+.dtable-icon-btn.btn-lg .dtable-icon-btn__icon,
+.dtable-icon-btn.size-lg .dtable-icon-btn__icon {
+  font-size: 20px !important;
+}
+
+.dtable-icon-btn .dtable-icon-btn__icon {
+  font-size: 16px !important;
+}
+
+.dtable-icon-btn.btn-sm,
+.dtable-icon-btn.size-sm {
+  min-width: 24px !important;
+  min-height: 24px !important;
+}
+
+.dtable-icon-btn.btn-sm .dtable-icon-btn__icon,
+.dtable-icon-btn.size-sm .dtable-icon-btn__icon {
+  font-size: 14px !important;
+}
+
+.dtable-icon-btn.size-xs {
+  min-width: 20px !important;
+  min-height: 20px !important;
+}
+
+.dtable-icon-btn.size-xs .dtable-icon-btn__icon {
+  font-size: 12px !important;
+}
+
+.dtable-icon-btn:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+.dtable-icon-btn:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+.dtable-icon-btn.outline,
+.dtable-icon-btn.outlined {
+  background-color: #FFFFFF !important;
+  border: 1px solid rgba(0, 40, 100, 0.12) !important;
+  color: #666666 !important;
+}
+
+.dtable-icon-btn.outline:hover:not(:disabled),
+.dtable-icon-btn.outlined:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-icon-btn.outline:active:not(:disabled),
+.dtable-icon-btn.outlined:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-icon-btn.no-background,
+.dtable-icon-btn.no-display-bac {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn.no-background:hover:not(:disabled),
+.dtable-icon-btn.no-display-bac:hover:not(:disabled) {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn.no-background:active:not(:disabled),
+.dtable-icon-btn.no-display-bac:active:not(:disabled) {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn:disabled,
+.dtable-icon-btn.disabled {
+  opacity: 0.65 !important;
+  cursor: not-allowed !important;
+}
+
+.dtable-icon-btn__icon {
+  display: inline-block;
+  line-height: 1;
+  margin: 0;
+  font-weight: normal;
+}
+
+.dtable-icon-btn.btn-primary,
+.dtable-icon-btn.color-primary {
+  color: #FF8000 !important;
+}
+
+.dtable-icon-btn.btn-primary:hover:not(:disabled),
+.dtable-icon-btn.color-primary:hover:not(:disabled) {
+  color: #ED7109 !important;
+  background-color: rgba(255, 128, 0, 0.1) !important;
+}
+
+.dtable-icon-btn.btn-secondary,
+.dtable-icon-btn.color-secondary {
+  color: #212529 !important;
+}
+
+.dtable-icon-btn.btn-danger,
+.dtable-icon-btn.color-danger {
+  color: #dc3545 !important;
+}
+
+.dtable-icon-btn.btn-danger:hover:not(:disabled),
+.dtable-icon-btn.color-danger:hover:not(:disabled) {
+  color: #c82333 !important;
+  background-color: rgba(220, 53, 69, 0.1) !important;
+}

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/lib/locales/de.json

@@ -12,6 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
+  "Pre_Line": "previous Line",
+  "Next_Line": "next Line",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Wählen Sie einen Mitarbeiter",

package/lib/locales/en.json

@@ -12,6 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
+  "Pre_Line": "previous Line",
+  "Next_Line": "next Line",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/es.json

@@ -12,6 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
+  "Pre_Line": "previous Line",
+  "Next_Line": "next Line",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/fr.json

@@ -12,6 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
+  "Pre_Line": "previous Line",
+  "Next_Line": "next Line",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choisissez un collaborateur",

package/lib/locales/pt.json

@@ -12,6 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
+  "Pre_Line": "previous Line",
+  "Next_Line": "next Line",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/ru.json

@@ -12,6 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
+  "Pre_Line": "previous Line",
+  "Next_Line": "next Line",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/zh-CN.json

@@ -12,6 +12,8 @@
   "Rotate_image": "旋转",
   "Delete_image": "删除",
   "Download_image": "下载",
+  "Pre_Line": "上一行",
+  "Next_Line": "下一行",
   "Zoom_in": "放大",
   "Zoom_out": "缩小",
   "Choose_a_collaborator": "选择一个协作人",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.117-beta.8",
+  "version": "6.0.117xms.3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.8",