dtable-ui-component 6.0.29-beta11 → 6.0.29-beta3

package/lib/CheckboxEditor/mb-editor.js

@@ -40,7 +40,9 @@ class MBCheckboxEditor extends _react.Component {
       this.setState({
         value: newValue
       }, () => {
-        this.props.onCommit && this.props.onCommit(newValue);
+        if (this.props.onCommit) {
+          this.props.onCommit(event);
+        }
       });
     };
     this.renderIcon = (symbol, color) => {
@@ -92,7 +94,7 @@ class MBCheckboxEditor extends _react.Component {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
       style: style || {},
-      onClick: this.onChangeCheckboxValue
+      onTouchStart: this.onChangeCheckboxValue
     }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.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(newValue);
+          this.props.onCommit(event);
         }
       });
     };

package/lib/DepartmentSingleSelectEditor/mb-editor/index.js

@@ -186,6 +186,9 @@ const MBDepartmentSingleSelectEditor = _ref => {
         current_user_department_ids = [],
         current_user_department_and_sub_ids = []
       } = userDepartmentIdsMap;
+      const {
+        departments: initialDepartments
+      } = window.app.state;
       let targetDepartments = [];
       let topParentIds = [];
       let canExpand = true;

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: "none-search-result pl-4 pr-4"
+        className: "dtable-ui-editor-no-search-result"
       }, (0, _lang.getLocale)('No_departments_available'));
     };
     this.renderMenuContent = () => {

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

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

package/lib/MobileFullScreenPage/body/index.js

@@ -16,7 +16,7 @@ const Body = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('dtable-ui-mobile-full-screen-page-body', className, {
-      ["".concat(classNamePrefix, "-mobile-full-screen-page-body")]: classNamePrefix
+      ["".concat(classNamePrefix, "-full-screen-page-body")]: classNamePrefix
     })
   }, children);
 };

package/lib/MobileFullScreenPage/header/index.js

@@ -17,20 +17,20 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('dtable-ui-mobile-full-screen-page-header p-0', {
-      ["".concat(classNamePrefix, "-mobile-full-screen-page-header")]: classNamePrefix
+      ["".concat(classNamePrefix, "-full-screen-page-header")]: classNamePrefix
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('dtable-ui-mobile-full-screen-page-header-btn', {
-      ["".concat(classNamePrefix, "-mobile-full-screen-page-header-btn")]: classNamePrefix
+      ["".concat(classNamePrefix, "-full-screen-page-header-btn")]: classNamePrefix
     }),
     onClick: onLeftClick
   }, children[0]), /*#__PURE__*/_react.default.createElement("h4", {
     className: (0, _classnames.default)('dtable-ui-mobile-full-screen-page-header-title', {
-      ["".concat(classNamePrefix, "-mobile-full-screen-page-header-title")]: classNamePrefix
+      ["".concat(classNamePrefix, "-full-screen-page-header-title")]: classNamePrefix
     })
   }, children[1]), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('dtable-ui-mobile-full-screen-page-header-btn', {
-      ["".concat(classNamePrefix, "-mobile-full-screen-page-header-btn")]: classNamePrefix
+      ["".concat(classNamePrefix, "-full-screen-page-header-btn")]: classNamePrefix
     }),
     onClick: onRightClick
   }, children[2]));

package/lib/MobileFullScreenPage/index.js

@@ -63,11 +63,19 @@ const MobileFullScreenPage = _ref => {
     node: element
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('dtable-ui-mobile-full-screen-page', className, {
-      ["".concat(classNamePrefix, "-mobile-full-screen-page")]: classNamePrefix
+      ["".concat(classNamePrefix, "-full-screen-page")]: classNamePrefix
     }),
     style: style
   }, isMount && children));
 };
+{/* <Header classNamePrefix={classNamePrefix} onLeftClick={onLeftClick} onRightClick={onRightClick}>
+ {children[0]}
+ {children[1]}
+ {children[2]}
+ </Header>
+ <Body className={bodyClassName} classNamePrefix={classNamePrefix}>
+ {isMount && (<>{children[3]}</>)}
+ </Body> */}
 MobileFullScreenPage.Header = _header.default;
 MobileFullScreenPage.Body = _body.default;
 var _default = exports.default = MobileFullScreenPage;

package/lib/RowExpand/index.js

@@ -8,16 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _RowExpandDialog = _interopRequireDefault(require("../RowExpandDialog"));
-var _RowExpandView = _interopRequireDefault(require("../RowExpandView"));
+var _pcExpand = _interopRequireDefault(require("./pc-expand"));
+var _mbExpand = _interopRequireDefault(require("./mb-expand"));
 const RowExpand = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: '(min-width: 768px)'
-  }, /*#__PURE__*/_react.default.createElement(_RowExpandDialog.default, Object.assign({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_pcExpand.default, Object.assign({}, props, {
     ref: ref
   }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: '(max-width: 768px)'
-  }, /*#__PURE__*/_react.default.createElement(_RowExpandView.default, Object.assign({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_mbExpand.default, Object.assign({}, props, {
     ref: ref
   }))));
 });

package/lib/{RowExpandView → RowExpand/mb-expand}/body/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _columnContent = _interopRequireDefault(require("../column-content"));
-var _RowExpandEditor = _interopRequireDefault(require("../../RowExpandEditor"));
-var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatter"));
-var _utils = require("../../utils/utils");
+var _RowExpandEditor = _interopRequireDefault(require("../../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../../RowExpandFormatter"));
+var _utils = require("../../../utils/utils");
 require("./index.css");
 class Body extends _react.default.Component {
   constructor() {

package/lib/{RowExpandView → RowExpand/mb-expand}/index.js

@@ -9,18 +9,18 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
-var _toaster = _interopRequireDefault(require("../toaster"));
-var _Loading = _interopRequireDefault(require("../Loading"));
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _Loading = _interopRequireDefault(require("../../Loading"));
 var _body = _interopRequireDefault(require("./body"));
-var _lang = require("../lang");
-var _cellComparer = require("../utils/cell-comparer");
-var _MobileFullScreenPage = _interopRequireDefault(require("../MobileFullScreenPage"));
+var _lang = require("../../lang");
+var _cellComparer = require("../../utils/cell-comparer");
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
 require("./index.css");
 const {
   Header,
   Body: MobileFullScreenPageBody
 } = _MobileFullScreenPage.default;
-const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const MBRowExpand = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     saveImmediately = true,
     readonly = false,
@@ -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)('dtable-ui-mobile-row-expand-full-screen-page', className),
+    className: (0, _classnames.default)('seatable-row-expand-full-screen-page', className),
     zIndex: zIndex || 100,
     historyCallback: historyCallback
   }, /*#__PURE__*/_react.default.createElement(Header, {
@@ -174,5 +174,4 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     uploadFile: uploadFile
   }))));
 });
-RowExpandView.Body = _body.default;
-var _default = exports.default = RowExpandView;
+var _default = exports.default = MBRowExpand;

package/lib/{RowExpandDialog → RowExpand/pc-expand}/body/index.js

@@ -10,10 +10,10 @@ var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _columnContent = _interopRequireDefault(require("../column-content"));
-var _RowExpandEditor = _interopRequireDefault(require("../../RowExpandEditor"));
-var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatter"));
-var _constants = require("../../constants");
-var _utils = require("../../utils/utils");
+var _RowExpandEditor = _interopRequireDefault(require("../../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../../RowExpandFormatter"));
+var _constants = require("../../../constants");
+var _utils = require("../../../utils/utils");
 require("./index.css");
 class Body extends _react.default.Component {
   constructor(_props) {

package/lib/{RowExpandDialog → RowExpand/pc-expand}/header/index.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _lang = require("../../lang");
-var _utils = require("../../utils/utils");
-var _IconButton = _interopRequireDefault(require("../../IconButton"));
+var _lang = require("../../../lang");
+var _utils = require("../../../utils/utils");
+var _IconButton = _interopRequireDefault(require("../../../IconButton"));
 require("./index.css");
 const Header = _ref => {
   let {

package/lib/{RowExpandDialog → RowExpand/pc-expand}/index.js

@@ -10,14 +10,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
-var _toaster = _interopRequireDefault(require("../toaster"));
-var _Loading = _interopRequireDefault(require("../Loading"));
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _Loading = _interopRequireDefault(require("../../Loading"));
 var _header = _interopRequireDefault(require("./header"));
 var _body = _interopRequireDefault(require("./body"));
-var _lang = require("../lang");
-var _cellComparer = require("../utils/cell-comparer");
+var _lang = require("../../lang");
+var _cellComparer = require("../../utils/cell-comparer");
 require("./index.css");
-const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const PCRowExpand = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     saveImmediately = true,
     readonly = false,
@@ -235,6 +235,4 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     color: "primary"
   }, (0, _lang.getLocale)('Submit'))))));
 });
-RowExpandDialog.Header = _header.default;
-RowExpandDialog.Body = _body.default;
-var _default = exports.default = RowExpandDialog;
+var _default = exports.default = PCRowExpand;

package/lib/RowExpandEditor/checkbox-editor/mb-editor/index.js

@@ -12,8 +12,10 @@ require("./index.css");
 class RowExpandMBCheckboxEditor extends _react.default.Component {
   constructor(props) {
     super(props);
-    this.onCommit = newValue => {
-      this.props.onCommit && this.props.onCommit(newValue);
+    this.onChangeCheckboxValue = () => {
+      if (!this.editor) return;
+      const newValue = this.editor.getValue();
+      this.props.onCommit(newValue);
     };
     this.editor = null;
   }
@@ -26,10 +28,11 @@ 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.onCommit
+      onCommit: this.onChangeCheckboxValue
     }));
   }
 }

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

