dtable-ui-component 4.4.30 → 4.4.32

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -313,7 +313,7 @@ class FilterItem extends _react.default.Component {
         onSelectOption: _this.onSelectMultiple,
         placeholder: (0, _lang.getLocale)('Select_option(s)'),
         searchable: true,
-        searchPlaceholder: (0, _lang.getLocale)('Find_an_option'),
+        searchPlaceholder: (0, _lang.getLocale)('Search_option'),
         noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available'),
         supportMultipleSelect: isSupportMultipleSelect
       });
@@ -417,7 +417,7 @@ class FilterItem extends _react.default.Component {
               onSelectOption: this.onSelectSingle,
               placeholder: (0, _lang.getLocale)('Select_an_option'),
               searchable: true,
-              searchPlaceholder: (0, _lang.getLocale)('Find_an_option'),
+              searchPlaceholder: (0, _lang.getLocale)('Search_option'),
               noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available')
             });
           }
@@ -663,7 +663,7 @@ class FilterItem extends _react.default.Component {
       options: filterColumnOptions,
       onSelectOption: this.onSelectColumn,
       searchable: true,
-      searchPlaceholder: (0, _lang.getLocale)('Find_column'),
+      searchPlaceholder: (0, _lang.getLocale)('Search_column'),
       noOptionsPlaceholder: (0, _lang.getLocale)('No_results')
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : '')

package/lib/Department-editor/department-multiple-select/index.js

