dtable-ui-component 6.0.49 → 6.0.50

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

@@ -17,6 +17,7 @@ var _toaster = _interopRequireDefault(require("../../toaster"));
 var _lang = require("../../lang");
 var _utils2 = require("../../utils/utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCDigitalSignEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -141,41 +142,54 @@ class PCDigitalSignEditor extends _react.Component {
       ...config,
       partUrl: _utils.default.getSignImageUrl(value)
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("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'))));
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-digital-sign-editor-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-digital-sign-editor-logo",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-handwritten-signature"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "ml-2 dtable-ui-digital-sign-editor-title",
+            children: (0, _lang.getLocale)('Digital_signature')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-digital-sign-editor-operations",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "btn-clear-dtable-ui-digital-sign",
+            onClick: this.clearSignature,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-clear-format"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: (0, _lang.getLocale)('Re-sign')
+            })]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-digital-sign-panel",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_signatureBoard.default, {
+          ref: ref => this.signatureBoard = ref,
+          signImageUrl: signImageUrl
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableCustomFooter.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          onClick: this.props.onCommitCancel,
+          color: "secondary",
+          children: (0, _lang.getLocale)('Cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          onClick: this.saveSignature,
+          color: "primary",
+          disabled: saving,
+          children: (0, _lang.getLocale)(saving ? 'Saving' : 'Save')
+        })]
+      })]
+    });
   }
 }
 var _default = exports.default = PCDigitalSignEditor;

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

@@ -11,6 +11,7 @@ var _signatureTool = _interopRequireDefault(require("./signature-tool"));
 var _Loading = _interopRequireDefault(require("../../Loading"));
 var _lang = require("../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class SignatureBoard extends _react.Component {
   constructor(props) {
     super(props);
@@ -75,9 +76,10 @@ class SignatureBoard extends _react.Component {
         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'));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "signature-board-tips",
+        children: (0, _lang.getLocale)('Please_sign_on_this_panel')
+      });
     };
     this.renderSignImage = () => {
       const {
@@ -98,17 +100,18 @@ class SignatureBoard extends _react.Component {
           loadingSignImage: false
         });
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("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
-      }));
+        onClick: this.onClickSignImage,
+        children: loadingSignImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: signImageUrl,
+          alt: "",
+          draggable: false
+        })
+      });
     };
     this.state = {
       isEmpty: !props.signImageUrl,
@@ -124,12 +127,13 @@ class SignatureBoard extends _react.Component {
     this.setState = () => {};
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "signature-board",
-      ref: ref => this.signatureBoard = ref
-    }, /*#__PURE__*/_react.default.createElement("canvas", {
-      id: "signature_board_canvas"
-    }), this.renderTips(), this.renderSignImage());
+      ref: ref => this.signatureBoard = ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
+        id: "signature_board_canvas"
+      }), this.renderTips(), this.renderSignImage()]
+    });
   }
 }
 var _default = exports.default = SignatureBoard;

package/lib/DigitalSignFormatter/index.js

