dtable-ui-component 5.1.11 → 5.1.12-alpha.2

package/lib/DTableSwitch/index.css

@@ -0,0 +1,58 @@
+.dtable-switch {
+  flex: 1;
+  display: flex;
+}
+
+.dtable-switch .custom-switch {
+  width: 100%;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.dtable-switch .custom-switch .custom-switch-description {
+  width: 192px;
+  margin: 0;
+  padding-right: 5px;
+}
+
+.dtable-switch .custom-switch .dtable-font {
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  display: inline-block;
+  line-height: 24px;
+  margin-right: 8px;
+  color: #666;
+}
+
+.dtable-switch .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+  margin-right: 10px;
+}
+
+.dtable-switch .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}
+
+.dtable-switch .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+/* mobile */
+.dtable-switch.mobile .custom-switch-indicator {
+  height: 1.25rem;
+  width: 2.25rem;
+  border-radius: 50px;
+  margin-right: 0px;
+}
+
+.dtable-switch.mobile .custom-switch-indicator:before {
+  height: calc(1.25rem - 4px);
+  width: calc(1.25rem - 4px);
+}
+
+.dtable-switch.mobile .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: calc(1rem + 1px);
+}

package/lib/DTableSwitch/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+require("./index.css");
 function DtableSwitch(props) {
   const {
     onChange,

package/lib/FieldDisplaySetting/index.css

@@ -37,38 +37,3 @@
   color: #c2c2c2;
   cursor: grab;
 }
-
-.field-item-container .dtable-switch .custom-switch {
-  width: 100%;
-  justify-content: space-between;
-}
-
-.field-item-container .dtable-switch .custom-switch .dtable-font {
-  -webkit-transform: scale(.8);
-  transform: scale(.8);
-  display: inline-block;
-  line-height: 24px;
-  margin-right: 8px;
-  color: #666;
-}
-
-.field-item-container .dtable-switch .custom-switch .custom-switch-description {
-  width: 192px;
-}
-
-.field-item-container .dtable-switch .custom-switch .custom-switch-indicator {
-  width: 22px;
-  height: 12px;
-  border-radius: 6px;
-  margin-right: .25rem;
-}
-
-.field-item-container .dtable-switch .custom-switch .custom-switch-indicator::before {
-  height: 8px;
-  width: 8px;
-}
-
-.field-item-container .dtable-switch .custom-switch-input:checked~.custom-switch-indicator:before {
-  left: 12px;
-}
-

package/lib/FileFormatter/index.css

@@ -12,6 +12,10 @@
   border: 1px solid #f0f0f0;
 }
 
+.dtable-ui.file-formatter .file-item-icon.img {
+  width: fit-content;
+}
+
 .dtable-ui.file-formatter .file-item-count {
   display: inline-block;
   padding: 0 3px;

package/lib/FileItemFormatter/index.js

@@ -8,22 +8,18 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
 class FileItemFormatter extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.getFileIconData = item => {
-      let fileIconUrl = (0, _utils.getFileIconUrl)(item.name, item.type);
-      let fileIconData = require('./' + fileIconUrl);
-      return fileIconData;
-    };
-  }
   render() {
     const {
       file
     } = this.props;
+    const {
+      fileIconUrl,
+      isImage
+    } = (0, _utils.getFileThumbnailInfo)(file);
     return /*#__PURE__*/_react.default.createElement("img", {
-      className: "file-item-icon",
-      src: this.getFileIconData(file),
-      alt: file.name
+      className: "file-item-icon ".concat(isImage ? 'img' : ''),
+      src: fileIconUrl,
+      alt: (file === null || file === void 0 ? void 0 : file.name) || ''
     });
   }
 }

package/lib/FileItemFormatter/utils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFileIconUrl = void 0;
+exports.imageCheck = exports.getFileThumbnailInfo = exports.getFileIconUrl = void 0;
+var _utils = require("../ImageFormatter/utils");
 const FILEEXT_ICON_MAP = {
   // text file
   md: 'txt.png',
@@ -52,6 +53,26 @@ const FILEEXT_ICON_MAP = {
   // default
   default: 'file.png'
 };
+const getFileThumbnailInfo = fileItem => {
+  let fileIconUrl;
+  let isImage;
+  if (!fileItem.name) {
+    fileIconUrl = FILEEXT_ICON_MAP['default'];
+    isImage = false;
+  } else {
+    isImage = imageCheck(fileItem.name);
+    if (isImage) {
+      fileIconUrl = (0, _utils.getImageThumbnailUrl)(fileItem.url);
+    } else {
+      fileIconUrl = require('./' + getFileIconUrl(fileItem.name, fileItem.type));
+    }
+  }
+  return {
+    fileIconUrl,
+    isImage
+  };
+};
+exports.getFileThumbnailInfo = getFileThumbnailInfo;
 const getFileIconUrl = (filename, direntType) => {
   if (typeof direntType === 'string' && direntType === 'dir') {
     return 'assets/folder/' + FILEEXT_ICON_MAP['folder'];
@@ -64,4 +85,15 @@ const getFileIconUrl = (filename, direntType) => {
   const iconUrl = FILEEXT_ICON_MAP[file_ext] ? 'assets/file/192/' + FILEEXT_ICON_MAP[file_ext] : 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
   return iconUrl;
 };
-exports.getFileIconUrl = getFileIconUrl;
+exports.getFileIconUrl = getFileIconUrl;
+const imageCheck = filename => {
+  // no file ext
+  if (!filename || typeof filename !== 'string') return false;
+  if (filename.lastIndexOf('.') === -1) {
+    return false;
+  }
+  const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+  const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'webp'];
+  return image_exts.includes(file_ext);
+};
+exports.imageCheck = imageCheck;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.1.11",
+  "version": "5.1.12-alpha.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",
@@ -143,7 +143,7 @@
     "terser-webpack-plugin": "^5.2.5",
     "url-loader": "^4.1.1",
     "web-vitals": "2.1.4",
-    "webpack": "^5.64.4",
+    "webpack": "^5.94.0",
     "webpack-dev-server": "^4.6.0",
     "webpack-manifest-plugin": "^4.0.2",
     "workbox-webpack-plugin": "^6.4.1",