dtable-ui-component 6.0.29 → 6.0.31

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");
+const 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);
+  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]);
+  (0, _react.useEffect)(() => {
+    setValue(row[column[valueKey]] || '');
+    setShowEditor(false);
+    // eslint-disable-next-line
+  }, [row, column]);
+  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;

package/lib/RowExpandEditor/{RowExpandDepartmentEditor/index.js → department-editor/pc-editor.js}

@@ -8,71 +8,63 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _hooks = require("../../hooks");
 var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
 var _constants = require("../../constants");
-var _departmentSingleSelect = _interopRequireDefault(require("../../Department-editor/department-single-select"));
-function RowExpandDepartmentEditor(props) {
-  const {
+var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../DepartmentSingleSelectEditor"));
+const RowExpandPCDepartmentEditor = _ref => {
+  let {
     row,
     column,
     valueKey,
     departments,
     userDepartmentIdsMap,
     isEditorFocus,
-    columnIndex
-  } = props;
+    columnIndex,
+    onCommit,
+    updateTabIndex
+  } = _ref;
   const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
   const [showEditor, setShowEditor] = (0, _react.useState)(false);
   const departmentSelectContainer = (0, _react.useRef)(null);
   const departmentSelectContent = (0, _react.useRef)(null);
-  (0, _hooks.useClickOutside)({
-    currDOM: departmentSelectContainer.current,
-    onClickOutside: hideDropDownMenu
-  }, [isEditorFocus, value]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === _constants.KeyCodes.Enter && isEditorFocus && !showEditor) {
+      setShowEditor(true);
+    } else if (event.keyCode === _constants.KeyCodes.Escape && showEditor) {
+      event.stopPropagation();
+      setShowEditor(false);
+      departmentSelectContent.current.focus();
+    }
+  }, [isEditorFocus, showEditor]);
+  const onToggleSelect = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    updateTabIndex(columnIndex);
+    setShowEditor(true);
+  }, [columnIndex, updateTabIndex]);
+  const onFocus = (0, _react.useCallback)(() => {
+    updateTabIndex(columnIndex);
+  }, [columnIndex, updateTabIndex]);
+  const handleCommit = (0, _react.useCallback)(newValue => {
+    setShowEditor(false);
+    if (newValue === value) return;
+    setValue(newValue);
+    onCommit(newValue);
+  }, [value, onCommit]);
+  const closeEditor = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
   (0, _react.useEffect)(() => {
     document.addEventListener('keydown', onKeyDown);
     return () => {
       document.removeEventListener('keydown', onKeyDown);
     };
-    // eslint-disable-next-line
-  }, [isEditorFocus, showEditor]);
+  }, [onKeyDown]);
   (0, _react.useEffect)(() => {
     setValue(row[column[valueKey]] || '');
     setShowEditor(false);
     // eslint-disable-next-line
-  }, [row]);
-  function hideDropDownMenu(event) {
-    if (!event.target) return;
-    toggleDepartmentSelect(false);
-  }
-  function onKeyDown(e) {
-    if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
-      setShowEditor(true);
-    } else if (e.keyCode === _constants.KeyCodes.Escape && showEditor) {
-      e.stopPropagation();
-      setShowEditor(false);
-      departmentSelectContent.current.focus();
-    }
-  }
-  function toggleDepartmentSelect(value) {
-    setShowEditor(value);
-  }
-  function onToggleSelect(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    props.updateTabIndex(columnIndex);
-    toggleDepartmentSelect(true);
-  }
-  function onFocus() {
-    props.updateTabIndex(columnIndex);
-  }
-  function onCommit(newValue) {
-    toggleDepartmentSelect(false);
-    if (newValue === value) return;
-    setValue(newValue);
-    props.onCommit(newValue);
-  }
+  }, [row, column]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative w-100",
     ref: departmentSelectContainer
@@ -92,13 +84,16 @@ function RowExpandDepartmentEditor(props) {
   })), /*#__PURE__*/_react.default.createElement("i", {
     "aria-hidden": "true",
     className: "dtable-font dtable-icon-down3"
-  }))), showEditor && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
+  }))), showEditor && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+    isInModal: true,
     enableSelectRange: false,
