dtable-ui-component 6.0.25 → 6.0.26-beta

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/index.js

@@ -6,203 +6,14 @@ 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");
-require("./index.css");
-class RowExpandDigitalSignEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
-        this.setState({
-          isShowEditor: true
-        });
-      } else if (e.keyCode === _constants.KeyCodes.Esc && this.state.isShowEditor) {
-        e.stopPropagation();
-        this.setState({
-          isShowEditor: false
-        });
-      }
-    };
-    this.onFocus = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-    };
-    this.hideEditor = event => {
-      if (!this.state.isShowEditor || !this.editorContainer || !event || this.editorContainer.contains(event.target)) {
-        return;
-      }
-      this.setState({
-        isShowEditor: false
-      });
-    };
-    this.toggleEditor = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-      if (this.props.readOnly) return;
-      this.setState({
-        isShowEditor: !this.state.isShowEditor
-      });
-    };
-    this.onCommit = value => {
-      this.setState({
-        updated: value,
-        isShowEditor: !this.state.isShowEditor
-      });
-      this.props.onCommit(value);
-    };
-    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.setLargeImageIndex = index => {
-      this.setState({
-        largeImageIndex: index
-      });
-    };
-    this.moveToNextImage = () => {};
-    this.moveToPrevImage = () => {};
-    this.hideLargeImage = () => {
-      this.setLargeImageIndex(-1);
-    };
-    this.renderSignature = signImages => {
-      const {
-        column
-      } = 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,
-          column: column,
-          onClick: this.setLargeImageIndex,
-          deleteImage: this.deleteImage,
-          disableImageTooltip: true
-        });
-      });
-    };
-    this.state = {
-      isShowEditor: false,
-      updated: null,
-      largeImageIndex: -1
-    };
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.hideEditor);
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        updated: row[column[valueKey]] || [],
-        isShowEditor: false,
-        largeImageIndex: -1
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.isShowEditor !== prevState.isShowEditor) {
-      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.isShowEditor === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.hideEditor);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      config,
-      column,
-      isEditorFocus
-    } = this.props;
-    const {
-      isShowEditor,
-      largeImageIndex
-    } = this.state;
-    const signImages = this.getSignImages();
-    const signImageExisted = Array.isArray(signImages) && signImages.length > 0;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative mt-2",
-      ref: ref => this.editorContainer = ref
-    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-      onClick: this.toggleEditor,
-      onFocus: this.onFocus,
-      isFocus: isEditorFocus,
-      text: (0, _lang.getLocale)('Edit_signature')
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-container dtable-ui-row-expand-digital-sign-container"
-    }, this.renderSignature(signImages)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DigitalSignEditor.default, {
-      isInModal: true,
-      config: config,
-      value: this.getValue(),
-      column: column,
-      onCommitCancel: this.toggleEditor,
-      onCommit: this.onCommit,
-      uploadFile: this.props.uploadFile
-    }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: signImages,
-      imageIndex: largeImageIndex,
-      wrapperClassName: 'digital-sign-image',
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.moveToPrevImage,
-      moveToNextImage: this.moveToNextImage,
-      deleteImage: index => {
-        this.deleteImage(index);
-        this.hideLargeImage();
-      }
-    }));
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandDigitalSignEditor = 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, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandDigitalSignEditor;

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/{index.css → lg/index.css}

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

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/lg/index.js