@@ -13,6 +13,7 @@ var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerL
 var _utils = require("./utils");
 var _utils2 = require("../utils/utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class DigitalSignFormatter extends _react.Component {
   constructor(props) {
     super(props);
@@ -70,25 +71,28 @@ class DigitalSignFormatter extends _react.Component {
       isPreviewSignImage,
       largeSignImageIndex
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
-      images: signImages,
-      server: config.server,
-      onImageClick: this.onClickSignImage,
-      renderItem: renderItem
-    })), isPreviewSignImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      className: "digital-sign-formatter-image-previewer",
-      readOnly: readOnly,
-      server: isSample ? config.server : '',
-      imageItems: signImages,
-      imageIndex: largeSignImageIndex,
-      closeImagePopup: this.hideLargeSignImage,
-      downloadImage: this.downloadImage,
-      onViewOriginal: this.props.onViewOriginal,
-      moveToPrevImage: () => {},
-      moveToNextImage: () => {}
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: className,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_imagesLazyLoad.default, {
+          images: signImages,
+          server: config.server,
+          onImageClick: this.onClickSignImage,
+          renderItem: renderItem
+        })
+      }), isPreviewSignImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewerLightbox.default, {
+        className: "digital-sign-formatter-image-previewer",
+        readOnly: readOnly,
+        server: isSample ? config.server : '',
+        imageItems: signImages,
+        imageIndex: largeSignImageIndex,
+        closeImagePopup: this.hideLargeSignImage,
+        downloadImage: this.downloadImage,
+        onViewOriginal: this.props.onViewOriginal,
+        moveToPrevImage: () => {},
+        moveToNextImage: () => {}
+      })]
+    });
   }
 }
 DigitalSignFormatter.defaultProps = {

package/lib/Drawer/index.js

@@ -9,9 +9,12 @@ exports.default = void 0;
 var _rmcDrawer = _interopRequireDefault(require("rmc-drawer"));
 var React = _interopRequireWildcard(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Drawer extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(_rmcDrawer.default, this.props);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcDrawer.default, {
+      ...this.props
+    });
   }
 }
 exports.default = Drawer;

package/lib/DurationEditor/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 class DurationEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -103,7 +104,7 @@ class DurationEditor extends _react.default.Component {
     } : {
       textAlign: 'right'
     };
-    return /*#__PURE__*/_react.default.createElement("input", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ref: this.setInputRef,
       type: "text",
       className: (0, _classnames.default)('form-control', className),

package/lib/DurationFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class DurationFormatter extends _react.default.Component {
   render() {
     let {
@@ -20,10 +21,11 @@ class DurationFormatter extends _react.default.Component {
     const durationDisplayString = (0, _dtableUtils.getDurationDisplayString)(value, {
       duration_format: format
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: durationDisplayString,
-      className: classname
-    }, durationDisplayString);
+      className: classname,
+      children: durationDisplayString
+    });
   }
 }
 var _default = exports.default = DurationFormatter;

package/lib/EditEditorButton/index.js

@@ -7,15 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class EditEditorButton extends _react.default.Component {
   render() {
     const {
       text
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-ui-editor-button",
-      onClick: this.props.onClick
-    }, text);
+      onClick: this.props.onClick,
+      children: text
+    });
   }
 }
 var _default = exports.default = EditEditorButton;

package/lib/EmailEditor/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _editorBase = _interopRequireDefault(require("../common/editor-base"));
 var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 class EmailEditor extends _editorBase.default {
   constructor() {
     super(...arguments);
@@ -43,7 +44,7 @@ class EmailEditor extends _editorBase.default {
     return this.input.querySelector('input:not([type=hidden])');
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("input", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "text",
       ref: this.setInputRef,
       onBlur: this.onBlur,

package/lib/EmailFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class EmailFormatter extends _react.default.Component {
   render() {
     const {
@@ -15,10 +16,11 @@ class EmailFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container email-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: value,
-      className: classname
-    }, value);
+      className: classname,
+      children: value
+    });
   }
 }
 var _default = exports.default = EmailFormatter;

package/lib/FieldDisplaySetting/field-item.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _DTableSwitch = _interopRequireDefault(require("../DTableSwitch"));
+var _jsxRuntime = require("react/jsx-runtime");
 function FieldItem(_ref) {
   let {
     field,
@@ -62,30 +63,35 @@ function FieldItem(_ref) {
     onMoveField(droppedColumnKey, field.key);
   };
   const placeholder = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "field-switch"
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font ".concat(_dtableUtils.COLUMNS_ICON_CONFIG[field.type])
-    }), /*#__PURE__*/_react.default.createElement("span", null, field.name));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "field-switch",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font ".concat(_dtableUtils.COLUMNS_ICON_CONFIG[field.type])
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: field.name
+      })]
+    });
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: fieldItemRef,
     className: "field-item-container ".concat(isCollapsed ? 'd-none' : ''),
     onDrop: onDrop,
     onDragEnter: onTableDragEnter,
     onDragOver: onDragOver,
