dtable-ui-component 5.2.0 → 5.2.2-alpha1

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -32,7 +32,7 @@ function DepartmentMultipleSelectFilter(props) {
         name
       } = option;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item d-flex align-items-center",
+        className: "department-item",
         key: index,
         onClick: event => selectDepartment(event, type)
       }, /*#__PURE__*/_react.default.createElement("input", {

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -37,7 +37,7 @@ function DepartmentSingleSelectFilter(props) {
         name
       } = option;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item department-item d-flex align-items-center",
+        className: "department-item",
         key: index,
         onClick: event => onSelect(event, type)
       }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -301,7 +301,6 @@
   width: 100%;
 }
 
-.dropdown-item .collaborator,
 .filters-list .option-group .option-group-content .collaborator {
   background-color: unset;
 }

package/lib/Department-editor/department-multiple-select/index.css

@@ -1,4 +1,10 @@
 .departments-container.dtable-ui {
+  position: absolute;
+  background-color: #fff;
+  border-radius: 3px;
+  min-width: 12rem;
+  height: 285px;
+  box-shadow: 0 0 5px #ccc;
   top: -4px;
   left: -3px;
   width: calc(100% + 8px);
@@ -52,12 +58,14 @@
   cursor: pointer;
 }
 
-.departments-container.dtable-ui .dropdown-item {
-  padding-left: 10px;
+.departments-container.dtable-ui .department-item {
+  padding: 4px 15px 4px 10px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.departments-container.dtable-ui .dropdown-item:hover {
+.departments-container.dtable-ui .department-item:hover {
   background: #f5f5f5;
   color: #212529;
 }

package/lib/Department-editor/department-multiple-select/index.js

@@ -92,7 +92,7 @@ function DepartmentMultipleSelect(props) {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: id
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-item d-flex align-items-center",
+      className: "department-item",
       onClick: event => onSelectDepartment(event, id)
     }, /*#__PURE__*/_react.default.createElement("input", {
       type: "checkbox",
@@ -123,7 +123,7 @@ function DepartmentMultipleSelect(props) {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
+      className: "departments-container dtable-ui ".concat(classNamePrefix)
     }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick

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

@@ -146,7 +146,7 @@ class DepartmentSingleSelect extends _react.Component {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: id
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item department-item d-flex align-items-center",
+        className: "department-item",
         onClick: event => this.onSelectDepartment(event, id),
         style: itemStyle
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -250,7 +250,7 @@ class DepartmentSingleSelect extends _react.Component {
   }
   render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-menu department-editor-list dtable-ui show m-0 p-0",
+      className: "department-editor-list dtable-ui",
       style: this.props.menuStyle || {},
       ref: ref => this.departmentsRef = ref,
       onClick: this.onStopPropagation,

package/lib/Department-editor/index.css

@@ -1,6 +1,14 @@
 .dtable-ui.department-editor-list {
+  position: absolute;
+  left: 0;
+  z-index: 1000;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 3px;
+  min-width: 12rem;
   width: 300px;
   height: 285px;
+  box-shadow: 0 0 5px #ccc;
 }
 
 .dtable-ui.department-editor-list .editor-department-container {
@@ -44,13 +52,14 @@
   display: initial !important;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .dropdown-item {
-  padding-left: 10px;
-  padding-right: 15px;
+.dtable-ui.department-editor-list .editor-department-container .department-item {
+  padding: 4px 15px 4px 10px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .dropdown-item:hover {
+.dtable-ui.department-editor-list .editor-department-container .department-item:hover {
   background: #f5f5f5;
   color: #212529;
 }

package/lib/DigitalSignFormatter/index.js

@@ -63,28 +63,24 @@ class DigitalSignFormatter extends _react.Component {
       isSample,
       renderItem
     } = this.props;
-    const className = (0, _classnames.default)('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
     const signImages = this.getSignImages();
     if (signImages.length === 0) return null;
-    const {
-      isPreviewSignImage,
-      largeSignImageIndex
-    } = this.state;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: className
+      className: (0, _classnames.default)('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName)
     }, /*#__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",
+    })), this.state.isPreviewSignImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      wrapperClassName: "digital-sign-formatter-image-previewer",
       readOnly: readOnly,
       server: isSample ? config.server : '',
       imageItems: signImages,
-      imageIndex: largeSignImageIndex,
+      imageIndex: this.state.largeSignImageIndex,
       closeImagePopup: this.hideLargeSignImage,
       downloadImage: this.downloadImage,
+      onViewOriginal: this.props.onViewOriginal,
       moveToPrevImage: () => {},
       moveToNextImage: () => {}
     }));

package/lib/ImageFormatter/index.js

@@ -109,7 +109,8 @@ class ImageFormatter extends _react.default.Component {
       readOnly: readOnly,
       server: server,
       moveToPrevRowImage: this.props.moveToPrevRowImage,
-      moveToNextRowImage: this.props.moveToNextRowImage
+      moveToNextRowImage: this.props.moveToNextRowImage,
+      onViewOriginal: this.props.onViewOriginal
     }));
   }
 }

package/lib/ImagePreviewerLightbox/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
 var _utils = require("./utils");
+var _lang = require("../lang");
 require("@seafile/react-image-lightbox/style.css");
 function ImagePreviewerLightbox(props) {
   const {
@@ -54,7 +55,11 @@ function ImagePreviewerLightbox(props) {
     } : null,
     onClickDownload: downloadImage ? () => {
       downloadImage(URL);
-    } : null
+    } : null,
+    imagePadding: 70,
+    onViewOriginal: props.onViewOriginal,
+    viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
+    enableRotate: canRotateImage
   });
 }
 var _default = exports.default = ImagePreviewerLightbox;

package/lib/RowExpandImageFormatter/index.js

@@ -52,8 +52,7 @@ class RowExpandImageFormatter extends _react.default.Component {
       server,
       containerClassName,
       readOnly,
-      column,
-      downloadImage
+      column
     } = this.props;
     const {
       isPreviewImage,
@@ -70,7 +69,7 @@ class RowExpandImageFormatter extends _react.default.Component {
         key: index,
         index: index,
         column: column,
-        downloadFile: downloadImage,
+        downloadFile: this.props.downloadImage,
         deleteFile: this.props.deleteFile,
         readOnly: readOnly,
         onImageClick: this.onImageClick
@@ -82,8 +81,9 @@ class RowExpandImageFormatter extends _react.default.Component {
       moveToPrevImage: this.movePrev,
       moveToNextImage: this.moveNext,
       deleteImage: this.props.deleteFile,
-      downloadImage: downloadImage,
+      downloadImage: this.props.downloadImage,
       onRotateImage: this.props.rotateImage,
+      onViewOriginal: this.props.onViewOriginal,
       readOnly: readOnly,
       server: server,
       moveToPrevRowImage: this.props.moveToPrevRowImage,

package/lib/locals/en.js

@@ -30,6 +30,7 @@ const en = {
   "Current_user_department_and_sub": "Current user\"s department and sub-departments",
   "Specific_departments": "Specific departments",
   "Deleted_department": "Deleted department",
+  "View_original_image": "View original image",
   "Add_filter": "Add filter",
   "Submit": "Submit",
   "No_filters": "No filters",

package/lib/locals/zh-CN.js

@@ -30,6 +30,7 @@ const zh_CN = {
   "Current_user_department_and_sub": "当前用户的部门和子部门",
   "Specific_departments": "具体部门",
   "Deleted_department": "已经删除的部门",
+  "View_original_image": "查看原图",
   "Add_filter": "添加过滤",
   "Submit": "提交",
   "No_filters": "没有过滤条件",

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.0",
+  "version": "5.2.2-alpha1",
   "main": "./lib/index.js",
   "dependencies": {
-    "@seafile/react-image-lightbox": "2.0.5",
+    "@seafile/react-image-lightbox": "3.0.1",
     "@seafile/seafile-calendar": "0.0.24",
-    "@seafile/seafile-editor": "~1.0.122",
+    "@seafile/seafile-editor": "~1.0.123",
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",