dtable-ui-component 6.0.110-ast.1 → 6.0.110-ast.11

package/lib/DTableCustomizeSelect/index.css

@@ -91,6 +91,10 @@
   margin-right: 8px;
 }
 
+.seatable-customize-select .disabled .select-placeholder {
+  opacity: 0.65;
+}
+
 .seatable-customize-select .selected-option-show {
   height: 20px;
   line-height: 20px;
@@ -106,3 +110,9 @@
   cursor: default;
   font-size: 14px;
 }
+
+.seatable-customize-select .header-icon {
+  display: inline-block;
+  padding: 0 .5rem 0 0!important;
+  margin-left: 0 !important;
+}

package/lib/DTableCustomizeSelect/select-option-group/index.css

@@ -48,7 +48,7 @@
 .seatable-option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 10px;
+  padding: 8px;
   color: var(--bs-body-secondary-color);
 }
 
@@ -120,3 +120,9 @@
 .seatable-option-group-selector-multiple-select .seatable-select-option.seatable-select-option-active {
   background-color: #f5f5f5;
 }
+
+.select-label .header-icon {
+  display: inline-block;
+  padding: 0 .5rem 0 0!important;
+  margin-left: 0 !important;
+}

package/lib/DTableSelect/index.js

@@ -17,7 +17,9 @@ const _excluded = ["innerProps"],
   _excluded2 = ["children"];
 const DropdownIndicator = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectDropdownIndicator.default, {})
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectDropdownIndicator.default, {
+      isDisabled: props.isDisabled
+    })
   }));
 };
 const ClearIndicator = _ref => {
@@ -139,6 +141,7 @@ class DTableSelect extends _react.default.Component {
       }
     }
     const optionsWithCheck = options.map(option => (0, _objectSpread2.default)({}, option));
+    //  menuIsOpen={true} support display forever
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
       isDisabled: isDisabled,
@@ -149,6 +152,7 @@ class DTableSelect extends _react.default.Component {
       className: className,
       classNamePrefix: classNamePrefix,
       styles: _selectStyle.MenuSelectStyle,
+      menuIsOpen: true,
       components: {
         Option,
         DropdownIndicator,
@@ -173,7 +177,7 @@ class DTableSelect extends _react.default.Component {
         let {
           context
         } = _ref3;
-        const isSelected = value && value.value === option.value;
+        const isSelected = value && (value.value === option.value || JSON.stringify(option.value) === JSON.stringify(value.value));
         if (context === 'menu') {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "d-flex align-items-center justify-content-between",
@@ -181,10 +185,11 @@ class DTableSelect extends _react.default.Component {
               className: "select-option-label",
               children: option.label
             }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "dtable-font dtable-icon-check seatable-check-color",
+              className: "dtable-font dtable-icon-check seatable-check-color d-flex align-items-center justify-content-center",
               style: {
-                width: '12px',
-                height: '12px'
+                width: '14px',
+                height: '14px',
+                color: 'var(--bs-icon-secondary-color)'
               }
             })]
           });

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -10,3 +10,7 @@
   width: 12px;
   height: 12px;
 }
+
+.dis-multicolor-icon-down {
+  opacity: 0.65 !important;
+}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -9,13 +9,17 @@ var _react = _interopRequireDefault(require("react"));
 var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const SelectDropdownIndicator = () => {
+const SelectDropdownIndicator = _ref => {
+  let {
+    isDisabled
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: "select-dropdown-indicator d-flex align-items-center",
     "aria-hidden": "true",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
       symbol: "down",
-      color: "var(--bs-icon-color)"
+      color: "var(--bs-icon-color)",
+      className: isDisabled ? 'dis-multicolor-icon-down' : ''
     })
   });
 };

package/lib/DTableSelect/select-style.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuSelectStyle = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-// Seahub select is based on seafile-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
   fontSize: '14px',
   padding: '0 1rem 0 .5rem',
@@ -63,10 +62,6 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       marginBottom: 0
     });
   },
