dtable-ui-component 6.0.125-vjs.3 → 6.0.125-xhs.2

package/lib/DTableCustomizeSelect/index.css

@@ -101,6 +101,12 @@
   margin-right: 8px;
   width: calc(100% - 20px);
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.seatable-customize-select .selected-option .multicolor-icon {
+  font-size: 12px;
 }
 
 .seatable-customize-select .multiple-check-icon,

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

@@ -24,7 +24,7 @@
 .seatable-option-group .seatable-option-group-search .form-control {
   height: 32px;
   border: none;
-  padding: .375rem 0 .375rem 1rem;
+  padding: .375rem 1rem;
   cursor: pointer;
   border-bottom: 1px solid var(--bs-border-color);
 }

package/lib/DTableSelect/utils.js

@@ -20,10 +20,21 @@ const DEFAULT_CONTROL_STYLE = {
   borderRadius: '4px',
   outline: '0'
 };
+const DISABLED_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 4px',
+  border: '1px solid rgba(0, 40, 100, 0.12)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-bg-color)',
+  borderRadius: '4px',
+  outline: '0',
+  cursor: 'default',
+  opacity: 0.65
+};
 const FOCUS_CONTROL_STYLE = {
   fontSize: '14px',
   padding: '0 4px',
-  border: '1px solid #3e84f7',
+  border: '1px solid #3E84F7',
   boxShadow: 'none',
   backgroundColor: 'var(--bs-popover-bg)',
   borderRadius: '4px',
@@ -35,40 +46,39 @@ const controlCallback = (provided, state) => {
     isFocused
   } = state;
   if (isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DEFAULT_CONTROL_STYLE), {}, {
-      cursor: 'default',
-      backgroundColor: '#f5f5f5',
-      opacity: 0.65
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DISABLED_CONTROL_STYLE), {}, {
+      ':active': {
+        border: '1px solid #3E84F7'
+      },
+      '.header-icon': {
+        color: 'var(--bs-icon-secondary-color)',
+        padding: '0 0.5rem !important'
+      }
     });
   }
   if (isFocused) {
-    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)({}, provided), FOCUS_CONTROL_STYLE);
   }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
     fontSize: '14px',
     lineHeight: '1.5',
     cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
+  }, DEFAULT_CONTROL_STYLE);
 };
 const MenuSelectStyle = exports.MenuSelectStyle = {
-  // .react-select__menu / react-select-2-listbox
   menu: base => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-      padding: '4px 0 4px 8px',
+      padding: '8px',
       backgroundColor: 'var(--bs-popover-bg)',
       border: '1px solid var(--bs-border-secondary-color)',
       borderRadius: '4px',
       boxShadow: '0px 6px 14px rgba(0, 0, 0, 0.1)',
-      marginTop: '4px'
+      marginTop: '4px',
+      marginBottom: 0
     });
   },
-  // .react-select__menu-list）
   menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    paddingRight: '8px'
+    padding: 0
   }),
   option: (provided, state) => {
     const {
@@ -79,9 +89,19 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       color: 'var(--bs-body-color)',
       borderRadius: '4px',
       minHeight: '32px',
-      padding: '6px 12px 6px 8px',
+      padding: '8px',
       cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? 'var(--bs-hover-bg)' : 'var(--bs-popover-bg)'
+      backgroundColor: isFocused ? 'var(--bs-hover-bg)' : 'var(--bs-popover-bg)',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      ':hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.04)'
+      },
+      '.header-icon': {
+        color: 'var(--bs-icon-secondary-color)',
+        padding: '0 0.5rem !important'
+      }
     });
   },
   control: controlCallback,
@@ -102,8 +122,10 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     });
   },
   multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    color: '#909090',
-    ':hover': {
+    '.dtable-font': {
+      color: 'var(--bs-icon-color)'
+    },
+    '.dtable-font:hover': {
       backgroundColor: 'transparent',
       color: 'var(--bs-icon-color)'
     }
@@ -116,7 +138,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       isDisabled
     } = state;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#868e96',
+      color: '#868E96',
       opacity: isDisabled ? 0.65 : 1
     });
   },
@@ -124,6 +146,18 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     return {
       'display': 'none'
     };
+  },
+  dropdownIndicator: (provided, state) => {
+    const {
+      isDisabled
+    } = state;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      paddingRight: '12px',
+      '.dtable-font': {
+        color: 'var(--bs-icon-color) !important',
+        opacity: isDisabled ? 0.65 : 1
+      }
+    });
   }
 };
 const DropdownIndicator = props => {
@@ -133,8 +167,8 @@ const DropdownIndicator = props => {
       style: {
         fontSize: '12px',
         marginLeft: '-2px',
-        color: '#666666',
-        paddingRight: '16px'
+        color: 'var(--bs-icon-color)',
+        paddingRight: 0
       }
     })
   }));
@@ -157,7 +191,8 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px'
+        marginRight: '-2px',
+        color: 'var(--bs-icon-color)'
       }
     })
   }));
@@ -190,7 +225,7 @@ const Option = props => {
         className: "dtable-font dtable-icon-check",
         style: {
           fontSize: '14px',
-          color: '#666666',
+          color: 'var(--bs-icon-color)',
           paddingLeft: '16px'
         }
       })]

package/package.json

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