dtable-ui-component 4.3.3-alpha1 → 4.3.3-alpha3

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/{RoleStatusPermissionEditor → RoleStatusEditor}/index.js

@@ -3,31 +3,38 @@ import React, { useState } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import classnames from 'classnames';
 import './index.css';
-var RoleStatusPermissionEditor = function RoleStatusPermissionEditor(_ref) {
-  var currentOption = _ref.currentOption,
+var RoleStatusEditor = function RoleStatusEditor(_ref) {
+  var isShowDropdownIcon = _ref.isShowDropdownIcon,
+    currentOption = _ref.currentOption,
     menuOptions = _ref.menuOptions,
-    onChangeOption = _ref.onChangeOption;
+    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-permission-editor",
+    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("span", {
-    className: "dtable-font dtable-icon-drop-down ml-2"
-  })), /*#__PURE__*/React.createElement(DropdownMenu, {
+  }, 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: {
@@ -35,20 +42,16 @@ var RoleStatusPermissionEditor = function RoleStatusPermissionEditor(_ref) {
       }
     }
   }, menuOptions.map(function (option) {
-    var _option$menuOptionCla = option.menuOptionClassName,
-      menuOptionClassName = _option$menuOptionCla === void 0 ? '' : _option$menuOptionCla,
-      value = option.value,
+    var value = option.value,
       label = option.label;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
       key: "item-".concat(value),
-      className: classnames('editor-item', menuOptionClassName)
-    }, /*#__PURE__*/React.createElement(DropdownItem, {
       onClick: function onClick() {
         return handleClickMenuOption(option);
       }
     }, label, value === currentOption.value && /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-check-mark"
-    })));
+      className: "dtable-font dtable-icon-check-mark ml-2"
+    }));
   })));
 };
-export default RoleStatusPermissionEditor;
+export default RoleStatusEditor;

package/lib/index.js

@@ -67,7 +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 RoleStatusPermissionEditor } from './RoleStatusPermissionEditor';
+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.3-alpha1",
+  "version": "4.3.3-alpha3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",

package/lib/RoleStatusPermissionEditor/index.css

@@ -1,48 +0,0 @@
-.role-status-permission-editor .dropdown-toggle-button .dtable-icon-drop-down {
-  font-size: 12px;
-  color: #b5b5b5;
-  transform: scale(0.8);
-  cursor: pointer;
-}
-
-.role-status-permission-editor .dropdown-toggle-button .dtable-icon-drop-down:hover {
-  color: #555;
-}
-
-.role-status-permission-editor .dropdown-menu {
-  max-width: 200px;
-}
-
-.role-status-permission-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-permission-editor .dropdown-menu .dropdown-item:hover {
-  color: #212529;
-  background: #f5f5f5;
-  cursor: pointer;
-}
-
-.role-status-permission-editor .dropdown-menu .dropdown-item:focus {
-  outline: 0;
-  color: unset;
-  background-color: unset;
-}
-
-.role-status-permission-editor .dropdown-toggle-button div,
-.role-status-permission-editor .dropdown-menu .dropdown-item div {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  word-break: break-all;
-  user-select: none;
-}
-
-.role-status-permission-editor .dropdown-menu .dropdown-item .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
-}