dtable-ui-component 4.3.4 → 4.3.6

package/lib/{assets/css/DTableCustomSelect.css → DTableCustomizeSelect/index.css}

@@ -115,15 +115,6 @@
   white-space: nowrap;
 }
 
-.dtable-select.selector-collaborator .option-group .option-group-content {
-  padding: 10px;
-}
-
-.dtable-select.selector-collaborator .option {
-  padding: 5px 0 5px 10px !important;
-  line-height: 20px;
-}
-
 .dtable-select .option.option-active {
   background-color: #20a0ff;
   color: #fff;

package/lib/DTableCustomizeSelect/index.js

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import SelectOptionGroup from '../SelectOptionGroup';
 import classnames from 'classnames';
-import '../assets/css/DTableCustomSelect.css';
+import './index.css';
 var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
   _inherits(DTableCustomizeSelect, _Component);
   var _super = _createSuper(DTableCustomizeSelect);

package/lib/RoleStatusEditor/index.css

@@ -0,0 +1,57 @@
+.role-status-editor .dropdown-toggle-button .dtable-icon-drop-down {
+  font-size: 12px;
+  color: #b5b5b5;
+  transform: scale(0.8);
+  cursor: pointer;
+}
+
+.role-status-editor .dropdown-toggle-button .dtable-icon-drop-down.hide {
+  display: none;
+}
+
+.role-status-editor .dropdown-toggle-button .dtable-icon-drop-down:hover {
+  color: #555;
+}
+
+.role-status-editor .dropdown-toggle-button .dropdown-icon-container {
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+  width: 20px;
+  height: 20px;
+}
+
+.role-status-editor .dropdown-menu {
+  max-width: 200px;
+}
+
+.role-status-editor .dropdown-menu .dropdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 12px;
+  min-width: 140px;
+  min-height: 28px;
+}
+
+.role-status-editor .dropdown-menu .dropdown-item .label-container span {
+  word-wrap: normal;
+  white-space: pre-wrap;
+}
+
+.role-status-editor .dropdown-menu .dropdown-item:hover {
+  color: #212529;
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.role-status-editor .dropdown-menu .dropdown-item:focus {
+  outline: 0;
+  color: unset;
+  background-color: unset;
+}
+
+.role-status-editor .dropdown-menu .dropdown-item .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}

package/lib/RoleStatusEditor/index.js

@@ -0,0 +1,57 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import classnames from 'classnames';
+import './index.css';
+var RoleStatusEditor = function RoleStatusEditor(_ref) {
+  var isShowDropdownIcon = _ref.isShowDropdownIcon,
+    currentOption = _ref.currentOption,
+    menuOptions = _ref.menuOptions,
+    onChangeOption = _ref.onChangeOption,
+    closeShowDropdownIcon = _ref.closeShowDropdownIcon;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleClickMenuOption = function handleClickMenuOption(menuOption) {
+    var value = menuOption.value;
+    closeShowDropdownIcon && closeShowDropdownIcon();
+    if (value === currentOption.value) return;
+    onChangeOption(value);
+  };
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    isOpen: isOpen,
+    className: "role-status-editor",
+    toggle: function toggle() {
+      return setIsOpen(!isOpen);
+    }
+  }, /*#__PURE__*/React.createElement(DropdownToggle, {
+    className: "dropdown-toggle-button d-flex align-items-center",
+    tag: "div"
+  }, currentOption.label, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-icon-container ml-1"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classnames('dtable-font dtable-icon-drop-down', {
+      'hide': !isShowDropdownIcon
+    })
+  }))), /*#__PURE__*/React.createElement(DropdownMenu, {
+    positionFixed: true,
+    modifiers: {
+      preventOverflow: {
+        boundariesElement: document.body
+      }
+    }
+  }, menuOptions.map(function (option) {
+    var value = option.value,
+      label = option.label;
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: "item-".concat(value),
+      onClick: function onClick() {
+        return handleClickMenuOption(option);
+      }
+    }, label, value === currentOption.value && /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-check-mark ml-2"
+    }));
+  })));
+};
+export default RoleStatusEditor;

package/lib/index.js

@@ -67,6 +67,7 @@ export { default as DTableCustomizeSelect } from './DTableCustomizeSelect';
 export { default as DTableCustomizeCollaboratorSelect } from './DTableCustomizeCollaboratorSelect';
 export { default as DTableSearchInput } from './DTableSearchInput';
 export { default as ModalPortal } from './ModalPortal';
+export { default as RoleStatusEditor } from './RoleStatusEditor';
 
 // setting
 export { default as FieldDisplaySetting } from './FieldDisplaySetting';

package/package.json

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