dtable-ui-component 4.4.3-2 → 4.4.3-alpha1

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -1,22 +1,14 @@
-"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 _datePicker = _interopRequireDefault(require("antd-mobile/lib/date-picker"));
-var _react = _interopRequireDefault(require("react"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
-var SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
-var _lang = require("../../lang");
-var _editorUtils = require("../../utils/editor-utils");
-var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
-require("@seafile/seafile-calendar/assets/index.css");
-require("./index.css");
-class DateEditorPopover extends _react.default.PureComponent {
+import _DatePicker from "antd-mobile/lib/date-picker";
+import React from 'react';
+import dayjs from 'dayjs';
+import Calendar from '@seafile/seafile-calendar';
+import * as SeaDatePicker from '@seafile/seafile-calendar/lib/Picker';
+import { getLocale } from '../../lang';
+import { initDateEditorLanguage } from '../../utils/editor-utils';
+import MBEditorHeader from '../../MBEditorHeader';
+import '@seafile/seafile-calendar/assets/index.css';
+import './index.css';
+class DateEditorPopover extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleHistaryBack = e => {
@@ -28,18 +20,18 @@ class DateEditorPopover extends _react.default.PureComponent {
         dateFormat,
         showHourAndMinute
       } = this.props;
-      let newValue = (0, _dayjs.default)(date);
+      let newValue = dayjs(date);
       if (showHourAndMinute) {
         const {
           datePickerValue
         } = this.state;
         const HM = datePickerValue.format('HH:mm');
         const format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
-        const newDate = (0, _dayjs.default)(date).format(format) + ' ' + HM;
-        newValue = (0, _dayjs.default)(newDate);
+        const newDate = dayjs(date).format(format) + ' ' + HM;
+        newValue = dayjs(newDate);
       }
       this.setState({
-        datePickerValue: (0, _dayjs.default)(date)
+        datePickerValue: dayjs(date)
       });
       this.props.onValueChanged(newValue.format(dateFormat));
     };
@@ -52,8 +44,8 @@ class DateEditorPopover extends _react.default.PureComponent {
       } = this.props;
       const format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
       const YMD = datePickerValue.format(format);
-      const newDate = YMD + ' ' + (0, _dayjs.default)(time).format('HH:mm');
-      const newValue = (0, _dayjs.default)(newDate);
+      const newDate = YMD + ' ' + dayjs(time).format('HH:mm');
+      const newValue = dayjs(newDate);
       this.setState({
         datePickerValue: newValue
       });
@@ -94,12 +86,12 @@ class DateEditorPopover extends _react.default.PureComponent {
         dateFormat,
         lang
       } = this.props;
-      let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
-        locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      let defaultValue = dayjs().clone();
+      return /*#__PURE__*/React.createElement(Calendar, {
+        locale: initDateEditorLanguage(lang),
         format: dateFormat,
         defaultValue: defaultValue,
-        dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        dateInputPlaceholder: getLocale('Please_input'),
         showDateInput: false,
         focusablePanel: false,
         showToday: false,
@@ -118,7 +110,7 @@ class DateEditorPopover extends _react.default.PureComponent {
         datePickerValue
       } = this.state;
       let calendar = this.getCalender();
-      return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
+      return /*#__PURE__*/React.createElement(SeaDatePicker, {
         open: true,
         style: {
           width: '100%'
@@ -132,16 +124,16 @@ class DateEditorPopover extends _react.default.PureComponent {
           value
         } = _ref;
         value = value && value.format(dateFormat);
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/React.createElement("div", {
           tabIndex: "0",
           onFocus: this.onReadOnlyFocus
-        }, /*#__PURE__*/_react.default.createElement("input", {
-          placeholder: (0, _lang.getLocale)('Please_select'),
+        }, /*#__PURE__*/React.createElement("input", {
+          placeholder: getLocale('Please_select'),
           readOnly: true,
           tabIndex: "-1",
           className: "form-control",
           value: value || ''
-        }), /*#__PURE__*/_react.default.createElement("div", {
+        }), /*#__PURE__*/React.createElement("div", {
           ref: this.calendarContainerRef,
           style: {
             height: '22rem'
@@ -151,9 +143,9 @@ class DateEditorPopover extends _react.default.PureComponent {
     };
     this.state = {
       open: true,
-      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : (0, _dayjs.default)().clone()
+      datePickerValue: props.value ? dayjs(props.value) : dayjs().clone()
     };
-    this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    this.calendarContainerRef = React.createRef();
   }
   componentDidMount() {
     history.pushState(null, null, '#'); // eslint-disable-line
@@ -174,48 +166,48 @@ class DateEditorPopover extends _react.default.PureComponent {
     const {
       datePickerValue
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-date-editor-popover",
       onClick: this.onContainerClick
-    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+    }, /*#__PURE__*/React.createElement(MBEditorHeader, {
       title: column.name,
-      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+      leftContent: /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-return"
       }),
-      rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
+      rightContent: /*#__PURE__*/React.createElement("span", null, getLocale('Done')),
       onLeftClick: this.props.onClosePopover,
       onRightClick: this.props.onClosePopover
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui-mb-editor-body dtable-ui-mb-date-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "mb-date-editor-input"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "date-input"
-    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+    }, /*#__PURE__*/React.createElement(_DatePicker, {
       mode: "date",
-      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      locale: initDateEditorLanguage(lang),
       value: this.state.value,
       onChange: this.handleDateChange
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "date-input-day"
-    }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
+    }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/React.createElement("div", {
       className: "date-input"
-    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+    }, /*#__PURE__*/React.createElement(_DatePicker, {
       mode: "time",
-      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      locale: initDateEditorLanguage(lang),
       value: this.state.value,
       onChange: this.handleTimeChange
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "date-input-day"
-    }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
+    }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui mb-date-editor-picker"
-    }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
+    }, this.renderDataPicker()), /*#__PURE__*/React.createElement("div", {
       className: "mb-date-editor-clear"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       onClick: this.deleteDate,
       className: "clear-date"
-    }, (0, _lang.getLocale)('Clear')))));
+    }, getLocale('Clear')))));
   }
 }
-var _default = exports.default = DateEditorPopover;
+export default DateEditorPopover;

package/lib/DateEditor/pc-date-editor-popover.js

@@ -1,18 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
-var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
-var _editorUtils = require("../utils/editor-utils");
-require("@seafile/seafile-calendar/assets/index.css");
-var _lang = require("../lang");
-class PCDateEditorPopover extends _react.default.Component {
+import React from 'react';
+import dayjs from 'dayjs';
+import DatePicker from '@seafile/seafile-calendar/lib/Picker';
+import Calendar from '@seafile/seafile-calendar';
+import { initDateEditorLanguage } from '../utils/editor-utils';
+import '@seafile/seafile-calendar/assets/index.css';
+import { getLocale } from '../lang';
+class PCDateEditorPopover extends React.Component {
   constructor(props) {
     super(props);
     // event trigger sequence: onOpenChange --> onChange
@@ -56,16 +49,16 @@ class PCDateEditorPopover extends _react.default.Component {
         showHourAndMinute,
         lang
       } = this.props;
-      let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
-        locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      let defaultValue = dayjs().clone();
+      return /*#__PURE__*/React.createElement(Calendar, {
+        locale: initDateEditorLanguage(lang),
         style: {
           zIndex: 1001
         },
         format: dateFormat,
         defaultValue: defaultValue,
         showHourAndMinute: showHourAndMinute,
-        dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        dateInputPlaceholder: getLocale('Please_input'),
         showDateInput: true,
         focusablePanel: false,
         onClear: this.onClear
@@ -73,9 +66,9 @@ class PCDateEditorPopover extends _react.default.Component {
     };
     this.state = {
       open: true,
-      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : null
+      datePickerValue: props.value ? dayjs(props.value) : null
     };
-    this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    this.calendarContainerRef = React.createRef();
   }
   render() {
     let {
@@ -86,7 +79,7 @@ class PCDateEditorPopover extends _react.default.Component {
       datePickerValue
     } = this.state;
     const calendar = this.getCalender();
-    return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+    return /*#__PURE__*/React.createElement(DatePicker, {
       open: open,
       value: datePickerValue,
       animation: "slide-up",
@@ -102,21 +95,21 @@ class PCDateEditorPopover extends _react.default.Component {
         value
       } = _ref;
       value = value && value.format(dateFormat);
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         className: "dtable-ui-date-editor-container",
         tabIndex: "0",
         onFocus: this.onFocusDatePicker
-      }, /*#__PURE__*/_react.default.createElement("input", {
+      }, /*#__PURE__*/React.createElement("input", {
         readOnly: true,
         tabIndex: "-1",
         className: "form-control",
-        placeholder: (0, _lang.getLocale)('Please_select'),
+        placeholder: getLocale('Please_select'),
         value: value || '',
         onMouseDown: this.handleMouseDown
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         ref: this.calendarContainerRef
       }));
     });
   }
 }
-var _default = exports.default = PCDateEditorPopover;
+export default PCDateEditorPopover;

package/lib/DateFormatter/index.js

@@ -1,26 +1,19 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
-require("./index.css");
-class DateFormatter extends _react.default.Component {
+import React from 'react';
+import classnames from 'classnames';
+import { getDateDisplayString } from 'dtable-utils';
+import './index.css';
+class DateFormatter extends React.Component {
   render() {
     let {
       value: date,
       format,
       containerClassName
     } = this.props;
-    let classname = (0, _classnames.default)('dtable-ui cell-formatter-container date-formatter', containerClassName);
+    let classname = classnames('dtable-ui cell-formatter-container date-formatter', containerClassName);
     if (date !== '') {
-      date = (0, _dtableUtils.getDateDisplayString)(date, format);
+      date = getDateDisplayString(date, format);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: classname
     }, date);
   }
@@ -30,4 +23,4 @@ DateFormatter.defaultProps = {
   format: 'YYYY-MM-DD',
   containerClassName: ''
 };
-var _default = exports.default = DateFormatter;
+export default DateFormatter;

package/lib/Department-editor/constants.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEPARTMENT_SELECT_RANGE_OPTIONS = void 0;
-const DEPARTMENT_SELECT_RANGE_OPTIONS = exports.DEPARTMENT_SELECT_RANGE_OPTIONS = [{
+export const DEPARTMENT_SELECT_RANGE_OPTIONS = [{
   name: 'Current_user_department',
   type: 'current_user_department'
 }, {

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

@@ -1,16 +1,8 @@
-"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 _utils = require("../utils");
-var _selectedDepartments = _interopRequireDefault(require("../selected-departments"));
-var _lang = require("../../lang");
-require("./index.css");
+import React, { Fragment, useState, useEffect, useRef } from 'react';
+import { searchDepartments, getNormalizedDepartments } from '../utils';
+import SelectedDepartments from '../selected-departments';
+import { getLocale } from '../../lang';
+import './index.css';
 function DepartmentMultipleSelect(props) {
   const {
     value,
@@ -20,11 +12,11 @@ function DepartmentMultipleSelect(props) {
     renderUserDepartmentOptions,
     departments: initialDepartments
   } = props;
-  const [searchVal, setSearchVal] = (0, _react.useState)('');
-  const [departments, setDepartments] = (0, _react.useState)((0, _utils.getNormalizedDepartments)(initialDepartments));
-  const departmentContainerRef = (0, _react.useRef)(null);
-  const validDepartmentsRef = (0, _react.useRef)([]);
-  (0, _react.useEffect)(() => {
+  const [searchVal, setSearchVal] = useState('');
+  const [departments, setDepartments] = useState(getNormalizedDepartments(initialDepartments));
+  const departmentContainerRef = useRef(null);
+  const validDepartmentsRef = useRef([]);
+  useEffect(() => {
     if (departmentContainerRef.current) {
       resetContainerPosition();
     }
@@ -51,7 +43,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 = searchDepartments(departments, newSearchValue);
     setSearchVal(newSearchValue);
   }
   function onClick(e) {
@@ -89,21 +81,21 @@ function DepartmentMultipleSelect(props) {
       paddingLeft: hasChild ? '' : '16px'
     };
     const inputChecked = value.includes(id);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: id
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-item d-flex align-items-center",
       onClick: event => onSelectDepartment(event, id)
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       className: "vam department-select-input",
       checked: inputChecked,
       style: inputStyle,
       onChange: () => {}
-    }), hasChild && !searchVal && /*#__PURE__*/_react.default.createElement("span", {
+    }), hasChild && !searchVal && /*#__PURE__*/React.createElement("span", {
       className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
       onClick: event => onExpand(event, id, isExpanded)
-    }), /*#__PURE__*/_react.default.createElement("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       style: searchVal ? {} : nameStyle,
       title: name,
       className: "text-truncate"
@@ -119,33 +111,33 @@ function DepartmentMultipleSelect(props) {
     const subDepartments = departments.filter(department => department.parent_id !== -1);
     const topDepartment = departments.find(department => department.parent_id === -1);
     if (!topDepartment) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
       className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
-    }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
+    }, isShowSelectedDepartments && /*#__PURE__*/React.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
+    }, /*#__PURE__*/React.createElement(SelectedDepartments, {
       value: value,
       removeDepartment: onCommit,
       isShowRemoveIcon: true,
       departments: departments
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "search-departments"
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       className: "form-control",
       type: "text",
       autoFocus: true,
-      placeholder: (0, _lang.getLocale)('Find_a_department'),
+      placeholder: getLocale('Find_a_department'),
       value: searchVal,
       onChange: onChangeSearch,
       onClick: onClick
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "department-item-container"
     }, !searchVal && renderUserDepartmentOptions && renderUserDepartmentOptions(), validDepartmentsRef.current.length > 0 && searchVal && renderSearchedDepartments(), !searchVal && renderDepartment(topDepartment, subDepartments, level)));
   }
   return renderDepartments();
 }
-var _default = exports.default = DepartmentMultipleSelect;
+export default DepartmentMultipleSelect;

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

@@ -1,17 +1,9 @@
-"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 _dtableUtils = require("dtable-utils");
-var _Loading = _interopRequireDefault(require("../Loading"));
-var _utils = require("./utils");
-var _lang = require("../lang");
-class DepartmentSingleSelect extends _react.Component {
+import React, { Component, Fragment } from 'react';
+import { DEPARTMENT_SELECT_RANGE_MAP } from 'dtable-utils';
+import Loading from '../Loading';
+import { getNormalizedDepartments, searchDepartments } from './utils';
+import { getLocale } from '../lang';
+class DepartmentSingleSelect extends Component {
   constructor(props) {
     var _this;
     super(props);
@@ -26,7 +18,7 @@ class DepartmentSingleSelect extends _react.Component {
       }
     };
     this.initDepartments = departments => {
-      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(departments || []);
+      const normalizedDepartments = getNormalizedDepartments(departments || []);
       this.validDepartments = normalizedDepartments;
       this.setState({
         departments: normalizedDepartments
@@ -44,17 +36,17 @@ class DepartmentSingleSelect extends _react.Component {
       } = userDepartmentIdsMap || {};
       let targetDepartments = [];
       let topParentIds = [];
-      if (selectedRange === _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT) {
+      if (selectedRange === DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT) {
         topParentIds = current_user_department_ids;
         targetDepartments = departments.filter(department => current_user_department_ids.includes(department.id));
-      } else if (selectedRange === _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
+      } else if (selectedRange === DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
         const currentUserDepartments = departments.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 = departments.filter(department => current_user_department_and_sub_ids.includes(department.id));
       } else {
         targetDepartments = departments.filter(department => specificDepartments.includes(department.id));
       }
-      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(targetDepartments);
+      const normalizedDepartments = getNormalizedDepartments(targetDepartments);
       _this.validDepartments = normalizedDepartments;
       _this.setState({
         departments: normalizedDepartments,
@@ -92,7 +84,7 @@ class DepartmentSingleSelect extends _react.Component {
       const {
         departments
       } = this.state;
-      this.validDepartments = (0, _utils.searchDepartments)(departments, newSearchValue);
+      this.validDepartments = searchDepartments(departments, newSearchValue);
       this.setState({
         searchVal: newSearchValue
       });
@@ -141,24 +133,24 @@ class DepartmentSingleSelect extends _react.Component {
         paddingLeft: "".concat(newLevel * 15 + 10, "px")
       };
       const isChecked = value === id;
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      return /*#__PURE__*/React.createElement(Fragment, {
         key: id
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "dropdown-item department-item d-flex align-items-center",
         onClick: event => this.onSelectDepartment(event, id),
         style: itemStyle
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "department-item-left-content d-flex align-items-center"
-      }, hasChild && /*#__PURE__*/_react.default.createElement("span", {
+      }, hasChild && /*#__PURE__*/React.createElement("span", {
         className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
         onClick: event => this.onExpand(event, id, isExpanded)
-      }), /*#__PURE__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", {
         style: nameStyle,
         title: name,
         className: "text-truncate department-name"
-      }, name), isChecked && /*#__PURE__*/_react.default.createElement("span", {
+      }, name), isChecked && /*#__PURE__*/React.createElement("span", {
         className: "department-check-icon"
-      }, /*#__PURE__*/_react.default.createElement("i", {
+      }, /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-check-mark"
       })))), isExpanded && hasChild && this.renderSubDepartments(id, subDepartments, newLevel));
     };
@@ -168,13 +160,13 @@ class DepartmentSingleSelect extends _react.Component {
       } = this.state;
       const topDepartment = departments.find(department => department.parent_id === -1);
       const subDepartments = departments.filter(department => department.parent_id !== -1);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topDepartment ? this.renderDepartment(topDepartment, subDepartments, -1, true) : this.renderEmptyTip());
+      return /*#__PURE__*/React.createElement(React.Fragment, null, topDepartment ? this.renderDepartment(topDepartment, subDepartments, -1, true) : this.renderEmptyTip());
     };
     this.renderSpecificDepartments = () => {
       const {
         departments
       } = this.state;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.validDepartments.length === 0 && this.renderEmptyTip(), this.validDepartments.length > 0 && this.validDepartments.map(department => {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.validDepartments.length === 0 && this.renderEmptyTip(), this.validDepartments.length > 0 && this.validDepartments.map(department => {
         const value = {
           ...department,
           hasChild: false
@@ -189,16 +181,16 @@ class DepartmentSingleSelect extends _react.Component {
       } = this.state;
       const nextLevelDepartment = this.validDepartments.find(department => topParentIds.includes(department.parent_id));
       const hasNextLevel = !!nextLevelDepartment;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.validDepartments.length === 0 && this.renderEmptyTip(), this.validDepartments.length > 0 && this.validDepartments.map(department => {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.validDepartments.length === 0 && this.renderEmptyTip(), this.validDepartments.length > 0 && this.validDepartments.map(department => {
         let value = department;
         if (!topParentIds.includes(department.id)) return null;
         return this.renderDepartment(value, departments, -1, hasNextLevel);
       }));
     };
     this.renderEmptyTip = () => {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         className: "none-search-result d-flex justify-content-center"
-      }, (0, _lang.getLocale)('No_departments_available'));
+      }, getLocale('No_departments_available'));
     };
     this.renderMenuContent = () => {
       const {
@@ -212,12 +204,12 @@ class DepartmentSingleSelect extends _react.Component {
         selectedRange
       } = this.getSelectedRange();
       let menuContent = this.renderAllDepartments();
-      if (enableSelectRange && [_dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT, _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.SPECIFIC_DEPARTMENTS].includes(selectedRange) || searchVal) {
+      if (enableSelectRange && [DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT, DEPARTMENT_SELECT_RANGE_MAP.SPECIFIC_DEPARTMENTS].includes(selectedRange) || searchVal) {
         menuContent = this.renderSpecificDepartments();
-      } else if (enableSelectRange && selectedRange === _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
+      } else if (enableSelectRange && selectedRange === DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
         menuContent = this.renderCurrentDepartmentsAndSub();
       }
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "editor-department-container",
         ref: ref => this.departmentContainerRef = ref
       }, !searchVal && renderUserDepartmentOptions && renderUserDepartmentOptions(this.onSelectDepartment), menuContent);
@@ -247,25 +239,25 @@ class DepartmentSingleSelect extends _react.Component {
     }
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "dropdown-menu department-editor-list dtable-ui show m-0 p-0",
       style: this.props.menuStyle,
       ref: ref => this.departmentsRef = ref,
       onClick: this.onStopPropagation,
       onMouseDown: this.onStopPropagation
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "search-departments"
-    }, /*#__PURE__*/_react.default.createElement("input", {
+    }, /*#__PURE__*/React.createElement("input", {
       className: "form-control",
       type: "text",
       autoFocus: true,
-      placeholder: (0, _lang.getLocale)('Find_a_department'),
+      placeholder: getLocale('Find_a_department'),
       value: this.state.searchVal,
       onChange: this.onChangeSearch,
       onClick: this.onStopPropagation
-    })), this.state.isLoading ? /*#__PURE__*/_react.default.createElement("div", {
+    })), this.state.isLoading ? /*#__PURE__*/React.createElement("div", {
       className: "mt-4"
-    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : this.renderMenuContent());
+    }, /*#__PURE__*/React.createElement(Loading, null)) : this.renderMenuContent());
   }
 }
-var _default = exports.default = DepartmentSingleSelect;
+export default DepartmentSingleSelect;