dtable-ui-component 5.3.10-beta3 → 5.3.10-beta5

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/index.js

@@ -145,7 +145,8 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
     this.renderOptions = () => {
       const {
         isEditorFocus,
-        classNamePrefix
+        classNamePrefix,
+        placeholder
       } = this.props;
       const options = this.getMultipleSelectList();
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -161,11 +162,15 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
         className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
           ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
         })
-      }, /*#__PURE__*/_react.default.createElement("div", null, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('', {
+          ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
+        })
+      }, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
           ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
         })
-      }, options)), /*#__PURE__*/_react.default.createElement("i", {
+      }, options), options.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
         "aria-hidden": "true",
         className: "dtable-font dtable-icon-down3"
       })));

package/lib/RowExpandEditor/RowExpandSingleSelectorEditor/index.js

@@ -11,6 +11,7 @@ var _constants = require("../../constants");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SingleSelectEditor = _interopRequireDefault(require("../../SingleSelectEditor"));
 var _lang = require("../../lang");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
 require("./index.css");
 class RowExpandSingleSelectEditor extends _react.default.Component {
   constructor(_props) {
@@ -63,7 +64,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     };
     this.hideDropDownMenu = event => {
       if (!event.target) return;
-      if (!this.singleSelectContainer.contains(event.target) && this.state.showSelectPopover) {
+      if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
         const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
         if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
         this.toggleSingleSelect(false);
@@ -90,7 +91,9 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     };
     this.renderOption = () => {
       const {
-        isEditorFocus
+        isEditorFocus,
+        classNamePrefix,
+        placeholder
       } = this.props;
       const {
         value
@@ -109,15 +112,22 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
         onClick: this.onToggleSelect,
         ref: ref => this.selectRef = ref,
         className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
-          'focus': isEditorFocus
+          'focus': isEditorFocus,
+          ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
         })
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-editor-inner"
-      }, /*#__PURE__*/_react.default.createElement("div", null, value && /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
+          ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
+        })
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('', {
+          ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
+        })
+      }, value && /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui-select-option",
         style: optionStyle,
         title: optionName
-      }, optionName)), /*#__PURE__*/_react.default.createElement("i", {
+      }, optionName), !value && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
         "aria-hidden": "true",
         className: "dtable-font dtable-icon-down3"
       })));
@@ -137,9 +147,10 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     const {
-      value
+      value,
+      column
     } = nextProps;
-    if (value !== this.props.value) {
+    if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
       this.options = this.getOptions(nextProps);
       this.setState({
         value,
@@ -165,7 +176,8 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     const {
       isSupportNewOption,
       onAddNewOption,
-      column
+      column,
+      classNamePrefix
     } = this.props;
     const {
       showSelectPopover,
@@ -173,7 +185,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "position-relative w-100",
-      ref: ref => this.singleSelectContainer = ref
+      ref: ref => this.ref = ref
     }, this.renderOption(), /*#__PURE__*/_react.default.createElement("span", {
       ref: ref => this.targetRef = ref
     }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
@@ -183,6 +195,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
       value: value,
       valueKey: this.key,
       target: this.targetRef,
+      classNamePrefix: classNamePrefix,
       onCommit: this.onChange,
       isSupportNewOption: isSupportNewOption,
       onAddNewOption: onAddNewOption,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.3.10beta3",
+  "version": "5.3.10beta5",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",