dtable-ui-component 6.0.26-beta → 6.0.26-beta10

package/lib/CheckboxEditor/index.js

@@ -1,16 +1,17 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
 require("./index.css");
-const CheckboxEditor = _ref => {
+const CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     size,
     ...props
@@ -19,8 +20,12 @@ const CheckboxEditor = _ref => {
   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, {
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
-};
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = CheckboxEditor;

package/lib/CollaboratorEditor/index.js

@@ -1,16 +1,17 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
 require("./index.css");
-const CollaboratorEditor = _ref => {
+const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     value: oldValue,
     size,
@@ -26,11 +27,13 @@ const CollaboratorEditor = _ref => {
   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, Object.assign({}, props, {
-    value: value
+    value: value,
+    ref: ref
   }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: '(max-width: 767.8px)'
   }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
-    value: value
+    value: value,
+    ref: ref
   }))));
-};
+});
 var _default = exports.default = CollaboratorEditor;

package/lib/CollaboratorEditor/sm/index.js

@@ -43,6 +43,7 @@ class Small extends _react.default.Component {
       return collaborators.map(collaborator => {
         const isSelected = value.includes(collaborator.email);
         return /*#__PURE__*/_react.default.createElement(Option, {
+          key: collaborator.email,
           isSelected: isSelected,
           onChange: this.onChange.bind(this, collaborator)
         }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {

package/lib/DateEditor/index.js

@@ -1,110 +1,82 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _dtableUtils = require("dtable-utils");
 var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
-var _large = _interopRequireDefault(require("./large"));
+var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
 require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
 require("./index.css");
-class DateEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.getDateFormat = () => {
-      let {
-        column
-      } = this.props;
-      let defaultDateFormat = 'YYYY-MM-DD';
-      let dateFormat = column.data && column.data.format;
-      return dateFormat || defaultDateFormat;
-    };
-    this.onValueChanged = value => {
-      if (value !== this.state.newValue) {
-        this.setState({
-          newValue: value
-        });
-        this.onCommit(value);
-      }
-    };
-    this.onCommit = newValue => {
-      this.props.onCommit(newValue);
-    };
-    this.state = {
-      isDateInit: false,
-      newValue: '',
-      dateFormat: '',
-      showHourAndMinute: false,
-      defaultCalendarValue: null
-    };
-  }
-  componentDidMount() {
-    const {
-      value,
-      lang
-    } = this.props;
+const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    lang,
+    isReadOnly,
+    column,
+    className,
+    isInModal,
+    firstDayOfWeek,
+    size,
+    value: oldValue,
+    hideCalendar,
+    onCommit
+  } = _ref;
+  const [isDateInit, setDateInit] = (0, _react.useState)(false);
+  const [value, setValue] = (0, _react.useState)(oldValue || '');
+  const format = (0, _react.useMemo)(() => {
+    var _column$data;
+    return (column === null || column === void 0 ? void 0 : column.data) && (column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.format) || _dtableUtils.DEFAULT_DATE_FORMAT;
+  }, [column]);
+  const showHourAndMinute = (0, _react.useMemo)(() => format.indexOf('HH:mm') > -1, [format]);
+  const handelCommit = (0, _react.useCallback)(newValue => {
+    if (value !== newValue) {
+      setValue(newValue);
+      onCommit(newValue);
+    }
+  }, [value, onCommit]);
+  (0, _react.useEffect)(() => {
     _dayjs.default.locale(lang);
-    let dateFormat = this.getDateFormat();
-    this.setState({
-      isDateInit: true,
-      newValue: value,
-      dateFormat,
-      showHourAndMinute: dateFormat.indexOf('HH:mm') > -1
-    });
-  }
-  render() {
-    if (!this.state.isDateInit) return null;
-    const {
-      lang,
-      column,
-      className,
-      isInModal,
-      firstDayOfWeek,
-      size,
-      hideCalendar
-    } = this.props;
-    const {
-      newValue,
-      dateFormat,
-      showHourAndMinute
-    } = this.state;
-    const props = {
-      lang,
-      value: newValue,
-      dateFormat,
-      showHourAndMinute,
-      firstDayOfWeek,
-      className,
-      onValueChanged: this.onValueChanged,
-      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(_sm.default, Object.assign({}, props, {
-      isReadOnly: this.props.isReadOnly,
-      column: column
-    }))));
-  }
-}
-DateEditor.defaultProps = {
-  isReadOnly: false,
-  value: '',
-  lang: 'en'
-};
+    setDateInit(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!isDateInit) return null;
+  const props = {
+    lang,
+    value,
+    dateFormat: format,
+    showHourAndMinute,
+    firstDayOfWeek,
+    className,
+    onCommit: handelCommit,
+    onClose: hideCalendar
+  };
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    isInModal: isInModal,
+    ref: ref
+  }));
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    isReadOnly: isReadOnly,
+    column: column,
+    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(_lg.default, Object.assign({}, props, {
+    isInModal: isInModal,
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 767.8px)'
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    isReadOnly: isReadOnly,
+    column: column,
+    ref: ref
+  }))));
+});
 var _default = exports.default = DateEditor;

