dtable-ui-component 6.0.29-beta7 → 6.0.29-beta9

package/lib/CheckboxEditor/mb-editor.js

@@ -40,9 +40,7 @@ class MBCheckboxEditor extends _react.Component {
       this.setState({
         value: newValue
       }, () => {
-        if (this.props.onCommit) {
-          this.props.onCommit(event);
-        }
+        this.props.onCommit && this.props.onCommit(newValue);
       });
     };
     this.renderIcon = (symbol, color) => {

package/lib/CheckboxEditor/pc-editor.js

@@ -52,7 +52,7 @@ class PCCheckboxEditor extends _react.Component {
         value: newValue
       }, () => {
         if (this.props.onCommit) {
-          this.props.onCommit(event);
+          this.props.onCommit(newValue);
         }
       });
     };

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/checkbox-editor/mb-editor/index.js

@@ -12,10 +12,8 @@ require("./index.css");
 class RowExpandMBCheckboxEditor extends _react.default.Component {
   constructor(props) {
     super(props);
-    this.onChangeCheckboxValue = () => {
-      if (!this.editor) return;
-      const newValue = this.editor.getValue();
-      this.props.onCommit(newValue);
+    this.onCommit = newValue => {
+      this.props.onCommit && this.props.onCommit(newValue);
     };
     this.editor = null;
   }
@@ -28,11 +26,10 @@ class RowExpandMBCheckboxEditor extends _react.default.Component {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('dtable-ui-mobile-row-expand-checkbox-editor-container', className)
     }, /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
-      ref: ref => this.editor = ref,
       className: "dtable-ui-row-expand-checkbox-editor mt-0",
       column: column,
       value: value,
-      onCommit: this.onChangeCheckboxValue
+      onCommit: this.onCommit
     }));
   }
 }

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

@@ -11,16 +11,14 @@ var _constants = require("../../constants");
 class RowExpandPCCheckboxEditor extends _react.default.Component {
   constructor() {
     super(...arguments);
-    this.onChangeCheckboxValue = () => {
+    this.onCommit = newValue => {
       const {
-        columnIndex
+        columnIndex,
+        updateTabIndex,
+        onCommit
       } = this.props;
-      if (!this.editor) return;
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(columnIndex);
-      }
-      const newValue = this.editor.getValue();
-      this.props.onCommit(newValue);
+      updateTabIndex && updateTabIndex(columnIndex);
+      onCommit && onCommit(newValue);
     };
   }
   render() {
@@ -30,12 +28,11 @@ class RowExpandPCCheckboxEditor extends _react.default.Component {
       value
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
-      ref: ref => this.editor = ref,
       className: "dtable-ui-row-expand-checkbox-editor mt-2",
       column: column,
       value: value,
       style: isEditorFocus ? _constants.ROW_EXPAND_FOCUS_STYLE : {},
-      onCommit: this.onChangeCheckboxValue
+      onCommit: this.onCommit
     });
   }
 }

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/package.json

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