dtable-ui-component 6.0.116 → 6.0.117-beta.2

package/lib/Comment/body/comment.js

@@ -10,6 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _seafileEditor = require("@seafile/seafile-editor");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
+var _DTableDropdownMenu = _interopRequireDefault(require("../../DTableDropdownMenu"));
+var _DTableDropdownItem = _interopRequireDefault(require("../../DTableDropdownItem"));
 var _lang = require("../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 class Comment extends _react.PureComponent {
@@ -161,24 +163,20 @@ class Comment extends _react.PureComponent {
               title: moreOperationsText,
               "aria-label": moreOperationsText
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownMenu, {
-            className: "dtable-dropdown-menu dropdown-menu dtable-ui-comment-dropdown-list",
-            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableDropdownMenu.default, {
+            className: "dtable-ui-comment-dropdown-list",
+            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
               onClick: event => onResolve(event, comment.id),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-icon dtable-font dtable-icon-mark mr-2"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-text",
-                children: (0, _lang.getLocale)('Mark_as_resolved')
-              })]
-            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-mark"
+              }),
+              content: (0, _lang.getLocale)('Mark_as_resolved')
+            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
               onClick: event => onDelete(event, comment.id),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-icon dtable-font dtable-icon-delete mr-2"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-text",
-                children: (0, _lang.getLocale)('Delete')
-              })]
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-delete"
+              }),
+              content: (0, _lang.getLocale)('Delete')
             })]
           })]
         })]

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

@@ -89,7 +89,7 @@ class ParticipantSelect extends _react.Component {
         return filteredParticipants.map(participant => {
           let selectedIndex = participants.findIndex(item => item.email === participant.email);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dropdown-item dtable-ui-participant-item",
+            className: "dtable-ui-participant-item",
             onClick: this.onSelectParticipant.bind(this, participant),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "dtable-ui-participant-container",

package/lib/DTableDropdownItem/index.js

@@ -0,0 +1,83 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _svgIcon = _interopRequireDefault(require("../DTableIcon/svg-icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableDropdownItem = _ref => {
+  let {
+    className,
+    divider,
+    id,
+    disabled,
+    tooltip,
+    itemProps,
+    showChecked,
+    checked,
+    leftSlotContent,
+    rightSlotContent,
+    icon,
+    content,
+    onClick
+  } = _ref;
+  if (divider) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
+      divider: true,
+      className: className
+    }));
+  }
+  const renderedIcon = () => {
+    if (!icon || ! /*#__PURE__*/_react.default.isValidElement(icon)) return null;
+    return /*#__PURE__*/_react.default.cloneElement(icon, {
+      className: (0, _classnames.default)(icon.props.className, 'item-icon'),
+      'aria-hidden': 'true'
+    });
+  };
+  let customItemProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
+    onClick
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: className,
+    disabled: disabled,
+    id: id
+  }, customItemProps), {}, {
+    children: [(leftSlotContent || showChecked) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: "dtable-dropdown-item-left-slot",
+      children: [checked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcon.default, {
+        symbol: "check-mark",
+        className: "item-icon"
+      }), leftSlotContent || null]
+    }), renderedIcon(), typeof content === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "item-text",
+      "aria-label": content,
+      children: content
+    }), 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, {
+      target: id,
+      trigger: "hover",
+      placement: "right",
+      fade: false,
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }],
+      children: tooltip
+    })]
+  }));
+};
+var _default = exports.default = DTableDropdownItem;

package/lib/DTableDropdownMenu/index.js

@@ -0,0 +1,24 @@
+"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 _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableDropdownMenu = _ref => {
+  let {
+    className,
+    menuProps,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: (0, _classnames.default)('dtable-dropdown-menu', className)
+  }, menuProps), {}, {
+    children: children
+  }));
+};
+var _default = exports.default = DTableDropdownMenu;

package/lib/DTableSubDropdownMenu/index.js

@@ -0,0 +1,31 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _DTableDropdownMenu = _interopRequireDefault(require("../DTableDropdownMenu"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableSubDropdownMenu = _ref => {
+  let {
+    className,
+    menuProps,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownMenu.default, {
+    className: (0, _classnames.default)('dtable-sub-dropdown-menu', className),
+    menuProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menuProps), {}, {
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [-8, -1]
+        }
+      }, ...((menuProps === null || menuProps === void 0 ? void 0 : menuProps.modifiers) || [])]
+    }),
+    children: children
+  });
+};
+var _default = exports.default = DTableSubDropdownMenu;

package/lib/DTableSubDropdownToggle/index.js

@@ -0,0 +1,54 @@
+"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");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lang = require("../lang");
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableSubDropdownToggle = _ref => {
+  let {
+    className,
+    id,
+    text,
+    icon,
+    disabled,
+    hideArrow = false,
+    title,
+    ariaLabel,
+    ariaExpanded = false,
+    toggleProps
+  } = _ref;
+  const renderedIcon = () => {
+    if (!icon || ! /*#__PURE__*/_react.default.isValidElement(icon)) return null;
+    return /*#__PURE__*/_react.default.cloneElement(icon, {
+      className: (0, _classnames.default)(icon.props.className, 'item-icon'),
+      'aria-hidden': 'true'
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownToggle, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    id: id,
+    className: (0, _classnames.default)('dtable-sub-dropdown-toggle dropdown-item', className),
+    role: "button",
+    tag: "div",
+    "data-toggle": "dropdown",
+    title: title || (0, _lang.getLocale)('More_operations'),
+    "aria-label": ariaLabel || (0, _lang.getLocale)('More_operations'),
+    "aria-expanded": ariaExpanded,
+    disabled: disabled
+  }, toggleProps), {}, {
+    children: [renderedIcon(), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "item-text",
+      children: text
+    }), !hideArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: "item-icon dtable-font dtable-icon-down3 rotate-270 mr-0",
+      "aria-hidden": "true"
+    })]
+  }));
+};
+var _default = exports.default = DTableSubDropdownToggle;

