dtable-ui-component 4.3.2 → 4.3.3-alpha2

package/lib/DTableSelect/dtable-select-label.css

@@ -0,0 +1,10 @@
+.dtable-select-check-icon {
+  width: 20px;
+  height: 20px;
+  text-align: center;
+}
+
+.dtable-select-check-icon .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}

package/lib/DTableSelect/dtable-select-label.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './dtable-select-label.css';
+function DTableSelectLabel(_ref) {
+  var classname = _ref.classname,
+    name = _ref.name,
+    isSelect = _ref.isSelect;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classname, " w-100 d-flex justify-content-between")
+  }, /*#__PURE__*/React.createElement("span", null, name), isSelect && /*#__PURE__*/React.createElement("div", {
+    className: "dtable-select-check-icon"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-check-mark"
+  })));
+}
+DTableSelectLabel.defaultProps = {
+  classname: '',
+  name: '',
+  isSelect: false
+};
+export default DTableSelectLabel;

package/lib/RoleStatusPermissionEditor/index.css

@@ -0,0 +1,57 @@
+.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.hide{
+  display: none;
+}
+
+.role-status-permission-editor .dropdown-toggle-button .dtable-icon-drop-down:hover {
+  color: #555;
+}
+
+.role-status-permission-editor .dropdown-toggle-button .dropdown-icon-container {
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+  width: 20px;
+  height: 20px;
+}
+
+.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 .label-container span {
+  word-wrap: normal;
+  white-space: pre-wrap;
+}
+
+.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-menu .dropdown-item .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}

package/lib/RoleStatusPermissionEditor/index.js

@@ -0,0 +1,59 @@
+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 RoleStatusPermissionEditor = function RoleStatusPermissionEditor(_ref) {
+  var isShowDropdownIcon = _ref.isShowDropdownIcon,
+    currentOption = _ref.currentOption,
+    menuOptions = _ref.menuOptions,
+    onChangeOption = _ref.onChangeOption;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleClickMenuOption = function handleClickMenuOption(menuOption) {
+    var value = menuOption.value;
+    if (value === currentOption.value) return;
+    onChangeOption(value);
+  };
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    isOpen: isOpen,
+    className: "role-status-permission-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-2"
+  }, /*#__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 _option$menuOptionCla = option.menuOptionClassName,
+      menuOptionClassName = _option$menuOptionCla === void 0 ? '' : _option$menuOptionCla,
+      value = option.value,
+      label = option.label;
+    return /*#__PURE__*/React.createElement("div", {
+      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 ml-2"
+    })));
+  })));
+};
+export default RoleStatusPermissionEditor;

package/lib/index.js

@@ -61,11 +61,13 @@ export { default as LinkEditor } from './LinkEditor';
 export { default as DTablePopover } from './DTablePopover';
 export { default as NotificationPopover } from './NotificationPopover';
 export { default as DTableSelect } from './DTableSelect';
+export { default as DTableSelectLabel } from './DTableSelect/dtable-select-label';
 export { default as DTableSwitch } from './DTableSwitch';
 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';
 
 // setting
 export { default as FieldDisplaySetting } from './FieldDisplaySetting';

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.3.2",
+  "version": "4.3.3-alpha2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",
     "@seafile/seafile-calendar": "0.0.24",
-    "@seafile/seafile-editor": "0.3.139",
+    "@seafile/seafile-editor": "0.3.140",
     "antd-mobile": "2.3.1",
     "bail": "1.0.5",
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",
     "deepmerge": "^2.1.0",
-    "dtable-utils": "4.3.1",
+    "dtable-utils": "4.3.5",
     "glamor": "^2.20.40",
     "hast-util-sanitize": "^1.1.2",
     "hast-util-to-html": "3.1.0",