dtable-ui-component 6.0.26-beta → 6.0.26-beta2

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 onValueChanged = (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,
+    onValueChanged,
+    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/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

@@ -17,13 +17,9 @@ 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 {
+class Small extends _react.default.PureComponent {
   constructor(props) {
     super(props);
-    this.handleHistaryBack = e => {
-      e.preventDefault();
-      this.closePopover();
-    };
     this.handleDateChange = date => {
       let {
         dateFormat,
@@ -60,12 +56,9 @@ class DateEditorPopover extends _react.default.PureComponent {
       });
       this.props.onValueChanged(datePickerValue.format(dateFormat));
     };
-    this.closePopover = () => {
-      this.props.onClose();
-    };
     this.deleteDate = () => {
       this.props.onValueChanged('');
-      this.closePopover();
+      this.props.onClose();
     };
     this.onChange = value => {
       if (!value) return;
@@ -145,18 +138,10 @@ class DateEditorPopover extends _react.default.PureComponent {
       });
     };
     this.state = {
-      open: true,
       datePickerValue: props.value ? (0, _dayjs.default)(props.value) : (0, _dayjs.default)().clone()
     };
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
   }
-  componentDidMount() {
-    history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistaryBack, false);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistaryBack, false);
-  }
   render() {
     const {
       lang,
@@ -208,4 +193,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/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/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/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/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/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/package.json

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