dtable-ui-component 5.2.3 → 5.2.5-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 [document](https://seatable.github.io/dtable-ui-component/docs/)
 
-## Instructions for using font icons
+## Font icons
 
 When using dtable-ui-component component library, you need to import dtable-font font icon.
 
@@ -10,23 +10,48 @@ When using dtable-ui-component component library, you need to import dtable-font
 2. If the dtable-font font icon is not referenced in the application, you need to import the corresponding font icon when using dtable-ui-component
 
 ```js
-  import { CollaboratorEditor } from 'dtable-ui-component';
-  import 'dtable-ui-component/assets/dtable-font.css';
+import { CollaboratorEditor } from 'dtable-ui-component';
+import 'dtable-ui-component/assets/dtable-font.css';
+```
+
+## Internationalization (I18n)
 
-  ...
+If your UI component requires localization, you need to call the localization function.
+
+```js
+import { setLocale } from 'dtable-ui-component/lib/lang';
+
+let lang = 'en';
+setLocale(lang);
 ```
 
-## load demand
+## On-demand loading of components
+
+If you want to use on-demand loading, you need to install the following third-party libraries.
+
+~~~bash
+npm install babel-plugin-import --save-dev
+~~~
 
-If you want to use on-demand loading, add the following content to the ` .babelrc` file of your project 
+then add the following content to the ` .babelrc` file of your project 
 
 ```js
-"plugins": [
-    ["on-demand-loading", {"library": "dtable-ui-component"}]
- ]
+{
+  "plugins": [
+    [
+      "import", {
+        "libraryName": "dtable-ui-component",
+        "libraryDirectory": "lib",
+        "camel2DashComponentName": false,
+        "camel2UnderlineComponentName": false
+      },
+      "dtable-ui-component"
+    ],
+  ]
+}
 ```
 
-Long Text Formatter
+## Long Text Formatter
 
 If your project only uses a simple long text formatter, you can reference the SimpleLongTextFormatter component.
 

package/lib/CheckboxFormatter/index.css

@@ -5,6 +5,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 600;
 }

package/lib/DTableSelect/utils.js

@@ -101,7 +101,14 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     ...base,
     zIndex: 9999
   }),