@@ -138,7 +138,7 @@ function DepartmentMultipleSelect(props) {
       className: "form-control",
       type: "text",
       autoFocus: true,
-      placeholder: (0, _lang.getLocale)('Find_a_department'),
+      placeholder: (0, _lang.getLocale)('Search_department'),
       value: searchVal,
       onChange: onChangeSearch,
       onClick: onClick

package/lib/Department-editor/department-single-select.js

@@ -259,7 +259,7 @@ class DepartmentSingleSelect extends _react.Component {
       className: "form-control",
       type: "text",
       autoFocus: true,
-      placeholder: (0, _lang.getLocale)('Find_a_department'),
+      placeholder: (0, _lang.getLocale)('Search_department'),
       value: this.state.searchVal,
       onChange: this.onChangeSearch,
       onClick: this.onStopPropagation

package/lib/LinkEditor/mb-link-editor-popover/index.js

@@ -123,7 +123,7 @@ class MBLinkEditorPopover extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("input", {
       className: "form-control",
       type: "text",
-      placeholder: (0, _lang.getLocale)('Find_an_option'),
+      placeholder: (0, _lang.getLocale)('Search_option'),
       value: searchVal,
       onChange: this.onChangeSearch,
       onClick: this.onInputClick

package/lib/LinkEditor/pc-link-editor-popover/index.js

@@ -64,7 +64,7 @@ class PCLinkEditorPopover extends _react.default.Component {
       value: searchValue,
       onChange: this.onValueChanged,
       onClick: this.onInputClick,
-      placeholder: (0, _lang.getLocale)('Find_an_option')
+      placeholder: (0, _lang.getLocale)('Search_option')
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "link-options-container"
     }, options.length > 0 && options.map((option, index) => {

package/lib/SimpleLongTextFormatter/index.js

@@ -63,20 +63,22 @@ class SimpleLongTextFormatter extends _react.default.Component {
       }
       return {};
     };
-    this.clearTimer = () => {
-      if (this.timer) {
-        clearTimeout(this.timer);
-        this.timer = null;
-      }
+    this.clearOpenPreviewTimer = () => {
+      if (!this.openPreviewTimer) return;
+      clearTimeout(this.openPreviewTimer);
+      this.openPreviewTimer = null;
+    };
+    this.clearClosePreviewTimer = () => {
+      if (!this.closePreviewTimer) return;
+      clearTimeout(this.closePreviewTimer);
+      this.closePreviewTimer = null;
     };
     this.onMouseEnter = () => {
       // in case that there is no `modal-wrapper`
-      if (!document.getElementById('modal-wrapper')) {
-        return;
-      }
-      this.clearTimer();
+      if (!document.getElementById('modal-wrapper')) return;
+      this.clearOpenPreviewTimer();
       if (this.props.value) {
-        this.timer = setTimeout(() => {
+        this.openPreviewTimer = setTimeout(() => {
           const style = this.ref.getBoundingClientRect();
           this.formatterStyle = style;
           this.setState({
@@ -86,7 +88,23 @@ class SimpleLongTextFormatter extends _react.default.Component {
       }
     };
     this.onMouseLeave = () => {
-      this.clearTimer();
+      this.clearOpenPreviewTimer();
+
+      // Case 1: The mouse moves out of the cell and is not in the preview component, close the preview component after 2S
+      this.closePreviewTimer = setTimeout(() => {
+        if (this.state.isPreview) {
+          this.setState({
+            isPreview: false
+          });
+        }
+      }, 2000);
+    };
+    // Case 2: The mouse moves out of the cell and into the preview component, do not close the preview component
+    this.onPreviewMouseEnter = () => {
+      this.clearClosePreviewTimer();
+    };
+    // Case 2: The mouse move out of the preview component, close the preview component
+    this.onPreviewMouseLeave = () => {
       if (this.state.isPreview) {
         this.setState({
           isPreview: false
@@ -99,7 +117,8 @@ class SimpleLongTextFormatter extends _react.default.Component {
     };
   }
   componentWillUnmount() {
-    this.clearTimer();
+    this.clearOpenPreviewTimer();
+    this.clearClosePreviewTimer();
   }
   render() {
     const {
@@ -119,7 +138,9 @@ class SimpleLongTextFormatter extends _react.default.Component {
     }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value), isPreview && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_LongTextPreview.default, {
       className: previewClassName,
       value: value,
-      formatterStyle: this.formatterStyle
+      formatterStyle: this.formatterStyle,
+      onMouseEnter: this.onPreviewMouseEnter,
+      onMouseLeave: this.onPreviewMouseLeave
     })));
   }
 }

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -20,8 +20,11 @@ class LongTextPreview extends _react.default.PureComponent {
         left,
         top
       } = formatterStyle;
+      const {
+        height,
+        opacity
+      } = this.state;
       const width = 520;
-      const height = this.state.height;
       const padding = 6;
       left = left - width > 0 ? left - width - 12 : 0;
       top = top - padding;
@@ -31,9 +34,15 @@ class LongTextPreview extends _react.default.PureComponent {
       return {
         left,
         top,
-        opacity: this.state.opacity
+        opacity
       };
     };
+    this.onMouseEnter = e => {
+      this.props.onMouseEnter && this.props.onMouseEnter(e);
+    };
+    this.onMouseLeave = e => {
+      this.props.onMouseLeave && this.props.onMouseLeave(e);
+    };
     this.state = {
       height: 450,
       opacity: 0
@@ -41,13 +50,23 @@ class LongTextPreview extends _react.default.PureComponent {
   }
   componentDidMount() {
     setTimeout(() => {
+      var _value$images;
       if (!this.ref) return;
-      const domHeight = this.ref.offsetHeight;
+      const {
+        value
+      } = this.props;
+
+      // If image is included, sets the preview height to the maximum height
+      const hasImage = (value === null || value === void 0 ? void 0 : (_value$images = value.images) === null || _value$images === void 0 ? void 0 : _value$images.length) >= 2 ? true : false;
+      let {
+        height: domHeight
+      } = this.ref.getBoundingClientRect();
+      domHeight = hasImage ? 450 : domHeight;
       this.setState({
-        height: domHeight,
+        height: Math.min(domHeight, 450),
         opacity: 1
       });
-    }, 0);
+    }, 10);
   }
   render() {
     const {
@@ -58,7 +77,9 @@ class LongTextPreview extends _react.default.PureComponent {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('longtext-modal-dialog longtext-preview', className),
       style: this.getStyle(),
-      ref: ref => this.ref = ref
+      ref: ref => this.ref = ref,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "longtext-container longtext-container-scroll"
     }, /*#__PURE__*/_react.default.createElement(_dtableMarkdownViewer.default, {

package/lib/SimpleLongTextFormatter/widgets/longTextEditor.css

@@ -339,10 +339,12 @@
 
 .longtext-preview .sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
   width: 100%;
+  margin: 0;
 }
 
 .longtext-preview .longtext-container .article {
   padding: 10px 16px;
+  border: unset;
 }
 
 .row-height-128 .longtext-formatter .article {

package/lib/locals/de.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const de = {
   "Add_an_option": "Fügen Sie eine Option hinzu",
-  "Find_an_option": "Finden Sie eine Option",
+  "Search_option": "Finden Sie eine Option",
   "No_options_available": "Es sind keine Optionen verfügbar.",
   "Current_option": "Aktuelle Option",
   "No_option": "Keine Option",
@@ -24,7 +24,7 @@ const de = {
   "Are_you_sure_you_want_to_delete_this_image": "Möchten Sie das Bild wirklich löschen?",
   "Cancel": "Abbrechen",
   "Delete": "Löschen",
-  "Find_a_department": "Bereich suchen",
+  "Search_department": "Bereich suchen",
   "No_departments_available": "Es sind keine Departments verfügbar.",
   "Current_user_department": "Department des aktuellen Benutzers",
   "Current_user_department_and_sub": "Bereich und Unterbereiche des aktuellen Benutzers",
@@ -38,7 +38,7 @@ const de = {
   "Add_a_creator": "Mitarbeiter hinzufügen",
   "Add_a_last_modifier": "Letzten Bearbeiter hinzufügen",
   "Invalid_filter": "Ungültiger Filter",
-  "Find_column": "Spalte suchen",
+  "Search_column": "Spalte suchen",
   "No_results": "Keine Ergebnisse",
   "Select_option(s)": "Option(en) auswählen",
   "contains": "enthält",

package/lib/locals/en.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const en = {
   "Add_an_option": "Add an option",
-  "Find_an_option": "Find a option",
+  "Search_option": "Search option",
   "No_options_available": "No options available",
   "Current_option": "Current option",
   "No_option": "No option",
@@ -24,7 +24,7 @@ const en = {
   "Are_you_sure_you_want_to_delete_this_image": "Are you sure you want to delete this image?",
   "Cancel": "Cancel",
   "Delete": "Delete",
-  "Find_a_department": "Find a department",
+  "Search_department": "Search department",
   "No_departments_available": "No departments available",
   "Current_user_department": "Current user\"s department",
   "Current_user_department_and_sub": "Current user\"s department and sub-departments",
@@ -38,7 +38,7 @@ const en = {
   "Add_a_creator": "Add a creator",
   "Add_a_last_modifier": "Add a last modifier",
   "Invalid_filter": "Invalid filter",
-  "Find_column": "Find column",
+  "Search_column": "Search column",
   "No_results": "No results",
   "Select_option(s)": "Select option(s)",
   "contains": "contains",

package/lib/locals/es.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const es = {
   "Add_an_option": "Add an option",
-  "Find_an_option": "Find a option",
+  "Search_option": "Search option",
   "No_options_available": " No hay opciones disponibles",
   "Current_option": "Opción actual",
   "No_option": "Sin opciones",
@@ -24,7 +24,7 @@ const es = {
   "Are_you_sure_you_want_to_delete_this_file": "¿Está seguro de querer eliminar este archivo?",
   "Cancel": "Cancelar",
   "Delete": "Borrar",
-  "Find_a_department": "Find a department",
+  "Search_department": "Search department",
   "No_departments_available": "No departments available",
   "Current_user_department": "Current user's department",
   "Current_user_department_and_sub": "Current user's department and sub-departments",
@@ -38,7 +38,7 @@ const es = {
   "Add_a_creator": "Añadir un creador",
   "Add_a_last_modifier": "Añadir un último en modificar",
   "Invalid_filter": "Filtro inválido",
-  "Find_column": "Find column",
+  "Search_column": "Search column",
   "No_results": "Sin resultados.",
   "Select_option(s)": "Elegir opción(es)",
   "contains": "contiene",

package/lib/locals/fr.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const fr = {
   "Add_an_option": "Ajouter une option",
-  "Find_an_option": "Trouver une option",
+  "Search_option": "Trouver une option",
   "No_options_available": "Il n'y a pas d'options disponibles.",
   "Current_option": "Option actuelle",
   "No_option": "Aucune option",
@@ -24,7 +24,7 @@ const fr = {
   "Are_you_sure_you_want_to_delete_this_file": "Êtes-vous sûr de vouloir supprimer ce fichier?",
   "Cancel": "Annuler",
   "Delete": "Supprimer",
-  "Find_a_department": "Chercher un département",
+  "Search_department": "Chercher un département",
   "No_departments_available": "Aucun département n'est disponible.",
   "Current_user_department": "Département de l'utilisateur actuel",
   "Current_user_department_and_sub": "Département et sous-départements de l'utilisateur actuel",
@@ -38,7 +38,7 @@ const fr = {
   "Add_a_creator": "Ajouter un créateur",
   "Add_a_last_modifier": "Ajouter un dernier éditeur",
   "Invalid_filter": "Filtre invalide",
-  "Find_column": "Rechercher une colonne",
+  "Search_column": "Rechercher une colonne",
   "No_results": "Aucun résultat",
   "Select_option(s)": "Selectionner une ou plusieurs options",
   "contains": "contient",

package/lib/locals/pt.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const pt = {
   "Add_an_option": "Adicione uma opção",
-  "Find_an_option": "Encontre uma opção",
+  "Search_option": "Encontre uma opção",
   "No_options_available": "Sem opções disponíveis",
   "Current_option": "Opção atual",
   "No_option": "Nenhuma opção",
@@ -24,7 +24,7 @@ const pt = {
   "Are_you_sure_you_want_to_delete_this_file": "Tem certeza de que deseja excluir este arquivo?",
   "Cancel": "Cancelar",
   "Delete": "Excluir",
-  "Find_a_department": "Find a department",
+  "Search_department": "Search department",
   "No_departments_available": "No departments available",
   "Current_user_department": "Current user's department",
   "Current_user_department_and_sub": "Current user's department and sub-departments",
@@ -38,7 +38,7 @@ const pt = {
   "Add_a_creator": "Adicione um Criador",
   "Add_a_last_modifier": "Adicione um último modificador",
   "Invalid_filter": "Filtro inválido",
-  "Find_column": "Encontrar coluna",
+  "Search_column": "Encontrar coluna",
   "No_results": "Sem resultados.",
   "Select_option(s)": "Selecione as opções)",
   "contains": "contém",

package/lib/locals/ru.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const ru = {
   "Add_an_option": "Add an option",
-  "Find_an_option": "Find a option",
+  "Search_option": "Search option",
   "No_options_available": "Нет доступных вариантов.",
   "Current_option": "Текущая опция",
   "No_option": "Нет опций",
@@ -24,7 +24,7 @@ const ru = {
   "Are_you_sure_you_want_to_delete_this_file": "Are you sure you want to delete this file?",
   "Cancel": "Отменить",
   "Delete": "Удалить",
-  "Find_a_department": "Find a department",
+  "Search_department": "Search department",
   "No_departments_available": "No departments available",
   "Current_user_department": "Current user's department",
   "Current_user_department_and_sub": "Current user's department and sub-departments",
@@ -38,7 +38,7 @@ const ru = {
   "Add_a_creator": "Добавить создателя",
   "Add_a_last_modifier": "Добавить последний изменивший",
   "Invalid_filter": "Invalid filter",
-  "Find_column": "Find column",
+  "Search_column": "Search column",
   "No_results": "Нет результатов.",
   "Select_option(s)": "Выберите опцию(и)",
   "contains": "содержит",

package/lib/locals/zh-CN.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /* eslint-disable quotes */
 const zh_CN = {
   "Add_an_option": "添加一个选项",
-  "Find_an_option": "查找标签",
+  "Search_option": "查找标签",
   "No_options_available": "没有找到标签。",
   "Current_option": "当前标签",
   "No_option": "没有标签",
@@ -24,7 +24,7 @@ const zh_CN = {
   "Are_you_sure_you_want_to_delete_this_image": "你确定要删除此图片吗？",
   "Cancel": "取消",
   "Delete": "删除",
-  "Find_a_department": "查找部门",
+  "Search_department": "查找部门",
   "No_departments_available": "没有可用的部门",
   "Current_user_department": "当前用户的部门",
   "Current_user_department_and_sub": "当前用户的部门和子部门",
@@ -38,7 +38,7 @@ const zh_CN = {
   "Add_a_creator": "增加创建者",
   "Add_a_last_modifier": "增加最后修改者",
   "Invalid_filter": "无效的过滤器",
-  "Find_column": "查找列",
+  "Search_column": "查找列",
   "No_results": "没有结果",
   "Select_option(s)": "选择标签",
   "contains": "包含",

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

@@ -166,7 +166,7 @@ class MBSelectEditorPopover extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("input", {
       className: "form-control",
       type: "text",
-      placeholder: (0, _lang.getLocale)('Find_an_option'),
+      placeholder: (0, _lang.getLocale)('Search_option'),
       value: searchVal,
       onChange: this.onChangeSearch,
       onClick: this.onInputClick

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

@@ -81,7 +81,7 @@ class PCSelectEditorPopover extends _react.default.Component {
       className: "form-control",
       onChange: this.onValueChanged,
       onClick: this.onInputClick,
-      placeholder: (0, _lang.getLocale)('Find_an_option')
+      placeholder: (0, _lang.getLocale)('Search_option')
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "select-options-container"
     }, options.length > 0 && options.map((option, index) => {

package/package.json

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