-  // .react-select__menu-list）
-  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    paddingRight: '8px'
-  }),
   option: (provided, state) => {
     const {
       isDisabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110ast.1",
+  "version": "6.0.110ast.11",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",

package/lib/DTableSelect/utils.js

@@ -1,244 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
-var _reactSelect = require("react-select");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
-const DEFAULT_CONTROL_STYLE = {
-  border: '1px solid rgba(0, 40, 100, 0.12) !important'
-};
-const FOCUS_CONTROL_STYLE = {
-  fontSize: '14px',
-  backgroundColor: '#ffffff',
-  borderColor: '#1991eb',
-  outline: '0',
-  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
-};
-const noneCallback = () => ({
-  display: 'none'
-});
-const controlCallback = (provided, state) => {
-  const {
-    isDisabled,
-    isFocused
-  } = state;
-  if (isFocused && !isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
-      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
-    });
-  }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    fontSize: '14px',
-    lineHeight: '1.5',
-    cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
-};
-const UserSelectStyle = exports.UserSelectStyle = {
-  option: (provided, state) => {
-    const {
-      isDisabled,
-      isFocused
-    } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
-    });
-  },
-  control: controlCallback,
-  indicatorSeparator: noneCallback,
-  dropdownIndicator: noneCallback,
-  clearIndicator: noneCallback,
-  multiValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0 10px 0 0',
-      padding: '0 0 0 2px'
-    });
-  },
-  multiValueLabel: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '0px'
-    });
-  },
-  multiValueRemove: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#666',
-      ':hover': {
-        backgroundColor: 'transparent',
-        color: '#555555'
-      }
-    });
-  },
-  singleValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0',
-      padding: '0 2px',
-      width: 'fit-content'
-    });
-  }
-};
-const MenuSelectStyle = exports.MenuSelectStyle = {
-  option: (provided, state) => {
-    const {
-      isDisabled,
-      isFocused
-    } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '8px',
-      fontSize: '14px',
-      color: '#212529',
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
-      borderRadius: '4px',
-      ':active': {
-        backgroundColor: '#f5f5f5'
-      },
-      '.header-icon .dtable-font': {
-        color: '#999'
-      },
-      '.header-icon .multicolor-icon': {
-        color: '#999'
-      },
-      '.seatable-ui-select-tip': {
-        fontSize: '12px',
-        color: '#666666'
-      }
-    });
-  },
-  control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-    zIndex: 9999
-  }),
-  indicatorSeparator: noneCallback,
-  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: '8px'
-  }),
-  valueContainer: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: '2px 8px 2px 16px'
-  }),
-  dropdownIndicator: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: 0
-  })
-};
-const DropdownIndicator = props => {
-  return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-down3",
-      style: {
-        fontSize: '12px',
-        marginLeft: '-2px',
-        color: '#666666',
-        paddingRight: '16px'
-      }
-    })
-  }));
-};
-exports.DropdownIndicator = DropdownIndicator;
-const ClearIndicator = _ref => {
-  let {
-      innerProps
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const onMouseDown = e => {
-    e.nativeEvent.stopImmediatePropagation();
-    innerProps.onMouseDown(e);
-  };
-  props.innerProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, innerProps), {}, {
-    onMouseDown
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ClearIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-fork-number",
-      style: {
-        fontSize: '12px',
-        marginRight: '-2px'
-      }
-    })
-  }));
-};
-exports.ClearIndicator = ClearIndicator;
-const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  onClick: e => e.nativeEvent.stopImmediatePropagation(),
-  onMouseDown: e => e.nativeEvent.stopImmediatePropagation(),
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.MenuList, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: props.children
-  }))
-});
-exports.MenuList = MenuList;
-const Option = props => {
-  const {
-    isSelected,
-    label
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: label
-      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-check",
-        style: {
-          fontSize: '14px',
-          color: '#666666',
-          paddingLeft: '16px'
-        }
-      })]
-    })
-  }));
-};
-exports.Option = Option;
-const processOptionsWithClear = (options, isClearable) => {
-  if (isClearable && options && options.length > 0) {
-    return [{
-      label: '--',
-      value: '__clear__'
-    }, ...options];
-  }
-  return options;
-};
-exports.processOptionsWithClear = processOptionsWithClear;
-const handleSelectChange = (selectedOption, actionMeta, onChangeCallback, isMulti) => {
-  if (isMulti && Array.isArray(selectedOption)) {
-    const hasClear = selectedOption && selectedOption.some(opt => opt && opt.value === '__clear__');
-    if (hasClear) {
-      onChangeCallback([], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
-        action: 'clear'
-      }));
-      return;
-    }
-  } else if (selectedOption && selectedOption.value === '__clear__') {
-    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
-      action: 'clear'
-    }));
-    return;
-  }
-  onChangeCallback(selectedOption, actionMeta);
-};
-exports.handleSelectChange = handleSelectChange;
-const createHandleChange = (onChange, isMulti) => {
-  return (selectedOption, actionMeta) => {
-    handleSelectChange(selectedOption, actionMeta, onChange, isMulti);
-  };
-};
-exports.createHandleChange = createHandleChange;