dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/{Department-editor → DepartmentEditor/lg}/index.js

@@ -7,23 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _DTablePopover = _interopRequireDefault(require("../DTablePopover"));
-var _constants = require("./constants");
+var _DTablePopover = _interopRequireDefault(require("../../DTablePopover"));
 var _departmentSingleSelect = _interopRequireDefault(require("./department-single-select"));
-var _lang = require("../lang");
 require("./index.css");
-class DepartmentSingleSelectEditor extends _react.Component {
+class Large extends _react.Component {
   constructor(props) {
     super(props);
     this.onCommit = value => {
       const {
-        onCommit,
-        column
+        onCommit
       } = this.props;
       this.setState({
         value
       }, () => {
-        this.isRowExpand ? onCommit(this.getValue(), column) : onCommit();
+        this.isRowExpand ? onCommit(value) : onCommit();
       });
     };
     this.getValue = () => {
@@ -31,28 +28,14 @@ class DepartmentSingleSelectEditor extends _react.Component {
       updated[this.props.column.key] = this.state.value;
       return updated;
     };
-    this.createSpecificDepartments = () => {
-      return _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map(option => {
-        const {
-          type,
-          name
-        } = option;
-        return {
-          value: type,
-          label: /*#__PURE__*/_react.default.createElement("span", {
-            className: "text-truncate department-name"
-          }, (0, _lang.getLocale)(name))
-        };
-      });
-    };
     const {
-      column: _column,
+      column,
       isInModal,
       value: _value,
       height
     } = props;
-    const editorWidth = _column.width > 300 ? _column.width : 300;
-    const data = _column.data || {};
+    const editorWidth = column.width > 300 ? column.width : 300;
+    const data = column.data || {};
     this.state = {
       value: _value || '',
       menuStyle: isInModal ? {} : {
@@ -103,4 +86,4 @@ class DepartmentSingleSelectEditor extends _react.Component {
     }, dom)) : dom;
   }
 }
-var _default = exports.default = DepartmentSingleSelectEditor;
+var _default = exports.default = Large;

package/lib/DepartmentEditor/sm/index.css

@@ -0,0 +1,4 @@
+.mobile-dtable-ui-department-editor .mobile-dtable-ui-department-editor-department-item .dtable-radio {
+  margin-top: 2px;
+  margin-bottom: 0;
+}

package/lib/DepartmentEditor/sm/index.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _DTableRadio = _interopRequireDefault(require("../../DTableRadio"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _utils = require("../utils");
+var _constants = require("../constants");
+var _lang = require("../../lang");
+require("./index.css");
+const Item = _list.default.Item;
+const Small = _ref => {
+  let {
+    value: oldValue,
+    column,
+    isSupportMultiple = false,
+    isFilterEditor = false,
+    userDepartmentIdsMap = {},
+    departments: initialDepartments = [],
+    onCommit,
+    onClose
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(oldValue ? oldValue : isSupportMultiple ? [] : '');
+  const [departments, setDepartments] = (0, _react.useState)([]);
+  const [parentId, setParentId] = (0, _react.useState)('');
+  const [topParentIds, setTopParentIds] = (0, _react.useState)([]);
+  const initColumnData = (0, _react.useMemo)(() => {
+    const data = column.data || {};
+    const enableSelectRange = data.enable_select_range || false;
+    const selectedRange = data.selected_range || '';
+    const specificDepartments = data.specific_departments || [];
+    return {
+      enableSelectRange,
+      selectedRange,
+      specificDepartments
+    };
+  }, [column]);
+  const onSave = (0, _react.useCallback)(() => {
+    !isFilterEditor && onCommit && onCommit(value);
+    onClose && onClose();
+  }, [isFilterEditor, value, onCommit, onClose]);
+  const onDepartmentClick = (0, _react.useCallback)((event, department) => {
+    event.preventDefault();
+    const {
+      id,
+      hasChild
+    } = department;
+    if (event.target && event.target.className.indexOf('am-list-arrow') > -1) {
+      if (!hasChild) return;
+      setParentId(id);
+      return;
+    }
+    let newValue;
+    if (isSupportMultiple) {
+      newValue = value.slice(0);
+      const index = newValue.indexOf(id);
+      index === -1 ? newValue.push(id) : newValue.splice(index);
+    } else {
+      newValue = id === value ? '' : id;
+    }
+    if (isFilterEditor) {
+      onCommit && onCommit({
+        id
+      });
+    }
+    setValue(newValue);
+  }, [isSupportMultiple, isFilterEditor, value, onCommit]);
+  const onParentDepartmentClick = (0, _react.useCallback)((event, type) => {
+    event.preventDefault();
+    let newValue;
+    if (isSupportMultiple) {
+      newValue = value.slice(0);
+      const index = newValue.indexOf(type);
+      index === -1 ? newValue.push(type) : newValue.splice(index);
+    } else {
+      newValue = type === value ? '' : type;
+    }
+    if (isFilterEditor) {
+      onCommit && onCommit({
+        id: type
+      });
+    }
+    setValue(newValue);
+  }, [value, isFilterEditor, isSupportMultiple, onCommit]);
+  const onLeftClick = (0, _react.useCallback)(() => {
+    const parentDepartment = departments.find(item => item.id === parentId);
+    if (!parentDepartment) {
+      onClose && onClose();
+      return;
+    }
+    const {
+      enableSelectRange
+    } = initColumnData;
+    if (topParentIds.includes(parentId) && enableSelectRange) {
+      setParentId('');
+      return;
+    }
+    const upperLevelDepartmentParentId = parentDepartment.parent_id;
+    setParentId(upperLevelDepartmentParentId);
+  }, [initColumnData, departments, parentId, topParentIds, onClose]);
+  const renderLeftContent = (0, _react.useCallback)(() => {
+    const parentDepartment = departments.find(item => item.id === parentId);
+    if (!parentDepartment && !isFilterEditor) return (0, _lang.getLocale)('Cancel');
+    return /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-return"
+    });
+  }, [isFilterEditor, departments, parentId]);
+  const renderDepartments = (0, _react.useCallback)(() => {
+    const {
+      enableSelectRange
+    } = initColumnData;
+    let currentDepartments = [];
+    if (enableSelectRange && !parentId && !isFilterEditor) {
+      currentDepartments = departments.filter(department => topParentIds.includes(department.id));
+    } else {
+      currentDepartments = departments.filter(department => department.parent_id === parentId);
+    }
+    if (currentDepartments.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "empty-department-list d-flex justify-content-center"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('No_departments_available')));
+    }
+    return /*#__PURE__*/_react.default.createElement(_list.default, {
+      className: "my-list mobile-dtable-ui-department-editor-departments",
+      renderHeader: () => (0, _lang.getLocale)('Select_department')
+    }, isFilterEditor && parentId === -1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+      const {
+        type,
+        name
+      } = option;
+      const isChecked = isSupportMultiple ? value.includes(type) : value === type;
+      return /*#__PURE__*/_react.default.createElement(Item, {
+        key: "department-range-item-".concat(index),
+        multipleLine: true,
+        onClick: event => onParentDepartmentClick(event, type),
+        className: "mobile-dtable-ui-department-editor-department-item"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "d-flex"
+      }, /*#__PURE__*/_react.default.createElement(_DTableRadio.default, {
+        isChecked: isChecked,
+        onCheckedChange: event => onParentDepartmentClick(event, type),
+        label: (0, _lang.getLocale)(name)
+      })));
+    })), currentDepartments.map((department, index) => {
+      const {
+        hasChild,
+        name,
+        id
+      } = department;
+      const isChecked = isSupportMultiple ? value.includes(id) : value === id;
+      return /*#__PURE__*/_react.default.createElement(Item, {
+        arrow: hasChild ? 'horizontal' : '',
+        key: "department-item-".concat(index),
+        multipleLine: true,
+        onClick: event => onDepartmentClick(event, department),
+        className: "mobile-dtable-ui-department-editor-department-item"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "d-flex"
+      }, /*#__PURE__*/_react.default.createElement(_DTableRadio.default, {
+        isChecked: isChecked,
+        onCheckedChange: event => onParentDepartmentClick(event, department),
+        label: name
+      })));
+    }));
+  }, [initColumnData, parentId, isFilterEditor, isSupportMultiple, departments, value, topParentIds, onParentDepartmentClick, onDepartmentClick]);
+  (0, _react.useEffect)(() => {
+    const {
+      enableSelectRange,
+      selectedRange,
+      specificDepartments
+    } = initColumnData;
+    if (enableSelectRange && !isFilterEditor) {
+      const {
+        current_user_department_ids = [],
+        current_user_department_and_sub_ids = []
+      } = userDepartmentIdsMap;
+      const {
+        departments: initialDepartments
+      } = window.app.state;
+      let targetDepartments = [];
+      let topParentIds = [];
+      let canExpand = true;
+      if (selectedRange === _constants.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT) {
+        canExpand = false;
+        topParentIds = current_user_department_ids;
+        targetDepartments = initialDepartments.filter(department => current_user_department_ids.includes(department.id));
+      } else if (selectedRange === _constants.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
+        const currentUserDepartments = initialDepartments.filter(department => current_user_department_ids.includes(department.id));
+        topParentIds = currentUserDepartments.filter(department => !current_user_department_ids.includes(department.parent_id)).map(department => department.id);
+        targetDepartments = initialDepartments.filter(department => current_user_department_and_sub_ids.includes(department.id));
+      } else {
+        canExpand = false;
+        topParentIds = specificDepartments;
+        targetDepartments = initialDepartments.filter(department => specificDepartments.includes(department.id));
+      }
+      const departments = (0, _utils.getNormalizedDepartments)(targetDepartments, canExpand);
+      setDepartments(departments);
+      setTopParentIds(topParentIds);
+      return;
+    }
+    const departments = (0, _utils.getNormalizedDepartments)(initialDepartments);
+    setDepartments(departments);
+    setParentId(-1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    className: "mobile-dtable-ui-department-editor",
+    onLeftClick: onLeftClick,
+    onRightClick: onSave,
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLeftContent()), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isFilterEditor ? null : (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderDepartments()));
+};
+var _default = exports.default = Small;

package/lib/DigitalSignEditor/index.js

@@ -7,175 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 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(_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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const DigitalSignEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    ...props
+  } = _ref;
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (size === 'sm') return /*#__PURE__*/_react.default.createElement(_sm.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(_lg.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = DigitalSignEditor;

package/lib/DigitalSignEditor/lg/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 Large 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 = Large;