dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/DigitalSignEditor/index.css

@@ -1,69 +0,0 @@
-.dtable-ui-digital-sign-editor-container {
-  position: fixed;
-  width: 600px;
-  box-shadow: 0 0 5px #ccc;
-  border-radius: 4px;
-  background-color: #ffffff;
-  overflow: hidden;
-}
-
-.dtable-ui-digital-sign-editor-header {
-  height: 50px;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #ededed;
-}
-
-.dtable-ui-digital-sign-editor-header .dtable-font {
-  color: #aaa;
-}
-
-.dtable-ui-digital-sign-editor-logo {
-  display: flex;
-  align-items: center;
-}
-
-.dtable-ui-digital-sign-editor-operations {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  user-select: none;
-}
-
-.dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 28px;
-  padding: 0 10px;
-  border-radius: 3px;
-  font-size: 14px;
-  line-height: 28px;
-  font-weight: 400;
-  border: 0;
-  color: #888;
-  background-color: #f0f0f0;
-}
-
-.dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign:hover {
-  color: #666;
-  background-color: #dbdbdb;
-  cursor: pointer;
-}
-
-.dtable-ui-digital-sign-editor-operations .dtable-icon-clear-format {
-  color: #888;
-  margin-right: 0.25rem;
-  font-size: 14px;
-}
-
-.dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign:hover .dtable-icon-clear-format {
-  color: #666;
-}
-
-.dtable-ui-digital-sign-editor-container .dtable-ui-digital-sign-panel {
-  position: relative;
-  height: 300px;
-}

package/lib/DigitalSignEditor/index.js

@@ -1,182 +0,0 @@
-"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 _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 DigitalSignEditor 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(Object.assign({}, 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(_reactstrap.ModalFooter, {
-      className: "dtable-ui-geolocation-editor-footer"
-    }, /*#__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 = DigitalSignEditor;

package/lib/DigitalSignEditor/service.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _utils = _interopRequireDefault(require("./utils"));
-var _constants = require("./constants");
-class DigitalService {
-  constructor(props) {
-    this.init(props);
-  }
-  init(props) {
-    this.uploadFile = props.uploadFile;
-    this.username = props.username;
-  }
-  uploadSignImage(signBlob, _ref) {
-    let {
-      successCallback,
-      failedCallback
-    } = _ref;
-    const name = "".concat(this.username, "-").concat(Date.now().toString(), ".png");
-    const file = new File([signBlob], name, {
-      type: 'image/png'
-    });
-    this.uploadFile(file, _constants.DIGITAL_SIGNS_FOLDER).then(data => {
-      const signature = _utils.default.getUpdatedSign({
-        username: this.username,
-        sign_image_url: data.url
-      });
-      successCallback && successCallback(signature);
-    }).catch(error => {
-      failedCallback && failedCallback(error);
-    });
-  }
-}
-var _default = exports.default = DigitalService;

package/lib/DigitalSignEditor/signature-board/index.css

@@ -1,35 +0,0 @@
-.signature-board {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.signature-board canvas {
-  position: relative;
-  z-index: 1;
-}
-
-.signature-board-tips {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 14px;
-  opacity: 0.5;
-}
-
-.signature-board-image-wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.signature-board-image-wrapper img {
-  max-height: 100%;
-}

package/lib/DigitalSignEditor/signature-board/index.js

@@ -1,135 +0,0 @@
-"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 _signatureTool = _interopRequireDefault(require("./signature-tool"));
-var _Loading = _interopRequireDefault(require("../../Loading"));
-var _lang = require("../../lang");
-require("./index.css");
-class SignatureBoard extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.initSignTool = () => {
-      let signatureBoardCanvas = document.querySelector('#signature_board_canvas');
-      if (!this.signatureBoard || !signatureBoardCanvas) return;
-      signatureBoardCanvas.style.width = "".concat(this.signatureBoard.offsetWidth, "px");
-      signatureBoardCanvas.style.height = "".concat(this.signatureBoard.offsetHeight, "px");
-      this.signatureTool = new _signatureTool.default(signatureBoardCanvas, {
-        minLineWidth: 2,
-        maxLineWidth: 4,
-        onStart: this.onStartSign
-      });
-    };
-    this.onStartSign = () => {
-      this.hasChanged = true;
-      this.setState({
-        isEmpty: false,
-        signImageUrl: null
-      });
-    };
-    this.checkHasChanged = () => {
-      return this.hasChanged;
-    };
-    this.clear = () => {
-      this.hasChanged = true;
-      this.signatureTool.clear();
-      this.setState({
-        isEmpty: true,
-        signImageUrl: null
-      });
-    };
-    this.getPNG = () => {
-      if (this.signatureTool.isEmpty()) return null;
-      return this.signatureTool.getPNG();
-    };
-    this.getJPG = quality => {
-      if (this.signatureTool.isEmpty()) return null;
-      return this.signatureTool.getJPG(quality);
-    };
-    this.convert2BlobPNG = callback => {
-      if (this.signatureTool.isEmpty()) {
-        callback && callback(null);
-        return;
-      }
-      this.signatureTool.convert2BlobPNG(callback);
-    };
-    this.convert2BlobJPG = callback => {
-      if (this.signatureTool.isEmpty()) {
-        callback && callback(null);
-        return;
-      }
-      this.signatureTool.convert2BlobJPG(callback);
-    };
-    this.onClickSignImage = () => {
-      if (this.props.onClickSignImage) {
-        this.props.onClickSignImage();
-      }
-    };
-    this.renderTips = () => {
-      const {
-        isEmpty
-      } = this.state;
-      if (!isEmpty) return null;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "signature-board-tips"
-      }, (0, _lang.getLocale)('Please_sign_on_this_panel'));
-    };
-    this.renderSignImage = () => {
-      const {
-        isEmpty,
-        signImageUrl,
-        loadingSignImage
-      } = this.state;
-      if (isEmpty || !signImageUrl) return null;
-      let img = new Image();
-      img.src = signImageUrl;
-      img.onload = () => {
-        this.setState({
-          loadingSignImage: false
-        });
-      };
-      img.onerror = () => {
-        this.setState({
-          loadingSignImage: false
-        });
-      };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "signature-board-image-wrapper",
-        style: {
-          zIndex: 2
-        },
-        onClick: this.onClickSignImage
-      }, loadingSignImage ? /*#__PURE__*/_react.default.createElement(_Loading.default, null) : /*#__PURE__*/_react.default.createElement("img", {
-        src: signImageUrl,
-        alt: "",
-        draggable: false
-      }));
-    };
-    this.state = {
-      isEmpty: !props.signImageUrl,
-      signImageUrl: props.signImageUrl,
-      loadingSignImage: !!props.signImageUrl
-    };
-    this.hasChanged = false;
-  }
-  componentDidMount() {
-    this.initSignTool();
-  }
-  componentWillUnmount() {
-    this.setState = () => {};
-  }
-  render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "signature-board",
-      ref: ref => this.signatureBoard = ref
-    }, /*#__PURE__*/_react.default.createElement("canvas", {
-      id: "signature_board_canvas"
-    }), this.renderTips(), this.renderSignImage());
-  }
-}
-var _default = exports.default = SignatureBoard;