+    target: departmentSelectContent.current,
     column: column,
     value: value,
-    onCommit: onCommit,
+    onCommit: handleCommit,
     userDepartmentIdsMap: userDepartmentIdsMap,
-    departments: departments
+    departments: departments,
+    toggleDepartmentSelect: closeEditor
   }));
-}
-var _default = exports.default = RowExpandDepartmentEditor;
+};
+var _default = exports.default = RowExpandPCDepartmentEditor;

package/lib/RowExpandEditor/digital-sign-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 RowExpandDigitalSignEditor = /*#__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 = RowExpandDigitalSignEditor;

package/lib/RowExpandEditor/digital-sign-editor/mb-editor/index.css

@@ -0,0 +1 @@
+@import url('../../image-editor/mb-editor/index.css');

package/lib/RowExpandEditor/digital-sign-editor/mb-editor/index.js

@@ -0,0 +1,130 @@
+"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 _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _utils = _interopRequireDefault(require("../../../DigitalSignEditor/utils"));
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _DigitalSignEditor = _interopRequireDefault(require("../../../DigitalSignEditor"));
+var _lang = require("../../../lang");
+var _url = require("../../../utils/url");
+require("./index.css");
+class RowExpandMBDigitalSignEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        updated: value,
+        isShowEditor: false
+      });
+    };
+    this.getValue = () => {
+      const {
+        column,
+        row,
+        valueKey
+      } = this.props;
+      const {
+        updated
+      } = this.state;
+      return updated ? updated : row[column[valueKey]];
+    };
+    this.deleteImage = () => {
+      const {
+        column,
+        onCommit
+      } = this.props;
+      const updated = {
+        [column.key]: null
+      };
+      onCommit(updated, column);
+      this.setState({
+        updated: null
+      });
+    };
+    this.getSignImages = () => {
+      const {
+        config
+      } = this.props;
+      const value = this.getValue();
+      const signImageUrl = (0, _url.generateCurrentBaseImageUrl)({
+        ...config,
+        partUrl: _utils.default.getSignImageUrl(value)
+      });
+      return [signImageUrl].filter(Boolean);
+    };
+    this.renderSignature = signImages => {
+      const {
+        column,
+        config
+      } = this.props;
+      const {
+        key
+      } = column;
+      return signImages.map((src, index) => {
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: "sing-image-".concat(key, "-").concat(index),
+          index: index,
+          src: src,
+          className: "dtable-ui-mobile-row-expand-img-item",
+          config: config,
+          onClick: this.toggleEditor,
+          deleteImage: this.deleteImage,
+          disableImageTooltip: true
+        });
+      });
+    };
+    this.state = {
+      isShowEditor: false,
+      updated: null
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        updated: row[column[valueKey]] || [],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      config,
+      column
+    } = this.props;
+    const {
+      isShowEditor
+    } = this.state;
+    const signImages = this.getSignImages();
+    const signImageExisted = Array.isArray(signImages) && signImages.length > 0;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-image position-relative"
+    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+      onClick: this.toggleEditor,
+      text: (0, _lang.getLocale)('Edit_signature')
+    }), this.renderSignature(signImages)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DigitalSignEditor.default, {
+      config: config,
+      value: this.getValue(),
+      column: column,
+      onCommitCancel: this.toggleEditor,
+      onCommit: this.onCommit,
+      uploadFile: this.props.uploadFile
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBDigitalSignEditor;

package/lib/RowExpandEditor/{RowExpandDigitalSignEditor → digital-sign-editor/pc-editor}/index.css

@@ -1,4 +1,4 @@
-@import url('../RowExpandImageEditor/index.css');
+@import url('../../image-editor/pc-editor/index.css');
 
 .dtable-ui-row-expand-digital-sign-container .dtable-ui-image-thumbnail {
   max-width: 200px;

package/lib/RowExpandEditor/{RowExpandDigitalSignEditor → digital-sign-editor/pc-editor}/index.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
-var _utils = _interopRequireDefault(require("../../DigitalSignEditor/utils"));
-var _constants = require("../../constants");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _DigitalSignEditor = _interopRequireDefault(require("../../DigitalSignEditor"));
-var _lang = require("../../lang");
-var _url = require("../../utils/url");
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../../../ImagePreviewerLightbox"));
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _utils = _interopRequireDefault(require("../../../DigitalSignEditor/utils"));
+var _constants = require("../../../constants");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _DigitalSignEditor = _interopRequireDefault(require("../../../DigitalSignEditor"));
+var _lang = require("../../../lang");
+var _url = require("../../../utils/url");
 require("./index.css");
-class RowExpandDigitalSignEditor extends _react.default.Component {
+class RowExpandPCDigitalSignEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = e => {
@@ -176,7 +176,7 @@ class RowExpandDigitalSignEditor extends _react.default.Component {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "position-relative mt-2",
       ref: ref => this.editorContainer = ref
-    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_addBtn.default, {
       onClick: this.toggleEditor,
       onFocus: this.onFocus,
       isFocus: isEditorFocus,
@@ -205,4 +205,4 @@ class RowExpandDigitalSignEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandDigitalSignEditor;
+var _default = exports.default = RowExpandPCDigitalSignEditor;

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

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

@@ -0,0 +1,71 @@
+"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 _DurationEditor = _interopRequireDefault(require("../../DurationEditor"));
+class RowExpandMBDurationEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value,
+        isShowEditor: false
+      });
+    };
+    let {
+      row,
+      column,
+      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() {
+    const {
+      column
+    } = this.props;
+    const {
+      value,
+      isShowEditor
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-input-editor-container"
+    }, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DurationEditor.default, {
+      isInModal: true,
+      column: column,
+      value: value,
+      toggleEditor: this.toggleEditor,
+      onCommit: this.onCommit
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100 h-100",
+      onClick: this.toggleEditor
+    }, (0, _dtableUtils.getDurationDisplayString)(value, column.data)));
+  }
+}
+var _default = exports.default = RowExpandMBDurationEditor;

package/lib/RowExpandEditor/{RowExpandDurationEditor/index.js → duration-editor/pc-editor.js}

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _constants = require("../../constants");
 var _DurationEditor = _interopRequireDefault(require("../../DurationEditor"));
-class RowExpandDurationEditor extends _react.default.Component {
+class RowExpandPCDurationEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onKeyDown = e => {
@@ -102,4 +102,4 @@ class RowExpandDurationEditor extends _react.default.Component {
     }, (0, _dtableUtils.getDurationDisplayString)(value, column.data)));
   }
 }
-var _default = exports.default = RowExpandDurationEditor;
+var _default = exports.default = RowExpandPCDurationEditor;

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

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

@@ -0,0 +1 @@
+@import url('../../url-editor/mb-editor/index.css');

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

@@ -0,0 +1,84 @@
+"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"));
+require("./index.css");
+class RowExpandMBEmailEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onBlur = () => {
+      const {
+        onCommit
+      } = this.props;
+      const updated = this.state.value.trim();
+      onCommit(updated);
+    };
+    this.onChange = e => {
+      const value = e.target.value;
+      if (value === this.state.value) return;
+      this.setState({
+        value
+      });
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onOpenEmailLink = () => {
+      const {
+        value
+      } = this.state;
+      let newValue = value.trim();
+      window.location.href = "mailto:".concat(newValue);
+    };
+    const {
+      row,
+      column,
+      valueKey
+    } = props;
+    this.state = {
+      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]] || ''
+      });
+    }
+  }
+  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-email dtable-ui-mobile-row-expand-jump-link",
+      onClick: this.onOpenEmailLink
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBEmailEditor;

package/lib/RowExpandEditor/email-editor/pc-editor/index.css

@@ -0,0 +1 @@
+@import url('../../url-editor/pc-editor/index.css');

package/lib/RowExpandEditor/{RowExpandEmailEditor → email-editor/pc-editor}/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
+var _constants = require("../../../constants");
 require("./index.css");
-class RowExpandEmailEditor extends _react.default.Component {
+class RowExpandPCEmailEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.focusInput = () => {
@@ -122,4 +122,4 @@ class RowExpandEmailEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandEmailEditor;
+var _default = exports.default = RowExpandPCEmailEditor;

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