package/lib/DateEditor/{large.js → lg.js}

@@ -28,10 +28,10 @@ class Large 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 {
@@ -67,7 +67,7 @@ class Large extends _react.default.Component {
       this.setState({
         value: null
       });
-      this.props.onValueChanged(null);
+      this.props.onCommit(null);
     };
     this.onFocusDatePicker = () => {
       this.setState({

package/lib/DateEditor/sm/index.css

@@ -1,5 +1,4 @@
 @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;

package/lib/DateEditor/sm/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,90 +9,75 @@ var _datePicker = _interopRequireDefault(require("antd-mobile/lib/date-picker"))
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/zh-cn");
+require("dayjs/locale/en-gb");
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
-var SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
+var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _lang = require("../../lang");
 var _editorUtils = require("../../utils/editor-utils");
 var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
 require("@seafile/seafile-calendar/assets/index.css");
 require("./index.css");
-class DateEditorPopover extends _react.default.PureComponent {
+let now = (0, _dayjs.default)();
+class Small extends _react.default.PureComponent {
   constructor(props) {
     super(props);
-    this.handleHistaryBack = e => {
-      e.preventDefault();
-      this.closePopover();
-    };
     this.handleDateChange = date => {
-      let {
-        dateFormat,
-        showHourAndMinute
-      } = this.props;
-      let newValue = (0, _dayjs.default)(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);
+      if (this.showTime) {
+        const HM = (0, _dayjs.default)(this.state.time).format('HH:mm');
+        // In iOS, the time standard is ISO-8601, new Date("YYYY-MM-DD") will be wrong, new Date("YYYY/MM/DD") will be OK.
+        const newTime = (0, _dayjs.default)(date).format('YYYY/MM/DD') + ' ' + HM;
+        this.setState({
+          time: new Date(newTime)
+        });
+      } else {
+        this.setState({
+          time: date
+        });
       }
-      this.setState({
-        datePickerValue: (0, _dayjs.default)(date)
-      });
-      this.props.onValueChanged(newValue.format(dateFormat));
     };
     this.handleTimeChange = time => {
-      const {
-        datePickerValue
-      } = this.state;
-      const {
-        dateFormat
-      } = 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);
+      // In iOS, the time standard is ISO-8601, new Date("YYYY-MM-DD") will be wrong, new Date("YYYY/MM/DD") will be OK.
+      const YMD = (0, _dayjs.default)(this.state.time).format('YYYY/MM/DD');
+      const newTime = YMD + ' ' + (0, _dayjs.default)(time).format('HH:mm');
       this.setState({
-        datePickerValue: newValue
+        time: new Date(newTime)
       });
-      this.props.onValueChanged(datePickerValue.format(dateFormat));
     };
-    this.closePopover = () => {
+    this.onSave = () => {
+      const value = (0, _dayjs.default)(this.state.time).format(this.format);
+      this.props.onCommit(value);
       this.props.onClose();
     };
     this.deleteDate = () => {
-      this.props.onValueChanged('');
-      this.closePopover();
+      this.props.onCommit(null);
+      this.props.onClose();
+    };
+    this.getCalendarContainer = () => {
+      return this.calendarContainerRef.current;
     };
     this.onChange = value => {
       if (!value) return;
-      let {
-        dateFormat
-      } = this.props;
+      const newTime = (0, _dayjs.default)(value.format(this.format));
       this.setState({
-        datePickerValue: value
+        time: newTime
       });
-      this.props.onValueChanged(value.format(dateFormat));
     };
-    this.getCalendarContainer = () => {
-      return this.calendarContainerRef.current;
-    };
-    this.getCalender = () => {
-      let {
-        dateFormat,
+    this.renderCalender = () => {
+      const {
         lang,
         className,
         firstDayOfWeek
       } = this.props;
-      let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+      const {
+        time
+      } = this.state;
+      const calendar = /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
-        format: dateFormat,
-        defaultValue: defaultValue,
         dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        format: this.format,
+        defaultValue: this.defaultCalendarValue,
         showDateInput: false,
         focusablePanel: false,
         showToday: false,
@@ -104,38 +88,28 @@ class DateEditorPopover extends _react.default.PureComponent {
         },
         firstDayOfWeek: firstDayOfWeek
       });
-    };
-    this.renderDataPicker = () => {
-      let {
-        dateFormat
-      } = this.props;
-      let {
-        datePickerValue
-      } = this.state;
-      let calendar = this.getCalender();
-      return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
+      return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+        calendar: calendar,
+        value: time,
+        onChange: this.onChange,
+        getCalendarContainer: this.getCalendarContainer,
         open: true,
         style: {
           width: '100%'
-        },
-        calendar: calendar,
-        value: datePickerValue,
-        getCalendarContainer: this.getCalendarContainer,
-        onChange: this.onChange
+        }
       }, _ref => {
         let {
-          value
+          time
         } = _ref;
-        value = value && value.format(dateFormat);
         return /*#__PURE__*/_react.default.createElement("div", {
           tabIndex: "0",
           onFocus: this.onReadOnlyFocus
         }, /*#__PURE__*/_react.default.createElement("input", {
-          placeholder: (0, _lang.getLocale)('Please_select'),
+          placeholder: (0, _lang.getLocale)('please_select'),
           readOnly: true,
           tabIndex: "-1",
-          className: "form-control",
-          value: value || ''
+          className: "ant-calendar-picker-input ant-input form-control",
+          value: time ? (0, _dayjs.default)(time).format(this.getFormat()) : ''
         }), /*#__PURE__*/_react.default.createElement("div", {
           ref: this.calendarContainerRef,
           style: {
@@ -144,36 +118,51 @@ class DateEditorPopover extends _react.default.PureComponent {
         }));
       });
     };
+    const {
+      dateFormat,
+      showHourAndMinute
+    } = props;
     this.state = {
-      open: true,
-      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : (0, _dayjs.default)().clone()
+      time: null
     };
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    this.leftFormat = dateFormat ? dateFormat.indexOf(' ') === -1 ? dateFormat : dateFormat.slice(0, dateFormat.indexOf(' ')) : 'YYYY-MM-DD';
+    this.rightFormat = 'HH:mm';
+    this.showTime = showHourAndMinute;
+    this.format = showHourAndMinute ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
   }
   componentDidMount() {
-    history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistaryBack, false);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistaryBack, false);
+    let {
+      value,
+      lang
+    } = this.props;
+    const iszhcn = lang === 'zh-cn';
+    if (iszhcn) {
+      now = now.locale('zh-cn');
+    } else {
+      now = now.locale('en-gb');
+    }
+    if (!value) {
+      value = new Date(Date.now());
+    }
+    this.defaultCalendarValue = now.clone();
+    this.setState({
+      time: iszhcn ? (0, _dayjs.default)(value).locale('zh-cn') : (0, _dayjs.default)(value).locale('en-gb')
+    });
   }
   render() {
     const {
       lang,
-      column,
-      dateFormat,
-      showHourAndMinute
+      column
     } = this.props;
-    const leftFormat = dateFormat.split(' ')[0];
-    const rightFormat = dateFormat.split(' ')[1];
     const {
-      datePickerValue
+      time
     } = this.state;
     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
+      onRightClick: this.onSave
     }, /*#__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'
@@ -181,26 +170,36 @@ class DateEditorPopover extends _react.default.PureComponent {
     }, (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"
+      className: "date-input",
+      style: this.showTime ? {
+        width: '50%'
+      } : {
+        width: '100%'
+      }
     }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
       mode: "date",
+      minDate: _editorUtils.minDate,
+      maxDate: _editorUtils.maxDate,
       locale: (0, _editorUtils.initDateEditorLanguage)(lang),
-      value: this.state.value,
+      value: null,
       onChange: this.handleDateChange
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input-day"
-    }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
-      className: "date-input"
+    }, (0, _dayjs.default)(time).format(this.leftFormat)))), this.showTime && /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input",
+      style: {
+        width: '50%'
+      }
     }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
       mode: "time",
       locale: (0, _editorUtils.initDateEditorLanguage)(lang),
-      value: this.state.value,
+      value: null,
       onChange: this.handleTimeChange
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input-day"
-    }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _dayjs.default)(time).format(this.rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui mobile-dtable-ui-date-editor-picker"
-    }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
+    }, this.renderCalender()), /*#__PURE__*/_react.default.createElement("div", {
       className: "mobile-dtable-ui-date-editor-clear"
     }, /*#__PURE__*/_react.default.createElement("div", {
       onClick: this.deleteDate,
@@ -208,4 +207,4 @@ class DateEditorPopover extends _react.default.PureComponent {
     }, (0, _lang.getLocale)('Clear')))));
   }
 }