@@ -0,0 +1,208 @@
+"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 _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");
+require("./index.css");
+class Large extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
+        this.setState({
+          isShowEditor: true
+        });
+      } else if (e.keyCode === _constants.KeyCodes.Esc && this.state.isShowEditor) {
+        e.stopPropagation();
+        this.setState({
+          isShowEditor: false
+        });
+      }
+    };
+    this.onFocus = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+    };
+    this.hideEditor = event => {
+      if (!this.state.isShowEditor || !this.editorContainer || !event || this.editorContainer.contains(event.target)) {
+        return;
+      }
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.toggleEditor = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+      if (this.props.readOnly) return;
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        updated: value,
+        isShowEditor: !this.state.isShowEditor
+      });
+      this.props.onCommit(value);
+    };
+    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.setLargeImageIndex = index => {
+      this.setState({
+        largeImageIndex: index
+      });
+    };
+    this.moveToNextImage = () => {};
+    this.moveToPrevImage = () => {};
+    this.hideLargeImage = () => {
+      this.setLargeImageIndex(-1);
+    };
+    this.renderSignature = signImages => {
+      const {
+        column
+      } = 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,
+          column: column,
+          onClick: this.setLargeImageIndex,
+          deleteImage: this.deleteImage,
+          disableImageTooltip: true
+        });
+      });
+    };
+    this.state = {
+      isShowEditor: false,
+      updated: null,
+      largeImageIndex: -1
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideEditor);
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        updated: row[column[valueKey]] || [],
+        isShowEditor: false,
+        largeImageIndex: -1
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowEditor !== prevState.isShowEditor) {
+      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideEditor);
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      config,
+      column,
+      isEditorFocus
+    } = this.props;
+    const {
+      isShowEditor,
+      largeImageIndex
+    } = this.state;
+    const signImages = this.getSignImages();
+    const signImageExisted = Array.isArray(signImages) && signImages.length > 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative mt-2",
+      ref: ref => this.editorContainer = ref
+    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      onClick: this.toggleEditor,
+      onFocus: this.onFocus,
+      isFocus: isEditorFocus,
+      text: (0, _lang.getLocale)('Edit_signature')
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-image-container dtable-ui-row-expand-digital-sign-container"
+    }, this.renderSignature(signImages)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DigitalSignEditor.default, {
+      isInModal: true,
+      config: config,
+      value: this.getValue(),
+      column: column,
+      onCommitCancel: this.toggleEditor,
+      onCommit: this.onCommit,
+      uploadFile: this.props.uploadFile
+    }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      imageItems: signImages,
+      imageIndex: largeImageIndex,
+      wrapperClassName: 'digital-sign-image',
+      closeImagePopup: this.hideLargeImage,
+      moveToPrevImage: this.moveToPrevImage,
+      moveToNextImage: this.moveToNextImage,
+      deleteImage: index => {
+        this.deleteImage(index);
+        this.hideLargeImage();
+      }
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/sm/index.css

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

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/sm/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 _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+var _DigitalSignEditor = _interopRequireDefault(require("../../../DigitalSignEditor"));
+var _lang = require("../../../lang");
+var _url = require("../../../utils/url");
+require("./index.css");
+class Small 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: "mobile-dtable-ui-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: "mobile-dtable-ui-row-expand-image position-relative"
+    }, !signImageExisted && /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.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 = Small;

package/lib/RowExpandEditor/RowExpandDurationEditor/index.js

@@ -1,105 +1,19 @@
 "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 _dtableUtils = require("dtable-utils");
-var _constants = require("../../constants");
-var _DurationEditor = _interopRequireDefault(require("../../DurationEditor"));
-class RowExpandDurationEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showCollaboratorSelect) {
-        this.setState({
-          isShowEditor: true
-        });
-      }
-    };
-    this.toggleEditor = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-      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]]
-    };
-  }
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        value: row[column[valueKey]],
-        isShowEditor: false
-      });
-    }
-    if (nextProps.isEditorFocus !== this.props.isEditorFocus) {
-      let activeInput = document.activeElement;
-      if (nextProps.isEditorFocus === false && activeInput) {
-        activeInput.blur();
-      }
-      this.setState({
-        isShowEditor: nextProps.isEditorFocus
-      });
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    let {
-      column,
-      isEditorFocus,
-      isInModal
-    } = this.props;
-    let {
-      value,
-      isShowEditor
-    } = this.state;
-    let style = {
-      width: 320
-    };
-    if (isEditorFocus) {
-      style = Object.assign({}, style, _constants.ROW_EXPAND_FOCUS_STYLE);
-    }
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DurationEditor.default, {
-      isInModal: isInModal,
-      column: column,
-      value: value,
-      toggleEditor: this.toggleEditor,
-      onCommit: this.onCommit
-    }) : /*#__PURE__*/_react.default.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.toggleEditor,
-      onClick: this.toggleEditor,
-      className: "form-control",
-      style: style
-    }, (0, _dtableUtils.getDurationDisplayString)(value, column.data)));
-  }
-}
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandDurationEditor = 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, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandDurationEditor;