12.0 optimize user select (#6307)

* 01 remove useless reviewer

* 02 change user select style

* fix code format

frontend/src/components/common/select/seahub-select-style.js

@@ -44,6 +44,47 @@ 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,
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0',
+      padding: '0 2px',
+      width: 'fit-content',
+    };
+  },
 };
 
 export { MenuSelectStyle, UserSelectStyle };

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -279,7 +279,6 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={true}
-                  className="reviewer-select"
                   placeholder={gettext('Search users')}
                   onSelectChange={this.handleUserSelectChange}
                   value={this.state.selectedUsers}

frontend/src/components/dialog/org-add-admin-dialog.js

@@ -55,7 +55,6 @@ class AddOrgAdminDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Select a user as admin')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/share-to-user.js

@@ -55,11 +55,14 @@ class UserItem extends React.Component {
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
         <td className="name">
           <div className="position-relative">
-            <img src={item.user_info.avatar_url}
-              width="24" alt={item.user_info.nickname}
+            <img
+              src={item.user_info.avatar_url}
+              width="24"
+              alt={item.user_info.nickname}
               className="rounded-circle mr-2 cursor-pointer"
               onMouseEnter={this.userAvatarOnMouseEnter}
-              onMouseLeave={this.userAvatarOnMouseLeave} />
+              onMouseLeave={this.userAvatarOnMouseLeave}
+            />
             <span>{item.user_info.nickname}</span>
             {isUserDetailsPopoverOpen && (
               <div className="user-details-popover p-4 position-absolute w-100 mt-1">
@@ -353,7 +356,6 @@ class ShareToUser extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={true}
-                  className="reviewer-select"
                   placeholder={gettext('Search users')}
                   onSelectChange={this.handleSelectChange}
                 />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js

@@ -41,7 +41,6 @@ class SysAdminBatchAddAdminDialog extends React.Component {
         <ModalBody>
           <UserSelect
             isMulti={true}
-            className="reviewer-select"
             placeholder={gettext('Search users')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js

@@ -76,7 +76,6 @@ class SysAdminCreateGroupDialog extends React.Component {
               </Label>
               <UserSelect
                 isMulti={false}
-                className="reviewer-select"
                 placeholder={gettext('Select a user')}
                 onSelectChange={this.handleSelectChange}
               />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js

@@ -77,7 +77,6 @@ class SysAdminCreateRepoDialog extends React.Component {
               <UserSelect
                 id="userSelect"
                 isMulti={false}
-                className="reviewer-select"
                 placeholder={gettext('Select a user')}
                 onSelectChange={this.handleSelectChange}
               />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js

@@ -41,7 +41,6 @@ class SysAdminGroupAddMemberDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={true}
-            className="reviewer-select"
             placeholder={gettext('Search users')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js

@@ -47,7 +47,6 @@ class SysAdminTransferGroupDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Select a user')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js

@@ -42,7 +42,6 @@ class SysAdminRepoTransferDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Search users')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js

@@ -236,7 +236,6 @@ class SysAdminShareToUser extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={true}
-                  className="reviewer-select"
                   placeholder={gettext('Search users')}
                   onSelectChange={this.handleSelectChange}
                 />

frontend/src/components/dialog/transfer-dialog.js

@@ -51,7 +51,6 @@ class TransferDialog extends React.Component {
   submit = () => {
     let user = this.state.selectedOption;
     this.props.submit(user);
-
   };
 
   componentDidMount() {
@@ -83,7 +82,7 @@ class TransferDialog extends React.Component {
         toaster.danger(errMessage);
       });
     }
-    else{
+    else {
       seafileAPI.listDepartments().then((res) => {
         for (let i = 0; i < res.data.length; i++) {
           let obj = {};
@@ -102,7 +101,6 @@ class TransferDialog extends React.Component {
   onClick = () => {
     this.setState({
       transferToUser: !this.state.transferToUser,
-
     });
   };
 
@@ -142,7 +140,6 @@ class TransferDialog extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={false}
-                  className="reviewer-select"
                   placeholder={gettext('Select a user')}
                   onSelectChange={this.handleSelectChange}
                 />

frontend/src/components/dialog/transfer-group-dialog.js

@@ -58,7 +58,6 @@ class TransferGroupDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Please enter 1 or more character')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/user-select.js

@@ -26,9 +26,14 @@ class UserSelect extends React.Component {
     this.state = {
       searchValue: ''
     };
+    this.userSelect = React.createRef();
   }
 
   onInputChange = (searchValue) => {
+    if (!this.props.isMulti && searchValue.trim()) {
+      this.handleSelectChange(null);
+      this.clearSelect();
+    }
     this.setState({ searchValue });
   };
 
@@ -49,20 +54,24 @@ class UserSelect extends React.Component {
             let obj = {};
             obj.value = item.name;
             obj.email = item.email;
-            obj.label = enableShowContactEmailWhenSearchUser ? (
-              <div className="d-flex">
-                <img src={item.avatar_url} className="avatar" width="24" alt="" />
-                <div className="ml-2">
-                  <span className="user-option-name">{item.name}</span><br />
-                  <span className="user-option-email">{item.contact_email}</span>
+            if (enableShowContactEmailWhenSearchUser) {
+              obj.label = (
+                <div className="d-flex">
+                  <img src={item.avatar_url} className="avatar" width="24" alt="" />
+                  <div className="ml-2">
+                    <span className="user-option-name">{item.name}</span><br />
+                    <span className="user-option-email">{item.contact_email}</span>
+                  </div>
                 </div>
-              </div>
-            ) : (
-              <React.Fragment>
-                <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
-                <span className='select-module select-module-name'>{item.name}</span>
-              </React.Fragment>
-            );
+              );
+            } else {
+              obj.label = (
+                <>
+                  <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
+                  <span className='select-module select-module-name'>{item.name}</span>
+                </>
+              );
+            }
             this.options.push(obj);
           }
           callback(this.options);
@@ -75,7 +84,7 @@ class UserSelect extends React.Component {
   };
 
   clearSelect = () => {
-    this.refs.userSelect.onChange([], { action: 'clear' });
+    this.userSelect.current.onChange([], { action: 'clear' });
   };
 
   render() {
@@ -92,14 +101,14 @@ class UserSelect extends React.Component {
             );
           }
         }}
-        isMulti={this.props.isMulti}
+        isMulti={true}
         loadOptions={this.loadOptions}
         onChange={this.handleSelectChange}
         onInputChange={this.onInputChange}
         placeholder={this.props.placeholder}
         className={`user-select ${this.props.className}`}
         value={this.props.value}
-        ref="userSelect"
+        ref={this.userSelect}
         styles={UserSelectStyle}
       />
     );