dtable-ui-component 6.0.124 → 6.0.125-nsk.2

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,25 +19,19 @@ class SelectOptionGroup extends _react.Component {
   constructor(props) {
     super(props);
     this.resetMenuStyle = () => {
-      if (!this.optionGroupRef) return;
       const {
         isInModal,
         position
       } = this.props;
       const {
         top,
-        height,
-        width
+        height
       } = this.optionGroupRef.getBoundingClientRect();
       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 {
         if (height + top > window.innerHeight) {
           const borderWidth = 2;
@@ -89,10 +83,6 @@ class SelectOptionGroup extends _react.Component {
       if (isInModal) {
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
-
-        // ClickOutside set isClickedInside to true via mouse down capture first
-        // Set isClickedInside to false after mouse down
-        this.clickOutsideRef && this.clickOutsideRef.setClickedInsideStatus(false);
       }
     };
     this.scrollContent = () => {
@@ -132,10 +122,17 @@ class SelectOptionGroup extends _react.Component {
         });
       }
     };
+    this.clearSearch = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
     this.renderOptGroup = searchVal => {
       let {
         noOptionsPlaceholder,
-        onSelectOption
+        onSelectOption,
+        value
       } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
@@ -147,7 +144,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,
@@ -155,8 +161,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 = {
@@ -166,7 +177,6 @@ class SelectOptionGroup extends _react.Component {
     };
     this.filterOptions = null;
     this.timer = null;
-    this.searchInputRef = /*#__PURE__*/_react.default.createRef();
   }
   componentDidMount() {
     window.addEventListener('keydown', this.onHotKey);
@@ -190,13 +200,8 @@ class SelectOptionGroup extends _react.Component {
       isShowSelected,
       isInModal,
       position,
-      className,
-      addOptionAble,
-      component
+      className
     } = this.props;
-    const {
-      AddOption
-    } = component || {};
     let {
       searchVal
     } = this.state;
@@ -221,12 +226,10 @@ class SelectOptionGroup extends _react.Component {
       };
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-      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,
@@ -235,20 +238,21 @@ class SelectOptionGroup extends _react.Component {
           className: "editor-list-delete mb-2",
           onClick: e => e.stopPropagation(),
           children: value.label || ''
-        }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+        }), searchable && this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "seatable-option-group-search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
+            clearValue: this.clearSearch,
             autoFocus: true,
-            ref: this.searchInputRef
+            isClearable: true
           })
         }), /*#__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", {
@@ -722,8 +722,8 @@ 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/locales/de.json

@@ -12,8 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
-  "Pre_Line": "previous Line",
-  "Next_Line": "next Line",
+  "Previous_record": "Vorheriger Eintrag",
+  "Next_record": "Nächster Eintrag",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Wählen Sie einen Mitarbeiter",

package/lib/locales/en.json

@@ -12,8 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
-  "Pre_Line": "previous Line",
-  "Next_Line": "next Line",
+  "Previous_record": "Previous record",
+  "Next_record": "Next record",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/es.json

@@ -12,8 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
-  "Pre_Line": "previous Line",
-  "Next_Line": "next Line",
+  "Previous_record": "Registro previo",
+  "Next_record": "Próximo registro",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/fr.json

@@ -12,8 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
-  "Pre_Line": "previous Line",
-  "Next_Line": "next Line",
+  "Previous_record": "Enregistrement précédent",
+  "Next_record": "Enregistrement suivant",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choisissez un collaborateur",

package/lib/locales/pt.json

@@ -12,8 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
-  "Pre_Line": "previous Line",
-  "Next_Line": "next Line",
+  "Previous_record": "Registro anterior",
+  "Next_record": "Próximo registro",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/ru.json

@@ -12,8 +12,8 @@
   "Rotate_image": "Rotate image",
   "Delete_image": "delete image",
   "Download_image": "Download image",
-  "Pre_Line": "previous Line",
-  "Next_Line": "next Line",
+  "Previous_record": "Предыдущая запись",
+  "Next_record": "Следующая запись",
   "Zoom_in": "Zoom in",
   "Zoom_out": "Zoom out",
   "Choose_a_collaborator": "Choose a collaborator",

package/lib/locales/zh-CN.json

@@ -12,8 +12,8 @@
   "Rotate_image": "旋转",
   "Delete_image": "删除",
   "Download_image": "下载",
-  "Pre_Line": "上一行",
-  "Next_Line": "下一行",
+  "Previous_record": "前一行",
+  "Next_record": "后一行",
   "Zoom_in": "放大",
   "Zoom_out": "缩小",
   "Choose_a_collaborator": "选择一个协作人",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.124",
+  "version": "6.0.125nsk.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",

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;
-}

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -1,161 +0,0 @@
-"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 _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-class CollaboratorSelect extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onSelectToggle = event => {
-      event.preventDefault();
-      /*
-        if select is showing, click events do not need to be monitored by other click events,
-        so it can be closed when other select is clicked.
-      */
-      if (this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
-      let eventClassName = event.target.className;
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
-      // Prevent closing by pressing the spacebar in the search input
-      if (event.target.value === '') return;
-      this.selectedOptionWidth = this.selectedOptionRef.clientWidth;
-      this.setState({
-        isShowSelectOptions: !this.state.isShowSelectOptions
-      });
-    };
-    this.onMousedown = event => {
-      const name = event.target.className;
-      if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
-        return;
-      }
-      if (!this.selector.contains(event.target)) {
-        this.closeSelect();
-      }
-    };
-    this.closeSelect = () => {
-      this.setState({
-        isShowSelectOptions: false
-      });
-    };
-    this.getFilterOptions = searchValue => {
-      const {
-        options,
-        searchable
-      } = this.props;
-      if (!searchable) return options || [];
-      return (0, _dtableUtils.searchCollaborators)(options, searchValue);
-    };
-    this.renderOptionGroup = () => {
-      const {
-        value,
-        options,
-        searchable,
-        searchPlaceholder,
-        noOptionsPlaceholder,
-        top,
-        left,
-        isUsePopover
-      } = this.props;
-      if (!isUsePopover) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
-          value: value,
-          top: top,
-          left: left,
-          minWidth: this.btnWidth + 8 // 8px is padding
-          ,
-          options: options,
-          onSelectOption: this.props.onSelectOption,
-          searchable: searchable,
-          searchPlaceholder: searchPlaceholder,
-          noOptionsPlaceholder: noOptionsPlaceholder,
-          closeSelect: this.closeSelect,
-          getFilterOptions: this.getFilterOptions,
-          supportMultipleSelect: this.props.supportMultipleSelect,
-          stopClickEvent: true,
-          isShowSelected: true
-        });
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
-        placement: "bottom",
-        isOpen: true,
-        target: this.id,
-        fade: false,
-        hideArrow: true,
-        className: "dtable-customize-collaborator-select dtable-select",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
-          value: value,
-          top: top,
-          left: left,
-          minWidth: this.btnWidth + 8 // 8px is padding
-          ,
-          options: options,
-          onSelectOption: this.props.onSelectOption,
-          searchable: searchable,
-          searchPlaceholder: searchPlaceholder,
-          noOptionsPlaceholder: noOptionsPlaceholder,
-          closeSelect: this.closeSelect,
-          getFilterOptions: this.getFilterOptions,
-          supportMultipleSelect: this.props.supportMultipleSelect,
-          stopClickEvent: true,
-          isShowSelected: true
-        })
-      });
-    };
-    this.state = {
-      isShowSelectOptions: false
-    };
-    this.id = 'collaborator-select-' + Math.trunc(Math.random() * 10000);
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onMousedown);
-    this.btnWidth = this.selector.clientWidth;
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onMousedown);
-  }
-  render() {
-    let {
-      className,
-      value,
-      placeholder,
-      isLocked
-    } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      ref: node => this.selector = node,
-      className: (0, _classnames.default)('dtable-select custom-select collaborator-select', {
-        'focus': this.state.isShowSelectOptions
-      }, {
-        'disabled': isLocked
-      }, className),
-      id: this.id,
-      onClick: this.onSelectToggle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "selected-option",
-        ref: node => this.selectedOptionRef = node,
-        children: [value.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "selected-option-show",
-          children: value.label
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "select-placeholder",
-          children: placeholder
-        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-down3"
-        })]
-      }), this.state.isShowSelectOptions && this.renderOptionGroup()]
-    });
-  }
-}
-CollaboratorSelect.defaultProps = {
-  top: -3,
-  left: -3
-};
-var _default = exports.default = CollaboratorSelect;