dtable-ui-component 6.0.30 → 6.0.31

package/lib/DigitalSignEditor/mb-editor/index.js

@@ -0,0 +1,144 @@
+"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 _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _signatureBoard = _interopRequireDefault(require("../signature-board"));
+var _service = _interopRequireDefault(require("../service"));
+var _utils = _interopRequireDefault(require("../utils"));
+var _url = require("../../utils/url");
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _lang = require("../../lang");
+var _utils2 = require("../../utils/utils");
+require("./index.css");
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+class MBDigitalSignEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getValue = () => {
+      const updated = {
+        [this.props.column.key]: this.value
+      };
+      return updated;
+    };
+    this.onToggle = () => {
+      this.props.onCommitCancel();
+    };
+    this.onSave = () => {
+      if (!this.signatureBoard || this.state.saving) return;
+      if (!this.signatureBoard.checkHasChanged()) {
+        this.onToggle();
+        return;
+      }
+      this.signatureBoard.convert2BlobPNG(signBlob => {
+        if (!signBlob) {
+          if (!this.props.value) {
+            this.onToggle();
+            return;
+          }
+
+          // clear the old dtable-ui-digital-sign
+          this.value = null;
+          this.props.onCommit(this.value);
+          return;
+        }
+        this.setState({
+          saving: true
+        });
+        this.digitalService.uploadSignImage(signBlob, {
+          successCallback: signature => {
+            this.value = signature;
+            this.setState({
+              saving: false
+            }, () => {
+              this.props.onCommit(this.value);
+            });
+          },
+          failedCallback: error => {
+            const errMsg = (0, _utils2.getErrorMsg)(error, true);
+            if (!error.response || error.response.status !== 403) {
+              _toaster.default.danger((0, _lang.getLocale)(errMsg));
+            }
+            this.setState({
+              saving: false
+            });
+          }
+        });
+      });
+    };
+    this.clearSignature = () => {
+      this.signatureBoard.clear();
+    };
+    this.historyCallback = event => {
+      if (this.state.saving) return;
+      event.preventDefault();
+      this.onToggle();
+    };
+    this.state = {
+      saving: false
+    };
+    const {
+      uploadFile,
+      config,
+      value
+    } = props;
+    const {
+      username
+    } = config || {};
+    this.value = value || {};
+    this.digitalService = new _service.default({
+      uploadFile,
+      username
+    });
+    this.signatureBoard = null;
+  }
+  render() {
+    const {
+      value,
+      config,
+      column
+    } = this.props;
+    const {
+      saving
+    } = this.state;
+    const signImageUrl = (0, _url.generateCurrentBaseImageUrl)({
+      ...config,
+      partUrl: _utils.default.getSignImageUrl(value)
+    });
+    return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+      className: "dtable-ui dtable-ui-mobile-digital-sign-editor",
+      zIndex: 101,
+      historyCallback: this.historyCallback
+    }, /*#__PURE__*/_react.default.createElement(Header, {
+      onLeftClick: this.onToggle,
+      onRightClick: this.onSave
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), column.name, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: '#f09f3f'
+      }
+    }, (0, _lang.getLocale)('Submit'))), /*#__PURE__*/_react.default.createElement(Body, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-panel position-relative"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-operations position-absolute"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "btn-clear-dtable-ui-digital-sign",
+      onClick: this.clearSignature
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Re-sign')))), /*#__PURE__*/_react.default.createElement(_signatureBoard.default, {
+      ref: ref => this.signatureBoard = ref,
+      signImageUrl: signImageUrl
+    })), saving && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-panel-mask position-absolute"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-panel-mask-container"
+    }, (0, _lang.getLocale)('Saving...')))));
+  }
+}
+var _default = exports.default = MBDigitalSignEditor;

package/lib/DigitalSignEditor/pc-editor/index.js