@@ -11,14 +11,16 @@ var _constants = require("../../constants");
 class RowExpandPCCheckboxEditor extends _react.default.Component {
   constructor() {
     super(...arguments);
-    this.onCommit = newValue => {
+    this.onChangeCheckboxValue = () => {
       const {
-        columnIndex,
-        updateTabIndex,
-        onCommit
+        columnIndex
       } = this.props;
-      updateTabIndex && updateTabIndex(columnIndex);
-      onCommit && onCommit(newValue);
+      if (!this.editor) return;
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(columnIndex);
+      }
+      const newValue = this.editor.getValue();
+      this.props.onCommit(newValue);
     };
   }
   render() {
@@ -28,11 +30,12 @@ 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.onCommit
+      onCommit: this.onChangeCheckboxValue
     });
   }
 }

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");
-const RowExpandMBDepartmentEditor = _ref => {
+function RowExpandMBDepartmentEditor(_ref) {
   let {
     row,
     column,
@@ -23,6 +23,11 @@ const 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);
   }, []);
@@ -34,11 +39,6 @@ const 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 @@ const RowExpandMBDepartmentEditor = _ref => {
     departments: departments,
     onClose: closeEditor
   }));
-};
+}
 var _default = exports.default = RowExpandMBDepartmentEditor;

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

@@ -11,60 +11,62 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
 var _constants = require("../../constants");
 var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../DepartmentSingleSelectEditor"));
-const RowExpandPCDepartmentEditor = _ref => {
-  let {
+function RowExpandPCDepartmentEditor(props) {
+  const {
     row,
     column,
     valueKey,
     departments,
     userDepartmentIdsMap,
     isEditorFocus,
-    columnIndex,
-    onCommit,
-    updateTabIndex
-  } = _ref;
+    columnIndex
+  } = props;
   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);
     };
-  }, [onKeyDown]);
+    // eslint-disable-next-line
+  }, [isEditorFocus, showEditor]);
   (0, _react.useEffect)(() => {
     setValue(row[column[valueKey]] || '');
     setShowEditor(false);
     // eslint-disable-next-line
-  }, [row, column]);
+  }, [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);
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative w-100",
     ref: departmentSelectContainer
@@ -90,10 +92,10 @@ const RowExpandPCDepartmentEditor = _ref => {
     target: departmentSelectContent.current,
     column: column,
     value: value,
-    onCommit: handleCommit,
+    onCommit: onCommit,
     userDepartmentIdsMap: userDepartmentIdsMap,
     departments: departments,
     toggleDepartmentSelect: closeEditor
   }));
-};
+}
 var _default = exports.default = RowExpandPCDepartmentEditor;

package/lib/index.js

@@ -427,7 +427,7 @@ Object.defineProperty(exports, "RowExpand", {
 Object.defineProperty(exports, "RowExpandDialog", {
   enumerable: true,
   get: function () {
-    return _RowExpandDialog.default;
+    return _pcExpand.default;
   }
 });
 Object.defineProperty(exports, "RowExpandEditor", {
@@ -445,7 +445,7 @@ Object.defineProperty(exports, "RowExpandFormatter", {
 Object.defineProperty(exports, "RowExpandView", {
   enumerable: true,
   get: function () {
-    return _RowExpandView.default;
+    return _mbExpand.default;
   }
 });
 Object.defineProperty(exports, "SelectItem", {
@@ -556,8 +556,8 @@ var _SimpleLongTextFormatter = _interopRequireDefault(require("./SimpleLongTextF
 var _RowExpandFormatter = _interopRequireDefault(require("./RowExpandFormatter"));
 var _RowExpandEditor = _interopRequireDefault(require("./RowExpandEditor"));
 var _RowExpand = _interopRequireDefault(require("./RowExpand"));
-var _RowExpandDialog = _interopRequireDefault(require("./RowExpandDialog"));
-var _RowExpandView = _interopRequireDefault(require("./RowExpandView"));
+var _pcExpand = _interopRequireDefault(require("./RowExpand/pc-expand"));
+var _mbExpand = _interopRequireDefault(require("./RowExpand/mb-expand"));
 var _CheckboxEditor = _interopRequireDefault(require("./CheckboxEditor"));
 var _CollaboratorEditor = _interopRequireDefault(require("./CollaboratorEditor"));
 var _DateEditor = _interopRequireDefault(require("./DateEditor"));

package/package.json

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

package/lib/RowExpandView/index.css

@@ -1,3 +0,0 @@
-.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;
-}