dtable-ui-component 6.0.29-beta2 → 6.0.29-beta4

package/lib/DateEditor/{pc-date-editor-popover.js → pc-editor.js}

@@ -12,10 +12,10 @@ var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Pick
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _editorUtils = require("../utils/editor-utils");
 var _constants = require("../constants");
-require("@seafile/seafile-calendar/assets/index.css");
 var _lang = require("../lang");
+require("@seafile/seafile-calendar/assets/index.css");
 let now = (0, _dayjs.default)();
-class PCDateEditorPopover extends _react.default.Component {
+class PCDateEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     // event trigger sequence: onOpenChange --> onChange
@@ -28,10 +28,10 @@ class PCDateEditorPopover extends _react.default.Component {
         value: value,
         open: true // if value changed, don't close datePicker
       });
-      this.props.onValueChanged(value.format(dateFormat));
+      this.props.onCommit(value.format(dateFormat));
     };
     this.onBlur = () => {
-      this.props.onValueChanged(this.getValue());
+      this.props.onCommit(this.getValue());
     };
     this.getValue = () => {
       let {
@@ -55,7 +55,7 @@ class PCDateEditorPopover extends _react.default.Component {
         this.toggleCalendar(open);
       }
       if (isInModal && !open) {
-        this.props.hideCalendar && this.props.hideCalendar();
+        this.props.onClose && this.props.onClose();
       }
     };
     this.toggleCalendar = open => {
@@ -67,7 +67,7 @@ class PCDateEditorPopover extends _react.default.Component {
       this.setState({
         value: null
       });
-      this.props.onValueChanged(null);
+      this.props.onCommit(null);
     };
     this.onFocusDatePicker = () => {
       this.setState({
@@ -112,7 +112,7 @@ class PCDateEditorPopover extends _react.default.Component {
       const {
         isInModal
       } = this.props;
-      let onClickRightPanelTime = isInModal ? this.props.hideCalendar : this.closeEditor;
+      let onClickRightPanelTime = isInModal ? this.props.onClose : this.closeEditor;
       // we should change value and save it(async function), then close Editor.
       setTimeout(() => {
         onClickRightPanelTime && onClickRightPanelTime();
@@ -122,7 +122,7 @@ class PCDateEditorPopover extends _react.default.Component {
       if (e.keyCode === _constants.KeyCodes.Escape) {
         if (this.props.isInModal) {
           e.stopPropagation();
-          this.props.hideCalendar && this.props.hideCalendar();
+          this.props.onClose && this.props.onClose();
         }
       }
     };
@@ -261,4 +261,4 @@ class PCDateEditorPopover extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = PCDateEditorPopover;
+var _default = exports.default = PCDateEditor;

package/lib/{Department-editor/department-multiple-select → DepartmentMultipleSelectEditor}/index.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _utils = require("../utils");
-var _selectedDepartments = _interopRequireDefault(require("../selected-departments"));
-var _lang = require("../../lang");
+var _departments = require("../utils/departments");
+var _SelectedDepartments = _interopRequireDefault(require("../SelectedDepartments"));
+var _lang = require("../lang");
 require("./index.css");
 function DepartmentMultipleSelect(props) {
   const {
@@ -21,7 +21,7 @@ function DepartmentMultipleSelect(props) {
     departments: initialDepartments
   } = props;
   const [searchVal, setSearchVal] = (0, _react.useState)('');
-  const [departments, setDepartments] = (0, _react.useState)((0, _utils.getNormalizedDepartments)(initialDepartments));
+  const [departments, setDepartments] = (0, _react.useState)((0, _departments.getNormalizedDepartments)(initialDepartments));
   const departmentContainerRef = (0, _react.useRef)(null);
   const validDepartmentsRef = (0, _react.useRef)([]);
   (0, _react.useEffect)(() => {
@@ -51,7 +51,7 @@ function DepartmentMultipleSelect(props) {
   function onChangeSearch(event) {
     const newSearchValue = event.target.value;
     if (searchVal === newSearchValue) return;
-    validDepartmentsRef.current = (0, _utils.searchDepartments)(departments, newSearchValue);
+    validDepartmentsRef.current = (0, _departments.searchDepartments)(departments, newSearchValue);
     setSearchVal(newSearchValue);
   }
   function onClick(e) {
@@ -130,7 +130,7 @@ function DepartmentMultipleSelect(props) {
     }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
+    }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
       value: value,
       removeDepartment: onCommit,
       isShowRemoveIcon: true,

package/lib/DepartmentSingleSelectEditor/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const DepartmentSingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(min-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = DepartmentSingleSelectEditor;

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

@@ -0,0 +1,4 @@
+.dtable-ui-mobile-department-editor .dtable-ui-mobile-department-editor-department-item .dtable-radio {
+  margin-top: 2px;
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _DTableRadio = _interopRequireDefault(require("../../DTableRadio"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _departments = require("../../utils/departments");
+var _departments2 = require("../../constants/departments");
+var _lang = require("../../lang");
+require("./index.css");
+const Item = _list.default.Item;
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+const MBDepartmentSingleSelectEditor = _ref => {
+  let {
+    value: oldValue,
+    column,
+    isSupportMultiple = false,
+    isFilterEditor = false,
+    userDepartmentIdsMap = {},
+    departments: initialDepartments = [],
+    onCommit,
+    onClose
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(oldValue ? oldValue : isSupportMultiple ? [] : '');
+  const [departments, setDepartments] = (0, _react.useState)([]);
+  const [parentId, setParentId] = (0, _react.useState)('');
+  const [topParentIds, setTopParentIds] = (0, _react.useState)([]);
+  const initColumnData = (0, _react.useMemo)(() => {
+    const data = column.data || {};
+    const enableSelectRange = data.enable_select_range || false;
+    const selectedRange = data.selected_range || '';
+    const specificDepartments = data.specific_departments || [];
+    return {
+      enableSelectRange,
+      selectedRange,
+      specificDepartments
+    };
+  }, [column]);
+  const onSave = (0, _react.useCallback)(() => {
+    !isFilterEditor && onCommit && onCommit(value);
+    onClose && onClose();
+  }, [isFilterEditor, value, onCommit, onClose]);
+  const onDepartmentClick = (0, _react.useCallback)((event, department) => {
+    event.preventDefault();
+    const {
+      id,
+      hasChild
+    } = department;
+    if (event.target && event.target.className.indexOf('am-list-arrow') > -1) {
+      if (!hasChild) return;
+      setParentId(id);
+      return;
+    }
+    let newValue;
+    if (isSupportMultiple) {
+      newValue = value.slice(0);
+      const index = newValue.indexOf(id);
+      index === -1 ? newValue.push(id) : newValue.splice(index);
+    } else {
+      newValue = id === value ? '' : id;
+    }
+    if (isFilterEditor) {
+      onCommit && onCommit({
+        id
+      });
+    }
+    setValue(newValue);
+  }, [isSupportMultiple, isFilterEditor, value, onCommit]);
+  const onParentDepartmentClick = (0, _react.useCallback)((event, type) => {
+    event.preventDefault();
+    let newValue;
+    if (isSupportMultiple) {
+      newValue = value.slice(0);
+      const index = newValue.indexOf(type);
+      index === -1 ? newValue.push(type) : newValue.splice(index);
+    } else {
+      newValue = type === value ? '' : type;
+    }
+    if (isFilterEditor) {
+      onCommit && onCommit({
+        id: type
+      });
+    }
+    setValue(newValue);
+  }, [value, isFilterEditor, isSupportMultiple, onCommit]);
+  const onLeftClick = (0, _react.useCallback)(() => {
+    const parentDepartment = departments.find(item => item.id === parentId);
+    if (!parentDepartment) {
+      onClose && onClose();
+      return;
+    }
+    const {
+      enableSelectRange
+    } = initColumnData;
+    if (topParentIds.includes(parentId) && enableSelectRange) {
+      setParentId('');
+      return;
+    }
+    const upperLevelDepartmentParentId = parentDepartment.parent_id;
+    setParentId(upperLevelDepartmentParentId);
+  }, [initColumnData, departments, parentId, topParentIds, onClose]);
+  const renderLeftContent = (0, _react.useCallback)(() => {
+    const parentDepartment = departments.find(item => item.id === parentId);
+    if (!parentDepartment && !isFilterEditor) return (0, _lang.getLocale)('Cancel');
+    return /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-return"
+    });
+  }, [isFilterEditor, departments, parentId]);
+  const renderDepartments = (0, _react.useCallback)(() => {
+    const {
+      enableSelectRange
+    } = initColumnData;
+    let currentDepartments = [];
+    if (enableSelectRange && !parentId && !isFilterEditor) {
+      currentDepartments = departments.filter(department => topParentIds.includes(department.id));
+    } else {
+      currentDepartments = departments.filter(department => department.parent_id === parentId);
+    }
+    if (currentDepartments.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "d-flex justify-content-center seatable-tip-default h-100 w-100 align-items-center"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('No_departments_available')));
+    }
+    return /*#__PURE__*/_react.default.createElement(_list.default, {
+      className: "my-list dtable-ui-mobile-department-editor-departments",
+      renderHeader: () => (0, _lang.getLocale)('Select_department')
+    }, isFilterEditor && parentId === -1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _departments2.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+      const {
+        type,
+        name
+      } = option;
+      const isChecked = isSupportMultiple ? value.includes(type) : value === type;
+      return /*#__PURE__*/_react.default.createElement(Item, {
+        key: "department-range-item-".concat(index),
+        multipleLine: true,
+        onClick: event => onParentDepartmentClick(event, type),
+        className: "dtable-ui-mobile-department-editor-department-item"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "d-flex"
+      }, /*#__PURE__*/_react.default.createElement(_DTableRadio.default, {
+        isChecked: isChecked,
+        onCheckedChange: event => onParentDepartmentClick(event, type),
+        label: (0, _lang.getLocale)(name)
+      })));
+    })), currentDepartments.map((department, index) => {
+      const {
+        hasChild,
+        name,
+        id
+      } = department;
+      const isChecked = isSupportMultiple ? value.includes(id) : value === id;
+      return /*#__PURE__*/_react.default.createElement(Item, {
+        arrow: hasChild ? 'horizontal' : '',
+        key: "department-item-".concat(index),
+        multipleLine: true,
+        onClick: event => onDepartmentClick(event, department),
+        className: "dtable-ui-mobile-department-editor-department-item"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "d-flex"
+      }, /*#__PURE__*/_react.default.createElement(_DTableRadio.default, {
+        isChecked: isChecked,
+        onCheckedChange: event => onParentDepartmentClick(event, department),
+        label: name
+      })));
+    }));
+  }, [initColumnData, parentId, isFilterEditor, isSupportMultiple, departments, value, topParentIds, onParentDepartmentClick, onDepartmentClick]);
+  (0, _react.useEffect)(() => {
+    const {
+      enableSelectRange,
+      selectedRange,
+      specificDepartments
+    } = initColumnData;
+    if (enableSelectRange && !isFilterEditor) {
+      const {
+        current_user_department_ids = [],
+        current_user_department_and_sub_ids = []
+      } = userDepartmentIdsMap;
+      const {
+        departments: initialDepartments
+      } = window.app.state;
+      let targetDepartments = [];
+      let topParentIds = [];
+      let canExpand = true;
+      if (selectedRange === _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT) {
+        canExpand = false;
+        topParentIds = current_user_department_ids;
+        targetDepartments = initialDepartments.filter(department => current_user_department_ids.includes(department.id));
+      } else if (selectedRange === _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
+        const currentUserDepartments = initialDepartments.filter(department => current_user_department_ids.includes(department.id));
+        topParentIds = currentUserDepartments.filter(department => !current_user_department_ids.includes(department.parent_id)).map(department => department.id);
+        targetDepartments = initialDepartments.filter(department => current_user_department_and_sub_ids.includes(department.id));
+      } else {
+        canExpand = false;
+        topParentIds = specificDepartments;
+        targetDepartments = initialDepartments.filter(department => specificDepartments.includes(department.id));
+      }
+      const departments = (0, _departments.getNormalizedDepartments)(targetDepartments, canExpand);
+      setDepartments(departments);
+      setTopParentIds(topParentIds);
+      return;
+    }
+    const departments = (0, _departments.getNormalizedDepartments)(initialDepartments);
+    setDepartments(departments);
+    setParentId(-1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    className: "dtable-ui-mobile-department-editor",
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(Header, {
+    onLeftClick: onLeftClick,
+    onRightClick: onSave
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLeftContent()), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isFilterEditor ? null : /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#f09f3f'
+    }
+  }, (0, _lang.getLocale)('Submit')))), /*#__PURE__*/_react.default.createElement(Body, null, renderDepartments()));
+};
+var _default = exports.default = MBDepartmentSingleSelectEditor;

package/lib/{Department-editor → DepartmentSingleSelectEditor/pc-editor}/department-single-select.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
-var _Loading = _interopRequireDefault(require("../Loading"));
-var _utils = require("./utils");
-var _lang = require("../lang");
+var _Loading = _interopRequireDefault(require("../../Loading"));
+var _departments = require("../../utils/departments");
+var _lang = require("../../lang");
 require("./index.css");
 class DepartmentSingleSelect extends _react.Component {
   constructor(props) {
@@ -28,7 +28,7 @@ class DepartmentSingleSelect extends _react.Component {
       }
     };
     this.initDepartments = departments => {
-      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(departments || []);
+      const normalizedDepartments = (0, _departments.getNormalizedDepartments)(departments || []);
       this.validDepartments = normalizedDepartments;
       this.setState({
         departments: normalizedDepartments
@@ -56,7 +56,7 @@ class DepartmentSingleSelect extends _react.Component {
       } else {
         targetDepartments = departments.filter(department => specificDepartments.includes(department.id));
       }
-      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(targetDepartments);
+      const normalizedDepartments = (0, _departments.getNormalizedDepartments)(targetDepartments);
       _this.validDepartments = normalizedDepartments;
       _this.setState({
         departments: normalizedDepartments,
@@ -94,7 +94,7 @@ class DepartmentSingleSelect extends _react.Component {
       const {
         departments
       } = this.state;
-      this.validDepartments = (0, _utils.searchDepartments)(departments, newSearchValue);
+      this.validDepartments = (0, _departments.searchDepartments)(departments, newSearchValue);
       this.setState({
         searchVal: newSearchValue
       });

package/lib/{Department-editor → DepartmentSingleSelectEditor/pc-editor}/index.css

@@ -68,19 +68,24 @@
   color: #212529;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .expand {
+.dtable-ui.department-editor-list .editor-department-container .dtable-icon-down3 {
   color: #b5b5b5;
   font-size: 12px;
-  transform: scale(0.8);
+  transform: scale(0.8) rotate(-90deg);
+  
   cursor: pointer;
   display: inline-block;
   margin-left: 0px !important;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .expand:hover {
+.dtable-ui.department-editor-list .editor-department-container .dtable-icon-down3:hover {
   color: #555;
 }
 
+.dtable-ui.department-editor-list .editor-department-container .dtable-icon-down3.expand {
+  transform: scale(0.8);
+}
+
 .selected-departments.dtable-ui {
   background-color: #f6f6f6;
   padding: 5px;

package/lib/{Department-editor → DepartmentSingleSelectEditor/pc-editor}/index.js

@@ -7,23 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _DTablePopover = _interopRequireDefault(require("../DTablePopover"));
-var _constants = require("./constants");
+var _DTablePopover = _interopRequireDefault(require("../../DTablePopover"));
 var _departmentSingleSelect = _interopRequireDefault(require("./department-single-select"));
-var _lang = require("../lang");
 require("./index.css");
-class DepartmentSingleSelectEditor extends _react.Component {
+class PCDepartmentSingleSelectEditor extends _react.Component {
   constructor(props) {
     super(props);
     this.onCommit = value => {
       const {
-        onCommit,
-        column
+        onCommit
       } = this.props;
       this.setState({
         value
       }, () => {
-        this.isRowExpand ? onCommit(this.getValue(), column) : onCommit();
+        this.isRowExpand ? onCommit(value) : onCommit();
       });
     };
     this.getValue = () => {
@@ -31,28 +28,14 @@ class DepartmentSingleSelectEditor extends _react.Component {
       updated[this.props.column.key] = this.state.value;
       return updated;
     };
-    this.createSpecificDepartments = () => {
-      return _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map(option => {
-        const {
-          type,
-          name
-        } = option;
-        return {
-          value: type,
-          label: /*#__PURE__*/_react.default.createElement("span", {
-            className: "text-truncate department-name"
-          }, (0, _lang.getLocale)(name))
-        };
-      });
-    };
     const {
-      column: _column,
+      column,
       isInModal,
       value: _value,
       height
     } = props;
-    const editorWidth = _column.width > 300 ? _column.width : 300;
-    const data = _column.data || {};
+    const editorWidth = column.width > 300 ? column.width : 300;
+    const data = column.data || {};
     this.state = {
       value: _value || '',
       menuStyle: isInModal ? {} : {
@@ -103,4 +86,4 @@ class DepartmentSingleSelectEditor extends _react.Component {
     }, dom)) : dom;
   }
 }
-var _default = exports.default = DepartmentSingleSelectEditor;
+var _default = exports.default = PCDepartmentSingleSelectEditor;