dtable-ui-component 5.3.10 → 5.3.12-alpha0

package/lib/CollaboratorItem/index.css

@@ -7,7 +7,6 @@
   font-size: 13px;
   border-radius: 10px;
   background: #eaeaea;
-  overflow: hidden;
 }
 
 .dtable-ui.collaborator-item .collaborator-avatar,

package/lib/DTableGroupSelect/select-option-group.js

@@ -11,12 +11,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
 var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
-var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 require("./select-option-group.css");
 const OPTION_HEIGHT = 32;
 class SelectOptionGroup extends _react.Component {
   constructor(props) {
     super(props);
+    this.handleDocumentClick = e => {
+      this.props.onClickOutside(e);
+    };
     this.resetMenuStyle = () => {
       const {
         isInModal,
@@ -163,6 +165,7 @@ class SelectOptionGroup extends _react.Component {
   }
   componentDidMount() {
     window.addEventListener('keydown', this.onHotKey);
+    document.addEventListener('mousedown', this.handleDocumentClick);
     setTimeout(() => {
       this.resetMenuStyle();
     }, 1);
@@ -171,6 +174,7 @@ class SelectOptionGroup extends _react.Component {
     this.filterOptions = null;
     this.timer && clearTimeout(this.timer);
     window.removeEventListener('keydown', this.onHotKey);
+    document.removeEventListener('mousedown', this.handleDocumentClick);
   }
   render() {
     const {
@@ -205,9 +209,7 @@ class SelectOptionGroup extends _react.Component {
         opacity: 0
       };
     }
-    return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
-      onClickOutside: this.props.onClickOutside
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('option-group group-selector', className ? 'option-group-' + className : ''),
       ref: ref => this.optionGroupRef = ref,
       style: style,
@@ -222,7 +224,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)));
   }
 }
 var _default = exports.default = SelectOptionGroup;

package/lib/ImageFormatter/images-lazy-load.js

@@ -9,138 +9,113 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Loading = _interopRequireDefault(require("../Loading"));
 var _url = require("../utils/url");
-class ImagesLazyLoad extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.componentDidMount = () => {
-      this.lazyLoadImages(this.props);
-    };
-    this.UNSAFE_componentWillReceiveProps = nextProps => {
-      if (nextProps.images.toString() !== this.props.images.toString()) {
-        this.lazyLoadImages(nextProps);
-      }
+const ImagesLazyLoad = _ref => {
+  let {
+    images,
+    server,
+    onImageClick,
+    renderItem,
+    dtableUuid
+  } = _ref;
+  const [currentImages, setCurrentImages] = (0, _react.useState)(images);
+  const [loadedImages, setLoadedImages] = (0, _react.useState)([]);
+  const [loadedCount, setLoadedCount] = (0, _react.useState)(0);
+  const lazyLoadImage = (url, resolve, reject) => {
+    if (!url) {
+      reject('img path is required');
+      return;
+    }
+    const image = new Image();
+    image.onload = () => {
+      resolve(image);
     };
-    this.componentWillUnmount = () => {
-      // prevent async operation
-      this.setState = (state, callback) => {
-        return;
-      };
+    image.onerror = e => {
+      reject(e);
     };
-    this.lazyLoadImages = props => {
-      const {
-        images
-      } = props;
-      if (!Array.isArray(images) || images.length === 0) {
-        return;
-      }
-      this.setState({
-        images,
-        loadedImages: [],
-        loadedCount: 0
-      }, () => {
-        let {
-          server,
-          dtableUuid
-        } = this.props;
-        images.forEach((item, index) => {
-          let url = (0, _url.getImageThumbnailUrl)(item, {
-            server,
-            dtableUuid
-          });
-          this.lazyLoadImage(url, image => {
-            let {
-              loadedCount,
-              loadedImages
-            } = this.state;
-            let newImageList = loadedImages.slice(0);
-            newImageList[index] = image;
-            this.setState({
-              loadedCount: loadedCount + 1,
-              loadedImages: newImageList
-            });
-          }, () => {
-            let {
-              loadedCount
-            } = this.state;
-            this.setState({
-              loadedCount: loadedCount + 1
-            });
-          });
+    image.src = url;
+  };
+  const lazyLoadImages = () => {
+    if (!Array.isArray(currentImages) || currentImages.length === 0) {
+      return;
+    }
+
+    // Reset state for new images
+    setLoadedImages([]);
+    setLoadedCount(0);
+    currentImages.forEach((item, index) => {
+      const url = (0, _url.getImageThumbnailUrl)(item, {
+        server,
+        dtableUuid
+      });
+      lazyLoadImage(url, image => {
+        setLoadedImages(prev => {
+          const newList = [...prev];
+          newList[index] = image;
+          return newList;
         });
+        setLoadedCount(count => count + 1);
+      }, () => {
+        setLoadedCount(count => count + 1);
       });
+    });
+  };
+  (0, _react.useEffect)(() => {
+    lazyLoadImages();
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (images.toString() !== currentImages.toString()) {
+      setCurrentImages(images);
+    }
+  }, [images]);
+  (0, _react.useEffect)(() => {
+    if (currentImages !== images) {
+      lazyLoadImages();
+    }
+  }, [currentImages]);
+  const handleMouseDown = event => {
+    event.stopPropagation();
+  };
+  const handleImageClick = (event, index) => {
+    event.stopPropagation();
+    if (onImageClick) {
+      onImageClick(index);
+    }
+  };
+  if (!Array.isArray(currentImages) || currentImages.length === 0) {
+    return null;
+  }
+  if (currentImages.length > loadedCount) {
+    const style = {
+      marginLeft: '4px'
     };
-    this.lazyLoadImage = (url, resolve, reject) => {
-      if (!url) {
-        reject('img path is require');
-        return;
-      }
-      const image = new Image();
-      image.onload = () => {
-        resolve(image);
-      };
-      image.onerror = e => {
-        reject(e);
-      };
-      image.src = url;
-    };
-    this.onMouseDown = event => {
-      event.stopPropagation();
-    };
-    this.onImageClick = (event, index) => {
-      event.stopPropagation();
-      this.props.onImageClick(index);
-    };
-    this.state = {
-      images: _props.images,
-      loadedImages: [],
-      loadedCount: 0
-    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: "d-flex align-items-center"
+    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
   }
-  render() {
-    const {
-      images,
-      loadedImages,
-      loadedCount
-    } = this.state;
-    const {
-      renderItem
-    } = this.props;
-    if (!Array.isArray(images) || images.length === 0) {
-      return '';
-    }
-    if (images.length > loadedCount) {
-      let style = {
-        marginLeft: '4px'
-      };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: style,
-        className: "d-flex align-items-center"
-      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
+  return loadedImages.map((image, index) => {
+    let imageName = '';
+    const imageSrc = image === null || image === void 0 ? void 0 : image.src;
+    try {
+      imageName = imageSrc ? decodeURI(imageSrc.slice(imageSrc.lastIndexOf('/') + 1)) : '';
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
     }
-    return loadedImages.map((image, index) => {
-      let imageName = '';
-      const imageSrc = image === null || image === void 0 ? void 0 : image.src;
-      try {
-        imageName = imageSrc ? decodeURI(imageSrc.slice(imageSrc.lastIndexOf('/') + 1)) : '';
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error);
-      }
-      const imgDom = /*#__PURE__*/_react.default.createElement("img", {
-        title: imageName,
-        className: "image-item",
-        src: image.src,
-        onMouseDown: this.onMouseDown,
-        onClick: event => this.onImageClick(event, index),
-        alt: ""
-      });
-      if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: index
-      }, renderItem(imgDom));
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: index
-      }, imgDom);
+    const imgDom = /*#__PURE__*/_react.default.createElement("img", {
+      title: imageName,
+      className: "image-item",
+      src: image === null || image === void 0 ? void 0 : image.src,
+      onMouseDown: handleMouseDown,
+      onClick: event => handleImageClick(event, index),
+      alt: ""
     });
-  }
-}
+    if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: index
+    }, renderItem(imgDom));
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: index
+    }, imgDom);
+  });
+};
 var _default = exports.default = ImagesLazyLoad;

package/lib/RowExpandDialog/body/index.js

@@ -62,7 +62,8 @@ class Body extends _react.default.Component {
     this.onHotKey = event => {
       const {
         columns,
-        onKeyDown
+        onKeyDown,
+        onToggle
       } = this.props;
       const readonly = Array.isArray(columns) && columns.length > 0 ? !columns.some(c => c.editable) : true;
       const keyCode = event.keyCode;
@@ -71,7 +72,7 @@ class Body extends _react.default.Component {
         return;
       }
       if (keyCode === _constants.KeyCodes.Esc) {
-        this.props.onRowExpandCancel();
+        onToggle && onToggle();
         return;
       }
       onKeyDown && onKeyDown(event);

package/lib/RowExpandDialog/index.js

@@ -73,7 +73,7 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (readonly || !column || !column.editable || _dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[column.type]) return false;
     if (column.type === _dtableUtils.CellType.IMAGE || column.type === _dtableUtils.CellType.FILE) return Boolean(uploadFile);
     return true;
-  }, [isSaving, uploadFile]);
+  }, [readonly, isSaving, uploadFile]);
   const initRowData = (0, _react.useCallback)(() => {
     setLoading(true);
     setRow(defaultRow);
@@ -88,7 +88,7 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isChangedRef.current = isInsertingRow && Object.keys(defaultRow).length > 0;
     setColumns(validColumns);
     setLoading(false);
-  }, [isInsertingRow, checkEditable]);
+  }, [isInsertingRow, defaultColumns, defaultRow, checkEditable]);
   const toggle = (0, _react.useCallback)(() => {
     if (isSaving) return;
     onToggle();
@@ -224,7 +224,8 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     columns: columns,
     valueKey: valueKey,
     onChange: onChange,
-    uploadFile: uploadFile
+    uploadFile: uploadFile,
+    onToggle: onToggle
   }), children[1]), (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
     onClick: toggle,
     color: "secondary"

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.js

@@ -48,7 +48,7 @@ class RowExpandCollaboratorEditor extends _react.default.Component {
       }
     };
     this.hideSelect = event => {
-      if (!this.state.showCollaboratorSelect || !event.target || event.target.tagName.toUpperCase() === 'INPUT') {
+      if (!this.state.showCollaboratorSelect || !event.target) {
         return;
       }
       const editor = document.querySelector('.dtable-ui-collaborator-editor-container');

package/lib/RowExpandEditor/RowExpandDepartmentEditor/index.js

@@ -11,9 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("../../hooks");
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
 var _constants = require("../../constants");
-var _lang = require("../../lang");
 var _departmentSingleSelect = _interopRequireDefault(require("../../Department-editor/department-single-select"));
-var _constants2 = require("../../Department-editor/constants");
 function RowExpandDepartmentEditor(props) {
   const {
     row,
@@ -38,20 +36,20 @@ function RowExpandDepartmentEditor(props) {
       document.removeEventListener('keydown', onKeyDown);
     };
     // eslint-disable-next-line
-  }, [isEditorFocus]);
+  }, [isEditorFocus, showEditor]);
   (0, _react.useEffect)(() => {
     setValue(row[column[valueKey]] || '');
     setShowEditor(false);
     // eslint-disable-next-line
   }, [row]);
   function hideDropDownMenu(event) {
-    if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
+    if (!event.target) return;
     toggleDepartmentSelect(false);
   }
   function onKeyDown(e) {
     if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
       setShowEditor(true);
-    } else if (e.keyCode === _constants.KeyCodes.Escape) {
+    } else if (e.keyCode === _constants.KeyCodes.Escape && showEditor) {
       e.stopPropagation();
       setShowEditor(false);
       departmentSelectContent.current.focus();

package/lib/RowExpandEditor/RowExpandEmailEditor/index.js

@@ -45,19 +45,19 @@ class RowExpandEmailEditor extends _react.default.Component {
     this.onPaste = e => {
       e.stopPropagation();
     };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Esc) {
-        e.stopPropagation();
+    this.onKeyDown = event => {
+      if (event.keyCode === _constants.KeyCodes.Esc) {
+        event.stopPropagation();
         this.blurInput();
         return;
       }
-      let {
+      const {
         selectionStart,
         selectionEnd,
         value
-      } = e.currentTarget;
-      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
-        e.stopPropagation();
+      } = event.currentTarget;
+      if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        event.stopPropagation();
       }
     };
     this.onOpenEmailLink = () => {

package/lib/RowExpandEditor/RowExpandGeolocationEditor/index.js

@@ -23,7 +23,7 @@ class RowExpandGeolocationEditor extends _react.default.Component {
       }
     };
     this.hideEditor = event => {
-      if (!this.state.isShowEditor || !event.target || event.target.tagName.toUpperCase() === 'INPUT' || this.editorContainer.contains(event.target)) return;
+      if (!this.state.isShowEditor || !event.target || this.editorContainer.contains(event.target)) return;
       if (this.state.isShowEditor && this.geoEditor.getLargeEditorState()) return;
       this.setState({
         isShowEditor: false

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/index.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _MultipleSelectEditor = _interopRequireDefault(require("../../MultipleSelectEditor"));
 var _lang = require("../../lang");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
 require("./index.css");
 class RowExpandMultipleSelectEditor extends _react.default.Component {
   constructor(_props) {
@@ -39,7 +40,7 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
       });
     };
     this.hideDropDownMenu = event => {
-      if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
+      if (!event.target) return;
       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;
@@ -49,14 +50,22 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
     this.onToggleSelect = e => {
       e.preventDefault();
       e.stopPropagation();
-      this.props.updateTabIndex(this.props.columnIndex);
+      const {
+        updateTabIndex,
+        columnIndex
+      } = this.props;
+      updateTabIndex && updateTabIndex(columnIndex);
       this.toggleSingleSelect(true);
     };
     this.closeEditor = () => {
       this.toggleSingleSelect(false);
     };
     this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
+      const {
+        updateTabIndex,
+        columnIndex
+      } = this.props;
+      updateTabIndex && updateTabIndex(columnIndex);
     };
     this.onChange = option => {
       const optionKey = option[this.key];
@@ -135,7 +144,9 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
     };
     this.renderOptions = () => {
       const {
-        isEditorFocus
+        isEditorFocus,
+        classNamePrefix,
+        placeholder
       } = this.props;
       const options = this.getMultipleSelectList();
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -144,13 +155,22 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
         onClick: this.onToggleSelect,
         ref: ref => this.multipleSelectOptionsRef = 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, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-options"
-      }, options)), /*#__PURE__*/_react.default.createElement("i", {
+        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
+        })
+      }, 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), 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"
       })));