-var _default = exports.default = DateEditorPopover;
+var _default = exports.default = Small;

package/lib/DepartmentEditor/index.js

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

package/lib/DepartmentEditor/sm/index.js

@@ -124,7 +124,7 @@ const Small = _ref => {
     }
     if (currentDepartments.length === 0) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "empty-department-list d-flex justify-content-center"
+        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, {
@@ -215,6 +215,10 @@ const Small = _ref => {
     onLeftClick: onLeftClick,
     onRightClick: onSave,
     onClose: onClose
-  }, /*#__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 : (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderDepartments()));
+  }, /*#__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(_react.default.Fragment, null, renderDepartments()));
 };
 var _default = exports.default = Small;

package/lib/DigitalSignEditor/index.js

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

package/lib/FileEditor/files-previewer/sm/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../../../utils/utils");
 var _lang = require("../../../lang");
 var _DTableCommonAddTool = _interopRequireDefault(require("../../../DTableCommonAddTool"));
@@ -36,9 +37,13 @@ class Small extends _react.default.Component {
       getDownLoadFiles
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer mobile-dtable-ui-file-editor-previewer"
+      className: (0, _classnames.default)('dtable-ui-file-editor-previewer mobile-dtable-ui-file-editor-previewer', {
+        'mt-0': value.length === 0
+      })
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-wrapper"
+      className: (0, _classnames.default)('dtable-ui-file-editor-previewer-wrapper', {
+        'd-one': value.length === 0
+      })
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-file-editor-previewer-content"
     }, value.length > 0 && value.map((fileItem, index) => {

package/lib/FileEditor/index.js

@@ -1,26 +1,35 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
 require("./index.css");
-const FileEditor = _ref => {
+const FileEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, 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);
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.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(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
-};
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = FileEditor;

package/lib/GeolocationEditor/index.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
-const GeolocationEditor = _ref => {
+const GeolocationEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     size,
     config: oldConfig,
@@ -66,20 +66,32 @@ const GeolocationEditor = _ref => {
       return data;
     });
   }, [config]);
-  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, props);
-  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.default, props);
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    config: config,
+    getLocationData: getLocationData,
+    getCountryData: getCountryData,
+    ref: ref
+  }));
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    config: config,
+    getLocationData: getLocationData,
+    getCountryData: getCountryData,
+    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(_lg.default, Object.assign({}, props, {
     config: config,
     getLocationData: getLocationData,
-    getCountryData: getCountryData
+    getCountryData: getCountryData,
+    ref: ref
   }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: "(max-width: 768px)"
   }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
     config: config,
     getLocationData: getLocationData,
-    getCountryData: getCountryData
+    getCountryData: getCountryData,
+    ref: ref
   }))));
-};
+});
 var _default = exports.default = GeolocationEditor;

package/lib/GeolocationEditor/sm/country-editor.js

@@ -48,7 +48,11 @@ const CountryEditor = _ref => {
     onLeftClick: onToggle,
     onRightClick: onSubmit,
     onClose: onToggle
-  }, /*#__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(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mobile-dtable-ui-row-expand-subtitle"
   }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
     className: "mobile-dtable-ui-geolocation-editor-picker",

package/lib/GeolocationEditor/sm/location-editor.js

@@ -64,7 +64,11 @@ const LocationEditor = _ref => {
     onLeftClick: onToggle,
     onRightClick: onSubmit,
     onToggle: onToggle
-  }, /*#__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(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mobile-dtable-ui-row-expand-subtitle"
   }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
     className: "mobile-dtable-ui-geolocation-editor-picker",

package/lib/GeolocationEditor/sm/province-city-editor.js

@@ -46,7 +46,11 @@ const ProvinceCityEditor = _ref => {
     onLeftClick: onToggle,
     onRightClick: onSubmit,
     onToggle: onToggle
-  }, /*#__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(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mobile-dtable-ui-row-expand-subtitle"
   }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
     className: "mobile-dtable-ui-geolocation-editor-picker",

package/lib/GeolocationEditor/sm/province-editor.js

@@ -45,7 +45,11 @@ const ProvinceEditor = _ref => {
     onLeftClick: onToggle,
     onRightClick: onSubmit,
     onClose: onToggle
-  }, /*#__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(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mobile-dtable-ui-row-expand-subtitle"
   }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
     className: "mobile-dtable-ui-geolocation-editor-picker",

package/lib/ImageEditor/images-previewer/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
 var _imagePreview = _interopRequireDefault(require("./image-preview"));
 var _DTableCommonAddTool = _interopRequireDefault(require("../../DTableCommonAddTool"));
@@ -105,9 +106,13 @@ class ImagesPreviewer extends _react.default.Component {
       value
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-previewer-container"
+      className: (0, _classnames.default)('dtable-ui-image-previewer-container', {
+        'mt-0': value.length === 0 && _constants.isMobile
+      })
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-previewer-wrapper ".concat(value.length === 0 && _constants.isMobile ? 'd-none' : '')
+      className: (0, _classnames.default)('dtable-ui-image-previewer-wrapper', {
+        'd-none': value.length === 0 && _constants.isMobile
+      })
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-image-previewer-content"
     }, value.length > 0 && value.map((imageItemUrl, index) => {

package/lib/ImageEditor/index.js

@@ -1,26 +1,35 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
 require("./index.css");
-const ImageEditor = _ref => {
+const ImageEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, 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);
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.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(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
     query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
-};
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = ImageEditor;

package/lib/MultipleSelectEditor/index.js

@@ -1,20 +1,22 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _selectEditor = _interopRequireDefault(require("../select-editor"));
-const MultipleSelectEditor = _ref => {
+const MultipleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     value: oldValue,
     ...props
   } = _ref;
   const value = oldValue ? Array.isArray(oldValue) ? oldValue : [oldValue] : [];
   return /*#__PURE__*/_react.default.createElement(_selectEditor.default, Object.assign({}, props, {
-    value: value
+    value: value,
+    ref: ref
   }));
-};
+});
 var _default = exports.default = MultipleSelectEditor;

