dtable-ui-component 5.3.11 → 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

@@ -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/RowExpandDepartmentEditor/index.js

@@ -36,7 +36,7 @@ function RowExpandDepartmentEditor(props) {
       document.removeEventListener('keydown', onKeyDown);
     };
     // eslint-disable-next-line
-  }, [isEditorFocus]);
+  }, [isEditorFocus, showEditor]);
   (0, _react.useEffect)(() => {
     setValue(row[column[valueKey]] || '');
     setShowEditor(false);
@@ -49,7 +49,7 @@ function RowExpandDepartmentEditor(props) {
   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/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 = () => {

package/package.json

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