@@ -169,9 +189,10 @@ class RowExpandMultipleSelectEditor 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
@@ -196,7 +217,8 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
     const {
       column,
       isSupportNewOption,
-      onAddNewOption
+      onAddNewOption,
+      classNamePrefix
     } = this.props;
     const {
       showSelectPopover,
@@ -214,6 +236,7 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
       value: value,
       valueKey: this.key,
       target: this.targetRef,
+      classNamePrefix: classNamePrefix,
       onCommit: this.onChange,
       isSupportNewOption: isSupportNewOption,
       onAddNewOption: onAddNewOption,

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) {
@@ -62,8 +63,8 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
       this.toggleSingleSelect(false);
     };
     this.hideDropDownMenu = event => {
-      if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
-      if (!this.singleSelectContainer.contains(event.target) && this.state.showSelectPopover) {
+      if (!event.target) return;
+      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/lib/RowExpandEditor/RowExpandTextEditor/index.js

@@ -58,8 +58,17 @@ class RowExpandSimpleText extends _react.default.Component {
     };
     this.onKeyDown = event => {
       if (event.keyCode === _constants.KeyCodes.Esc) {
-        event.preventDefault();
+        event.stopPropagation();
         this.blurInput();
+        return;
+      }
+      const {
+        selectionStart,
+        selectionEnd,
+        value
+      } = event.currentTarget;
+      if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        event.stopPropagation();
       }
     };
     this.isChecked = () => {

package/lib/RowExpandEditor/RowExpandUrlEditor/index.js

@@ -47,19 +47,19 @@ class RowExpandUrlEditor extends _react.default.Component {
     this.onPaste = e => {
       e.stopPropagation();
     };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Esc) {
-        e.stopPropagation();
+    this.onKeyDown = event => {
+      if (event.keyCode === _constants.KeyCodes.Esc) {
+        event.preventDefault();
         this.blurInput();
         return;
       }
-      let {
+      const {
         selectionStart,
         selectionEnd,
         value
-      } = e.currentTarget;
-      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
-        e.stopPropagation();
+      } = event.currentTarget;
+      if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+        event.stopPropagation();
       }
     };
     this.onOpenUrlLink = () => {
@@ -77,7 +77,7 @@ class RowExpandUrlEditor extends _react.default.Component {
       }
     };
     this.state = {
-      value: props.value
+      value: props.value || ''
     };
     this.inputRef = /*#__PURE__*/_react.default.createRef();
   }

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

@@ -206,7 +206,8 @@ class PCSelectEditor extends _react.default.Component {
       column,
       valueKey,
       isSupportNewOption,
-      target
+      target,
+      classNamePrefix
     } = this.props;
     const {
       searchValue,
@@ -218,7 +219,9 @@ class PCSelectEditor extends _react.default.Component {
     // maxWidth = column.width > 200 ? column.width - 62 : 200 - 62
     let maxWidth = isInModal ? 250 : (column === null || column === void 0 ? void 0 : column.width) > 200 ? column.width - 62 : 138;
     const dom = /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-editor-container dtable-ui-select-editor-container', className),
+      className: (0, _classnames.default)('dtable-ui-editor-container dtable-ui-select-editor-container', className, {
+        ["".concat(classNamePrefix, "-select-editor-container")]: classNamePrefix
+      }),
       ref: ref => this.ref = ref
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "select-options-search"
@@ -276,7 +279,9 @@ class PCSelectEditor extends _react.default.Component {
         target: target,
         hideArrow: true,
         fade: false,
-        className: "dtable-ui dtable-ui-row-expand-select-editor-popover"
+        className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor-popover', {
+          ["".concat(classNamePrefix, "-select-editor-popover")]: classNamePrefix
+        })
       }, dom));
     }
     return dom;

package/package.json

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