replace code to user-select component (#3033)

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

@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import AsyncSelect from 'react-select/lib/Async';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
+import UserSelect from '../user-select';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -19,40 +18,17 @@ class AddOrgAdminDialog extends React.Component {
     this.options = [];
   }
 
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <Fragment>
-              <img src={res.data.users[i].avatar_url} className="select-module select-module-icon avatar" alt="Avatar"/>
-              <span className='select-module select-module-name'>{res.data.users[i].name}</span>
-            </Fragment>;
-          this.options.push(obj);
-        }
-        callback(this.options);
-      });
-    }
-  }
-
   handleSelectChange = (option) => {
     this.setState({selectedOption: option});
     this.options = [];
   }
 
   addOrgAdmin = () => {
-    let users = [];
+    if (this.state.selectedOption) {
-    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
+      let userEmail = this.state.selectedOption.email;
-      for (let i = 0; i < this.state.selectedOption.length; i ++) {
+      this.props.addOrgAdmin(userEmail)
-        users[i] = this.state.selectedOption[i].email;
     }
   }
-    this.props.addOrgAdmin(users)
-  }
 
   toggle = () => {
     this.props.toggle();
@@ -63,18 +39,12 @@ class AddOrgAdminDialog extends React.Component {
       <Modal isOpen={true}>
         <ModalHeader>{gettext('Add Admins')}</ModalHeader>
         <ModalBody>
-          <AsyncSelect
+          <UserSelect
-            inputId={'react-select-1-input'}
+            ref="userSelect"
-            className='reviewer-select'
+            isMulti={false}
+            className="reviewer-select"
             placeholder={gettext('Select a user as admin...')}
-            loadOptions={this.loadOptions}
+            onSelectChange={this.handleSelectChange}
-            onChange={this.handleSelectChange}
-            value={this.state.selectedOption}
-            maxMenuHeight={200}
-            isMulti
-            isFocused
-            isClearable
-            classNamePrefix
           />
         </ModalBody>
         <ModalFooter>

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

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import AsyncSelect from 'react-select/lib/Async';
 import { gettext, isPro } from '../../utils/constants';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 
 class UserItem extends React.Component {
@@ -90,12 +90,6 @@ const propTypes = {
   repoID: PropTypes.string.isRequired
 };
 
-const NoOptionsMessage = (props) => {
-  return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('User not found')}</div>
-  );
-};
-
 class ShareToUser extends React.Component {
 
   constructor(props) {
@@ -137,26 +131,6 @@ class ShareToUser extends React.Component {
     this.setState({permission: permission});
   }
 
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <Fragment>
-              <img src={res.data.users[i].avatar_url} className="select-module select-module-icon avatar" alt="Avatar"/>
-              <span className='select-module select-module-name'>{res.data.users[i].name}</span>
-            </Fragment>;
-          this.options.push(obj);
-        }
-        callback(this.options);
-      });
-    }
-  }
-
   shareToUser = () => {
     let users = [];
     let path = this.props.itemPath; 
@@ -289,19 +263,12 @@ class ShareToUser extends React.Component {
           <tbody>
             <tr>
               <td>
-                <AsyncSelect
+                <UserSelect
-                  inputId={'react-select-1-input'}
+                  ref="userSelect"
-                  className='reviewer-select' 
+                  isMulti={true}
+                  className="reviewer-select"
                   placeholder={gettext('Select users...')}
-                  loadOptions={this.loadOptions}
+                  onSelectChange={this.handleSelectChange}
-                  onChange={this.handleSelectChange}
-                  value={this.state.selectedOption}
-                  components={{ NoOptionsMessage }}
-                  maxMenuHeight={200}
-                  isMulti 
-                  isFocused
-                  isClearable 
-                  classNamePrefix
                 />
               </td>
               <td>

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

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import AsyncSelect from 'react-select/lib/Async';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import toaster from '../toast';
 import { gettext } from '../../utils/constants';
-import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import UserSelect from '../user-select';
 
 const propTypes = {
   itemName: PropTypes.string.isRequired,
@@ -29,26 +29,6 @@ class TransferDialog extends React.Component {
     this.options = [];
   }
 
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <Fragment>
-              <img src={res.data.users[i].avatar_url} className="avatar reviewer-select-avatar" alt=""/>
-              <span className='reviewer-select-name'>{res.data.users[i].name}</span>
-            </Fragment>;
-          this.options.push(obj);
-        }
-        callback(this.options);
-      });
-    }
-  }
-
   submit = () => {
     let repoID = this.props.repoID;
     let user = this.state.selectedOption.email;
@@ -74,16 +54,17 @@ class TransferDialog extends React.Component {
           <div dangerouslySetInnerHTML={{__html:message}} />
         </ModalHeader>
         <ModalBody>
-          <AsyncSelect
+          <UserSelect
-            className='reviewer-select' isFocused
+            ref="userSelect"
-            loadOptions={this.loadOptions}
+            isMulti={false}
+            className="reviewer-select"
             placeholder={gettext('Please enter 1 or more character')}
-            onChange={this.handleSelectChange}
+            onSelectChange={this.handleSelectChange}
-            isClearable classNamePrefix
+          />
-            inputId={'react-select-transfer-input'}
-          /><br />
-          <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
         </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
+        </ModalFooter>
       </Modal>
     );
   }

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import AsyncSelect from 'react-select/lib/Async';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import UserSelect from '../user-select';
 
 import '../../css/transfer-group-dialog.css';
 
