dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/utils/editor-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
+exports.isValidUrl = exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
 const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
 const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
 const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
@@ -63,6 +63,11 @@ const getSelectOptionItem = (options, optionId) => {
   return options.find(option => option.id === optionId);
 };
 exports.getSelectOptionItem = getSelectOptionItem;
+const isValidUrl = url => {
+  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
+  return reg.test(url);
+};
+exports.isValidUrl = isValidUrl;
 const getTrimmedString = value => {
   return typeof value === 'string' ? value.trim() : '';
 };

package/lib/utils/url.js

@@ -3,23 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
-var _file = require("../constants/file");
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.getImageThumbnailUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = void 0;
 const isTargetUrl = (target, url) => {
   if (!url || typeof url !== 'string') return false;
   return target && url ? url.indexOf(target) > -1 : false;
 };
 exports.isTargetUrl = isTargetUrl;
-const isBase64 = url => {
-  if (!url || typeof url !== 'string') return false;
-  const target = 'data:image/png;base64';
-  return url ? url.startsWith(target) : false;
-};
-exports.isBase64 = isBase64;
 const isInternalImg = (url, server) => {
-  var _window;
   if (!url || typeof url !== 'string') return false;
-  const currentServer = server || ((_window = window) === null || _window === void 0 ? void 0 : _window.dtable) && window.dtable.server;
+  const currentServer = server || window.dtable && window.dtable.server;
   return url.indexOf(currentServer) > -1;
 };
 exports.isInternalImg = isInternalImg;
@@ -27,33 +19,14 @@ const isCustomAssetUrl = url => {
   return isTargetUrl('custom-asset://', url);
 };
 exports.isCustomAssetUrl = isCustomAssetUrl;
-const checkImgExists = url => {
-  return new Promise(function (resolve, reject) {
-    let image = new Image();
-    image.src = url;
-    image.onload = function (res) {
-      resolve(res);
-    };
-    image.onerror = function (err) {
-      reject(err);
-    };
-  });
-};
-exports.checkImgExists = checkImgExists;
 const checkSVGImage = url => {
   if (!url || typeof url !== 'string') return false;
   const isSVGImage = url.substring(url.lastIndexOf('.')).toLowerCase() === '.svg';
   return isSVGImage;
 };
 exports.checkSVGImage = checkSVGImage;
-const isAIUrl = url => {
-  if (!url || typeof url !== 'string') return false;
-  return isTargetUrl('/ai/asset/', url) && url.includes('http');
-};
-exports.isAIUrl = isAIUrl;
 const isDigitalSignsUrl = url => {
   if (!url || typeof url !== 'string') return false;
-  if (isAIUrl(url)) return true;
   return isTargetUrl('/digital-signs/', url) && !url.includes('http');
 };
 exports.isDigitalSignsUrl = isDigitalSignsUrl;