package/lib/RowExpandEditor/RowExpandDateEditor/sm.js

@@ -55,7 +55,6 @@ class Small extends _react.default.Component {
   render() {
     let {
       column,
-      isInModal,
       lang
     } = this.props;
     let {
@@ -72,7 +71,6 @@ class Small extends _react.default.Component {
       },
       onClick: this.toggleEditor
     }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
-      isInModal: isInModal,
       value: value,
       lang: lang,
       column: column,

package/lib/RowExpandEditor/RowExpandLongTextEditor/sm/index.js

@@ -79,7 +79,7 @@ class Small extends _react.default.Component {
     }) : /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
       className: "py-4",
       onClick: this.openEditor,
-      text: (0, _lang.getLocale)('Edit_text')
+      text: (0, _lang.getLocale)('Edit_long_text')
     }), isShowEditor && /*#__PURE__*/_react.default.createElement(_editor.default, {
       onChange: this.onCommit,
       value: innerHtml,

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/sm/index.js

@@ -96,7 +96,7 @@ class Small extends _react.default.Component {
         }));
       }
       if (displayOptions.length === 0) return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-        text: (0, _lang.getLocale)('Select_options')
+        text: (0, _lang.getLocale)('Select_option(s)')
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {

package/lib/RowExpandEditor/RowExpandSingleSelectorEditor/sm/index.js

@@ -83,7 +83,7 @@ class Small extends _react.default.Component {
       }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
         option: option
       })) : /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-        text: (0, _lang.getLocale)('Select_option')
