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

package/lib/RowExpandEditor/single-select-editor/mb-editor/index.js

@@ -0,0 +1,134 @@
+"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 _SingleSelectEditor = _interopRequireDefault(require("../../../SingleSelectEditor"));
+var _SelectItem = _interopRequireDefault(require("../../../SelectItem"));
+var _lang = require("../../../lang");
+var _rightAngle = _interopRequireDefault(require("../../right-angle"));
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
+var _constants = require("../../../constants");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+require("./index.css");
+class RowExpandMBSingleSelectEditor extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.getOptions = props => {
+      const {
+        column,
+        row,
+        columns
+      } = props;
+      const options = (0, _dtableUtils.getColumnOptions)(column);
+      const {
+        data
+      } = column;
+      const {
+        cascade_column_key,
+        cascade_settings
+      } = data || {};
+      if (cascade_column_key && Array.isArray(columns)) {
+        const cascadeColumn = columns.find(c => c.key === cascade_column_key);
+        if (cascadeColumn) {
+          const cascadeColumnValue = row[cascade_column_key];
+          if (!cascadeColumnValue) return [];
+          const cascadeSetting = cascade_settings[cascadeColumnValue];
+          if (!cascadeSetting || !Array.isArray(cascadeSetting) || cascadeSetting.length === 0) return [];
+          return options.filter(option => cascadeSetting.includes(option.id));
+        }
+      }
+      return options;
+    };
+    this.toggleEditor = value => {
+      this.setState({
+        showEditor: value
+      });
+    };
+    this.openEditor = event => {
+      event.stopPropagation();
+      this.toggleEditor(true);
+    };
+    this.closeEditor = () => {
+      this.toggleEditor(false);
+    };
+    this.onChange = option => {
+      let newValue = option[this.key];
+      if (this.state.value === newValue) newValue = null;
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+      this.toggleEditor(false);
+    };
+    this.renderOption = () => {
+      const {
+        value
+      } = this.state;
+      let option = this.options.find(o => o[this.key] === value);
+      option = {
+        name: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS),
+        color: _constants.DELETED_OPTION_BACKGROUND_COLOR,
+        ...option
+      };
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value ? /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          height: 50,
+          padding: '10px 0'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+        option: option
+      })) : /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+        text: (0, _lang.getLocale)('Select_an_option')
+      }));
+    };
+    this.state = {
+      value: _props.value,
+      isShowEditor: false
+    };
+    this.key = _props.valueKey === 'name' ? 'name' : 'id';
+    this.options = this.getOptions(_props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      value,
+      column
+    } = nextProps;
+    if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
+      this.options = this.getOptions(nextProps);
+      this.setState({
+        value,
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      isSupportNewOption,
+      onAddNewOption
+    } = 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-options-editor position-relative",
+      onClick: this.openEditor
+    }, this.renderOption(), /*#__PURE__*/_react.default.createElement(_rightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
+      value: value,
+      column: column,
+      valueKey: this.key,
+      options: this.options,
+      onCommit: this.onChange,
+      onClose: this.closeEditor,
+      isSupportNewOption: isSupportNewOption,
+      onAddNewOption: onAddNewOption
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBSingleSelectEditor;

package/lib/RowExpandEditor/{RowExpandSingleSelectorEditor → single-select-editor/pc-editor}/index.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _dtableUtils = require("dtable-utils");
-var _constants = require("../../constants");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SingleSelectEditor = _interopRequireDefault(require("../../SingleSelectEditor"));
-var _lang = require("../../lang");
-var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
+var _constants = require("../../../constants");
+var _SingleSelectEditor = _interopRequireDefault(require("../../../SingleSelectEditor"));
+var _lang = require("../../../lang");
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
 require("./index.css");
-class RowExpandSingleSelectEditor extends _react.default.Component {
+class RowExpandPCSingleSelectEditor extends _react.default.Component {
   constructor(_props) {
     super(_props);
     this.getOptions = props => {
@@ -43,15 +43,15 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
       return options;
     };
     this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showSelectPopover) {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
         this.setState({
-          showSelectPopover: true
+          isShowEditor: true
         });
       }
     };
     this.toggleSingleSelect = value => {
       this.setState({
-        showSelectPopover: value
+        isShowEditor: value
       }, () => {
         var _this$selectRef;
         if (value) return;
@@ -64,7 +64,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     };
     this.hideDropDownMenu = event => {
       if (!event.target) return;
-      if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
+      if (!this.ref.contains(event.target) && this.state.isShowEditor) {
         const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
         if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
         this.toggleSingleSelect(false);
@@ -134,7 +134,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     };
     this.state = {
       value: _props.value,
-      showSelectPopover: false
+      isShowEditor: false
     };
     this.key = _props.valueKey === 'name' ? 'name' : 'id';
     this.options = this.getOptions(_props);
@@ -154,16 +154,16 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
       this.options = this.getOptions(nextProps);
       this.setState({
         value,
-        showSelectPopover: false
+        isShowEditor: false
       });
     }
   }
   componentDidUpdate(prevProps, prevState) {
-    if (this.state.showSelectPopover !== prevState.showSelectPopover) {
-      if (this.state.showSelectPopover === true && this.props.onEditorOpen) {
+    if (this.state.isShowEditor !== prevState.isShowEditor) {
+      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
         this.props.onEditorOpen();
       }
-      if (this.state.showSelectPopover === false && this.props.onEditorClose) {
+      if (this.state.isShowEditor === false && this.props.onEditorClose) {
         this.props.onEditorClose();
       }
     }
@@ -180,7 +180,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
       classNamePrefix
     } = this.props;
     const {
-      showSelectPopover,
+      isShowEditor,
       value
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -188,7 +188,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
       ref: ref => this.ref = ref
     }, this.renderOption(), /*#__PURE__*/_react.default.createElement("span", {
       ref: ref => this.targetRef = ref
-    }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
+    }), isShowEditor && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
       isInModal: true,
       options: this.options,
       column: column,
@@ -203,4 +203,4 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandSingleSelectEditor;
+var _default = exports.default = RowExpandPCSingleSelectEditor;

package/lib/RowExpandEditor/text-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 RowExpandTextEditor = /*#__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 = RowExpandTextEditor;

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

@@ -0,0 +1,14 @@
+.dtable-ui-mobile-row-expand-input-editor-container {
+  height: 50px;
+  line-height: 50px;
+}
+
+.dtable-ui-mobile-row-expand-input-editor-container .form-control {
+  border: none;
+  padding: 0;
+  height: 50px;
+}
+
+.dtable-ui-mobile-row-expand-input-editor-container .form-control:focus {
+  box-shadow: none;
+}

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

@@ -0,0 +1,37 @@
+"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 _TextEditor = _interopRequireDefault(require("../../../TextEditor"));
+require("./index.css");
+class RowExpandMBTextEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onCommit = () => {
+      const value = this.editor.getValue();
+      this.props.onCommit(value);
+    };
+    this.editor = null;
+  }
+  render() {
+    const {
+      readOnly,
+      column,
+      value
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-input-editor-container"
+    }, /*#__PURE__*/_react.default.createElement(_TextEditor.default, {
+      ref: ref => this.editor = ref,
+      readOnly: readOnly,
+      column: column,
+      value: value,
+      onCommit: this.onCommit
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBTextEditor;

package/lib/RowExpandEditor/{RowExpandTextEditor → text-editor/pc-editor}/index.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
-var _TextEditor = _interopRequireDefault(require("../../TextEditor"));
-var _columnUtils = require("../../utils/column-utils");
-var _cell = require("../../utils/cell");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
+var _TextEditor = _interopRequireDefault(require("../../../TextEditor"));
+var _columnUtils = require("../../../utils/column-utils");
+var _cell = require("../../../utils/cell");
+var _constants = require("../../../constants");
+var _lang = require("../../../lang");
 require("./index.css");
-class RowExpandSimpleText extends _react.default.Component {
+class RowExpandPCTextEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.setEditorRef = ref => {
@@ -133,4 +133,4 @@ class RowExpandSimpleText extends _react.default.Component {
     }), inconformityFormat && /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, _lang.getLocale.get('Input_does_not_meet_specifications')));
   }
 }
-var _default = exports.default = RowExpandSimpleText;
+var _default = exports.default = RowExpandPCTextEditor;

package/lib/RowExpandEditor/url-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 RowExpandUrlEditor = /*#__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 = RowExpandUrlEditor;

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

@@ -0,0 +1,17 @@
+.dtable-ui-mobile-row-expand-url-editor-container .dtable-ui-mobile-row-expand-url-input {
+  text-decoration: underline;
+  padding-right: 40px;
+}
+
+.dtable-ui-mobile-row-expand-url-editor-container .dtable-ui-mobile-row-expand-jump-link {
+  height: 22px;
+  line-height: 22px;
+  position: absolute;
+  right: 0;
+  top: 14px;
+  background: #fff;
+  color: #999;
+  border: 1px solid #eee;
+  box-shadow: 0 0 1px;
+  padding: 0 3px;
+}

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

@@ -0,0 +1,87 @@
+"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 _toaster = _interopRequireDefault(require("../../../toaster"));
+var _utils = require("../../../utils/utils");
+var _lang = require("../../../lang");
+require("./index.css");
+class RowExpandMBUrlEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onBlur = () => {
+      const {
+        onCommit
+      } = this.props;
+      onCommit(this.state.value.trim());
+    };
+    this.onChange = e => {
+      let value = e.target.value;
+      if (value === this.state.value) return;
+      this.setState({
+        value
+      });
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onOpenUrlLink = () => {
+      const {
+        value
+      } = this.state;
+      let newValue = value.trim();
+      if (!(0, _utils.isValidUrl)(newValue)) {
+        newValue = "http://".concat(newValue);
+      }
+      try {
+        (0, _utils.openUrlLink)(newValue);
+      } catch {
+        _toaster.default.danger((0, _lang.getLocale)('URL_is_invalid'));
+      }
+    };
+    this.state = {
+      value: props.value || ''
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[this.props.valueKey]] || ''
+      });
+    }
+  }
+  render() {
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-input-editor-container position-relative dtable-ui-mobile-row-expand-url-editor-container"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      onChange: this.onChange,
+      className: "form-control dtable-ui-mobile-row-expand-url-input",
+      value: value || '',
+      onKeyDown: this.onKeyDown
+    }), value && value.trim() && /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-url dtable-ui-mobile-row-expand-jump-link",
+      onClick: this.onOpenUrlLink
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBUrlEditor;

package/lib/RowExpandEditor/{RowExpandUrlEditor → url-editor/pc-editor}/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _toaster = _interopRequireDefault(require("../../toaster"));
-var _utils = require("../../utils/utils");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
+var _toaster = _interopRequireDefault(require("../../../toaster"));
+var _utils = require("../../../utils/utils");
+var _constants = require("../../../constants");
+var _lang = require("../../../lang");
 require("./index.css");
-class RowExpandUrlEditor extends _react.default.Component {
+class RowExpandPCUrlEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.focusInput = () => {
@@ -127,4 +127,4 @@ class RowExpandUrlEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandUrlEditor;
+var _default = exports.default = RowExpandPCUrlEditor;

package/lib/RowExpandFormatter/constants.js

@@ -22,15 +22,15 @@ var _MTimeFormatter = _interopRequireDefault(require("../MTimeFormatter"));
 var _AutoNumberFormatter = _interopRequireDefault(require("../AutoNumberFormatter"));
 var _DurationFormatter = _interopRequireDefault(require("../DurationFormatter"));
 var _ButtonFormatter = _interopRequireDefault(require("../ButtonFormatter"));
-var _RowExpandUrlFormatter = _interopRequireDefault(require("./RowExpandUrlFormatter"));
-var _RowExpandEmailFormatter = _interopRequireDefault(require("./RowExpandEmailFormatter"));
-var _RowExpandRateFormatter = _interopRequireDefault(require("./RowExpandRateFormatter"));
-var _RowExpandImageFormatter = _interopRequireDefault(require("./RowExpandImageFormatter"));
-var _RowExpandFileFormatter = _interopRequireDefault(require("./RowExpandFileFormatter"));
-var _RowExpandLinkFormatter = _interopRequireDefault(require("./RowExpandLinkFormatter"));
-var _RowExpandFormulaFormatter = _interopRequireDefault(require("./RowExpandFormulaFormatter"));
 var _DigitalSignFormatter = _interopRequireDefault(require("../DigitalSignFormatter"));
-var _RowExpandDepartmentFormatter = _interopRequireDefault(require("./RowExpandDepartmentFormatter"));
+var _urlFormatter = _interopRequireDefault(require("./url-formatter"));
+var _emailFormatter = _interopRequireDefault(require("./email-formatter"));
+var _rateFormatter = _interopRequireDefault(require("./rate-formatter"));
+var _imageFormatter = _interopRequireDefault(require("./image-formatter"));
+var _fileFormatter = _interopRequireDefault(require("./file-formatter"));
+var _linkFormatter = _interopRequireDefault(require("./link-formatter"));
+var _formulaFormatter = _interopRequireDefault(require("./formula-formatter"));
+var _departmentFormatter = _interopRequireDefault(require("./department-formatter"));
 const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
   [_dtableUtils.CellType.TEXT]: _TextFormatter.default,
   [_dtableUtils.CellType.NUMBER]: _NumberFormatter.default,
@@ -48,14 +48,14 @@ const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
   [_dtableUtils.CellType.AUTO_NUMBER]: _AutoNumberFormatter.default,
   [_dtableUtils.CellType.DURATION]: _DurationFormatter.default,
   [_dtableUtils.CellType.BUTTON]: _ButtonFormatter.default,
-  [_dtableUtils.CellType.URL]: _RowExpandUrlFormatter.default,
-  [_dtableUtils.CellType.EMAIL]: _RowExpandEmailFormatter.default,
-  [_dtableUtils.CellType.RATE]: _RowExpandRateFormatter.default,
-  [_dtableUtils.CellType.IMAGE]: _RowExpandImageFormatter.default,
-  [_dtableUtils.CellType.FILE]: _RowExpandFileFormatter.default,
-  [_dtableUtils.CellType.LINK]: _RowExpandLinkFormatter.default,
-  [_dtableUtils.CellType.FORMULA]: _RowExpandFormulaFormatter.default,
-  [_dtableUtils.CellType.LINK_FORMULA]: _RowExpandFormulaFormatter.default,
+  [_dtableUtils.CellType.URL]: _urlFormatter.default,
+  [_dtableUtils.CellType.EMAIL]: _emailFormatter.default,
+  [_dtableUtils.CellType.RATE]: _rateFormatter.default,
+  [_dtableUtils.CellType.IMAGE]: _imageFormatter.default,
+  [_dtableUtils.CellType.FILE]: _fileFormatter.default,
+  [_dtableUtils.CellType.LINK]: _linkFormatter.default,
+  [_dtableUtils.CellType.FORMULA]: _formulaFormatter.default,
+  [_dtableUtils.CellType.LINK_FORMULA]: _formulaFormatter.default,
   [_dtableUtils.CellType.DIGITAL_SIGN]: _DigitalSignFormatter.default,
-  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _RowExpandDepartmentFormatter.default
+  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _departmentFormatter.default
 };

package/lib/RowExpandFormatter/department-formatter/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcFormatter = _interopRequireDefault(require("./pc-formatter"));
+var _mbFormatter = _interopRequireDefault(require("./mb-formatter"));
+const RowExpandDepartmentFormatter = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(min-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_pcFormatter.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_mbFormatter.default, props)));
+};
+var _default = exports.default = RowExpandDepartmentFormatter;

package/lib/RowExpandFormatter/department-formatter/mb-formatter.js

@@ -0,0 +1,20 @@
+"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 _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
+function RowExpandMBDepartmentFormatter(_ref) {
+  let {
+    value,
+    departments
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
+    value: value,
+    departments: departments
+  });
+}
+var _default = exports.default = RowExpandMBDepartmentFormatter;

package/lib/RowExpandFormatter/{RowExpandDepartmentFormatter/index.js → department-formatter/pc-formatter.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
-function RowExpandDepartmentFormatter(_ref) {
+function RowExpandPCDepartmentFormatter(_ref) {
   let {
     value,
     departments
@@ -24,4 +24,4 @@ function RowExpandDepartmentFormatter(_ref) {
     departments: departments
   }))));
 }
-var _default = exports.default = RowExpandDepartmentFormatter;
+var _default = exports.default = RowExpandPCDepartmentFormatter;

package/lib/RowExpandFormatter/{RowExpandEmailFormatter → email-formatter}/index.css

@@ -1,13 +1,13 @@
 @import url('../../css/cell-formatter.css');
 
-.dtable-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
-.dtable-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
+.dtable-ui-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
+.dtable-ui-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
   text-decoration: underline;
   width: 95%;
   display: inline-flex;
 }
 
-.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link {
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link {
   display: inline-flex;
   align-items: center;
   font-size: 14px;
@@ -24,7 +24,7 @@
   box-shadow: 0 0 1px;
 }
 
-.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
+.dtable-ui-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
   background: #eee;
   border: 1px solid #c9c9c9;
 }