-  indicatorSeparator: () => {}
+  indicatorSeparator: () => {},
+  clearIndicator: () => ({
+    // 仅用于测试
+    color: 'pink'
+  }),
+  indicatorContainer: () => ({
+    padding: '8px 4px'
+  })
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement("span", {

package/lib/FileItemFormatter/utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.imageCheck = exports.getFileThumbnailInfo = exports.getFileIconUrl = void 0;
-var _utils = require("../ImageFormatter/utils");
+var _url = require("../utils/url");
 const FILEEXT_ICON_MAP = {
   // text file
   md: 'txt.png',
@@ -62,7 +62,7 @@ const getFileThumbnailInfo = fileItem => {
   } else {
     isImage = imageCheck(fileItem.name);
     if (isImage) {
-      fileIconUrl = (0, _utils.getImageThumbnailUrl)(fileItem.url);
+      fileIconUrl = (0, _url.getImageThumbnailUrl)(fileItem.url);
     } else {
       fileIconUrl = require('./' + getFileIconUrl(fileItem.name, fileItem.type));
     }

package/lib/ImageFormatter/images-lazy-load.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Loading = _interopRequireDefault(require("../Loading"));
-var _utils = require("./utils");
+var _url = require("../utils/url");
 class ImagesLazyLoad extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -42,7 +42,9 @@ class ImagesLazyLoad extends _react.default.Component {
           server
         } = this.props;
         images.forEach((item, index) => {
-          let url = (0, _utils.getImageThumbnailUrl)(item, server);
+          let url = (0, _url.getImageThumbnailUrl)(item, {
+            server
+          });
           this.lazyLoadImage(url, image => {
             let {
               loadedCount,

package/lib/ImageFormatter/index.js

@@ -9,8 +9,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
-var _utils = require("./utils");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
+var _url = require("../utils/url");
 require("./index.css");
 class ImageFormatter extends _react.default.Component {
   constructor(props) {
@@ -79,7 +79,7 @@ class ImageFormatter extends _react.default.Component {
     }
     if (isSample) {
       let item = value[0];
-      let url = (0, _utils.getImageThumbnailUrl)(item, server);
+      let url = (0, _url.getImageThumbnailUrl)(item, server);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: className
       }, /*#__PURE__*/_react.default.createElement("img", {

package/lib/ImageFormatter/utils.js

@@ -1,14 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getImageThumbnailUrl = void 0;
-const getImageThumbnailUrl = (url, server) => {
-  if (typeof url !== 'string') return '';
-  if (server && url.indexOf(server) > -1) {
-    return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
-  }
-  return url;
-};
-exports.getImageThumbnailUrl = getImageThumbnailUrl;
+"use strict";

package/lib/ImagePreviewerLightbox/index.css

@@ -0,0 +1,21 @@
+.ril__outer .ril__navButtons:focus,
+.ril__outer .ril__builtinButton:focus {
+  outline: none;
+}
+
+.ril__outer .ril__toolbarItem {
+  height: 50px;
+  color: #fff;
+  display: inline-block;
+  font-size: 120%;
+  line-height: 50px;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ril-caption .ril__builtinButton {
+  width: 24px;
+}

package/lib/ImagePreviewerLightbox/index.js

@@ -8,45 +8,83 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
-var _utils = require("./utils");
+var _url = require("../utils/url");
 var _lang = require("../lang");
 require("@seafile/react-image-lightbox/style.css");
+require("./index.css");
 function ImagePreviewerLightbox(props) {
   const {
     imageItems,
     imageIndex,
-    deleteImage,
-    downloadImage,
-    onRotateImage,
     readOnly,
+    className,
     server,
-    moveToPrevRowImage,
-    moveToNextRowImage,
-    className
+    workspaceID,
+    dtableUuid,
+    deleteImage,
+    downloadImage,
+    onRotateImage
   } = props;
-  const imageItemsLength = imageItems.length;
-  const URL = imageItems[imageIndex];
-  const imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
+  const imageSrcList = imageItems.map(src => {
+    if (server && dtableUuid && (0, _url.isCustomAssetUrl)(src)) {
+      const assetUuid = src.slice(src.lastIndexOf('/') + 1, src.lastIndexOf('.'));
+      return server + '/dtable/' + dtableUuid + '/custom-asset/' + assetUuid;
+    }
+    if (server && dtableUuid && workspaceID && (0, _url.isDigitalSignsUrl)(src)) {
+      return (0, _url.generateCurrentBaseImageUrl)({
+        server,
+        workspaceID,
+        dtableUuid,
+        partUrl: src
+      });
+    }
+    return src;
+  });
+  const imagesLength = imageSrcList.length;
+  const URL = imageSrcList[imageIndex];
+
+  // Handle URL has special symbol %$
+  let imageName = '';
+  try {
+    imageName = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error);
+  }
+
   // svg image is vectorgraph and can't rotate, external image can't rotate
-  const canRotateImage = onRotateImage && !readOnly && !(0, _utils.checkSVGImage)(URL) && (0, _utils.isInternalImg)(URL, server);
-  const imageTitleEl = /*#__PURE__*/_react.default.createElement("span", {
+  const canRotateImage = onRotateImage && !readOnly && !(0, _url.checkSVGImage)(URL) && (0, _url.isInternalImg)(URL, server);
+  let mainSrc = URL;
+  if ((0, _url.needUseThumbnailImage)(URL)) {
+    mainSrc = (0, _url.getImageThumbnailUrl)(URL, {
+      server,
+      dtableUuid,
+      workspaceID,
+      size: 512
+    });
+  }
+  const imageTitleDOM = props.imageTitle || /*#__PURE__*/_react.default.createElement("span", {
     className: "d-flex"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "text-truncate"
-  }, imageTitle), /*#__PURE__*/_react.default.createElement("span", {
-    className: "flex-shrink-0"
-  }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
+  }, imageName), /*#__PURE__*/_react.default.createElement("span", {
+    className: "flex-shrink-0 pl-1"
+  }, "(", imageIndex + 1, "/", imagesLength, ")"));
   return /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
-    imageTitle: imageTitleEl,
-    mainSrc: imageItems[imageIndex],
-    nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
-    prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+    imageTitle: imageTitleDOM,
+    mainSrc: mainSrc,
+    nextSrc: imageSrcList[(imageIndex + 1) % imagesLength],
+    prevSrc: imageSrcList[(imageIndex + imagesLength - 1) % imagesLength],
+    imagePadding: 70,
+    viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
+    enableRotate: canRotateImage,
     onCloseRequest: props.closeImagePopup,
     onMovePrevRequest: props.moveToPrevImage,
     onMoveNextRequest: props.moveToNextImage,
-    onClickMoveUp: moveToPrevRowImage,
-    onClickMoveDown: moveToNextRowImage,
+    onClickMoveUp: props.moveToPrevRowImage,
+    onClickMoveDown: props.moveToNextRowImage,
+    onViewOriginal: props.onViewOriginal,
     onRotateImage: canRotateImage ? deg => {
       onRotateImage(imageIndex, deg);
     } : null,
@@ -55,11 +93,7 @@ function ImagePreviewerLightbox(props) {
     } : null,
     onClickDownload: downloadImage ? () => {
       downloadImage(URL);
-    } : null,
-    imagePadding: 70,
-    onViewOriginal: props.onViewOriginal,
-    viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
-    enableRotate: canRotateImage
+    } : null
   });
 }
 var _default = exports.default = ImagePreviewerLightbox;

package/lib/RowExpandFormatter/index.js

@@ -231,10 +231,12 @@ class EditorFormatter extends _react.default.Component {
           }
         case _constants.CellType.CHECKBOX:
           {
+            var _column$data;
             return /*#__PURE__*/_react.default.createElement("div", {
               className: "checkbox-formatter-container"
             }, /*#__PURE__*/_react.default.createElement(_CheckboxFormatter.default, {
-              value: cellValue
+              value: cellValue,
+              checkboxStyle: ((_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style) || {}
             }));
           }
         case _constants.CellType.CREATOR:

package/lib/utils/url.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.getImageThumbnailUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = void 0;
+const isTargetUrl = (target, url) => {
+  if (!url || typeof url !== 'string') return false;
+  return target && url ? url.indexOf(target) > -1 : false;
+};
+exports.isTargetUrl = isTargetUrl;
+const isInternalImg = (url, server) => {
+  if (!url || typeof url !== 'string') return false;
+  const currentServer = server || window.dtable && window.dtable.server;
+  return url.indexOf(currentServer) > -1;
+};
+exports.isInternalImg = isInternalImg;
+const isCustomAssetUrl = url => {
+  return isTargetUrl('custom-asset://', url);
+};
+exports.isCustomAssetUrl = isCustomAssetUrl;
+const checkSVGImage = url => {
+  if (!url || typeof url !== 'string') return false;
+  const isSVGImage = url.substring(url.lastIndexOf('.')).toLowerCase() === '.svg';
+  return isSVGImage;
+};
+exports.checkSVGImage = checkSVGImage;
+const isDigitalSignsUrl = url => {
+  if (!url || typeof url !== 'string') return false;
+  return isTargetUrl('/digital-signs/', url) && !url.includes('http');
+};
+exports.isDigitalSignsUrl = isDigitalSignsUrl;
+const needUseThumbnailImage = url => {
+  if (!url || typeof url !== 'string' || url.lastIndexOf('.') === -1) {
+    return false;
+  }
+  const image_suffix = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
+  const suffix = ['bmp', 'tif', 'tiff'];
+  return suffix.includes(image_suffix);
+};
+exports.needUseThumbnailImage = needUseThumbnailImage;
+const generateCurrentBaseImageThumbnailUrl = _ref => {
+  let {
+    server,
+    workspaceID,
+    dtableUuid,
+    partUrl,
+    size
+  } = _ref;
+  if (!partUrl || typeof partUrl !== 'string') return '';
+  return "".concat(server, "/thumbnail/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl, "?size=").concat(size);
+};
+exports.generateCurrentBaseImageThumbnailUrl = generateCurrentBaseImageThumbnailUrl;
+const generateCurrentBaseImageUrl = _ref2 => {
+  let {
+    server,
+    workspaceID,
+    dtableUuid,
+    partUrl
+  } = _ref2;
+  if (!partUrl || typeof partUrl !== 'string') return '';
+  return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
+};
+exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
+const getImageThumbnailUrl = function (url) {
+  let {
+    server,
+    dtableUuid,
+    workspaceID,
+    size = 256
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!url || typeof url !== 'string') return '';
+  if (server && dtableUuid && isCustomAssetUrl(url)) {
+    const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
+    return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
+  }
+  if (server && workspaceID && dtableUuid && isDigitalSignsUrl(url)) {
+    return generateCurrentBaseImageThumbnailUrl({
+      server,
+      workspaceID,
+      dtableUuid,
+      size,
+      partUrl: url
+    });
+  }
+  if (checkSVGImage(url) || !isInternalImg(url)) {
+    return url;
+  }
+  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
+};
+exports.getImageThumbnailUrl = getImageThumbnailUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.3",
+  "version": "5.2.5-alpha1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",
@@ -9,11 +9,10 @@
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
-    "dtable-utils": "4.4.0",
+    "dtable-utils": "5.0.11",
     "is-hotkey": "0.2.0",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
-    "react-app-polyfill": "^3.0.0",
     "react-dom": "17.0.2",
     "react-responsive": "9.0.2",
     "react-color": "2.19.3",

package/lib/ImagePreviewerLightbox/utils.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isInternalImg = exports.checkSVGImage = void 0;
-const isInternalImg = (url, server) => {
-  if (!url) return;
-  const currentServer = server || window.dtable && window.dtable.server;
-  return url.indexOf(currentServer) > -1;
-};
-exports.isInternalImg = isInternalImg;
-const checkSVGImage = url => {
-  if (!url) return false;
-  return url.substr(-4).toLowerCase() === '.svg';
-};
-exports.checkSVGImage = checkSVGImage;