-    onDragLeave: onDragLeave
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-dragbar",
-    draggable: "true",
-    onDragStart: onDragStart
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-drag pr-2"
-  })), /*#__PURE__*/_react.default.createElement(_DTableSwitch.default, {
-    checked: field.shown,
-    switchClassName: "flex-fill",
-    placeholder: placeholder(),
-    onChange: handleClickField
-  }));
+    onDragLeave: onDragLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "field-dragbar",
+      draggable: "true",
+      onDragStart: onDragStart,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-drag pr-2"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSwitch.default, {
+      checked: field.shown,
+      switchClassName: "flex-fill",
+      placeholder: placeholder(),
+      onChange: handleClickField
+    })]
+  });
 }
 var _default = exports.default = FieldItem;

package/lib/FieldDisplaySetting/index.js

@@ -11,6 +11,7 @@ var _reactstrap = require("reactstrap");
 var _reactTransitionGroup = require("react-transition-group");
 var _fieldItem = _interopRequireDefault(require("./field-item"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const FIELD_ITEM_HEIGHT = 30;
 const BANNER_HEIGHT = 24;
 const DURATION = 300;
@@ -50,43 +51,51 @@ function FieldDisplaySetting(_ref) {
       height: 0
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-setting"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-setting-header seatable-collapse-header d-flex align-items-center justify-content-between",
-    onClick: expandAllFields
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
-    className: "mb-0"
-  }, textProperties.titleValue), /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
-  })), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
-    nodeRef: nodeRef,
-    in: !isCollapsed,
-    timeout: DURATION
-  }, state => /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-setting-wrapper",
-    ref: nodeRef,
-    style: {
-      ...defaultStyle,
-      ...transitionStyles[state]
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2")
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
-    className: "mb-0"
-  }, textProperties.bannerValue), /*#__PURE__*/_react.default.createElement("span", {
-    className: "show-all-button",
-    onClick: onToggleFieldsVisibility
-  }, fieldAllShown ? textProperties.hideValue : textProperties.showValue)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-setting-body"
-  }, fields.map((field, index) => {
-    return /*#__PURE__*/_react.default.createElement(_fieldItem.default, {
-      key: "".concat(field.key, "-").concat(index),
-      field: field,
-      isCollapsed: isCollapsed,
-      onClickField: onClickField,
-      onMoveField: onMoveField
-    });
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "field-setting",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "field-setting-header seatable-collapse-header d-flex align-items-center justify-content-between",
+      onClick: expandAllFields,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Label, {
+        className: "mb-0",
+        children: textProperties.titleValue
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+      nodeRef: nodeRef,
+      in: !isCollapsed,
+      timeout: DURATION,
+      children: state => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "field-setting-wrapper",
+        ref: nodeRef,
+        style: {
+          ...defaultStyle,
+          ...transitionStyles[state]
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2"),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Label, {
+            className: "mb-0",
+            children: textProperties.bannerValue
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "show-all-button",
+            onClick: onToggleFieldsVisibility,
+            children: fieldAllShown ? textProperties.hideValue : textProperties.showValue
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "field-setting-body",
+          children: fields.map((field, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fieldItem.default, {
+              field: field,
+              isCollapsed: isCollapsed,
+              onClickField: onClickField,
+              onMoveField: onMoveField
+            }, "".concat(field.key, "-").concat(index));
+          })
+        })]
+      })
+    })]
+  });
 }
 var _default = exports.default = FieldDisplaySetting;

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

@@ -11,25 +11,34 @@ var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcPreviewer = _interopRequireDefault(require("./pc-previewer"));
 var _mbPreviewer = _interopRequireDefault(require("./mb-previewer"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 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, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcPreviewer.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbPreviewer.default, Object.assign({}, props, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbPreviewer.default, {
+    ...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
-  }))));
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcPreviewer.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbPreviewer.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = FilesPreviewer;