dtable-ui-component 6.0.3 → 6.0.4

package/lib/{common/delete-tip.js → DeleteTip/index.js}

@@ -6,39 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _modalPortal = _interopRequireDefault(require("./modal-portal"));
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _lang = require("../lang");
-require("./delete-tip.css");
+require("./index.css");
 class DeleteTip extends _react.default.Component {
   constructor() {
     super(...arguments);
-    this.onMouseDown = e => {
+    this.handleOutsideClick = e => {
       if (this.tipContainer && !this.tipContainer.contains(e.target)) {
         this.props.toggle();
       }
     };
   }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onMouseDown);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onMouseDown);
-  }
   render() {
     const {
       toggle,
-      onDelete,
+      handleDelete,
       position,
       deleteTip
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+      onClickOutside: this.handleOutsideClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
       ref: node => this.tipContainer = node,
       className: "dtable-tip tip-container",
       style: {
         top: position.top,
         left: position.left
-      },
-      onClick: e => e.stopPropagation()
+      }
     }, /*#__PURE__*/_react.default.createElement("b", {
       className: "mb-4"
     }, deleteTip), /*#__PURE__*/_react.default.createElement("div", {
@@ -48,8 +44,8 @@ class DeleteTip extends _react.default.Component {
       onClick: toggle
     }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
       className: "btn btn-primary",
-      onClick: onDelete
-    }, (0, _lang.getLocale)('Delete')))));
+      onClick: handleDelete
+    }, (0, _lang.getLocale)('Delete'))))));
   }
 }
-exports.default = DeleteTip;
+var _default = exports.default = DeleteTip;

package/lib/Department-editor/department-single-select.js

@@ -199,7 +199,7 @@ class DepartmentSingleSelect extends _react.Component {
     };
     this.renderEmptyTip = () => {
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "none-search-result d-flex justify-content-center"
+        className: "dtable-ui-editor-no-search-result"
       }, (0, _lang.getLocale)('No_departments_available'));
     };
     this.renderMenuContent = () => {

package/lib/Department-editor/index.js

@@ -47,22 +47,21 @@ class DepartmentSingleSelectEditor extends _react.Component {
     };
     const {
       column: _column,
-      mode,
+      isInModal,
       value: _value,
       height
     } = props;
     const editorWidth = _column.width > 300 ? _column.width : 300;
-    const isRowExpand = mode === 'row_expand';
     const data = _column.data || {};
     this.state = {
       value: _value || '',
-      menuStyle: isRowExpand ? {} : {
+      menuStyle: isInModal ? {} : {
         width: editorWidth,
         top: height - 2
       }
     };
     this.enableSelectRange = data.enable_select_range || false;
-    this.isRowExpand = isRowExpand;
+    this.isRowExpand = isInModal;
   }
   componentDidMount() {
     if (this.isRowExpand) {

package/lib/DepartmentSingleSelectFormatter/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _lang = require("../lang");
 require("./index.css");
 function DepartmentSingleSelectFormatter(props) {
   const {
@@ -15,8 +16,8 @@ function DepartmentSingleSelectFormatter(props) {
     containerClassName,
     tip
   } = props;
-  if (!value) return null;
-  const deletedTip = tip || 'Deleted department';
+  if (!value || !Array.isArray(departments)) return null;
+  const deletedTip = tip || (0, _lang.getLocale)('Deleted_department');
   const department = departments.find(department => department.id === value);
   const name = department ? department.name : deletedTip;
   return /*#__PURE__*/_react.default.createElement("div", {

package/lib/DigitalSignEditor/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DIGITAL_SIGNS_FOLDER = void 0;
+const DIGITAL_SIGNS_FOLDER = exports.DIGITAL_SIGNS_FOLDER = 'digital-signs';

package/lib/DigitalSignEditor/index.css

@@ -0,0 +1,69 @@
+.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

@@ -0,0 +1,182 @@
+"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

@@ -0,0 +1,39 @@
+"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;
+    if (!this.uploadFile) return;
+    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

@@ -0,0 +1,35 @@
+.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

@@ -0,0 +1,135 @@
+"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;