package/lib/FileEditor/files-previewer/pc-previewer/file-previewer/dropdown-menu.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
+var _DTableDropdownMenu = _interopRequireDefault(require("../../../../DTableDropdownMenu"));
+var _DTableDropdownItem = _interopRequireDefault(require("../../../../DTableDropdownItem"));
 var _lang = require("../../../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 class FileDropdownMenu extends _react.default.Component {
@@ -60,18 +62,19 @@ class FileDropdownMenu extends _react.default.Component {
           "aria-hidden": "true",
           className: "dtable-font dtable-icon-more-vertical file-dropdown-more"
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownMenu, {
-        className: "dtable-dropdown-menu dropdown-menu",
-        children: [onRenameFile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableDropdownMenu.default, {
+        children: [onRenameFile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
           onClick: this.onRenameFile,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "item-icon dtable-font dtable-icon-rename"
-          }), (0, _lang.getLocale)('Rename')]
-        }), onDeleteFile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-rename"
+          }),
+          content: (0, _lang.getLocale)('Rename')
+        }), onDeleteFile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
           onClick: this.onDeleteFile,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "item-icon dtable-font dtable-icon-delete"
-          }), (0, _lang.getLocale)('Delete')]
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-delete"
+          }),
+          content: (0, _lang.getLocale)('Delete')
         })]
       })]
     });

package/lib/RoleStatusEditor/index.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableDropdownMenu = _interopRequireDefault(require("../DTableDropdownMenu"));
+var _DTableDropdownItem = _interopRequireDefault(require("../DTableDropdownItem"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const RoleStatusEditor = _ref => {
@@ -43,7 +45,7 @@ const RoleStatusEditor = _ref => {
           })
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownMenu, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownMenu.default, {
       className: "position-fixed",
       modifiers: [{
         name: 'preventOverflow',
@@ -53,14 +55,12 @@ const RoleStatusEditor = _ref => {
       }],
       children: menuOptions.map(option => {
         const {
-          value,
-          label
+          value
         } = option;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
           onClick: () => handleClickMenuOption(option),
-          children: [label, value === currentOption.value && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check-mark ml-2"
-          })]
+          showChecked: true,
+          checked: currentOption.value === value
         }, "item-".concat(value));
       })
     })]

package/lib/assets/icons/check-mark.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.1182 6L12.0029 26.2461L1.88477 15.0039L4.11523 12.9961L11.9961 21.7529L27.8818 4L30.1182 6Z"/>
+</svg>

package/lib/index.js

@@ -130,6 +130,18 @@ Object.defineProperty(exports, "DTableCustomizeSelect", {
     return _DTableCustomizeSelect.default;
   }
 });
+Object.defineProperty(exports, "DTableDropdownItem", {
+  enumerable: true,
+  get: function () {
+    return _DTableDropdownItem.default;
+  }
+});
+Object.defineProperty(exports, "DTableDropdownMenu", {
+  enumerable: true,
+  get: function () {
+    return _DTableDropdownMenu.default;
+  }
+});
 Object.defineProperty(exports, "DTableEmptyTip", {
   enumerable: true,
   get: function () {
@@ -196,6 +208,18 @@ Object.defineProperty(exports, "DTableSelectLabel", {
     return _dtableSelectLabel.default;
   }
 });
+Object.defineProperty(exports, "DTableSubDropdownMenu", {
+  enumerable: true,
+  get: function () {
+    return _DTableSubDropdownMenu.default;
+  }
+});
+Object.defineProperty(exports, "DTableSubDropdownToggle", {
+  enumerable: true,
+  get: function () {
+    return _DTableSubDropdownToggle.default;
+  }
+});
 Object.defineProperty(exports, "DTableSwitch", {
   enumerable: true,
   get: function () {
@@ -698,6 +722,10 @@ var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
 var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));
 var _DTableModalHeader = _interopRequireDefault(require("./DTableModalHeader"));
 var _DTableCustomFooter = _interopRequireDefault(require("./DTableCustomFooter"));
+var _DTableDropdownMenu = _interopRequireDefault(require("./DTableDropdownMenu"));
+var _DTableSubDropdownToggle = _interopRequireDefault(require("./DTableSubDropdownToggle"));
+var _DTableSubDropdownMenu = _interopRequireDefault(require("./DTableSubDropdownMenu"));
+var _DTableDropdownItem = _interopRequireDefault(require("./DTableDropdownItem"));
 var _DepartmentSelectFilter = _interopRequireDefault(require("./DepartmentSelectFilter"));
 var _FieldDisplaySetting = _interopRequireDefault(require("./FieldDisplaySetting"));
 var _DTableFiltersPopover = _interopRequireDefault(require("./DTableFiltersPopover"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.116",
+  "version": "6.0.117-beta.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.8",
@@ -136,7 +136,7 @@
     "terser-webpack-plugin": "^5.2.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.105.4",
-    "webpack-dev-server": "^5.2.3",
+    "webpack-dev-server": "^5.2.4",
     "worker-loader": "3.0.8"
   }
 }