dtable-ui-component 7.0.1-beta.1 → 7.0.1-beta.5

package/lib/SelectOptionGroup/index.css

@@ -1,12 +1,10 @@
-.option-group {
-  display: flex;
-  flex-direction: column;
+.seatable-option-group {
   position: absolute;
   left: 0;
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding: 0.5rem 0;
+  padding-top: 0;
   box-shadow: var(--bs-border-secondary-shadow);
   background: #fff;
   border: 1px solid var(--bs-border-secondary-color);
@@ -14,34 +12,33 @@
   z-index: 10001;
 }
 
-.option-group .option-group-search {
+.seatable-option-group .seatable-select-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 10px 6px;
-}
-
-.option-group-search .form-control {
-  height: 31px;
+  position: relative;
 }
 
-.option-group .none-search-result {
+.seatable-option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 10px;
-  color: #666666;
+  padding: 8px;
+  color: var(--bs-icon-color);
 }
 
-.option-group .option-group-content {
-  flex: 1;
+.seatable-option-group .seatable-option-group-content {
   max-height: 252px;
   overflow-y: auto;
+  padding: 8px;
 }
 
-.option {
-  display: block;
+.seatable-select-option {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -50,64 +47,57 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 4px;
+  height: 32px;
 }
 
-.option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+.seatable-select-option.seatable-select-option-active {
   cursor: pointer;
+  background-color: var(--bs-btn-background-hover);
 }
 
-.option:hover .header-icon .dtable-font,
-.option:hover .header-icon .multicolor-icon,
-.option.option-active .select-option-name {
-  color: #fff;
-}
-
-.option.option-active .header-icon .dtable-font,
-.option.option-active .header-icon .multicolor-icon {
-  color: #fff;
-}
-
-.option:not(.option-active):hover .header-icon .dtable-font,
-.option:not(.option-active):hover .header-icon .multicolor-icon {
-  color: #aaa;
+.seatable-select-option .select-option-name .multiple-select-option {
+  margin: 0;
 }
 
-.option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
+.seatable-option-group .dtable-icon-check {
+  color: var(--bs-icon-color);
 }
 
-.option .select-option-name .multiple-select-option {
-  margin: 0;
+.select-label {
+  width: 100%;
 }
 
-.option-group-dtable-ui-single-select-selector .select-option-name,
-.option-group-dtable-ui-multiple-select-selector .multiple-option-name {
+.seatable-option-group-selector-multiple-select .select-label,
+.seatable-option-group-selector-single-select .select-option-name,
+.seatable-option-group-selector-multiple-select .multiple-option-name,
+.selector-group-select .group-option-name {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
-.option-group-dtable-ui-multiple-select-selector .multiple-check-icon {
+.seatable-option-group-selector-multiple-select .multiple-check-icon,
+.selector-group-select .group-check-icon {
   display: inline-flex;
-  width: 20px;
   text-align: center;
+  color: var(--bs-icon-color);
 }
 
-.option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
+.selector-group-select .multiple-check-icon .dtable-icon-check,
+.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check,
+.selector-group-select .group-check-icon .dtable-icon-check {
+  font-size: 14px;
 }
 
-.option-group-dtable-ui-single-select-selector .option:hover,
-.option-group-dtable-ui-single-select-selector .option.option-active,
-.option-group-dtable-ui-multiple-select-selector .option:hover,
-.option-group-dtable-ui-multiple-select-selector .option.option-active {
-  background-color: #f5f5f5;
+.selector-group-select .seatable-select-option:hover,
+.selector-group-select .seatable-select-option.seatable-select-option-active {
+  background-color: var(--bs-btn-background-hover);
 }
 
-.option-group-selector-single-select .option.option-active .select-option-name,
-.option-group-selector-multiple-select .option.option-active .select-option-name {
-  color: #212529;
+.select-label .header-icon {
+  display: inline-block;
+  padding: 0 .5rem 0 0 !important;
+  margin-left: 0 !important;
 }

package/lib/SelectOptionGroup/index.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
-var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const OPTION_HEIGHT = 32;
@@ -19,21 +19,16 @@ class SelectOptionGroup extends _react.Component {
   constructor(props) {
     super(props);
     this.resetMenuStyle = () => {
-      if (!this.optionGroupRef) return;
       const _this$props = this.props,
         isInModal = _this$props.isInModal,
         position = _this$props.position;
       const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
         top = _this$optionGroupRef$.top,
-        height = _this$optionGroupRef$.height,
-        width = _this$optionGroupRef$.width;
+        height = _this$optionGroupRef$.height;
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
           this.optionGroupRef.style.top = position.y - height + 'px';
         }
-        if (position && position.x + width > window.innerWidth) {
-          this.optionGroupRef.style.left = window.innerWidth - width - 10 + 'px';
-        }
         this.optionGroupRef.style.opacity = 1;
         this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
       } else {
@@ -127,10 +122,17 @@ class SelectOptionGroup extends _react.Component {
         });
       }
     };
+    this.clearSearch = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
     this.renderOptGroup = searchVal => {
       let _this$props2 = this.props,
         noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        onSelectOption = _this$props2.onSelectOption;
+        onSelectOption = _this$props2.onSelectOption,
+        value = _this$props2.value;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -141,7 +143,16 @@ class SelectOptionGroup extends _react.Component {
       return this.filterOptions.map((opt, i) => {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+        let isSelected = false;
+        if (value) {
+          // Handle both single value and array of values
+          if (Array.isArray(value.value)) {
+            isSelected = value.value.includes(opt.value);
+          } else {
+            isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
+          }
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
           index: i,
           isActive: isActive,
           value: opt.value,
@@ -149,8 +160,13 @@ class SelectOptionGroup extends _react.Component {
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
-          children: opt.label
-        }, "".concat(key, "-").concat(i));
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "select-label",
+            children: opt.label
+          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-check seatable-check-color"
+          })]
+        }, key);
       });
     };
     this.state = {
@@ -215,9 +231,8 @@ class SelectOptionGroup extends _react.Component {
       ref: ref => this.clickOutsideRef = ref,
       onClickOutside: this.props.onClickOutside,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : '', {
-          'pt-0': isShowSelected,
-          'create-new-option-group': addOptionAble
+        className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
+          'pt-0': isShowSelected
         }),
         ref: ref => this.optionGroupRef = ref,
         style: style,
@@ -227,16 +242,18 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+          className: "seatable-select-search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
+            clearValue: this.clearSearch,
             autoFocus: true,
+            isClearable: true,
             ref: this.searchInputRef
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-content",
+          className: "seatable-option-group-content",
           ref: ref => this.optionGroupContentRef = ref,
           children: this.renderOptGroup(searchVal)
         }), addOptionAble && AddOption]

package/lib/SelectOptionGroup/option.js

@@ -1,20 +1,22 @@
 "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 _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 class Option extends _react.Component {
   constructor() {
     super(...arguments);
-    this.onSelectOption = (value, event) => {
+    this.onSelectOption = event => {
       if (this.props.supportMultipleSelect) {
         event.stopPropagation();
       }
-      this.props.onSelectOption(value, event);
+      this.props.onSelectOption(this.props.value, event);
     };
     this.onMouseEnter = () => {
       if (!this.props.disableHover) {
@@ -26,11 +28,21 @@ class Option extends _react.Component {
         this.props.changeIndex(-1);
       }
     };
+    this.onKeyDown = e => {
+      if (e.key === 'Enter' || e.key === 'Space') {
+        e.target.click();
+      }
+    };
   }
   render() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: this.props.isActive ? 'option option-active' : 'option',
-      onClick: this.onSelectOption.bind(this, this.props.value),
+      className: (0, _classnames.default)('seatable-select-option', {
+        'seatable-select-option-active': this.props.isActive
+      }),
+      tabIndex: "0",
+      role: "menuitem",
+      onClick: this.onSelectOption,
+      onKeyDown: this.onKeyDown,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       children: this.props.children

package/lib/assets/icons/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718937171668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z" p-id="18369" fill="currentColor"></path></svg>

package/lib/assets/icons/down.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.27148 11.2718L6.09991 8.44336L15.9994 18.3429L25.8989 8.44336L28.7273 11.2718L15.9994 23.9997L3.27148 11.2718Z" fill="currentColor"/>
+</svg>

package/lib/index.js

@@ -118,10 +118,10 @@ Object.defineProperty(exports, "DTableCustomFooter", {
     return _DTableCustomFooter.default;
   }
 });
-Object.defineProperty(exports, "DTableCustomizeCollaboratorSelect", {
+Object.defineProperty(exports, "DTableCustomizeSearchInput", {
   enumerable: true,
   get: function () {
-    return _DTableCustomizeCollaboratorSelect.default;
+    return _DTableCustomizeSearchInput.default;
   }
 });
 Object.defineProperty(exports, "DTableCustomizeSelect", {
@@ -154,12 +154,6 @@ Object.defineProperty(exports, "DTableFiltersPopover", {
     return _DTableFiltersPopover.default;
   }
 });
-Object.defineProperty(exports, "DTableGroupSelect", {
-  enumerable: true,
-  get: function () {
-    return _index.default;
-  }
-});
 Object.defineProperty(exports, "DTableIcon", {
   enumerable: true,
   get: function () {
@@ -718,12 +712,11 @@ var _DTableRadio = _interopRequireDefault(require("./DTableRadio"));
 var _DTableCommonAddTool = _interopRequireDefault(require("./DTableCommonAddTool"));
 var _NotificationPopover = _interopRequireDefault(require("./NotificationPopover"));
 var _DTableSelect = _interopRequireDefault(require("./DTableSelect"));
-var _index = _interopRequireDefault(require("./DTableGroupSelect/index"));
 var _dtableSelectLabel = _interopRequireDefault(require("./DTableSelect/dtable-select-label"));
 var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
 var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));
-var _DTableCustomizeCollaboratorSelect = _interopRequireDefault(require("./DTableCustomizeCollaboratorSelect"));
 var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("./DTableCustomizeSearchInput"));
 var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
 var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
 var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));

package/lib/utils/url.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
-var _dtableUtils = require("dtable-utils");
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
 var _file = require("../constants/file");
 const isTargetUrl = (target, url) => {
   if (!url || typeof url !== 'string') return false;
@@ -96,6 +95,32 @@ const generateCurrentBaseImageUrl = _ref2 => {
   return "".concat(validServer, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
 };
 exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
+const getImageThumbnailUrl = function (url) {
+  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    server = _ref3.server,
+    dtableUuid = _ref3.dtableUuid,
+    workspaceID = _ref3.workspaceID,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 256 : _ref3$size;
+  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 (isAIUrl(url) || checkSVGImage(url) || !isInternalImg(url) || isBase64(url)) return url;
+  if (server && workspaceID && dtableUuid && isDigitalSignsUrl(url)) {
+    return generateCurrentBaseImageThumbnailUrl({
+      server,
+      workspaceID,
+      dtableUuid,
+      size,
+      partUrl: url
+    });
+  }
+  if (url.includes('/thumbnail/workspace')) return url;
+  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
+};
+exports.getImageThumbnailUrl = getImageThumbnailUrl;
 const getFileName = url => {
   if (!url) return null;
   let validUrl = url;
@@ -120,9 +145,9 @@ const imageCheck = filename => {
 };
 exports.imageCheck = imageCheck;
 const isInternalURL = function (url) {
-  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$server = _ref3.server,
-    server = _ref3$server === void 0 ? '' : _ref3$server;
+  let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref4$server = _ref4.server,
+    server = _ref4$server === void 0 ? '' : _ref4$server;
   if (!url || typeof url !== 'string') return false;
   return server && url.indexOf(server) > -1;
 };
@@ -157,10 +182,10 @@ const getFileIconUrl = (filename, direntType) => {
 };
 exports.getFileIconUrl = getFileIconUrl;
 const getFileThumbnailInfo = function (file) {
-  let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    server = _ref4.server,
-    dtableUuid = _ref4.dtableUuid,
-    workspaceID = _ref4.workspaceID;
+  let _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    server = _ref5.server,
+    dtableUuid = _ref5.dtableUuid,
+    workspaceID = _ref5.workspaceID;
   const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
   const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
   if (!file || !file.name) return {
@@ -170,7 +195,7 @@ const getFileThumbnailInfo = function (file) {
   const isImage = imageCheck(file.name);
   if (isImage && server) return {
     isImage,
-    fileIconUrl: (0, _dtableUtils.getImageThumbnailUrl)(file.url, {
+    fileIconUrl: getImageThumbnailUrl(file.url, {
       server,
       dtableUuid,
       workspaceID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.1-beta.1",
+  "version": "7.0.1-beta.5",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",
@@ -8,7 +8,7 @@
     "@seafile/seafile-editor": "^3.0.34",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",
-    "dtable-utils": "5.0.32-beta.2",
+    "dtable-utils": "~5.0.27",
     "is-hotkey": "0.2.0",
     "rc-checkbox": "3.5.0",
     "react-color": "2.19.3",

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -1,86 +0,0 @@
-.dtable-customize-collaborator-select.dtable-select {
-  position: unset;
-}
-
-.dtable-customize-collaborator-select .collaborator-avatar {
-  width: 16px;
-  height: 16px;
-  transform: translateY(-1px);
-}
-
-.dtable-customize-collaborator-select .selected-option-show {
-  width: calc(100% - 20px);
-  height: 20px;
-}
-
-.dtable-customize-collaborator-select .selected-option {
-  width: auto;
-  overflow-x: auto;
-}
-
-.dtable-customize-collaborator-select .dtable-icon-down3 {
-  margin-left: .5rem;
-}
-
-.dtable-customize-collaborator-select .option-collaborator {
-  display: flex;
-}
-
-.dtable-customize-collaborator-select .collaborator-container {
-  flex: 1 1;
-}
-
-.dtable-customize-collaborator-select .editor-list-delete .collaborator-container {
-  flex: 1 1;
-  display: inline;
-}
-
-.dtable-customize-collaborator-select .multiple-check-icon {
-  display: inline-flex;
-  width: 20px;
-  text-align: center;
-}
-
-.dtable-customize-collaborator-select .collaborator-check-icon .dtable-icon-check-mark,
-.dtable-customize-collaborator-select .multiple-check-icon .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
-}
-
-.dtable-customize-collaborator-select.dtable-select .option-active,
-.dtable-customize-collaborator-select.dtable-select .option:hover {
-  color: #212529;
-  background-color: #f5f5f5;
-}
-
-.dtable-customize-collaborator-select.dtable-select .option.option-active .select-option-name {
-  color: #212529;
-}
-
-.collaborator-select .option-group-content .collaborator,
-.dtable-customize-collaborator-select .option-group .option-group-content .collaborator {
-  background: none;
-}
-
-.dtable-customize-collaborator-select .collaborator-avatar-container {
-  width: 16px;
-}
-
-.dtable-customize-collaborator-select .option-group-content .remove-container {
-  display: none;
-}
-
-.dtable-customize-collaborator-select .collaborator-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-.collaborator-container .collaborator-name {
-  margin-left: 5px;
-  max-width: 200px;
-  color: #212529;
-}
-
-.collaborator-select .option-group {
-  max-height: fit-content;
-}