@@ -0,0 +1,181 @@
+"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 _reactstrap = require("reactstrap");
+var _DTableCustomFooter = _interopRequireDefault(require("../../DTableCustomFooter"));
+var _signatureBoard = _interopRequireDefault(require("../signature-board"));
+var _service = _interopRequireDefault(require("../service"));
+var _utils = _interopRequireDefault(require("../utils"));
+var _url = require("../../utils/url");
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _lang = require("../../lang");
+var _utils2 = require("../../utils/utils");
+require("./index.css");
+class PCDigitalSignEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.setPosition = () => {
+      if (!this.editor) return;
+      const {
+        offsetLeft,
+        offsetTop
+      } = this.editor.parentNode;
+      const {
+        offsetWidth: editorWidth,
+        offsetHeight: editorHeight
+      } = this.editor;
+      let editorLeft = offsetLeft - editorWidth;
+      let editorTop = offsetTop;
+      if (this.props.isInModal) {
+        const innerHeight = window.innerHeight;
+        const offsetTop = this.editor.parentNode.getBoundingClientRect().y;
+        editorTop = offsetTop;
+        editorTop = editorHeight + editorTop > innerHeight ? innerHeight - editorHeight - 30 : editorTop;
+        editorLeft = -30;
+      } else {
+        if (offsetLeft < editorWidth) {
+          editorLeft = offsetLeft + this.props.column.width;
+        }
+        if (editorLeft + editorWidth > window.innerWidth) {
+          editorLeft = window.innerWidth - editorWidth;
+        }
+        if (offsetTop + editorHeight > window.innerHeight) {
+          editorTop = window.innerHeight - editorHeight - 10;
+        }
+      }
+      this.setState({
+        editorPosition: {
+          top: editorTop,
+          left: editorLeft
+        }
+      });
+    };
+    this.getValue = () => {
+      const updated = {
+        [this.props.column.key]: this.value
+      };
+      return updated;
+    };
+    this.saveSignature = () => {
+      if (!this.signatureBoard || this.state.saving) return;
+      if (!this.signatureBoard.checkHasChanged()) {
+        this.props.onCommitCancel();
+        return;
+      }
+      this.signatureBoard.convert2BlobPNG(signBlob => {
+        if (!signBlob) {
+          if (!this.props.value) {
+            this.props.onCommitCancel();
+            return;
+          }
+
+          // clear the old dtable-ui-digital-sign
+          this.value = null;
+          this.props.onCommit(this.value);
+          return;
+        }
+        this.setState({
+          saving: true
+        });
+        this.digitalService.uploadSignImage(signBlob, {
+          successCallback: signature => {
+            this.value = signature;
+            this.setState({
+              saving: false
+            }, () => {
+              this.props.onCommit(this.value);
+            });
+          },
+          failedCallback: error => {
+            const errMsg = (0, _utils2.getErrorMsg)(error, true);
+            if (!error.response || error.response.status !== 403) {
+              _toaster.default.danger((0, _lang.getLocale)(errMsg));
+            }
+            this.setState({
+              saving: false
+            });
+          }
+        });
+      });
+    };
+    this.clearSignature = () => {
+      this.signatureBoard.clear();
+    };
+    this.state = {
+      editorPosition: {},
+      saving: false
+    };
+    const {
+      uploadFile,
+      config,
+      value
+    } = props;
+    const {
+      username
+    } = config || {};
+    this.value = value || {};
+    this.digitalService = new _service.default({
+      uploadFile,
+      username
+    });
+  }
+  componentDidMount() {
+    this.setPosition();
+  }
+  render() {
+    const {
+      value,
+      config
+    } = this.props;
+    const {
+      editorPosition,
+      saving
+    } = this.state;
+    const signImageUrl = (0, _url.generateCurrentBaseImageUrl)({
+      ...config,
+      partUrl: _utils.default.getSignImageUrl(value)
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-container",
+      ref: ref => this.editor = ref,
+      style: {
+        ...editorPosition,
+        zIndex: 1000
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-logo"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-handwritten-signature"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "ml-2 dtable-ui-digital-sign-editor-title"
+    }, (0, _lang.getLocale)('Digital_signature'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-editor-operations"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "btn-clear-dtable-ui-digital-sign",
+      onClick: this.clearSignature
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-clear-format"
+    }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Re-sign'))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-digital-sign-panel"
+    }, /*#__PURE__*/_react.default.createElement(_signatureBoard.default, {
+      ref: ref => this.signatureBoard = ref,
+      signImageUrl: signImageUrl
+    })), /*#__PURE__*/_react.default.createElement(_DTableCustomFooter.default, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      onClick: this.props.onCommitCancel,
+      color: "secondary"
+    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      onClick: this.saveSignature,
+      color: "primary",
+      disabled: saving
+    }, (0, _lang.getLocale)(saving ? 'Saving' : 'Save'))));
+  }
+}
+var _default = exports.default = PCDigitalSignEditor;

package/lib/FileEditor/files-previewer/index.js