+        text: (0, _lang.getLocale)('Select_an_option')
       }));
     };
     this.state = {

package/lib/SingleSelectEditor/index.js

@@ -1,20 +1,22 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _selectEditor = _interopRequireDefault(require("../select-editor"));
-const SingleSelectEditor = _ref => {
+const SingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     value: oldValue,
     ...props
   } = _ref;
   const value = oldValue ? [oldValue] : [];
   return /*#__PURE__*/_react.default.createElement(_selectEditor.default, Object.assign({}, props, {
-    value: value
+    value: value,
+    ref: ref
   }));
-};
+});
 var _default = exports.default = SingleSelectEditor;

package/lib/locales/de.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "Als erledigt markieren",
   "No_comment_yet": "Es sind keine Kommentare vorhanden.",
   "Add_comment": "Kommentar hinzufügen",
-  "Add_participants": "Teilnehmer hinzufügen"
+  "Add_participants": "Teilnehmer hinzufügen",
+  "Edit_long_text": "Langtext bearbeiten",
+  "Choose_a_department": "Bereich wählen"
 }

package/lib/locales/en.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "Mark as resolved",
   "No_comment_yet": "No comment yet",
   "Add_comment": "Add comment",
-  "Add_participants": "Add participants"
+  "Add_participants": "Add participants",
+  "Edit_long_text": "Edit long text",
+  "Choose_a_department": "Choose a department"
 }