@@ -67,7 +40,6 @@ const needUseThumbnailImage = url => {
 };
 exports.needUseThumbnailImage = needUseThumbnailImage;
 const generateCurrentBaseImageThumbnailUrl = _ref => {
-  var _window2;
   let {
     server,
     workspaceID,
@@ -75,15 +47,11 @@ const generateCurrentBaseImageThumbnailUrl = _ref => {
     partUrl,
     size
   } = _ref;
-  const validServer = server || ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.dtable) && window.dtable.server || '';
   if (!partUrl || typeof partUrl !== 'string') return '';
-  let url = "".concat(validServer, "/thumbnail/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
-  if (url.indexOf('?') > -1) return "".concat(url, "&size=").concat(size);
-  return "".concat(url, "?size=").concat(size);
+  return "".concat(server, "/thumbnail/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl, "?size=").concat(size);
 };
 exports.generateCurrentBaseImageThumbnailUrl = generateCurrentBaseImageThumbnailUrl;
 const generateCurrentBaseImageUrl = _ref2 => {
-  var _window3;
   let {
     server,
     workspaceID,
@@ -91,9 +59,7 @@ const generateCurrentBaseImageUrl = _ref2 => {
     partUrl
   } = _ref2;
   if (!partUrl || typeof partUrl !== 'string') return '';
-  if (partUrl.startsWith('http')) return partUrl;
-  const validServer = server || ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.dtable) && window.dtable.server || '';
-  return "".concat(validServer, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
+  return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
 };
 exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
 const getImageThumbnailUrl = function (url) {
@@ -104,7 +70,6 @@ const getImageThumbnailUrl = function (url) {
     size = 256
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   if (!url || typeof url !== 'string') return '';
-  if (isAIUrl(url) || checkSVGImage(url) || !isInternalImg(url) || isBase64(url)) return url;
   if (server && dtableUuid && isCustomAssetUrl(url)) {
     const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
     return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
@@ -118,87 +83,9 @@ const getImageThumbnailUrl = function (url) {
       partUrl: url
     });
   }
-  if (url.includes('/thumbnail/workspace')) return url;
-  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
-};
-exports.getImageThumbnailUrl = getImageThumbnailUrl;
-const getFileName = url => {
-  if (!url) return null;
-  let lastIndex = url.lastIndexOf('/');
-  return url.slice(lastIndex + 1);
-};
-exports.getFileName = getFileName;
-const imageCheck = filename => {
-  // no file ext
-  if (!filename || typeof filename !== 'string') return false;
-  if (filename.lastIndexOf('.') === -1) {
-    return false;
+  if (checkSVGImage(url) || !isInternalImg(url)) {
+    return url;
   }
-  const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
-  const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'webp'];
-  return image_exts.includes(file_ext);
-};
-exports.imageCheck = imageCheck;
-const isInternalURL = function (url) {
-  let {
-    server = ''
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (!url || typeof url !== 'string') return false;
-  return server && url.indexOf(server) > -1;
-};
-exports.isInternalURL = isInternalURL;
-const getValidFileImageUrls = files => {
-  if (!Array.isArray(files)) return [];
-  return files.map(file => {
-    if (typeof file !== 'object') return null;
-    const {
-      url,
-      name
-    } = file;
-    if (!url || url.indexOf('/asset') < 0) return null;
-    return imageCheck(name) ? url : null;
-  }).filter(Boolean);
-};
-exports.getValidFileImageUrls = getValidFileImageUrls;
-const getFileIconUrl = (filename, direntType) => {
-  const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
-  const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
-  if (typeof direntType === 'string' && direntType === 'dir') {
-    const folder = _file.FILEEXT_ICON_MAP['folder'];
-    return _file.FILEEXT_ICON_URL_MAP[folder]['192'];
-  }
-  const identifierIndex = typeof filename === 'string' && filename.lastIndexOf('.');
-  if (identifierIndex === -1) return defaultIconUrl['192'];
-  const fileExt = typeof filename === 'string' && filename.slice(identifierIndex + 1).toLowerCase() || 'default';
-  const fileIcon = _file.FILEEXT_ICON_MAP[fileExt];
-  if (fileIcon) {
-    const iconUrl = _file.FILEEXT_ICON_URL_MAP[fileIcon];
-    return iconUrl['192'];
-  }
-  return defaultIconUrl['192'];
-};
-exports.getFileIconUrl = getFileIconUrl;
-const getFileThumbnailInfo = function (file) {
-  let {
-    server
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
-  const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
-  if (!file || !file.name) return {
-    isImage: false,
-    fileIconUrl: defaultIconUrl['192']
-  };
-  const isImage = imageCheck(file.name);
-  if (isImage) return {
-    isImage,
-    fileIconUrl: getImageThumbnailUrl(file.url, {
-      server
-    })
-  };
-  const iconUrl = getFileIconUrl(file.name, file.type);
-  return {
-    fileIconUrl: iconUrl,
-    isImage: false
-  };
+  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
 };
-exports.getFileThumbnailInfo = getFileThumbnailInfo;
+exports.getImageThumbnailUrl = getImageThumbnailUrl;

package/lib/utils/utils.js

@@ -3,11 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTwoDimensionArrayValue = exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = void 0;
-exports.isArrayFormatColumn = isArrayFormatColumn;
-exports.throttle = exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = exports.isMobile = exports.isMac = exports.isFunction = void 0;
-var _constants = require("../constants");
-var _url = require("./url");
+exports.throttle = exports.isMac = exports.getEventClassName = exports.downloadFile = exports.debounce = void 0;
 const debounce = (fn, wait) => {
   let timeout = null;
   return function () {
@@ -34,7 +30,6 @@ const throttle = (func, delay) => {
   };
 };
 exports.throttle = throttle;
-const isMobile = exports.isMobile = typeof window !== 'undefined' && (window.innerWidth < 768 || navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null);
 const isMac = () => {
   const platform = navigator.platform;
   // eslint-disable-next-line eqeqeq
@@ -53,147 +48,9 @@ const downloadFile = downloadUrl => {
   document.body.appendChild(iframe);
 };
 exports.downloadFile = downloadFile;
-const downloadFiles = (downloadUrlList, config) => {
-  const downloadFrame = document.getElementById('dtableUiComponentDownloadFrame');
-  if (downloadFrame != null) {
-    document.body.removeChild(downloadFrame);
-  }
-  downloadUrlList.forEach((url, index) => {
-    if (!(0, _url.isInternalURL)(url, config) && (0, _url.imageCheck)(url.replace('?dl=1', ''))) {
-      window.open(url);
-    } else {
-      const path = url;
-      let timer1 = setTimeout(function (path) {
-        return function () {
-          let iframe = document.createElement('iframe');
-          iframe.setAttribute('id', 'dtableUiComponentDownloadFrame');
-          iframe.style.display = 'none';
-          iframe.src = path;
-          document.body.appendChild(iframe);
-          let timer2 = setTimeout(function () {
-            iframe.remove();
-            clearTimeout(timer2);
-          }, 5000);
-          clearTimeout(timer1);
-        };
-      }(path), 1000 * index);
-    }
-  });
-};
-exports.downloadFiles = downloadFiles;
 const getEventClassName = e => {
   // svg mouseEvent event.target.className is an object
   if (!e || !e.target) return '';
   return e.target.getAttribute('class') || '';
 };
-exports.getEventClassName = getEventClassName;
-const getTrimmedString = value => {
-  return typeof value === 'string' ? value.trim() : '';
-};
-exports.getTrimmedString = getTrimmedString;
-const isFunction = functionToCheck => {
-  const getType = {};
-  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
-};
-exports.isFunction = isFunction;
-const isValidCellValue = value => {
-  if (value === undefined) return false;
-  if (value === null) return false;
-  if (value === '') return false;
-  if (JSON.stringify(value) === '{}') return false;
-  if (JSON.stringify(value) === '[]') return false;
-  return true;
-};
-exports.isValidCellValue = isValidCellValue;
-const isValidUrl = url => {
-  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
-  return reg.test(url);
-};
-exports.isValidUrl = isValidUrl;
-const openUrlLink = url => {
-  let a = document.createElement('a');
-  document.body.appendChild(a);
-  a.href = url;
-  a.target = '_blank';
-  a.rel = 'noopener noreferrer';
-  a.click();
-  document.body.removeChild(a);
-};
-exports.openUrlLink = openUrlLink;
-const getErrorMsg = error => {
-  let errorMsg = '';
-  if (error.response) {
-    if (error.response.status === 403) {
-      errorMsg = 'Permission_denied';
-    } else if (error.response.data && error.response.data['error_msg']) {
-      errorMsg = error.response.data['error_msg'];
-    } else if (error.response.data && error.response.data['error_message']) {
-      errorMsg = error.response.data['error_message'];
-    } else {
-      errorMsg = 'Error';
-    }
-  } else {
-    if (typeof error === 'object' && error.name) {
-      errorMsg = error.name;
-    } else {
-      errorMsg = 'Please_check_the_network';
-    }
-    // eslint-disable-next-line
-    console.log(error);
-  }
-  return errorMsg;
-};
-exports.getErrorMsg = getErrorMsg;
-function isArrayFormatColumn(columnType) {
-  return _constants.ARRAY_FORMAT_COLUMNS.includes(columnType);
-}
-const getFormulaArrayValue = function (value) {
-  let isFlat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  if (!Array.isArray(value)) return [];
-  if (!isFlat) return getTwoDimensionArrayValue(value);
-  return value.map(item => {
-    if (Object.prototype.toString.call(item) !== '[object Object]') {
-      return item;
-    }
-    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
-    const {
-      display_value
-    } = item;
-    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
-    return display_value.map(i => {
-      if (Object.prototype.toString.call(i) === '[object Object]') {
-        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
-        const {
-          display_value
-        } = i;
-        return display_value;
-      }
-      return i;
-    });
-  }).flat().filter(item => isValidCellValue(item));
-};
-exports.getFormulaArrayValue = getFormulaArrayValue;
-const getTwoDimensionArrayValue = value => {
-  if (!Array.isArray(value)) return [];
-  return value.map(item => {
-    if (Object.prototype.toString.call(item) !== '[object Object]') {
-      return item;
-    }
-    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
-    const {
-      display_value
-    } = item;
-    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
-    return display_value.map(i => {
-      if (Object.prototype.toString.call(i) === '[object Object]') {
-        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
-        const {
-          display_value
-        } = i;
-        return display_value;
-      }
-      return i;
-    });
-  });
-};
-exports.getTwoDimensionArrayValue = getTwoDimensionArrayValue;
+exports.getEventClassName = getEventClassName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.3.1beta6",
+  "version": "5.3.2-alpha1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",
@@ -9,7 +9,7 @@
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
-    "dtable-utils": "5.0.16",
+    "dtable-utils": "5.0.15",
     "is-hotkey": "0.2.0",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
@@ -17,7 +17,6 @@
     "react-responsive": "9.0.2",
     "react-color": "2.19.3",
     "react-select": "5.7.0",
-    "react-sweet-progress": "^1.1.2",
     "react-transition-group": "^4.4.1",
     "reactstrap": "8.9.0"
   },

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

@@ -1,257 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactstrap = require("reactstrap");
-var _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
-var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
-var _constants = require("../../constants");
-var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
-require("./index.css");
-class PCCollaboratorEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onValueChanged = newSearchValue => {
-      if (newSearchValue === this.state.searchValue) return;
-      const {
-        collaborators
-      } = this.props;
-      this.filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, newSearchValue);
-      this.setState({
-        highlightIndex: this.filteredCollaborators.length > 0 ? 0 : -1,
-        searchValue: newSearchValue
-      });
-    };
-    this.onCollaboratorClick = collaborator => {
-      this.props.onCommit(collaborator);
-    };
-    this.getFilterCollaborator = () => {
-      const {
-        collaborators
-      } = this.props;
-      const searchValue = this.state.searchValue.toLowerCase();
-      if (!searchValue) return collaborators;
-      return (0, _dtableUtils.searchCollaborators)(collaborators, searchValue);
-    };
-    this.getMaxItemNum = () => {
-      let collaboratorContainerStyle = getComputedStyle(this.container, null);
-      let collaboratorItemStyle = getComputedStyle(this.collaboratorItem, null);
-      let maxContainerItemNum = Math.floor(parseInt(collaboratorContainerStyle.maxHeight) / parseInt(collaboratorItemStyle.height));
-      return maxContainerItemNum - 1;
-    };
-    this.onHotKey = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter) {
-        this.onEnter(e);
-      } else if (e.keyCode === _constants.KeyCodes.UpArrow) {
-        this.onUpArrow(e);
-      } else if (e.keyCode === _constants.KeyCodes.DownArrow) {
-        this.onDownArrow(e);
-      } else if (e.keyCode === _constants.KeyCodes.Escape) {
-        this.onEsc(e);
-      } else if (e.keyCode === _constants.KeyCodes.Tab) {
-        if (this.props.onPressTab) {
-          this.props.onPressTab(e);
-        }
-      }
-    };
-    this.onEnter = e => {
-      e.preventDefault();
-      let collaborator;
-      if (this.filteredCollaborators.length === 1) {
-        collaborator = this.filteredCollaborators[0];
-      } else if (this.state.highlightIndex > -1) {
-        collaborator = this.filteredCollaborators[this.state.highlightIndex];
-      }
-      if (collaborator) {
-        this.onCollaboratorClick(collaborator);
-      }
-    };
-    this.onUpArrow = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      let {
-        highlightIndex,
-        maxItemNum,
-        itemHeight
-      } = this.state;
-      if (highlightIndex > 0) {
-        this.setState({
-          highlightIndex: highlightIndex - 1
-        }, () => {
-          if (highlightIndex < this.filteredCollaborators.length - maxItemNum) {
-            this.container.scrollTop -= itemHeight;
-          }
-        });
-      } else {
-        this.setState({
-          highlightIndex: this.filteredCollaborators.length - 1
-        }, () => {
-          this.container.scrollTop = this.container.scrollHeight;
-        });
-      }
-    };
-    this.onDownArrow = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      let {
-        highlightIndex,
-        maxItemNum,
-        itemHeight
-      } = this.state;
-      if (highlightIndex < this.filteredCollaborators.length - 1) {
-        this.setState({
-          highlightIndex: highlightIndex + 1
-        }, () => {
-          if (highlightIndex >= maxItemNum) {
-            this.container.scrollTop += itemHeight;
-          }
-        });
-      } else {
-        this.setState({
-          highlightIndex: 0
-        }, () => {
-          this.container.scrollTop = 0;
-        });
-      }
-    };
-    this.onEsc = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      const {
-        isInModal,
-        value,
-        onCommitCancel,
-        onClose
-      } = this.props;
-      if (isInModal) {
-        onClose && onClose();
-        return;
-      }
-      if (_objectUtils.default.isSameObject({
-        'value': this.state.value
-      }, {
-        value
-      })) {
-        onCommitCancel && onCommitCancel();
-        return;
-      }
-      this.onCommit();
-    };
-    this.onCommit = () => {
-      const value = this.getValue();
-      this.props.onCommit(value);
-    };
-    this.getValue = () => {
-      return this.state.value;
-    };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.LeftArrow || e.keyCode === _constants.KeyCodes.RightArrow) {
-        e.stopPropagation();
-      }
-    };
-    this.state = {
-      searchValue: '',
-      highlightIndex: -1,
-      maxItemNum: 0,
-      itemHeight: 0
-    };
-    this.filteredCollaborators = props.collaborators || [];
-  }
-  componentDidMount() {
-    if (this.props.isInModal && this.parent) {
-      if (this.parent.getBoundingClientRect().top > 330) {
-        this.ref.style.top = '-200px';
-      }
-    }
-    if (!this.props.isInModal && this.ref) {
-      const {
-        bottom
-      } = this.ref.getBoundingClientRect();
-      if (bottom > window.innerHeight) {
-        this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
-      }
-    }
-    if (this.container && this.collaboratorItem) {
-      this.setState({
-        maxItemNum: this.getMaxItemNum(),
-        itemHeight: parseInt(getComputedStyle(this.collaboratorItem, null).height)
-      });
-    }
-    document.addEventListener('keydown', this.onHotKey, true);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.isInModal && nextProps.value !== this.state.value && Array.isArray(nextProps.value)) {
-      this.setState({
-        value: nextProps.value
-      });
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onHotKey, true);
-  }
-  render() {
-    const {
-      searchValue,
-      highlightIndex
-    } = this.state;
-    const {
-      isInModal,
-      value = [],
-      target
-    } = this.props;
-    const dom = /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
-      ref: ref => this.ref = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-search-container"
-    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
-      autoFocus: true,
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      value: searchValue,
-      onChange: this.onValueChanged,
-      onKeyDown: this.onKeyDown
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-list-container",
-      ref: ref => this.container = ref
-    }, this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
-      const isSelected = value.includes(collaborator.email);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: collaborator.email,
-        className: (0, _classnames.default)('collaborator-item-container', {
-          'collaborator-item-container-highlight': index === highlightIndex
-        }),
-        ref: ref => this.collaboratorItem = ref,
-        onClick: this.onCollaboratorClick.bind(this, collaborator)
-      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        collaborator: collaborator
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: "collaborator-checked"
-      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-check-mark"
-      })));
-    }), this.filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-editor-no-search-result"
-    }, (0, _lang.getLocale)('No_collaborators_available'))));
-    if (isInModal) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: ref => this.parent = ref
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
-        placement: "bottom-start",
-        isOpen: true,
-        target: target,
-        hideArrow: true,
-        fade: false,
-        className: "dtable-ui-row-expand-select-editor-popover"
-      }, dom));
-    }
-    return dom;
-  }
-}
-var _default = exports.default = PCCollaboratorEditor;