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

package/lib/RowExpandEditor/checkbox-editor/index.js

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

package/lib/RowExpandEditor/checkbox-editor/mb-editor/index.css

@@ -0,0 +1,6 @@
+.dtable-ui-mobile-row-expand-checkbox-editor-container {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+}

package/lib/RowExpandEditor/checkbox-editor/mb-editor/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _CheckboxEditor = _interopRequireDefault(require("../../../CheckboxEditor"));
+require("./index.css");
+class RowExpandMBCheckboxEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onChangeCheckboxValue = () => {
+      if (!this.editor) return;
+      const newValue = this.editor.getValue();
+      this.props.onCommit(newValue);
+    };
+    this.editor = null;
+  }
+  render() {
+    const {
+      column,
+      value,
+      className
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('dtable-ui-mobile-row-expand-checkbox-editor-container', className)
+    }, /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
+      ref: ref => this.editor = ref,
+      className: "dtable-ui-row-expand-checkbox-editor mt-0",
+      column: column,
+      value: value,
+      onCommit: this.onChangeCheckboxValue
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBCheckboxEditor;

package/lib/RowExpandEditor/{RowExpandCheckboxEditor/index.js → checkbox-editor/pc-editor.js}

@@ -8,8 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CheckboxEditor = _interopRequireDefault(require("../../CheckboxEditor"));
 var _constants = require("../../constants");
-require("./index.css");
-class RowExpandCheckboxEditor extends _react.default.Component {
+class RowExpandPCCheckboxEditor extends _react.default.Component {
   constructor() {
     super(...arguments);
     this.onChangeCheckboxValue = () => {
@@ -40,4 +39,4 @@ class RowExpandCheckboxEditor extends _react.default.Component {
     });
   }
 }
-var _default = exports.default = RowExpandCheckboxEditor;
+var _default = exports.default = RowExpandPCCheckboxEditor;

package/lib/RowExpandEditor/collaborator-editor/index.js

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

package/lib/RowExpandEditor/collaborator-editor/mb-editor/index.css

@@ -0,0 +1,9 @@
+.dtable-ui-mobile-row-expand-collaborators {
+  min-height: 50px;
+  padding: 1rem 0;
+}
+
+.dtable-ui-mobile-row-expand-collaborators .dtable-ui.collaborator-item {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}

package/lib/RowExpandEditor/collaborator-editor/mb-editor/index.js

@@ -0,0 +1,163 @@
+"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 _CollaboratorEditor = _interopRequireDefault(require("../../../CollaboratorEditor"));
+var _lang = require("../../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../../CollaboratorItem"));
+var _rightAngle = _interopRequireDefault(require("../../right-angle"));
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+require("./index.css");
+class RowExpandMBCollaboratorEditor extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.initCollaborators = props => {
+      const {
+        row,
+        column,
+        valueKey
+      } = props;
+      const emails = row[column[valueKey]] || [];
+      props.queryCollaborators && props.queryCollaborators(emails);
+    };
+    this.getCollaborators = () => {
+      const {
+        getCollaborators,
+        collaborators
+      } = this.props;
+      if (getCollaborators) return getCollaborators();
+      return collaborators || [];
+    };
+    this.updateCollaborators = () => {
+      const collaborators = this.getCollaborators();
+      let emailCollaboratorMap = {};
+      collaborators.forEach(c => {
+        emailCollaboratorMap[c.email] = c;
+      });
+      this.setState({
+        emailCollaboratorMap
+      });
+    };
+    this.toggleEditor = value => {
+      this.setState({
+        showEditor: value
+      });
+    };
+    this.openEditor = event => {
+      event.stopPropagation();
+      this.toggleEditor(true);
+    };
+    this.closeEditor = () => {
+      this.toggleEditor(false);
+    };
+    this.onChange = collaborator => {
+      let newValue = this.state.value.slice(0);
+      const collaboratorIndex = newValue.findIndex(email => collaborator.email === email);
+      if (collaboratorIndex === -1) {
+        newValue.push(collaborator.email);
+      } else {
+        newValue.splice(collaboratorIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.renderCollaborators = value => {
+      const {
+        emailCollaboratorMap
+      } = this.state;
+      if (Array.isArray(value) && value.length > 0) {
+        return value.map((email, index) => {
+          let collaborator = emailCollaboratorMap[email];
+          if (collaborator) {
+            const {
+              email
+            } = collaborator;
+            return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+              key: email,
+              collaborator: collaborator
+            });
+          }
+          collaborator = {
+            name: (0, _lang.getLocale)('Unknown'),
+            avatar_url: '',
+            email: index + ''
+          };
+          return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+            key: email,
+            className: "dtable-ui-unknown-collaborator",
+            collaborator: collaborator
+          });
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+        text: (0, _lang.getLocale)('Add_collaborator')
+      });
+    };
+    const {
+      row: _row,
+      column: _column,
+      valueKey: _valueKey
+    } = this.props;
+    this.state = {
+      menuPosition: null,
+      value: _row[_column[_valueKey]] || [],
+      showEditor: false,
+      emailCollaboratorMap: {}
+    };
+  }
+  componentDidMount() {
+    this.initCollaborators(this.props);
+    const eventBus = this.props.eventBus;
+    if (eventBus) {
+      this.unsubscribeCollaboratorsUpdated = eventBus.subscribe('collaborators-updated', this.updateCollaborators);
+    } else {
+      this.updateCollaborators();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.initCollaborators(nextProps);
+      this.setState({
+        value: row[column[valueKey]] || [],
+        showEditor: false
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.eventBus && this.unsubscribeCollaboratorsUpdated) {
+      this.unsubscribeCollaboratorsUpdated();
+    }
+  }
+  render() {
+    const {
+      collaborators,
+      column
+    } = this.props;
+    const {
+      showEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui dtable-ui-mobile-row-expand-collaborators position-relative",
+      onClick: this.openEditor
+    }, this.renderCollaborators(value), /*#__PURE__*/_react.default.createElement(_rightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_CollaboratorEditor.default, {
+      value: value,
+      column: column,
+      collaborators: collaborators,
+      onCommit: this.onChange,
+      onClose: this.closeEditor
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBCollaboratorEditor;

package/lib/RowExpandEditor/{RowExpandCollaboratorEditor → collaborator-editor/pc-editor}/index.css

@@ -1,4 +1,4 @@
-@import url('../../css/cell-editor.css');
+@import url('../../../css/cell-editor.css');
 
 .dtable-ui.dtable-ui-row-expand-select-editor .dtable-ui.collaborator-item {
   margin: 5px 10px 5px 0;

package/lib/RowExpandEditor/{RowExpandCollaboratorEditor → collaborator-editor/pc-editor}/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _CollaboratorEditor = _interopRequireDefault(require("../../CollaboratorEditor"));
-var _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+var _constants = require("../../../constants");
+var _CollaboratorEditor = _interopRequireDefault(require("../../../CollaboratorEditor"));
+var _lang = require("../../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../../CollaboratorItem"));
 require("./index.css");
-class RowExpandCollaboratorEditor extends _react.default.Component {
+class RowExpandPCCollaboratorEditor extends _react.default.Component {
   constructor(_props) {
     super(_props);
     this.initCollaborators = props => {
@@ -158,7 +158,6 @@ class RowExpandCollaboratorEditor extends _react.default.Component {
       menuPosition: null,
       value: _row[_column[_valueKey]] || [],
       showCollaboratorSelect: false,
-      isDataLoaded: false,
       emailCollaboratorMap: {}
     };
   }
@@ -229,4 +228,4 @@ class RowExpandCollaboratorEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandCollaboratorEditor;
+var _default = exports.default = RowExpandPCCollaboratorEditor;

package/lib/RowExpandEditor/constants.js

@@ -6,39 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CELL_EDITOR_MAP = void 0;
 var _dtableUtils = require("dtable-utils");
-var _RowExpandTextEditor = _interopRequireDefault(require("./RowExpandTextEditor"));
-var _RowExpandSingleSelectorEditor = _interopRequireDefault(require("./RowExpandSingleSelectorEditor"));
-var _RowExpandMultipleSelectEditor = _interopRequireDefault(require("./RowExpandMultipleSelectEditor"));
-var _RowExpandUrlEditor = _interopRequireDefault(require("./RowExpandUrlEditor"));
-var _RowExpandNumberEditor = _interopRequireDefault(require("./RowExpandNumberEditor"));
-var _RowExpandDateEditor = _interopRequireDefault(require("./RowExpandDateEditor"));
-var _RowExpandLongTextEditor = _interopRequireDefault(require("./RowExpandLongTextEditor"));
-var _RowExpandCheckboxEditor = _interopRequireDefault(require("./RowExpandCheckboxEditor"));
-var _RowExpandEmailEditor = _interopRequireDefault(require("./RowExpandEmailEditor"));
-var _RowExpandDurationEditor = _interopRequireDefault(require("./RowExpandDurationEditor"));
-var _RowExpandRateEditor = _interopRequireDefault(require("./RowExpandRateEditor"));
-var _RowExpandCollaboratorEditor = _interopRequireDefault(require("./RowExpandCollaboratorEditor"));
-var _RowExpandDepartmentEditor = _interopRequireDefault(require("./RowExpandDepartmentEditor"));
-var _RowExpandImageEditor = _interopRequireDefault(require("./RowExpandImageEditor"));
-var _RowExpandFileEditor = _interopRequireDefault(require("./RowExpandFileEditor"));
-var _RowExpandDigitalSignEditor = _interopRequireDefault(require("./RowExpandDigitalSignEditor"));
-var _RowExpandGeolocationEditor = _interopRequireDefault(require("./RowExpandGeolocationEditor"));
+var _textEditor = _interopRequireDefault(require("./text-editor"));
+var _singleSelectEditor = _interopRequireDefault(require("./single-select-editor"));
+var _multipleSelectEditor = _interopRequireDefault(require("./multiple-select-editor"));
+var _urlEditor = _interopRequireDefault(require("./url-editor"));
+var _numberEditor = _interopRequireDefault(require("./number-editor"));
+var _dateEditor = _interopRequireDefault(require("./date-editor"));
+var _longTextEditor = _interopRequireDefault(require("./long-text-editor"));
+var _checkboxEditor = _interopRequireDefault(require("./checkbox-editor"));
+var _emailEditor = _interopRequireDefault(require("./email-editor"));
+var _durationEditor = _interopRequireDefault(require("./duration-editor"));
+var _rateEditor = _interopRequireDefault(require("./rate-editor"));
+var _collaboratorEditor = _interopRequireDefault(require("./collaborator-editor"));
+var _departmentEditor = _interopRequireDefault(require("./department-editor"));
+var _imageEditor = _interopRequireDefault(require("./image-editor"));
+var _fileEditor = _interopRequireDefault(require("./file-editor"));
+var _digitalSignEditor = _interopRequireDefault(require("./digital-sign-editor"));
+var _geolocationEditor = _interopRequireDefault(require("./geolocation-editor"));
 const CELL_EDITOR_MAP = exports.CELL_EDITOR_MAP = {
-  [_dtableUtils.CellType.TEXT]: _RowExpandTextEditor.default,
-  [_dtableUtils.CellType.SINGLE_SELECT]: _RowExpandSingleSelectorEditor.default,
-  [_dtableUtils.CellType.MULTIPLE_SELECT]: _RowExpandMultipleSelectEditor.default,
-  [_dtableUtils.CellType.NUMBER]: _RowExpandNumberEditor.default,
-  [_dtableUtils.CellType.DATE]: _RowExpandDateEditor.default,
-  [_dtableUtils.CellType.URL]: _RowExpandUrlEditor.default,
-  [_dtableUtils.CellType.LONG_TEXT]: _RowExpandLongTextEditor.default,
-  [_dtableUtils.CellType.CHECKBOX]: _RowExpandCheckboxEditor.default,
-  [_dtableUtils.CellType.EMAIL]: _RowExpandEmailEditor.default,
-  [_dtableUtils.CellType.DURATION]: _RowExpandDurationEditor.default,
-  [_dtableUtils.CellType.RATE]: _RowExpandRateEditor.default,
-  [_dtableUtils.CellType.COLLABORATOR]: _RowExpandCollaboratorEditor.default,
-  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _RowExpandDepartmentEditor.default,
-  [_dtableUtils.CellType.IMAGE]: _RowExpandImageEditor.default,
-  [_dtableUtils.CellType.FILE]: _RowExpandFileEditor.default,
-  [_dtableUtils.CellType.DIGITAL_SIGN]: _RowExpandDigitalSignEditor.default,
-  [_dtableUtils.CellType.GEOLOCATION]: _RowExpandGeolocationEditor.default
+  [_dtableUtils.CellType.TEXT]: _textEditor.default,
+  [_dtableUtils.CellType.SINGLE_SELECT]: _singleSelectEditor.default,
+  [_dtableUtils.CellType.MULTIPLE_SELECT]: _multipleSelectEditor.default,
+  [_dtableUtils.CellType.NUMBER]: _numberEditor.default,
+  [_dtableUtils.CellType.DATE]: _dateEditor.default,
+  [_dtableUtils.CellType.URL]: _urlEditor.default,
+  [_dtableUtils.CellType.LONG_TEXT]: _longTextEditor.default,
+  [_dtableUtils.CellType.CHECKBOX]: _checkboxEditor.default,
+  [_dtableUtils.CellType.EMAIL]: _emailEditor.default,
+  [_dtableUtils.CellType.DURATION]: _durationEditor.default,
+  [_dtableUtils.CellType.RATE]: _rateEditor.default,
+  [_dtableUtils.CellType.COLLABORATOR]: _collaboratorEditor.default,
+  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _departmentEditor.default,
+  [_dtableUtils.CellType.IMAGE]: _imageEditor.default,
+  [_dtableUtils.CellType.FILE]: _fileEditor.default,
+  [_dtableUtils.CellType.DIGITAL_SIGN]: _digitalSignEditor.default,
+  [_dtableUtils.CellType.GEOLOCATION]: _geolocationEditor.default
 };

package/lib/RowExpandEditor/date-editor/index.js

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

package/lib/RowExpandEditor/date-editor/mb-editor.js

@@ -0,0 +1,82 @@
+"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 _dtableUtils = require("dtable-utils");
+var _DateEditor = _interopRequireDefault(require("../../DateEditor"));
+var _rightAngle = _interopRequireDefault(require("../right-angle"));
+var _columnUtils = require("../../utils/column-utils");
+class RowExpandMBDateEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.hideCalendar = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value
+      });
+    };
+    const {
+      column,
+      row,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]]
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    let {
+      column,
+      lang
+    } = this.props;
+    let {
+      value,
+      isShowEditor
+    } = this.state;
+    const format = (0, _columnUtils.getDateColumnFormat)(column);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50px',
+        lineHeight: '50px'
+      },
+      onClick: this.toggleEditor
+    }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''), /*#__PURE__*/_react.default.createElement(_rightAngle.default, null)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
+      value: value,
+      lang: lang,
+      column: column,
+      onCommit: this.onCommit,
+      hideCalendar: this.hideCalendar
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBDateEditor;

package/lib/RowExpandEditor/{RowExpandDateEditor/index.js → date-editor/pc-editor.js}

@@ -11,7 +11,7 @@ var _DateEditor = _interopRequireDefault(require("../../DateEditor"));
 var _utils = require("../../utils/utils");
 var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
-class RowExpandDateEditor extends _react.default.Component {
+class RowExpandPCDateEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = e => {
@@ -127,4 +127,4 @@ class RowExpandDateEditor extends _react.default.Component {
     }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''));
   }
 }