package/lib/locales/es.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "Marcar como resuelto",
   "No_comment_yet": "No comment yet",
   "Add_comment": "Añadir comentario",
-  "Add_participants": "Añadir participantes"
+  "Add_participants": "Añadir participantes",
+  "Edit_long_text": "Edit long text",
+  "Choose_a_department": "Choose a department"
 }

package/lib/locales/fr.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "Marquer comme résolu",
   "No_comment_yet": "Aucun commentaire n'est disponible.",
   "Add_comment": "Ajouter un commentaire",
-  "Add_participants": "Ajouter des participants"
+  "Add_participants": "Ajouter des participants",
+  "Edit_long_text": "Modifier le texte long",
+  "Choose_a_department": "Sélectionner un département"
 }

package/lib/locales/pt.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "Marca conforme resolvido",
   "No_comment_yet": "No comment yet",
   "Add_comment": "Adicionar comentário",
-  "Add_participants": "Adicione participantes"
+  "Add_participants": "Adicione participantes",
+  "Edit_long_text": "Editar texto longo",
+  "Choose_a_department": "Choose a department"
 }

package/lib/locales/ru.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "Пометить как разрешенный",
   "No_comment_yet": "Пока без комментариев",
   "Add_comment": "Добавить комментарий",
-  "Add_participants": "Добавить участников"
+  "Add_participants": "Добавить участников",
+  "Edit_long_text": "Редактировать длинный текст",
+  "Choose_a_department": "Выберите отдел"
 }

package/lib/locales/zh-CN.json

@@ -163,5 +163,7 @@
   "Mark_as_resolved": "标记为已解决",
   "No_comment_yet": "暂无评论",
   "Add_comment": "增加评论",
-  "Add_participants": "添加参与人"
+  "Add_participants": "添加参与人",
+  "Edit_long_text": "编辑长文本",
+  "Choose_a_department": "选择一个部门"
 }

package/lib/select-editor/index.js

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

package/lib/select-editor/sm/index.js

@@ -58,6 +58,7 @@ class Small extends _react.default.Component {
       return options.map(option => {
         const isSelected = value.includes(option[valueKey]);
         return /*#__PURE__*/_react.default.createElement(Option, {
+          key: option[valueKey],
           isSelected: isSelected,
           onChange: this.onChange.bind(this, option)
         }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {

package/lib/utils/editor-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
+exports.minDate = exports.maxDate = exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
 const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
 const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
 const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
@@ -66,4 +66,8 @@ exports.getSelectOptionItem = getSelectOptionItem;
 const getTrimmedString = value => {
   return typeof value === 'string' ? value.trim() : '';
 };
-exports.getTrimmedString = getTrimmedString;
+
+// min date and max date for mobile date picker
+exports.getTrimmedString = getTrimmedString;
+const minDate = exports.minDate = new Date('1900/01/01');
+const maxDate = exports.maxDate = new Date('2100/12/31');

package/package.json

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