dtable-ui-component 6.0.25 → 6.0.26-beta

package/lib/DateEditor/index.js

@@ -8,8 +8,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
-var _pcDateEditorPopover = _interopRequireDefault(require("./pc-date-editor-popover"));
-var _mbDateEditorPopover = _interopRequireDefault(require("./mb-date-editor-popover"));
+var _large = _interopRequireDefault(require("./large"));
+var _sm = _interopRequireDefault(require("./sm"));
 require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
 require("./index.css");
@@ -58,47 +58,48 @@ class DateEditor extends _react.default.Component {
     });
   }
   render() {
-    if (!this.state.isDateInit) {
-      return null;
-    }
-    let {
+    if (!this.state.isDateInit) return null;
+    const {
       lang,
       column,
       className,
       isInModal,
-      firstDayOfWeek
+      firstDayOfWeek,
+      size,
+      hideCalendar
     } = this.props;
-    let {
+    const {
       newValue,
       dateFormat,
       showHourAndMinute
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: '(min-width: 768px)'
-    }, /*#__PURE__*/_react.default.createElement(_pcDateEditorPopover.default, {
-      className: className,
-      lang: lang,
-      isInModal: isInModal,
+    const props = {
+      lang,
       value: newValue,
-      dateFormat: dateFormat,
-      showHourAndMinute: showHourAndMinute,
+      dateFormat,
+      showHourAndMinute,
+      firstDayOfWeek,
+      className,
       onValueChanged: this.onValueChanged,
-      hideCalendar: this.props.hideCalendar,
-      firstDayOfWeek: firstDayOfWeek
-    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      onClose: hideCalendar
+    };
+    if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_large.default, Object.assign({}, props, {
+      isInModal: isInModal
+    }));
+    if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+      isReadOnly: this.props.isReadOnly,
+      column: column
+    }));
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: '(min-width: 768px)'
+    }, /*#__PURE__*/_react.default.createElement(_large.default, Object.assign({}, props, {
+      isInModal: isInModal
+    }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(max-width: 767.8px)'
-    }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
-      className: className,
+    }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
       isReadOnly: this.props.isReadOnly,
-      lang: lang,
-      value: newValue,
-      dateFormat: dateFormat,
-      showHourAndMinute: showHourAndMinute,
-      column: column,
-      onValueChanged: this.onValueChanged,
-      onClosePopover: this.props.hideCalendar,
-      firstDayOfWeek: firstDayOfWeek
-    })));
+      column: column
+    }))));
   }
 }
 DateEditor.defaultProps = {

package/lib/DateEditor/{pc-date-editor-popover.js → large.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 Large extends _react.default.Component {
   constructor(props) {
     super(props);
     // event trigger sequence: onOpenChange --> onChange
@@ -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 => {
@@ -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 = Large;

package/lib/DateEditor/sm/custom-rc-calendar.css

@@ -0,0 +1,118 @@
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-date {
+  width: 28px;
+  height: 30px;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 30px;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-date-panel {
+  width: 100%;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-selected-day .rc-calendar-date {
+  background-color: #FcEcD9;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-date:hover,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-year-panel-year:hover,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
+  background-color: #FcEcD9;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-selected-date .rc-calendar-date,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-selected-date .rc-calendar-date:hover,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
+  background-color: #f09f3f;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-next-year-btn:not([href]):not([tabindex]),
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-prev-year-btn:not([href]):not([tabindex]),
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-next-month-btn:not([href]):not([tabindex]),
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-prev-month-btn:not([href]):not([tabindex]) {
+  color: #999;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-next-year-btn:not([href]):not([tabindex]):hover,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-prev-year-btn:not([href]):not([tabindex]):hover,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-next-month-btn:not([href]):not([tabindex]):hover,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-prev-month-btn:not([href]):not([tabindex]):hover {
+  color: #666;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-today .rc-calendar-date {
+  border: none;
+  position: relative;  
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rc-calendar-today .rc-calendar-date::after {
+  content: '';
+  background: #f09f3f;
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  left: 45%;
+  bottom: 0%;
+  display: inline-block;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar .rdg-editor-container input.editor-main[readonly] {
+  background-color: #fff;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-time-picker {
+  z-index: 1;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-right-panel-body ul li.highlight {
+  margin: 0;
+  border: none;
+  background-color: #fff;
+  font-size: 12px;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar {
+  box-shadow: none;
+  border-radius: 0px;
+  border: 1px solid #e9e9e9;
+  border-left: none;
+  border-right: none;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-date {
+  font-size: 14px;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-date-panel {
+  width: 100%;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-body {
+  height: 22rem;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-table tr {
+  height: 3rem;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-prev-month-btn,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-next-month-btn,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-prev-year-btn,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-next-year-btn {
+  font-size: 30px;
+  width: 50px;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-header {
+  border-bottom: none;
+  margin-top: 0.5rem;
+}
+
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-year-select,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-month-select,
+.dtable-ui.mobile-dtable-ui-date-editor-picker .rc-calendar-day-select {
+  font-size: 16px;
+  padding: 5px;
+}

package/lib/DateEditor/sm/index.css

@@ -0,0 +1,40 @@
+@import url('./custom-rc-calendar.css');
+@import url('../../css/mb-cell-editor.css');
+
+.mobile-dtable-ui-date-editor .mobile-dtable-ui-date-editor-input {
+  display: flex;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.mobile-dtable-ui-date-editor .mobile-dtable-ui-date-editor-input .date-input {
+  flex: 1;
+  background-color: #fff;
+}
+
+.mobile-dtable-ui-date-editor .mobile-dtable-ui-date-editor-input .date-input .date-input-day {
+  background-color: #f5f5f5;
+  border: 1px solid #e9e9e9;
+  margin: 10px;
+  padding: 3px 5px;
+  border-radius: 3px;
+}
+
+.mobile-dtable-ui-date-editor .dtable-ui.mobile-dtable-ui-date-editor-picker {
+  display: block;
+  position: relative;
+  margin-top: 20px;
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+.mobile-dtable-ui-date-editor .mobile-dtable-ui-date-editor-clear {
+  padding: 10px 0;
+  border-bottom: 1px solid #e9e9e9;
+  text-align: center;
+  color: #d27053;
+  background-color: #fff;
+}
+
+.dtable-ui .am-picker-popup-header .am-picker-popup-item {
+  color: #E5A252;
+}

package/lib/DateEditor/{mb-date-editor-popover → sm}/index.js

@@ -6,15 +6,15 @@ 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 _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
-var _DatePicker = _interopRequireDefault(require("../../DatePicker"));
 var _lang = require("../../lang");
 var _editorUtils = require("../../utils/editor-utils");
-var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
 require("@seafile/seafile-calendar/assets/index.css");
 require("./index.css");
 class DateEditorPopover extends _react.default.PureComponent {
@@ -61,7 +61,7 @@ class DateEditorPopover extends _react.default.PureComponent {
       this.props.onValueChanged(datePickerValue.format(dateFormat));
     };
     this.closePopover = () => {
-      this.props.onClosePopover();
+      this.props.onClose();
     };
     this.deleteDate = () => {
       this.props.onValueChanged('');
@@ -77,16 +77,6 @@ class DateEditorPopover extends _react.default.PureComponent {
       });
       this.props.onValueChanged(value.format(dateFormat));
     };
-    this.onContainerClick = event => {
-      if (this.editorPopover && this.editorPopover.contains(event.target)) {
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-        return false;
-      }
-    };
-    this.setEditorPopover = editorPopover => {
-      this.editorPopover = editorPopover;
-    };
     this.getCalendarContainer = () => {
       return this.calendarContainerRef.current;
     };
@@ -179,25 +169,20 @@ class DateEditorPopover extends _react.default.PureComponent {
     const {
       datePickerValue
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorPopover,
-      className: "dtable-ui-mb-editor-popover mb-date-editor-popover",
-      onClick: this.onContainerClick
-    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
-      title: column.name,
-      leftContent: /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-return"
-      }),
-      rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
-      onLeftClick: this.props.onClosePopover,
-      onRightClick: this.props.onClosePopover
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mb-editor-body dtable-ui-mb-date-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-date-editor-input"
+    return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+      className: "mobile-dtable-ui-date-editor",
+      onClose: this.props.onClose,
+      onLeftClick: this.props.onClose,
+      onRightClick: this.props.onClose
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: '#f09f3f'
+      }
+    }, (0, _lang.getLocale)('Done')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-dtable-ui-date-editor-input"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input"
-    }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
       mode: "date",
       locale: (0, _editorUtils.initDateEditorLanguage)(lang),
       value: this.state.value,
@@ -206,7 +191,7 @@ class DateEditorPopover extends _react.default.PureComponent {
       className: "date-input-day"
     }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input"
-    }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
       mode: "time",
       locale: (0, _editorUtils.initDateEditorLanguage)(lang),
       value: this.state.value,
@@ -214,9 +199,9 @@ class DateEditorPopover extends _react.default.PureComponent {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input-day"
     }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui mb-date-editor-picker"
+      className: "dtable-ui mobile-dtable-ui-date-editor-picker"
     }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-date-editor-clear"
+      className: "mobile-dtable-ui-date-editor-clear"
     }, /*#__PURE__*/_react.default.createElement("div", {
       onClick: this.deleteDate,
       className: "clear-date"

package/lib/{Department-editor → DepartmentEditor}/constants.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DEPARTMENT_SELECT_RANGE_MAP", {
+  enumerable: true,
+  get: function () {
+    return _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP;
+  }
+});
 exports.DEPARTMENT_SELECT_RANGE_OPTIONS = void 0;
+var _dtableUtils = require("dtable-utils");
 const DEPARTMENT_SELECT_RANGE_OPTIONS = exports.DEPARTMENT_SELECT_RANGE_OPTIONS = [{
   name: 'Current_user_department',
   type: 'current_user_department'

package/lib/{Department-editor → DepartmentEditor}/department-multiple-select/index.css

@@ -42,7 +42,6 @@
 .departments-container.dtable-ui .expand {
   color: #b5b5b5;
   font-size: 12px;
-  transform: scale(0.8);
   cursor: pointer;
   margin-left: 0px !important;
 }
@@ -65,6 +64,10 @@
   align-items: center;
 }
 
+.departments-container.dtable-ui .department-item .department-item-fold-btn {
+  margin-right: 2px;
+}
+
 .departments-container.dtable-ui .department-item:hover {
   background: #f5f5f5;
   color: #212529;

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

@@ -100,10 +100,13 @@ function DepartmentMultipleSelect(props) {
       checked: inputChecked,
       style: inputStyle,
       onChange: () => {}
-    }), hasChild && !searchVal && /*#__PURE__*/_react.default.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", {
+    }), hasChild && !searchVal && /*#__PURE__*/_react.default.createElement("div", {
+      onClick: event => onExpand(event, id, isExpanded),
+      role: "button",
+      className: "department-item-fold-btn"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-font expand dtable-icon-down3 ".concat(isExpanded ? '' : 'rotate-270')
+    })), /*#__PURE__*/_react.default.createElement("span", {
       style: searchVal ? {} : nameStyle,
       title: name,
       className: "text-truncate"

package/lib/DepartmentEditor/index.js

@@ -0,0 +1,25 @@
+"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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const DepartmentEditor = _ref => {
+  let {
+    size,
+    ...props
+  } = _ref;
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, props);
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.default, props);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(min-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 767.8px)'
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
+var _default = exports.default = DepartmentEditor;

package/lib/{Department-editor → DepartmentEditor/lg}/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 _utils = require("../utils");
+var _lang = require("../../lang");
 require("./index.css");
 class DepartmentSingleSelect extends _react.Component {
   constructor(props) {
@@ -151,10 +151,13 @@ class DepartmentSingleSelect extends _react.Component {
         style: itemStyle
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "department-item-left-content d-flex align-items-center"
-      }, hasChild && /*#__PURE__*/_react.default.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", {
+      }, hasChild && /*#__PURE__*/_react.default.createElement("div", {
+        onClick: event => this.onExpand(event, id, isExpanded),
+        role: "button",
+        className: "department-item-fold-btn"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "dtable-font expand dtable-icon-down3 ".concat(isExpanded ? '' : 'rotate-270')
+      })), /*#__PURE__*/_react.default.createElement("span", {
         style: nameStyle,
         title: name,
         className: "text-truncate department-name"

package/lib/{Department-editor → DepartmentEditor/lg}/index.css

@@ -38,6 +38,10 @@
   margin-left: 4px;
 }
 
+.dtable-ui.department-editor-list .department-item-left-content .department-item-fold-btn {
+  margin-right: 2px;
+}
+
 .dtable-ui.department-editor-list .department-check-icon .dtable-icon-check-mark {
   font-size: 12px;
   color: #798d99;
@@ -64,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 → DepartmentEditor/lg}/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 Large 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 = Large;

package/lib/DepartmentEditor/sm/index.css

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