dtable-ui-component 5.0.6 → 5.0.8

package/lib/CollaboratorEditor/index.css

@@ -17,8 +17,8 @@
   overflow: auto;
 }
 
-.dtable-ui-collaborator-editor-popover .collaborator-list-container .search-option-null {
-  opacity: 0.5;
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .no-search-result {
+  color: #666666;
   padding-left: 10px;
 }
 

package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js

@@ -90,7 +90,7 @@ class PCCollaboratorEditorPopover extends _react.default.Component {
         className: "dtable-font dtable-icon-check-mark"
       })));
     }), collaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-option-null"
+      className: "no-search-result"
     }, (0, _lang.getLocale)('No_collaborators_available'))));
   }
 }

package/lib/DTableCustomizeSelect/index.js

@@ -91,7 +91,9 @@ class DTableCustomizeSelect extends _react.Component {
       searchPlaceholder,
       noOptionsPlaceholder,
       isLocked,
-      isInModal
+      isInModal,
+      addOptionAble,
+      component
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: node => this.selector = node,
@@ -111,6 +113,8 @@ class DTableCustomizeSelect extends _react.Component {
       className: "dtable-font dtable-icon-drop-down"
     })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
       value: value,
+      addOptionAble: addOptionAble,
+      component: component,
       isShowSelected: this.props.isShowSelected,
       top: this.getSelectedOptionTop(),
       options: options,
@@ -125,6 +129,8 @@ class DTableCustomizeSelect extends _react.Component {
     }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
       className: className,
       value: value,
+      addOptionAble: addOptionAble,
+      component: component,
       isShowSelected: this.props.isShowSelected,
       position: this.selector.getBoundingClientRect(),
       isInModal: isInModal,

package/lib/DTableFiltersPopover/index.css

@@ -11,10 +11,9 @@
   border-top: 1px solid #e9ecef;
 }
 
-/*  */
 .dtable-filter-popover .popover-add-tool {
   border-top: none;
-  color: #555555;
+  color: #666666;
 }
 
 .dtable-filter-popover .popover-add-tool.disabled {

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -16,7 +16,7 @@
 .filters-list .empty-filters-list {
   padding: 0.25rem;
   font-size: 14px;
-  opacity: 0.5;
+  color: #666666;
 }
 
 .filters-list .filter-item {
@@ -78,7 +78,7 @@
 
 .filters-list .selected-conjunction-show {
   padding: 0 10px;
-  color: #999;
+  color: #666;
 }
 
 .filters-list .filter-column {
@@ -276,7 +276,7 @@
 
 .filters-list .popover-add-tool {
   border-top: none;
-  color: #555555;
+  color: #666666;
 }
 
 .filters-list .popover-add-tool .popover-add-icon {

package/lib/Department-editor/index.css

@@ -12,8 +12,8 @@
 
 .dtable-ui.department-editor-list .none-search-result {
   font-size: 14px;
-  opacity: 0.5;
   display: inline-block;
+  color: #666666;
 }
 
 .dtable-ui.department-editor-list .department-item-left-content {

package/lib/HtmlLongTextFormatter/index.css

@@ -21,7 +21,7 @@
   height: 20px;
   padding: 2px;
   margin: 4px;
-  color: #9c9c9c;
+  color: #666666;
   background-color: #f0f0f0;
   border-radius: 3px;
   line-height: 16px;

package/lib/NotificationPopover/index.css

@@ -60,7 +60,7 @@
 }
 
 .notification-container .notification-body .mark-notifications {
-  color: #b4b4b4;
+  color: #666;
   cursor: pointer;
   border-bottom: 1px solid #ededed;
   height: 36px;
@@ -134,7 +134,7 @@
 }
 
 .notification-item .notification-header-info .notification-time {
-  color: #b4b4b4;
+  color: #666;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

package/lib/SelectOptionGroup/index.css

@@ -27,7 +27,7 @@
   height: 100px;
   width: 100%;
   padding: 10px;
-  opacity: 0.5;
+  color: #666666;
 }
 
 .option-group .option-group-content {

package/lib/SelectOptionGroup/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _option = _interopRequireDefault(require("./option"));
 var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
@@ -176,8 +177,13 @@ class SelectOptionGroup extends _react.Component {
       isShowSelected,
       isInModal,
       position,
-      className
+      className,
+      addOptionAble,
+      component
     } = this.props;
+    const {
+      AddOption
+    } = component || {};
     let {
       searchVal
     } = this.state;
@@ -204,7 +210,10 @@ class SelectOptionGroup extends _react.Component {
     return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
       onClickOutside: this.props.onClickOutside
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(className ? 'option-group-' + className : ''),
+      className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : '', {
+        'pt-0': isShowSelected,
+        'create-new-option-group': addOptionAble
+      }),
       ref: ref => this.optionGroupRef = ref,
       style: style,
       onMouseDown: this.onMouseDown
@@ -221,7 +230,7 @@ class SelectOptionGroup extends _react.Component {
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "option-group-content",
       ref: ref => this.optionGroupContentRef = ref
-    }, this.renderOptGroup(searchVal))));
+    }, this.renderOptGroup(searchVal)), addOptionAble && AddOption));
   }
 }
 var _default = exports.default = SelectOptionGroup;

package/lib/SimpleLongTextFormatter/index.css

@@ -21,7 +21,7 @@
   height: 20px;
   padding: 2px;
   margin: 4px;
-  color: #9c9c9c;
+  color: #666666;
   background-color: #f0f0f0;
   border-radius: 3px;
   line-height: 16px;

package/lib/SimpleLongTextFormatter/widgets/longTextEditor.css

@@ -63,7 +63,7 @@
 
 .longtext-formatter-links-container, .longtext-formatter-check-list-container {
   background-color: #f0f0f0;
-  color: #9c9c9c;
+  color: #666666;
   padding: 0 3px;
   height: 20px;
   line-height: 20px;

package/lib/select-editor/pc-select-editor-popover/index.js

@@ -105,7 +105,7 @@ class PCSelectEditorPopover extends _react.default.Component {
         className: "dtable-font dtable-icon-check-mark"
       })));
     }), options.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-option-null"
+      className: "no-search-result"
     }, (0, _lang.getLocale)('No_options_available'))), isSupportNewOption && !!searchValue && /*#__PURE__*/_react.default.createElement("div", {
       className: "select-options-add",
       onClick: this.onAddNewOption

package/package.json

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