Update dependency 2 (#5342)

* update react-select version

* update react-responsive

* delete unnecessary dependency

* update react-mentions

frontend/package.json

@@ -20,7 +20,6 @@
     "prismjs": "1.23.0",
     "prop-types": "^15.6.2",
     "qrcode.react": "^1.0.1",
-    "raf": "3.4.0",
     "react": "16.14.0",
     "react-app-polyfill": "^2.0.0",
     "react-chartjs-2": "^2.8.0",
@@ -28,20 +27,17 @@
     "react-cookies": "^0.1.0",
     "react-dom": "16.14.0",
     "react-i18next": "12.1.1",
-    "react-mentions": "^3.0.2",
+    "react-mentions": "4.4.7",
-    "react-moment": "^0.7.9",
     "react-qr-code": "^1.0.5",
-    "react-responsive": "^6.1.2",
+    "react-responsive": "9.0.2",
-    "react-select": "^2.4.1",
+    "react-select": "5.7.0",
     "reactstrap": "^6.4.0",
     "seafile-js": "0.2.190",
     "socket.io-client": "^2.2.0",
     "unified": "^7.0.0",
     "url-parse": "^1.4.3",
-    "vfile": "^3.0.0",
     "video.js": "^7.4.1",
-    "watermark-dom": "^1.0.0",
+    "watermark-dom": "^1.0.0"
-    "whatwg-fetch": "2.0.3"
   },
   "scripts": {
     "start": "node scripts/start.js",

frontend/src/components/dialog/clean-trash.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import Select from 'react-select/lib/Creatable';
+import CreatableSelect from 'react-select/creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -63,7 +63,7 @@ class CleanTrash extends React.Component {
         <ModalBody>
           <React.Fragment>
             <p>{gettext('Clear files in trash and history：')}</p>
-            <Select
+            <CreatableSelect
               defaultValue={this.options[0]}
               options={this.options}
               autoFocus={false}

frontend/src/components/dialog/edit-repo-commit-labels.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import CreatableSelect from 'react-select/lib/Creatable';
+import CreatableSelect from 'react-select/creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';

frontend/src/components/dialog/label-repo-state-dialog.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import CreatableSelect from 'react-select/lib/Creatable';
+import CreatableSelect from 'react-select/creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';

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

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import Select from 'react-select';
-import makeAnimated from 'react-select/lib/animated';
 import { gettext, isPro, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
 import { Utils } from '../../utils/utils.js';

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

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import Select from 'react-select';
-import makeAnimated from 'react-select/lib/animated';
 import { isPro, gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api.js';
 import { Utils } from '../../../utils/utils';
@@ -244,7 +243,6 @@ class SysAdminShareToGroup extends React.Component {
                   onChange={this.handleSelectChange}
                   options={this.options}
                   placeholder={gettext('Select groups...')}
-                  components={makeAnimated()}
                   maxMenuHeight={200}
                   inputId={'react-select-2-input'}
                   value={this.state.selectedOption}

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

@@ -2,7 +2,7 @@ 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/lib/animated';
+import makeAnimated from 'react-select/animated';
 import { seafileAPI } from '../../utils/seafile-api.js';
 import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';

frontend/src/components/user-select.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import AsyncSelect from 'react-select/lib/Async';
+import AsyncSelect from 'react-select/async';
 import { seafileAPI } from '../utils/seafile-api.js';
 import { gettext, enableShowContactEmailWhenSearchUser } from '../utils/constants';
 import { Utils } from '../utils/utils.js';