02 multiple user select

haiwen · Jul 8, 2024 · d837ba4 · d837ba4
1 parent 2ce275a
commit d837ba4
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/frontend/src/components/common/select/seahub-select-style.js b/frontend/src/components/common/select/seahub-select-style.js
@@ -44,6 +44,40 @@ const UserSelectStyle = {
   clearIndicator: () => ({
     display: 'none',
   }),
+  // multi select style
+  multiValue: (provided) => {
+    return {
+      ...provided,
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0 10px 0 0',
+      padding: '0 0 0 2px',
+    };
+  },
+  multiValueLabel: (provided) => {
+    return {
+      ...provided,
+      padding: '0px',
+    };
+  },
+  multiValueRemove: (provided) => {
+    return {
+      ...provided,
+      color: '#666',
+      ':hover': {
+        backgroundColor: 'transparent',
+        color: '#555555',
+      }
+    };
+  },
+  // single select style
+  singleValue: (provided) => {
+    return {
+      ...provided,
+    };
+  },
 };
 
 export { MenuSelectStyle, UserSelectStyle };
diff --git a/frontend/src/components/user-select.js b/frontend/src/components/user-select.js
@@ -26,6 +26,7 @@ class UserSelect extends React.Component {
     this.state = {
       searchValue: ''
     };
+    this.userSelect = React.createRef();
   }
 
   onInputChange = (searchValue) => {
@@ -75,7 +76,7 @@ class UserSelect extends React.Component {
   };
 
   clearSelect = () => {
-    this.refs.userSelect.onChange([], { action: 'clear' });
+    this.userSelect.current.onChange([], { action: 'clear' });
   };
 
   render() {
@@ -99,7 +100,7 @@ class UserSelect extends React.Component {
         placeholder={this.props.placeholder}
         className={`user-select ${this.props.className}`}
         value={this.props.value}
-        ref="userSelect"
+        ref={this.userSelect}
         styles={UserSelectStyle}
       />
     );

diff --git a/frontend/src/css/user-select.css b/frontend/src/css/user-select.css
@@ -2,6 +2,36 @@
   font-size: 14px;
   font-weight: 500;
 }
+
 .user-option-email {
   font-size: 12px;
 }
+
+/* dropdown menu avatar is 24*24px, selection box avatar is 16*16px */
+.user-select .true__value-container .select-module.select-module-icon.avatar {
+  height: 16px;
+  width: 16px;
+  transform: translateY(-2px);
+}
+
+.user-select .true__value-container .true__multi-value__label {
+  padding: 0px;
+}
+
+.user-select .true__value-container .select-module.select-module-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1;
+  line-height: 20px;
+  margin-left: 5px;
+}
+
+.user-select .true__control.true__control--is-focused,
+.user-select .true__control.true__control--is-focused:hover {
+  background-color: #ffffff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}