@@ -1,277 +1,35 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _url = require("../../utils/url");
-var _utils = require("../../utils/utils");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _DTableCommonAddTool = _interopRequireDefault(require("../../DTableCommonAddTool"));
-var _filePreviewer = _interopRequireDefault(require("./file-previewer"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcPreviewer = _interopRequireDefault(require("./pc-previewer"));
+var _mbPreviewer = _interopRequireDefault(require("./mb-previewer"));
 require("./index.css");
-class FilesPreviewer extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.getFileItemImageUrlList = value => {
-      this.setState({
-        fileImageUrlList: (0, _url.getValidFileImageUrls)(value)
-      });
-    };
-    this.showLargeImage = itemUrl => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      this.setState({
-        isShowLargeImage: true,
-        largeImageIndex: fileImageUrlList.indexOf(itemUrl)
-      });
-    };
-    this.moveNext = () => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + 1) % fileImageUrlList.length
-      }));
-    };
-    this.movePrev = () => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + fileImageUrlList.length - 1) % fileImageUrlList.length
-      }));
-    };
-    this.hideLargeImage = () => {
-      this.setState({
-        isShowLargeImage: false,
-        largeImageIndex: -1
-      });
-    };
-    this.downloadImage = imageItemUrl => {
-      const {
-        value
-      } = this.props;
-      const file = value.find(v => v.url === imageItemUrl);
-      if (!file) return;
-      this.props.getDownLoadFiles([file], _ref => {
-        let [dFile] = _ref;
-        dFile && (0, _utils.downloadFile)(dFile);
-      });
-    };
-    this.onRotateImage = (imageIndex, degree) => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      const imageUrl = fileImageUrlList[imageIndex];
-      this.props.onRotateImage && this.props.onRotateImage(imageUrl, degree);
-    };
-    this.deleteImage = (index, type) => {
-      const {
-        value
-      } = this.props;
-      let {
-        fileImageUrlList
-      } = this.state;
-      const imageUrl = fileImageUrlList[index];
-      let fileItemIndex = value.findIndex(fileItem => fileItem.url === imageUrl);
-      this.props.deleteFile(fileItemIndex, type);
-      if (index > fileImageUrlList.length - 2) {
-        if (fileImageUrlList.length - 2 < 0) {
-          this.hideLargeImage();
-        } else {
-          this.setState({
-            largeImageIndex: 0
-          });
-        }
-      }
-    };
-    this.togglePreviewer = () => {
-      this.props.togglePreviewer(_constants.FILE_EDITOR_STATUS.ADDITION);
-      this.props.resetFileValue();
-    };
-    this.freezeItem = () => {
-      this.setState({
-        isItemFreezed: true
-      });
-    };
-    this.unFreezeItem = () => {
-      this.setState({
-        isItemFreezed: false
-      });
-    };
-    this.onSelectFiles = name => {
-      const {
-        selectedFilesList
-      } = this.state;
-      let filesList = selectedFilesList.slice(0);
-      const selectedFileIndex = selectedFilesList.indexOf(name);
-      if (selectedFileIndex > -1) {
-        filesList.splice(selectedFileIndex, 1);
-      } else {
-        filesList.push(name);
-      }
-      this.setState({
-        selectedFilesList: filesList
-      });
-    };
-    this.onSelectAllFiles = () => {
-      const {
-        value
-      } = this.props;
-      const {
-        selectedFilesList
-      } = this.state;
-      if (value.length === 0) return;
-      let allFilesList = selectedFilesList.slice(0);
-      value.map(item => {
-        if (selectedFilesList.indexOf(item.name) === -1) {
-          allFilesList.push(item.name);
-        }
-        return null;
-      });
-      this.setState({
-        selectedFilesList: allFilesList
-      });
-    };
-    this.onChangeSelectMultipleFiles = state => {
-      this.setState({
-        isSelectMultipleFiles: state,
-        selectedFilesList: []
-      });
-    };
-    this.onDownloadAllSelectedFiles = () => {
-      const {
-        config
-      } = this.props;
-      const {
-        selectedFilesList
-      } = this.state;
-      if (selectedFilesList.length === 0) return;
-      this.props.getDownLoadFiles(selectedFilesList, downloadFilesUrlList => {
-        if (downloadFilesUrlList.length > 0) {
-          (0, _utils.downloadFiles)(downloadFilesUrlList, config);
-        }
-        this.onChangeSelectMultipleFiles(false);
-      });
-    };
-    this.onDeleteAllSelectedFiles = () => {
-      const {
-        selectedFilesList
-      } = this.state;
-      this.props.deleteFiles(selectedFilesList);
-      this.onChangeSelectMultipleFiles(false);
-    };
-    this.renderFilesOperation = () => {
-      const {
-        value,
-        deleteFiles,
-        getDownLoadFiles
-      } = this.props;
-      const {
-        isSelectMultipleFiles,
-        selectedFilesList
-      } = this.state;
-      if (value.length === 0) return null;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-file-editor-operation-content"
-      }, !isSelectMultipleFiles ? /*#__PURE__*/_react.default.createElement("span", {
-        onClick: this.onChangeSelectMultipleFiles.bind(this, true)
-      }, (0, _lang.getLocale)('Select')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedFilesList.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, deleteFiles && /*#__PURE__*/_react.default.createElement("span", {
-        onClick: this.onDeleteAllSelectedFiles
-      }, (0, _lang.getLocale)('Delete')), getDownLoadFiles && /*#__PURE__*/_react.default.createElement("span", {
-        className: "ml-2",
-        onClick: this.onDownloadAllSelectedFiles
-      }, (0, _lang.getLocale)('Download'))), /*#__PURE__*/_react.default.createElement("span", {
-        className: "ml-2",
-        onClick: this.onSelectAllFiles
-      }, (0, _lang.getLocale)('Select_all')), /*#__PURE__*/_react.default.createElement("span", {
-        className: "ml-2",
-        onClick: this.onChangeSelectMultipleFiles.bind(this, false)
-      }, (0, _lang.getLocale)('Cancel'))));
-    };
-    this.state = {
-      isShowRename: false,
-      value: props.value,
-      isItemFreezed: false,
-      isShowLargeImage: false,
-      isSelectMultipleFiles: false,
-      fileImageUrlList: [],
-      selectedFilesList: [],
-      largeImageIndex: -1
-    };
-  }
-  componentDidMount() {
-    this.getFileItemImageUrlList(this.props.value);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)) {
-      this.getFileItemImageUrlList(nextProps.value);
-    }
-  }
-  render() {
-    let {
-      value,
-      getDownLoadFiles
-    } = this.props;
-    const {
-      isSelectMultipleFiles,
-      selectedFilesList
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-wrapper"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-header d-flex align-items-center"
-    }, selectedFilesList.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-file-editor-count-content"
-    }, selectedFilesList.length === 1 ? (0, _lang.getLocale)('1_file_selected') : (0, _lang.getLocale)('Selected_xxx_files', {
-      count: selectedFilesList.length
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-file-editor-count-content"
-    }, value.length <= 1 ? (0, _lang.getLocale)('xxx_existing_file', {
-      count: value.length
-    }) : (0, _lang.getLocale)('xxx_existing_files', {
-      count: value.length
-    })), this.renderFilesOperation()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-content"
-    }, value.length > 0 && value.map((fileItem, index) => {
-      const isSelected = selectedFilesList.indexOf(fileItem.name) === -1 ? false : true;
-      return /*#__PURE__*/_react.default.createElement(_filePreviewer.default, {
-        key: fileItem.url,
-        fileItem: fileItem,
-        deleteFile: this.props.deleteFile,
-        renameFile: this.props.renameFile,
-        freezeItem: this.freezeItem,
-        unFreezeItem: this.unFreezeItem,
-        isItemFreezed: this.state.isItemFreezed,
-        itemIndex: index,
-        isSelected: isSelected,
-        showLargeImage: this.showLargeImage,
-        onSelectFiles: this.onSelectFiles,
-        isSelectMultipleFiles: isSelectMultipleFiles,
-        downloadFile: getDownLoadFiles ? this.downloadImage : null
-      });
-    }))), this.state.isShowLargeImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: this.state.fileImageUrlList,
-      imageIndex: this.state.largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.movePrev,
-      moveToNextImage: this.moveNext,
-      deleteImage: this.deleteImage,
-      downloadImage: this.downloadImage,
-      onRotateImage: this.onRotateImage
-    }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-      className: "dtable-ui-file-editor-previewer-add-btn",
-      callBack: this.togglePreviewer,
-      footerName: (0, _lang.getLocale)('Add_files')
-    }));
-  }
-}
+const FilesPreviewer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = FilesPreviewer;