dtable-ui-component 6.0.29-beta6 → 6.0.29-beta8

package/lib/DepartmentSingleSelectEditor/pc-editor/department-single-select.js

@@ -202,7 +202,7 @@ class DepartmentSingleSelect extends _react.Component {
     };
     this.renderEmptyTip = () => {
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "dtable-ui-editor-no-search-result"
+        className: "none-search-result pl-4 pr-4"
       }, (0, _lang.getLocale)('No_departments_available'));
     };
     this.renderMenuContent = () => {

package/lib/DepartmentSingleSelectEditor/pc-editor/index.css

@@ -22,6 +22,8 @@
   font-size: 14px;
   display: inline-block;
   color: #666666;
+  padding: 10px;
+  overflow: auto;
 }
 
 .dtable-ui.department-editor-list .department-item-left-content {

package/lib/RowExpandEditor/department-editor/mb-editor.js

@@ -12,7 +12,7 @@ var _addBtn = _interopRequireDefault(require("../add-btn"));
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
 var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../DepartmentSingleSelectEditor"));
 var _lang = require("../../lang");
-function RowExpandMBDepartmentEditor(_ref) {
+const RowExpandMBDepartmentEditor = _ref => {
   let {
     row,
     column,
@@ -23,11 +23,6 @@ function RowExpandMBDepartmentEditor(_ref) {
   } = _ref;
   const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
   const [showEditor, setShowEditor] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    setValue(row[column[valueKey]] || '');
-    setShowEditor(false);
-    // eslint-disable-next-line
-  }, [row]);
   const openEditor = (0, _react.useCallback)(() => {
     setShowEditor(true);
   }, []);
@@ -39,6 +34,11 @@ function RowExpandMBDepartmentEditor(_ref) {
     setValue(newValue);
     onCommit && onCommit(newValue);
   }, [value, onCommit]);
+  (0, _react.useEffect)(() => {
+    setValue(row[column[valueKey]] || '');
+    setShowEditor(false);
+    // eslint-disable-next-line
+  }, [row, column]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "dtable-ui dtable-ui-mobile-row-expand-options-editor position-relative",
     onClick: openEditor
@@ -61,5 +61,5 @@ function RowExpandMBDepartmentEditor(_ref) {
     departments: departments,
     onClose: closeEditor
   }));
-}
+};
 var _default = exports.default = RowExpandMBDepartmentEditor;

package/lib/RowExpandEditor/department-editor/pc-editor.js

@@ -11,62 +11,60 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
 var _constants = require("../../constants");
 var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../DepartmentSingleSelectEditor"));
-function RowExpandPCDepartmentEditor(props) {
-  const {
+const RowExpandPCDepartmentEditor = _ref => {
+  let {
     row,
     column,
     valueKey,
     departments,
     userDepartmentIdsMap,
     isEditorFocus,
-    columnIndex
-  } = props;
+    columnIndex,
+    onCommit,
+    updateTabIndex
+  } = _ref;
   const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
   const [showEditor, setShowEditor] = (0, _react.useState)(false);
   const departmentSelectContainer = (0, _react.useRef)(null);
   const departmentSelectContent = (0, _react.useRef)(null);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === _constants.KeyCodes.Enter && isEditorFocus && !showEditor) {
+      setShowEditor(true);
+    } else if (event.keyCode === _constants.KeyCodes.Escape && showEditor) {
+      event.stopPropagation();
+      setShowEditor(false);
+      departmentSelectContent.current.focus();
+    }
+  }, [isEditorFocus, showEditor]);
+  const onToggleSelect = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    updateTabIndex(columnIndex);
+    setShowEditor(true);
+  }, [columnIndex, updateTabIndex]);
+  const onFocus = (0, _react.useCallback)(() => {
+    updateTabIndex(columnIndex);
+  }, [columnIndex, updateTabIndex]);
+  const handleCommit = (0, _react.useCallback)(newValue => {
+    setShowEditor(false);
+    if (newValue === value) return;
+    setValue(newValue);
+    onCommit(newValue);
+  }, [value, onCommit]);
+  const closeEditor = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
   (0, _react.useEffect)(() => {
     document.addEventListener('keydown', onKeyDown);
     return () => {
       document.removeEventListener('keydown', onKeyDown);
     };
-    // eslint-disable-next-line
-  }, [isEditorFocus, showEditor]);
+  }, [onKeyDown]);
   (0, _react.useEffect)(() => {
     setValue(row[column[valueKey]] || '');
     setShowEditor(false);
     // eslint-disable-next-line
-  }, [row]);
-  function onKeyDown(e) {
-    if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
-      setShowEditor(true);
-    } else if (e.keyCode === _constants.KeyCodes.Escape && showEditor) {
-      e.stopPropagation();
-      setShowEditor(false);
-      departmentSelectContent.current.focus();
-    }
-  }
-  function toggleDepartmentSelect(value) {
-    setShowEditor(value);
-  }
-  function onToggleSelect(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    props.updateTabIndex(columnIndex);
-    toggleDepartmentSelect(true);
-  }
-  function onFocus() {
-    props.updateTabIndex(columnIndex);
-  }
-  function onCommit(newValue) {
-    toggleDepartmentSelect(false);
-    if (newValue === value) return;
-    setValue(newValue);
-    props.onCommit(newValue);
-  }
-  function closeEditor() {
-    toggleDepartmentSelect(false);
-  }
+  }, [row, column]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative w-100",
     ref: departmentSelectContainer
@@ -92,10 +90,10 @@ function RowExpandPCDepartmentEditor(props) {
     target: departmentSelectContent.current,
     column: column,
     value: value,
-    onCommit: onCommit,
+    onCommit: handleCommit,
     userDepartmentIdsMap: userDepartmentIdsMap,
     departments: departments,
     toggleDepartmentSelect: closeEditor
   }));
-}
+};
 var _default = exports.default = RowExpandPCDepartmentEditor;

package/lib/RowExpandView/index.css

@@ -0,0 +1,3 @@
+.dtable-ui-mobile-row-expand-full-screen-page .dtable-ui-mobile-row-expand-body .dtable-ui-mobile-row-expand-item:first-child .dtable-ui-mobile-row-expand-item-title {
+  border-top: 0;
+}

package/lib/RowExpandView/index.js

@@ -156,7 +156,7 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }
   }), [row, columns]);
   return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
-    className: (0, _classnames.default)('seatable-row-expand-full-screen-page', className),
+    className: (0, _classnames.default)('dtable-ui-mobile-row-expand-full-screen-page', className),
     zIndex: zIndex || 100,
     historyCallback: historyCallback
   }, /*#__PURE__*/_react.default.createElement(Header, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.29-beta6",
+  "version": "6.0.29-beta8",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",