@@ -32,26 +32,6 @@ class TransferGroupDialog extends React.Component {
     this.options = [];
   }
 
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <React.Fragment>
-              <img src={res.data.users[i].avatar_url} className="avatar" alt=""/>
-              <span className="transfer-group-name">{res.data.users[i].name}</span>
-            </React.Fragment>;
-          this.options.push(obj);
-        }
-        callback(this.options);
-      });
-    }
-  }
-
   transferGroup = () => {
     const email = this.state.selectedOption && this.state.selectedOption.email;
     if (email) {
@@ -77,12 +57,12 @@ class TransferGroupDialog extends React.Component {
         <ModalHeader toggle={this.toggle}>{gettext('Transfer Group')}</ModalHeader>
         <ModalBody>
           <p>{gettext('Transfer group to')}</p>
-          <AsyncSelect
+          <UserSelect
-            className='group-transfer-select'
+            ref="userSelect"
-            isClearable classNamePrefix
+            isMulti={false}
-            loadOptions={this.loadOptions}
+            className="reviewer-select"
-            onChange={this.handleSelectChange}
             placeholder={gettext('Please enter 1 or more character')}
+            onSelectChange={this.handleSelectChange}
           />
           <div className="error">{this.state.errMessage}</div>
         </ModalBody>

frontend/src/components/user-select.js

@@ -8,7 +8,7 @@ const propTypes = {
   placeholder: PropTypes.string.isRequired,
   onSelectChange: PropTypes.func.isRequired,
   isMulti: PropTypes.bool.isRequired,
-  className: PropTypes.string.isRequired,
+  className: PropTypes.string,
 };
 
 const NoOptionsMessage = (props) => {
@@ -65,7 +65,7 @@ class UserSelect extends React.Component {
         loadOptions={this.loadOptions}
         onChange={this.handleSelectChange}
         placeholder={this.props.placeholder}
-        className={this.props.className}
+        className={`user-select ${this.props.className}`}
         ref="userSelect"
       />
     );

frontend/src/pages/org-admin/org-admin-list.js

@@ -65,8 +65,8 @@ class OrgAdminList extends React.Component {
     });
   }
 
-  addOrgAdmin = (users) => {
+  addOrgAdmin = (userEmail) => {
-    seafileAPI.setOrgAdmin(orgID, users, true).then(res => {
+    seafileAPI.setOrgAdmin(orgID, userEmail, true).then(res => {
       let userInfo = new OrgUserInfo(res.data);
       this.state.orgAdminUsers.unshift(userInfo);
       this.setState({