Change select style (#5645)

* 01 change css file path

* 02 change Select style

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext, enableEncryptedLibrary, repoPasswordMinLength, storages, libraryTemplates } from '../../utils/constants';
+import { SeahubSelect } from '../common/select';
 
 const propTypes = {
   libraryType: PropTypes.string.isRequired,
@@ -189,9 +189,8 @@ class CreateRepoDialog extends React.Component {
 
             {libraryTemplates.length > 0 && (
               <FormGroup>
-                <Label for="library-template">{gettext('Template')}</Label>
-                <Select
-                  id="library-template"
+                <Label>{gettext('Template')}</Label>
+                <SeahubSelect
                   defaultValue={{value: libraryTemplates[0], label: libraryTemplates[0]}}
                   options={libraryTemplates.map((item, index) => { return {value: item, label: item}; })}
                   onChange={this.handlelibraryTemplatesInputChange}
@@ -201,9 +200,8 @@ class CreateRepoDialog extends React.Component {
 
             {storages.length > 0 && (
               <FormGroup>
-                <Label for="storage-backend">{gettext('Storage Backend')}</Label>
-                <Select
-                  id="storage-backend"
+                <Label>{gettext('Storage Backend')}</Label>
+                <SeahubSelect
                   defaultValue={{value: storages[0].id, label: storages[0].name}}
                   options={storages.map((item, index) => { return {value: item.id, label: item.name}; })}
                   onChange={this.handleStorageInputChange}

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

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
-import Select from 'react-select';
 import { gettext, isPro, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import FileChooser from '../file-chooser/file-chooser';
+import { SeahubSelect, NoGroupMessage } from '../common/select';
 
 class GroupItem extends React.Component {
 
@@ -93,16 +93,6 @@ const propTypes = {
   folderPath: PropTypes.string,
 };
 
-const NoOptionsMessage = (props) => {
-  return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
-  );
-};
-
-NoOptionsMessage.propTypes = {
-  innerProps: PropTypes.any.isRequired,
-};
-
 class LibSubFolderSerGroupPermissionDialog extends React.Component {
 
   constructor(props) {
@@ -306,14 +296,13 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
           <tbody>
             <tr>
               <td>
-                <Select
+                <SeahubSelect
                   onChange={this.handleSelectChange}
                   options={this.options}
                   placeholder={gettext('Select a group')}
                   maxMenuHeight={200}
-                  inputId={'react-select-2-input'}
                   value={this.state.selectedOption}
-                  components={{ NoOptionsMessage }}
+                  components={{ NoOptionsMessage: NoGroupMessage }}
                 />
               </td>
               {showPath &&

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

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
-import Select from 'react-select';
 import { gettext, isPro, enableShareToDepartment } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
+import { SeahubSelect, NoGroupMessage } from '../common/select';
 
 class GroupItem extends React.Component {
 
@@ -117,16 +117,6 @@ const propTypes = {
   onAddCustomPermissionToggle: PropTypes.func,
 };
 
-const NoOptionsMessage = (props) => {
-  return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
-  );
-};
-
-NoOptionsMessage.propTypes = {
-  innerProps: PropTypes.object.isRequired,
-};
-
 class ShareToGroup extends React.Component {
 
   constructor(props) {
@@ -340,15 +330,13 @@ class ShareToGroup extends React.Component {
           <tbody>
             <tr>
               <td>
-                <Select
-                  isMulti
+                <SeahubSelect
                   onChange={this.handleSelectChange}
                   options={this.state.options}
                   placeholder={gettext('Select groups...')}
                   maxMenuHeight={200}
-                  inputId={'react-select-2-input'}
                   value={this.state.selectedOption}
-                  components={{ NoOptionsMessage }}
+                  components={{ NoOptionsMessage: NoGroupMessage }}
                 />
               </td>
               <td>

frontend/src/components/dialog/share-to-other-server.js

@@ -1,14 +1,13 @@
 import React, { Fragment } from 'react';
-import Select from 'react-select';
 import PropTypes from 'prop-types';
 import { gettext, ocmRemoteServers } from '../../utils/constants';
-import { Input } from 'reactstrap';
-import { Button } from 'reactstrap';
+import { Input, Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import OpIcon from '../op-icon';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
+import { SeahubSelect } from '../common/select';
 
 class ShareItem extends React.Component {
 
@@ -228,7 +227,7 @@ class ShareToOtherServer extends React.Component {
           <tbody>
             <tr>
               <td>
-                <Select
+                <SeahubSelect
                   placeholder={gettext('Select a server...')}
                   value={selectedServer}
                   options={ocmRemoteServers}

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

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
-import Select from 'react-select';
 import { isPro, gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 import SharePermissionEditor from '../../select-editor/share-permission-editor';
+import { SeahubSelect, NoGroupMessage } from '../common/select';
 
 class GroupItem extends React.Component {
 
@@ -109,16 +109,6 @@ const propTypes = {
   isRepoOwner: PropTypes.bool.isRequired,
 };
 
-const NoOptionsMessage = (props) => {
-  return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
-  );
-};
-
-NoOptionsMessage.propTypes = {
-  innerProps: PropTypes.any.isRequired,
-};
-
 class SysAdminShareToGroup extends React.Component {
 
   constructor(props) {
@@ -257,15 +247,13 @@ class SysAdminShareToGroup extends React.Component {
           <tbody>
             <tr>
               <td>
-                <Select
-                  isMulti
+                <SeahubSelect
                   onChange={this.handleSelectChange}
                   options={this.options}
                   placeholder={gettext('Select groups...')}
                   maxMenuHeight={200}
-                  inputId={'react-select-2-input'}
                   value={this.state.selectedOption}
-                  components={{ NoOptionsMessage }}
+                  components={{ NoOptionsMessage: NoGroupMessage }}
                 />
               </td>
               <td>

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import Select from 'react-select';
 import makeAnimated from 'react-select/animated';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
+import { SeahubSelect } from '../common/select';
 
 const propTypes = {
   itemName: PropTypes.string.isRequired,
@@ -79,9 +79,8 @@ class TransferDialog extends React.Component {
               placeholder={gettext('Select a user')}
               onSelectChange={this.handleSelectChange}
             /> :
-            <Select
+            <SeahubSelect
               isClearable
-              isMulti={false}
               maxMenuHeight={200}
               hideSelectedOptions={true}
               components={makeAnimated()}