dtable-ui-component 6.0.30 → 6.0.31

package/lib/DepartmentSingleSelectEditor/index.js

@@ -0,0 +1,34 @@
+"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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const DepartmentSingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.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(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: '(max-width: 768px)'
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
+var _default = exports.default = DepartmentSingleSelectEditor;

package/lib/DepartmentSingleSelectEditor/mb-editor/index.css

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

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

@@ -0,0 +1,227 @@
+"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 _List = _interopRequireDefault(require("../../List"));
+var _DTableRadio = _interopRequireDefault(require("../../DTableRadio"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _departments = require("../../utils/departments");
+var _departments2 = require("../../constants/departments");
+var _lang = require("../../lang");
+require("./index.css");
+const Item = _List.default.Item;
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+const MBDepartmentSingleSelectEditor = _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: "d-flex justify-content-center seatable-tip-default h-100 w-100 align-items-center"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('No_departments_available')));
+    }
+    return /*#__PURE__*/_react.default.createElement(_List.default, {
+      className: "my-list dtable-ui-mobile-department-editor-departments",
+      renderHeader: () => (0, _lang.getLocale)('Select_department')
+    }, isFilterEditor && parentId === -1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _departments2.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: "dtable-ui-mobile-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: "dtable-ui-mobile-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;
+      let targetDepartments = [];
+      let topParentIds = [];
+      let canExpand = true;
+      if (selectedRange === _dtableUtils.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 === _dtableUtils.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, _departments.getNormalizedDepartments)(targetDepartments, canExpand);
+      setDepartments(departments);
+      setTopParentIds(topParentIds);
+      return;
+    }
+    const departments = (0, _departments.getNormalizedDepartments)(initialDepartments);
+    setDepartments(departments);
+    setParentId(-1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    className: "dtable-ui-mobile-department-editor",
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(Header, {
+    onLeftClick: onLeftClick,
+    onRightClick: onSave
+  }, /*#__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 : /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#f09f3f'
+    }
+  }, (0, _lang.getLocale)('Submit')))), /*#__PURE__*/_react.default.createElement(Body, null, renderDepartments()));
+};
+var _default = exports.default = MBDepartmentSingleSelectEditor;

package/lib/{Department-editor → DepartmentSingleSelectEditor/pc-editor}/department-single-select.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
-var _Loading = _interopRequireDefault(require("../Loading"));
-var _utils = require("./utils");
-var _lang = require("../lang");
+var _Loading = _interopRequireDefault(require("../../Loading"));
+var _departments = require("../../utils/departments");
+var _lang = require("../../lang");
 require("./index.css");
 class DepartmentSingleSelect extends _react.Component {
   constructor(props) {
@@ -28,7 +28,7 @@ class DepartmentSingleSelect extends _react.Component {
       }
     };
     this.initDepartments = departments => {
-      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(departments || []);
+      const normalizedDepartments = (0, _departments.getNormalizedDepartments)(departments || []);
       this.validDepartments = normalizedDepartments;
       this.setState({
         departments: normalizedDepartments
@@ -56,7 +56,7 @@ class DepartmentSingleSelect extends _react.Component {
       } else {
         targetDepartments = departments.filter(department => specificDepartments.includes(department.id));
       }
-      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(targetDepartments);
+      const normalizedDepartments = (0, _departments.getNormalizedDepartments)(targetDepartments);
       _this.validDepartments = normalizedDepartments;
       _this.setState({
         departments: normalizedDepartments,
@@ -94,7 +94,7 @@ class DepartmentSingleSelect extends _react.Component {
       const {
         departments
       } = this.state;
-      this.validDepartments = (0, _utils.searchDepartments)(departments, newSearchValue);
+      this.validDepartments = (0, _departments.searchDepartments)(departments, newSearchValue);
       this.setState({
         searchVal: newSearchValue
       });
@@ -202,7 +202,7 @@ class DepartmentSingleSelect extends _react.Component {
     };
     this.renderEmptyTip = () => {
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "dtable-ui-editor-no-search-result"
+        className: "none-search-result pl-4 pr-4"
       }, (0, _lang.getLocale)('No_departments_available'));
     };
     this.renderMenuContent = () => {

package/lib/{Department-editor → DepartmentSingleSelectEditor/pc-editor}/index.css

@@ -22,6 +22,8 @@
   font-size: 14px;
   display: inline-block;
   color: #666666;
+  padding: 10px;
+  overflow: auto;
 }
 
 .dtable-ui.department-editor-list .department-item-left-content {
@@ -68,19 +70,24 @@
   color: #212529;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .expand {
+.dtable-ui.department-editor-list .editor-department-container .dtable-icon-down3 {
   color: #b5b5b5;
   font-size: 12px;
-  transform: scale(0.8);
+  transform: scale(0.8) rotate(-90deg);
+  
   cursor: pointer;
   display: inline-block;
   margin-left: 0px !important;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .expand:hover {
+.dtable-ui.department-editor-list .editor-department-container .dtable-icon-down3:hover {
   color: #555;
 }
 
+.dtable-ui.department-editor-list .editor-department-container .dtable-icon-down3.expand {
+  transform: scale(0.8);
+}
+
 .selected-departments.dtable-ui {
   background-color: #f6f6f6;
   padding: 5px;

package/lib/{Department-editor → DepartmentSingleSelectEditor/pc-editor}/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 PCDepartmentSingleSelectEditor 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 = PCDepartmentSingleSelectEditor;

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 _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const DigitalSignEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.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(_pcEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = DigitalSignEditor;

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

@@ -0,0 +1,35 @@
+.dtable-ui-mobile-digital-sign-editor .dtable-ui-mobile-full-screen-page-body {
+  position: relative;
+  flex: 1;
+}
+
+.dtable-ui-mobile-digital-sign-editor .dtable-ui-digital-sign-panel {
+  margin-top: 20px;
+}
+
+.dtable-ui-mobile-digital-sign-editor .dtable-ui-digital-sign-editor-operations {
+  z-index: 3;
+  top: 10px;
+  right: 16px;
+}
+
+.dtable-ui-mobile-digital-sign-editor .dtable-ui-digital-sign-editor-operations .btn-clear-dtable-ui-digital-sign {
+  color: rgb(240, 159, 63);
+  background-color: unset;
+}
+
+.dtable-ui-mobile-digital-sign-editor .dtable-ui-digital-sign-panel-mask {
+  top: 0;
+  left: 0;
+  z-index: 4;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, .4);
+}
+
+.dtable-ui-mobile-digital-sign-editor .dtable-ui-digital-sign-panel-mask .dtable-ui-digital-sign-panel-mask-container {
+  color: #fff;
+}