-var _default = exports.default = RowExpandDateEditor;
+var _default = exports.default = RowExpandPCDateEditor;

package/lib/RowExpandEditor/department-editor/index.js

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

package/lib/RowExpandEditor/department-editor/mb-editor.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _rightAngle = _interopRequireDefault(require("../right-angle"));
+var _addBtn = _interopRequireDefault(require("../add-btn"));
+var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../DepartmentSingleSelectEditor"));
+var _lang = require("../../lang");
+function RowExpandMBDepartmentEditor(_ref) {
+  let {
+    row,
+    column,
+    valueKey,
+    departments,
+    userDepartmentIdsMap,
+    onCommit
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setValue(row[column[valueKey]] || '');
+    setShowEditor(false);
+    // eslint-disable-next-line
+  }, [row]);
+  const openEditor = (0, _react.useCallback)(() => {
+    setShowEditor(true);
+  }, []);
+  const closeEditor = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
+  const onChange = (0, _react.useCallback)(newValue => {
+    if (newValue === value) return;
+    setValue(newValue);
+    onCommit && onCommit(newValue);
+  }, [value, onCommit]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui dtable-ui-mobile-row-expand-options-editor position-relative",
+    onClick: openEditor
+  }, value ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 50,
+      padding: '14px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  })) : /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+    text: (0, _lang.getLocale)('Choose_a_department')
+  }), /*#__PURE__*/_react.default.createElement(_rightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+    enableSelectRange: false,
+    column: column,
+    value: value,
+    onCommit: onChange,
+    userDepartmentIdsMap: userDepartmentIdsMap,
+    departments: departments,
+    onClose: closeEditor
+  }));
+}
+var _default = exports.default = RowExpandMBDepartmentEditor;