haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-05 03:07:01 +00:00
Code Issues Releases Wiki Activity

Update react version 3 (#7453)

Browse Source 
* update react version

* update reactstrap

* optimize code

* update react-select version

* update react-responsive

* update react-chartjs version

* update qrocde version

* update seafile-editor version

* update tldraw editor version

* fix code bug
This commit is contained in:
杨顺强 2025-02-14 14:04:25 +08:00 committed by GitHub
parent ef7ac1dd8b
commit ccab6f1552
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
112 changed files with 2301 additions and 1357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2287
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
frontend/package.json
View File

@ -8,19 +8,19 @@
"@codemirror/view": "^6.34.1",
"@emoji-mart/data": "^1.2.1",
"@emoji-mart/react": "^1.1.1",
"@gatsbyjs/reach-router": "1.3.9",
"@seafile/react-image-lightbox": "3.0.4",
"@gatsbyjs/reach-router": "2.0.1",
"@seafile/react-image-lightbox": "4.0.0",
"@seafile/resumablejs": "1.1.16",
"@seafile/sdoc-editor": "1.0.217",
"@seafile/seafile-calendar": "0.0.28",
"@seafile/seafile-editor": "1.0.133",
"@seafile/sf-metadata-ui-component": "^0.0.68",
"@seafile/stldraw-editor": "0.1.5",
"@seafile/seafile-editor": "2.0.0",
"@seafile/sf-metadata-ui-component": "^0.0.64",
"@seafile/stldraw-editor": "1.0.0",
"@uiw/codemirror-extensions-langs": "^4.19.4",
"@uiw/codemirror-themes": "^4.23.5",
"@uiw/react-codemirror": "^4.19.4",
"axios": "^1.7.4",
"chart.js": "3.6.0",
"chart.js": "4.4.7",
"classnames": "^2.2.6",
"codemirror": "^6.0.1",
"copy-to-clipboard": "^3.0.8",
@ -35,19 +35,19 @@
"MD5": "^1.3.0",
"object-assign": "4.1.1",
"prop-types": "^15.8.1",
"qrcode.react": "^1.0.1",
"react": "17.0.2",
"qrcode.react": "4.2.0",
"react": "18.3.1",
"react-app-polyfill": "^2.0.0",
"react-chartjs-2": "4.0.0",
"react-chartjs-2": "5.3.0",
"react-cookies": "^0.1.0",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "17.0.2",
"react-dom": "18.3.1",
"react-i18next": "^10.12.2",
"react-responsive": "9.0.2",
"react-select": "5.7.0",
"react-responsive": "10.0.0",
"react-select": "5.9.0",
"react-transition-group": "4.4.5",
"reactstrap": "8.9.0",
"reactstrap": "9.2.3",
"socket.io-client": "^2.2.0",
"svg-sprite-loader": "^6.0.11",
"svgo-loader": "^3.0.1",
@ -63,7 +63,7 @@
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"dev": "export NODE_ENV=development && node config/server.js"
"dev": "export NODE_ENV=development && node --max-old-space-size=4096 config/server.js"
},
"browserslist": {
"production": [

11
frontend/src/app.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { Router, navigate } from '@gatsbyjs/reach-router';
import { createRoot } from 'react-dom/client';
import { Router, navigate, LocationProvider, globalHistory } from '@gatsbyjs/reach-router';
import MediaQuery from 'react-responsive';
import { Modal } from 'reactstrap';
import { siteRoot, siteTitle, mediaUrl, faviconPath } from './utils/constants';
@ -374,4 +374,9 @@ class App extends Component {
}
}
ReactDom.render(<App />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(
<LocationProvider history={globalHistory}>
<App />
</LocationProvider>
);

4
frontend/src/components/btn-qr-code.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import QRCode from 'qrcode.react';
import { QRCodeSVG } from 'qrcode.react';
import { Button, Popover, PopoverBody } from 'reactstrap';
import { gettext } from '../utils/constants';
@ -34,7 +34,7 @@ class ButtonQR extends React.Component {
<Button outline color="primary" className="btn-icon btn-qr-code-icon sf3-font sf3-font-qr-code" id={this.btnID} onClick={this.togglePopover} type="button"></Button>
<Popover placement="bottom" isOpen={isPopoverOpen} target={this.btnID} toggle={this.togglePopover}>
<PopoverBody>
<QRCode value={link} size={128} />
<QRCodeSVG value={link} size={128} />
<p className="m-0 mt-1 text-center" style={{ 'maxWidth': '128px' }}>{gettext('Scan the QR code to view the shared content directly')}</p>
</PopoverBody>
</Popover>

4
frontend/src/components/common/account.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import { siteRoot, isPro, gettext, appAvatarURL, enableSSOToThirdpartWebsite } from '../../utils/constants';
@ -36,7 +36,7 @@ class Account extends Component {
}
getContainer = () => {
return ReactDOM.findDOMNode(this);
return findDOMNode(this);
};
handleProps = () => {

2
frontend/src/components/context-menu/context-menu.js
View File

@ -228,7 +228,7 @@ class ContextMenu extends React.Component {
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag='div'
tag='span'
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, menuItem)}
>

2
frontend/src/components/cur-dir-path/dir-tool.js
View File

@ -144,7 +144,7 @@ class DirTool extends React.Component {
aria-expanded={isDropdownMenuOpen}
>
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownMenu>
{menuItems.map((menuItem, index) => {
if (menuItem === 'Divider') {
return <DropdownItem key={index} divider />;

46
frontend/src/components/dialog/generate-upload-link.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import copy from 'copy-to-clipboard';
import dayjs from 'dayjs';
import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, InputGroup, Alert } from 'reactstrap';
import { gettext, shareLinkForceUsePassword, shareLinkPasswordMinLength, shareLinkPasswordStrengthLevel, canSendShareLinkEmail, uploadLinkExpireDaysMin, uploadLinkExpireDaysMax, uploadLinkExpireDaysDefault } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
@ -300,14 +300,12 @@ class GenerateUploadLink extends React.Component {
<Input type="text" readOnly={true} value={sharedUploadInfo.password} /> :
<Input type="text" readOnly={true} value={'***************'} />
}
<InputGroupAddon addonType="append">
<Button
aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
onClick={this.toggleStoredPasswordVisible}
className={`link-operation-icon eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '' : '-slash'}`}
>
</Button>
</InputGroupAddon>
<Button
aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
onClick={this.toggleStoredPasswordVisible}
className={`link-operation-icon eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '' : '-slash'}`}
>
</Button>
</InputGroup>
</dd>
</>
@ -338,15 +336,13 @@ class GenerateUploadLink extends React.Component {
) : (
<InputGroup className="share-link-details-item">
<Input type="text" readOnly={true} value={dayjs(sharedUploadInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')} />
<InputGroupAddon addonType="append">
<Button
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="link-operation-icon sf3-font sf3-font-rename"
onClick={this.editExpirationToggle}
>
</Button>
</InputGroupAddon>
<Button
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="link-operation-icon sf3-font sf3-font-rename"
onClick={this.editExpirationToggle}
>
</Button>
</InputGroup>
)}
</dd>
@ -389,14 +385,12 @@ class GenerateUploadLink extends React.Component {
<span className="tip">{passwordLengthTip}</span>
<InputGroup style={{ width: inputWidth }}>
<Input id="passwd" type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.passwordVisible ? '' : '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.passwordVisible ? '' : '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroup>
</FormGroup>
<FormGroup>

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

@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Button, Input, InputGroup } from 'reactstrap';
import { gettext, isPro, siteRoot } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
@ -328,7 +328,7 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
<td>
<InputGroup>
<Input value={this.state.folderPath} onChange={this.onSetSubFolder} />
<InputGroupAddon addonType="append"><Button className="sf2-icon-plus" onClick={this.toggleFileChooser}></Button></InputGroupAddon>
<Button className="sf2-icon-plus" onClick={this.toggleFileChooser}></Button>
</InputGroup>
</td>
}

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

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { gettext, isPro, siteRoot } from '../../utils/constants';
import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Button, Input, InputGroup } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import UserSelect from '../user-select';
@ -288,7 +288,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
<td>
<InputGroup>
<Input value={this.state.folderPath} onChange={this.onSetSubFolder} />
<InputGroupAddon addonType="append"><Button className="sf2-icon-plus" onClick={this.toggleFileChooser}></Button></InputGroupAddon>
<Button className="sf2-icon-plus" onClick={this.toggleFileChooser}></Button>
</InputGroup>
</td>
}

16
frontend/src/components/dialog/org-add-user-dialog.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, Input, ModalBody, ModalFooter, Label, Form, InputGroup, InputGroupAddon, FormGroup } from 'reactstrap';
import { Button, Modal, Input, ModalBody, ModalFooter, Label, Form, InputGroup, FormGroup } from 'reactstrap';
import { gettext } from '../../utils/constants';
import SeahubModalHeader from '@/components/common/seahub-modal-header';
@ -146,14 +146,12 @@ class AddOrgUserDialog extends React.Component {
<Label for="userPwd">{gettext('Password')}</Label>
<InputGroup className="passwd">
<Input id="userPwd" innerRef={input => {this.passwdInput = input;}} value={this.state.password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '-slash' : ''}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '-slash' : ''}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroup>
</FormGroup>
<FormGroup>

4
frontend/src/components/dialog/org-set-group-quota-dialog.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
import { Button, Modal, ModalBody, ModalFooter, Input, InputGroup, InputGroupText } from 'reactstrap';
import { gettext, orgID } from '../../utils/constants';
import SeahubModalHeader from '@/components/common/seahub-modal-header';
import { orgAdminAPI } from '../../utils/org-admin-api';
@ -66,7 +66,7 @@ class SetGroupQuotaDialog extends React.Component {
onChange={this.handleChange}
autoFocus={true}
/>
<InputGroupAddon addonType="append">{'MB'}</InputGroupAddon>
<InputGroupText addonType="append">{'MB'}</InputGroupText>
</InputGroup>
<p className="tip">
<br/><span>{gettext('An integer that is greater than 0 or equal to -2.')}</span><br/>

16
frontend/src/components/dialog/reset-webdav-password.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, Alert, Button, Input, InputGroup } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import SeahubModalHeader from '@/components/common/seahub-modal-header';
@ -74,14 +74,12 @@ class ResetWebdavPassword extends Component {
<ModalBody>
<InputGroup>
<Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}>
<i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
<Button onClick={this.togglePasswordVisible}>
<i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="sf3-font sf3-font-magic"></i>
</Button>
</InputGroup>
<p className="form-text text-muted m-0">{passwordTip}</p>
{this.state.errMsg && <Alert color="danger" className="m-0 mt-2">{gettext(this.state.errMsg)}</Alert>}

6
frontend/src/components/dialog/set-org-user-default-quota.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupText } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { orgAdminAPI } from '../../utils/org-admin-api';
import { Utils } from '../../utils/utils';
@ -66,9 +66,7 @@ class SetOrgUserDefaultQuota extends React.Component {
<React.Fragment>
<InputGroup>
<input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
<InputGroupAddon addonType="append">
<InputGroupText>MB</InputGroupText>
</InputGroupAddon>
<InputGroupText>MB</InputGroupText>
</InputGroup>
<p className="small text-secondary mt-2 mb-2">{gettext('Tip: 0 means default limit')}</p>
{formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}

6
frontend/src/components/dialog/set-org-user-quota.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupText } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { orgAdminAPI } from '../../utils/org-admin-api';
import { Utils } from '../../utils/utils';
@ -68,9 +68,7 @@ class SetOrgUserQuota extends React.Component {
<React.Fragment>
<InputGroup>
<input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
<InputGroupAddon addonType="append">
<InputGroupText>MB</InputGroupText>
</InputGroupAddon>
<InputGroupText>MB</InputGroupText>
</InputGroup>
<p className="small text-secondary mt-2 mb-2">{gettext('Tip: 0 means default limit')}</p>
{formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}

16
frontend/src/components/dialog/set-webdav-password.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, Alert, Button, Input, InputGroup } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import SeahubModalHeader from '@/components/common/seahub-modal-header';
@ -74,14 +74,12 @@ class SetWebdavPassword extends Component {
<ModalBody>
<InputGroup>
<Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}>
<i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : 'slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
<Button onClick={this.togglePasswordVisible}>
<i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : 'slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="sf3-font sf3-font-magic"></i>
</Button>
</InputGroup>
<p className="form-text text-muted m-0">{passwordTip}</p>
{this.state.errMsg && <Alert color="danger" className="m-0 mt-2">{gettext(this.state.errMsg)}</Alert>}

6
frontend/src/components/dialog/sysadmin-dialog/set-quota.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupText } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import SeahubModalHeader from '@/components/common/seahub-modal-header';
@ -59,9 +59,7 @@ class SetQuotaDialog extends React.Component {
onKeyDown={this.handleKeyDown}
onChange={this.handleQuotaChange}
/>
<InputGroupAddon addonType="append">
<InputGroupText>MB</InputGroupText>
</InputGroupAddon>
<InputGroupText>MB</InputGroupText>
</InputGroup>
<p className="small text-secondary mt-2 mb-2">
{gettext('An integer that is greater than or equal to 0.')}

6
frontend/src/components/dialog/sysadmin-dialog/set-upload-download-rate-limit.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Input, InputGroup, InputGroupText } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import SeahubModalHeader from '@/components/common/seahub-modal-header';
@ -60,9 +60,7 @@ class SysAdminSetUploadDownloadRateLimitDialog extends React.Component {
onKeyDown={this.handleKeyDown}
onChange={this.handleRateLimitChange}
/>
<InputGroupAddon addonType="append">
<InputGroupText>kB/s</InputGroupText>
</InputGroupAddon>
<InputGroupText>kB/s</InputGroupText>
</InputGroup>
<p className="small text-secondary mt-2 mb-2">
{gettext('An integer that is greater than or equal to 0.')}

16
frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Alert, Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Alert, Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, InputGroup } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import { Utils } from '../../../utils/utils';
import SysAdminUserRoleEditor from '../../../components/select-editor/sysadmin-user-role-editor';
@ -154,14 +154,12 @@ class SysAdminAddUserDialog extends React.Component {
<Label>{gettext('Password')}</Label>
<InputGroup>
<Input autoComplete="new-password" type={isPasswordVisible ? 'text' : 'password'} value={password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button className="mt-0" onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
</Button>
<Button className="mt-0" onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
<Button className="mt-0" onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
</Button>
<Button className="mt-0" onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroup>
</FormGroup>
<FormGroup>

4
frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
import { Button, Modal, ModalBody, ModalFooter, Input, InputGroup, InputGroupText } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import { systemAdminAPI } from '../../../utils/system-admin-api';
import { Utils } from '../../../utils/utils';
@ -66,7 +66,7 @@ class SetGroupQuotaDialog extends React.Component {
onChange={this.handleChange}
autoFocus={true}
/>
<InputGroupAddon addonType="append">{'MB'}</InputGroupAddon>
<InputGroupText>{'MB'}</InputGroupText>
</InputGroup>
<p className="tip">
<br/><span>{gettext('An integer that is greater than 0 or equal to -2.')}</span><br/>

10
frontend/src/components/dialog/user-password-widgets/password-input.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FormGroup, Label, InputGroup, Input, InputGroupAddon, Button } from 'reactstrap';
import { FormGroup, Label, InputGroup, Input, Button } from 'reactstrap';
import classnames from 'classnames';
import PasswordStrengthChecker from './password-strength-checker';
import { isMobile } from '../../../utils/utils';
@ -53,11 +53,9 @@ const PasswordInput = ({ value, labelValue, enableCheckStrength, onChangeValue }
passwordValue={passwordValue}
/>
)}
<InputGroupAddon addonType="append">
<Button onClick={() => setIsShowPassword(!isShowPassword)}>
<i className={`password-icon sf3-font sf3-font-eye${isShowPassword ? '' : '-slash'}`} />
</Button>
</InputGroupAddon>
<Button onClick={() => setIsShowPassword(!isShowPassword)}>
<i className={`password-icon sf3-font sf3-font-eye${isShowPassword ? '' : '-slash'}`} />
</Button>
</InputGroup>
</FormGroup>
);

9
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@ -154,6 +154,7 @@ class ItemDropdownMenu extends React.Component {
return (
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
<DropdownToggle
tag="span"
className={this.props.toggleClass}
data-toggle="dropdown"
title={gettext('More operations')}
@ -180,7 +181,7 @@ class ItemDropdownMenu extends React.Component {
}
return (
<Dropdown direction='down' isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} className="vam">
<Dropdown tag="span" direction='down' isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} className="vam">
<DropdownToggle
tag={tagName || 'i'}
role="button"
@ -199,7 +200,7 @@ class ItemDropdownMenu extends React.Component {
className={this.props.menuClassname}
positionFixed
flip={false}
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
>
{menuList.map((menuItem, index) => {
if (menuItem === 'Divider') {
@ -215,7 +216,7 @@ class ItemDropdownMenu extends React.Component {
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag='div'
tag='span'
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, menuItem)}
>
@ -225,7 +226,7 @@ class ItemDropdownMenu extends React.Component {
<DropdownMenu
positionFixed
flip={false}
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
>
{menuItem.subOpListHeader && <DropdownItem header>{menuItem.subOpListHeader}</DropdownItem>}
{menuItem.subOpList.map((item, index) => {

9
frontend/src/components/file-view/file-toolbar.js
View File

@ -211,11 +211,11 @@ class FileToolbar extends React.Component {
className="file-toolbar-btn"
aria-label={gettext('More operations')}
title={gettext('More operations')}
tag="div"
tag="span"
>
<Icon symbol="more-vertical" />
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownMenu>
{filePerm == 'rw' && (
<a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="dropdown-item">
{gettext('History')}
@ -249,11 +249,10 @@ class FileToolbar extends React.Component {
</button>
))}
</ButtonGroup>
<DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
<DropdownToggle tag="span" className="mx-1" aria-label={gettext('More operations')}>
<Icon symbol="more-vertical" />
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownMenu>
<DropdownItem>
<a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
{gettext('Open parent folder')}

8
frontend/src/components/file-view/onlyoffice-file-toolbar.js
View File

@ -50,14 +50,14 @@ class OnlyofficeFileToolbar extends React.Component {
/>
<Dropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
<DropdownToggle
tag="span"
className="file-toolbar-btn"
aria-label={gettext('More operations')}
title={gettext('More operations')}
tag="div"
>
<Icon symbol="more-vertical" />
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownMenu>
<a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
{gettext('Open parent folder')}
</a>
@ -72,10 +72,10 @@ class OnlyofficeFileToolbar extends React.Component {
</div>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
<DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
<DropdownToggle tag="span" className="mx-1" aria-label={gettext('More operations')}>
<Icon symbol="more-vertical" />
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownMenu>
<DropdownItem onClick={this.props.toggleHeader}>{gettext('Fold')}</DropdownItem>
<DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
<DropdownItem>

4
frontend/src/components/modal-portal.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
const propTypes = {
@ -23,7 +23,7 @@ class ModalPortal extends React.Component {
}
render() {
return ReactDOM.createPortal(
return createPortal(
this.props.children,
this.el,
);

1
frontend/src/components/paginator.js
View File

@ -102,6 +102,7 @@ class Paginator extends Component {
<Dropdown isOpen={this.state.isMenuShow} toggle={this.toggleOperationMenu} direction="up" className="paginator-dropdown ml-6">
<DropdownToggle
tag="span"
data-toggle="dropdown"
aria-expanded={this.state.isMenuShow}
onClick={this.toggleOperationMenu}

6
frontend/src/components/set-link-expiration.js
View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import { FormGroup, Label, Input, InputGroup, InputGroupAddon, InputGroupText, FormText } from 'reactstrap';
import { FormGroup, Label, Input, InputGroup, InputGroupText, FormText } from 'reactstrap';
import { gettext } from '../utils/constants';
import { Utils } from '../utils/utils';
import DateTimePicker from './date-and-time-picker';
@ -85,9 +85,7 @@ class SetLinkExpiration extends React.Component {
<Fragment>
<InputGroup style={{ width: inputWidth }}>
<Input type="text" value={expireDays} onChange={onExpireDaysChanged} />
<InputGroupAddon addonType="append">
<InputGroupText>{gettext('days')}</InputGroupText>
</InputGroupAddon>
<InputGroupText>{gettext('days')}</InputGroupText>
</InputGroup>
{!this.isExpireDaysNoLimit && (
<FormText color="muted">{this.expirationLimitTip}</FormText>

4
frontend/src/components/sf-table/editors/editor-portal.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
class EditorPortal extends React.Component {
@ -32,7 +32,7 @@ class EditorPortal extends React.Component {
return null;
}
return ReactDOM.createPortal(
return createPortal(
this.props.children,
this.el,
);

4
frontend/src/components/sf-table/masks/cell-mask.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
class CellMask extends React.PureComponent {
@ -7,7 +7,7 @@ class CellMask extends React.PureComponent {
componentDidUpdate() {
// Scrolling left and right causes the interface to re-render,
// and the style of CellMask is reset and needs to be fixed
const dom = ReactDOM.findDOMNode(this);
const dom = findDOMNode(this);
if (dom.style.position === 'fixed') {
dom.style.transform = 'none';
}

2
frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js
View File

@ -23,7 +23,7 @@ const HeaderDropdownMenu = ({ column, ColumnDropdownMenu, customProps }) => {
<DropdownMenu
positionFixed
flip={false}
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
className="sf-table-dropdown-menu"
>
{cloneElement(ColumnDropdownMenu, { column, ...customProps })}

16
frontend/src/components/share-link-panel/link-creation.js
View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, InputGroup, Alert } from 'reactstrap';
import { gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkForceUsePassword, shareLinkPasswordMinLength, shareLinkPasswordStrengthLevel, isEmailConfigured } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { shareLinkAPI } from '../../utils/share-link-api';
@ -314,14 +314,12 @@ class LinkCreation extends React.Component {
<span className="tip">{gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)').replace('{passwordMinLength}', shareLinkPasswordMinLength).replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel)}</span>
<InputGroup style={{ width: inputWidth }}>
<Input id="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroup>
</FormGroup>
<FormGroup>

32
frontend/src/components/share-link-panel/link-details.js
View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import copy from 'copy-to-clipboard';
import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Button, Input, InputGroup } from 'reactstrap';
import { gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, canSendShareLinkEmail } from '../../utils/constants';
import CommonOperationConfirmationDialog from '../../components/dialog/common-operation-confirmation-dialog';
import { seafileAPI } from '../../utils/seafile-api';
@ -198,14 +198,12 @@ class LinkDetails extends React.Component {
<Input type="text" readOnly={true} value={sharedLinkInfo.password} /> :
<Input type="text" readOnly={true} value={'***************'} />
}
<InputGroupAddon addonType="append">
<Button
aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
onClick={this.toggleStoredPasswordVisible}
className={`link-operation-icon eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '' : '-slash'}`}
>
</Button>
</InputGroupAddon>
<Button
aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
onClick={this.toggleStoredPasswordVisible}
className={`link-operation-icon eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '' : '-slash'}`}
>
</Button>
</InputGroup>
</dd>
</>
@ -235,15 +233,13 @@ class LinkDetails extends React.Component {
) : (
<InputGroup className="share-link-details-item">
<Input type="text" readOnly={true} value={dayjs(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')} />
<InputGroupAddon addonType="append">
<Button
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="link-operation-icon sf3-font sf3-font-rename"
onClick={this.editingExpirationToggle}
>
</Button>
</InputGroupAddon>
<Button
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="link-operation-icon sf3-font sf3-font-rename"
onClick={this.editingExpirationToggle}
>
</Button>
</InputGroup>
)}
</dd>

6
frontend/src/components/shared-link.js
View File

@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Button, Input, InputGroup } from 'reactstrap';
import { gettext } from '../utils/constants';
import ButtonQR from './btn-qr-code';
@ -20,9 +20,7 @@ class SharedLink extends React.Component {
<div className="d-flex">
<InputGroup>
<Input type="text" readOnly={true} value={link} />
<InputGroupAddon addonType="append">
<Button color="primary" onClick={copyLink} className="border-0">{gettext('Copy')}</Button>
</InputGroupAddon>
<Button color="primary" onClick={copyLink} className="border-0">{gettext('Copy')}</Button>
</InputGroup>
<ButtonQR link={link} />
</div>

1
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@ -530,6 +530,7 @@ class SharedRepoListItem extends React.Component {
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag="span"
className="dropdown-item font-weight-normal rounded-0 d-flex justify-content-between align-items-center pr-2"
onMouseEnter={this.toggleAdvancedMenuShown}
>

4
frontend/src/components/sort-menu.js
View File

@ -47,7 +47,7 @@ class SortMenu extends React.Component {
toggle={this.toggleDropdownMenu}
>
<DropdownToggle
tag="div"
tag="span"
data-toggle="dropdown"
title={gettext('Switch sort mode')}
aria-label={gettext('Switch sort mode')}
@ -58,7 +58,7 @@ class SortMenu extends React.Component {
<i className="sf3-font-down sf3-font"></i>
</span>
</DropdownToggle>
<DropdownMenu right={true} className="mt-1">
<DropdownMenu className="mt-1">
{sortOptions.map((item, index) => {
return (
<DropdownItem key={index} onClick={this.props.onSelectSortOption.bind(this, item)} className="pl-5 position-relative">

14
frontend/src/components/subscription.js
View File

@ -1,7 +1,7 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import toaster from './toast';
import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText, Input, Button } from 'reactstrap';
import { Modal, ModalBody, ModalFooter, InputGroup, InputGroupText, Input, Button } from 'reactstrap';
import { gettext, serviceURL } from '../utils/constants';
import { Utils } from '../utils/utils';
import { subscriptionAPI } from '../utils/subscription-api';
@ -184,9 +184,7 @@ class Plans extends Component {
{'¥ '}<span className="price-version-plan-price">{currentPlan.price}</span>{' ' + currentPlan.description}
</span>
<InputGroup style={{ marginBottom: '5px' }} className='user-numbers'>
<InputGroupAddon addonType="prepend">
<InputGroupText>{operationIntro}</InputGroupText>
</InputGroupAddon>
<InputGroupText>{operationIntro}</InputGroupText>
<Input
className="py-2"
placeholder={operationIntro}
@ -225,9 +223,7 @@ class Plans extends Component {
{'¥ '}<span className="price-version-plan-price">{currentPlan.asset_quota_price}</span>{' ' + currentPlan.asset_quota_description}
</span>
<InputGroup style={{ marginBottom: '5px' }} className='space-quota'>
<InputGroupAddon addonType="prepend">
<InputGroupText><span className="font-500">{operationIntro}</span></InputGroupText>
</InputGroupAddon>
<InputGroupText><span className="font-500">{operationIntro}</span></InputGroupText>
<Input
className="py-2"
placeholder={operationIntro}
@ -239,9 +235,7 @@ class Plans extends Component {
disabled={!currentPlan.can_custom_asset_quota}
onChange={this.onAssetQuotaUnitCountInputChange}
/>
<InputGroupAddon addonType='append'>
<InputGroupText><span className="font-500">{' x ' + currentPlan.asset_quota_unit + 'GB'}</span></InputGroupText>
</InputGroupAddon>
<InputGroupText><span className="font-500">{' x ' + currentPlan.asset_quota_unit + 'GB'}</span></InputGroupText>
</InputGroup>
<span className='py-4 text-orange mb-0 font-500 price-version-plan-whole-price text-center'>
{'总价 ¥ ' + totalAmount}

9
frontend/src/components/toast/toaster.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import ToastManager from './toastManager';
import './toaster.css';
@ -18,14 +18,15 @@ export default class Toaster {
container.setAttribute('data-evergreen-toaster-container', '');
document.body.appendChild(container);
ReactDOM.render(
const root = createRoot(container);
root.render(
<ToastManager
bindNotify={this._bindNotify}
bindGetToasts={this._bindGetToasts}
bindCloseAll={this._bindCloseAll}
/>,
container
/>
);
}
_bindNotify = handler => {

6
frontend/src/components/toolbar/dir-operation-toolbar.js
View File

@ -285,7 +285,7 @@ class DirOperationToolbar extends React.Component {
<Fragment>
<Dropdown isOpen={this.state.isDesktopMenuOpen} toggle={this.toggleDesktopOpMenu}>
<DropdownToggle
tag="div"
tag="span"
role="button"
className="path-item"
onClick={this.toggleDesktopOpMenu}
@ -310,7 +310,7 @@ class DirOperationToolbar extends React.Component {
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag='div'
tag='span'
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, item)}
>
@ -346,7 +346,7 @@ class DirOperationToolbar extends React.Component {
content = (
<Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
<DropdownToggle
tag="div"
tag="span"
role="button"
className="path-item"
>

3
frontend/src/components/toolbar/view-file-toolbar.js
View File

@ -149,7 +149,7 @@ class ViewFileToolbar extends React.Component {
{opList.length > 0 &&
<Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu} className="view-file-toolbar-dropdown">
<DropdownToggle
tag="div"
tag="span"
role="button"
className="path-item"
onClick={this.toggleDropdownMenu}
@ -174,6 +174,7 @@ class ViewFileToolbar extends React.Component {
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag="span"
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, item)}
>

4
frontend/src/components/view-modes.js
View File

@ -60,7 +60,7 @@ class ViewModes extends React.Component {
id="cur-view-change-mode-dropdown"
>
<DropdownToggle
tag="div"
tag="span"
data-toggle="dropdown"
title={gettext('Switch view mode')}
aria-label={gettext('Switch view mode')}
@ -71,7 +71,7 @@ class ViewModes extends React.Component {
<span className={'sf3-font sf3-font-down'}></span>
</span>
</DropdownToggle>
<DropdownMenu right={true} className="mt-1">
<DropdownMenu className="mt-1">
{options.map((item, index) => {
return (
<DropdownItem className='p-0' key={index} onClick={this.props.switchViewMode.bind(this, item.value)}>

2
frontend/src/components/wiki-card-view/wiki-card-item.js
View File

@ -235,7 +235,7 @@ class WikiCardItem extends Component {
aria-haspopup={true}
style={{ 'minWidth': '0' }}
/>
<DropdownMenu right={true} className="dtable-dropdown-menu">
<DropdownMenu className="dtable-dropdown-menu">
{showRename &&
<DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>}
{showPublish && canPublishWiki &&

5
frontend/src/draft.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import './css/draft.css';
@ -12,4 +12,5 @@ export default function Draft() {
);
}
ReactDom.render(<Draft />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<Draft />);

5
frontend/src/file-history-old.js
View File

@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Button } from 'reactstrap';
import { Utils } from './utils/utils';
import { seafileAPI } from './utils/seafile-api';
@ -275,4 +275,5 @@ class FileHistory extends React.Component {
}
}
ReactDom.render(<FileHistory />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<FileHistory />,);

5
frontend/src/file-history.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import axios from 'axios';
import { fileName, historyRepoID } from './utils/constants';
import SidePanel from './pages/file-history/side-panel';
@ -69,4 +69,5 @@ class FileHistory extends React.Component {
}
}
ReactDom.render(<FileHistory />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<FileHistory />);

5
frontend/src/file-view.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import FileView from './components/file-view/file-view';
import FileViewTip from './components/file-view/file-view-tip';
import Image from './components/file-content-view/image';
@ -88,4 +88,5 @@ class InnerFileView extends React.Component {
}
}
ReactDom.render(<InnerFileView />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<InnerFileView />);

5
frontend/src/history-trash-file-view.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import FileView from './components/history-trash-file-view/file-view';
import FileViewTip from './components/history-trash-file-view/file-view-tip';
import Image from './components/file-content-view/image';
@ -60,4 +60,5 @@ class HistoryTrashFileView extends React.Component {
}
}
ReactDom.render(<HistoryTrashFileView />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<HistoryTrashFileView />);

8
frontend/src/index.js
View File

@ -1,6 +1,6 @@
// Import React!
import React, { Suspense } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import i18n from './_i18n/i18n-seafile-editor';
import MarkdownEditor from './pages/markdown-editor';
@ -12,7 +12,8 @@ import './index.css';
const { repoID, repoEncrypted, filePerm } = window.app.pageOptions;
ReactDom.render(
const root = createRoot(document.getElementById('root'));
root.render(
<I18nextProvider i18n={ i18n } >
<Suspense fallback={<Loading />}>
<MetadataStatusProvider repoID={repoID} repoInfo={{ permission: filePerm, encrypted: repoEncrypted }}>
@ -21,6 +22,5 @@ ReactDom.render(
</CollaboratorsProvider>
</MetadataStatusProvider>
</Suspense>
</I18nextProvider>,
document.getElementById('root')
</I18nextProvider>
);

4
frontend/src/metadata/components/cell-editors/editor-portal.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
class EditorPortal extends React.Component {
@ -32,7 +32,7 @@ class EditorPortal extends React.Component {
return null;
}
return ReactDOM.createPortal(
return createPortal(
this.props.children,
this.el,
);

3
frontend/src/metadata/components/cell-editors/number-editor.js
View File

@ -1,5 +1,4 @@
import React, { forwardRef, useMemo, useImperativeHandle, useCallback, useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Utils } from '../../../utils/utils';
import { getNumberDisplayString, replaceNumberNotAllowInput, formatStringToNumber } from '../../utils/cell';
@ -72,7 +71,7 @@ const NumberEditor = forwardRef(({
return { [key]: formatStringToNumber(value, data) };
},
getInputNode: () => {
const domNode = ReactDOM.findDOMNode(inputRef.current);
const domNode = inputRef.current;
if (domNode.tagName === 'INPUT') return domNode;
return domNode.querySelector('input:not([type=hidden])');
},

2
frontend/src/metadata/components/cell-editors/rate-editor/rate-item.js
View File

@ -54,7 +54,7 @@ const RateItem = ({
<Icon iconName={type || 'rate'} />
</div>
{enterIndex !== -1 && (
<UncontrolledTooltip placement='bottom' target={ref} modifiers={{ preventOverflow: { boundariesElement: document.body } }} className="sf-metadata-tooltip">
<UncontrolledTooltip placement='bottom' target={ref} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} className="sf-metadata-tooltip">
{enterIndex}
</UncontrolledTooltip>
)}

9
frontend/src/metadata/components/cell-editors/text-editor/index.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import { KeyCodes } from '../../../../constants';
import { CellValueType } from './constants';
@ -105,7 +105,7 @@ class SimpleTextEditor extends Component {
};
getInputNode = () => {
const domNode = ReactDOM.findDOMNode(this.input);
const domNode = findDOMNode(this.input);
if (domNode.tagName === 'INPUT') {
return domNode;
}
@ -118,11 +118,6 @@ class SimpleTextEditor extends Component {
return this.input;
};
onSaveQRCodeValue = (value) => {
this.setState({ value });
this.props.onCommit();
};
render() {
const { column, readOnly, className, placeholder } = this.props;
const { value } = this.state;

2
frontend/src/metadata/components/metadata-details/ai/index.js
View File

@ -157,7 +157,7 @@ const AI = () => {
{isMenuShow && (
<ModalPortal>
<div className="sf-metadata-ai-dropdown-menu large">
<DropdownMenu right={true}>
<DropdownMenu>
{options.map(op => (<DropdownItem key={op.value} onClick={() => handelOperation(op)}>{op.label}</DropdownItem>))}
</DropdownMenu>
</div>

2
frontend/src/metadata/components/popover/column-popover/data/rate-data/index.js
View File

@ -65,7 +65,7 @@ const RateData = ({ value, onChange, updatePopoverState }) => {
className="sf-metadata-rate-column-data-style-setting-popover"
hide={closeStylePopover}
hideWithEsc={closeStylePopover}
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
>
<div className="rate-column-style-list">
{RATE_COLORS.map(color => {

2
frontend/src/metadata/components/popover/kanban-add-category-popover/index.js
View File

@ -48,7 +48,7 @@ const KanbanAddCategoryPopover = ({ target, options, onCancel, onSubmit }) => {
className="sf-metadata-kanban-add-board-popover"
hide={onCancel}
hideWithEsc={onCancel}
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[[{ name: 'preventOverflow', options: { boundary: document.body } }]]}
>
<div className="sf-metadata-kanban-add-board-popover-inner">
<div className="kanban-popover-body">

4
frontend/src/metadata/views/table/masks/cell-mask.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
class CellMask extends React.PureComponent {
@ -7,7 +7,7 @@ class CellMask extends React.PureComponent {
componentDidUpdate() {
// Scrolling left and right causes the interface to re-render,
// and the style of CellMask is reset and needs to be fixed
const dom = ReactDOM.findDOMNode(this);
const dom = findDOMNode(this);
if (dom.style.position === 'fixed') {
dom.style.transform = 'none';
}

55
frontend/src/metadata/views/table/table-main/records/record/cell/operation-btn/file-name-operation-btn/index.js Normal file
View File

@ -0,0 +1,55 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { UncontrolledTooltip } from 'reactstrap';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import { gettext } from '../../../../../../../../../utils/constants';
import { EVENT_BUS_TYPE as METADATA_EVENT_BUS_TYPE, EDITOR_TYPE } from '../../../../../../../../constants';
import { checkIsDir } from '../../../../../../../../utils/row';
import { openFile } from '../../../../../../../../utils/file';
import './index.css';
const FileNameOperationBtn = ({ column, record, ...props }) => {
const fileName = useMemo(() => {
const { key } = column;
return record[key];
}, [column, record]);
const isDir = useMemo(() => checkIsDir(record), [record]);
const handelClick = (event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
const repoID = window.sfMetadataContext.getSetting('repoID');
openFile(repoID, record, () => {
window.sfMetadataContext.eventBus.dispatch(METADATA_EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
});
};
if (!fileName) return null;
return (
<>
<IconBtn id="sf-metadata-cell-open-file-btn" className="sf-metadata-cell-operation-btn" size={20} iconName="open-file" onClick={handelClick} />
<UncontrolledTooltip
hideArrow
target="sf-metadata-cell-open-file-btn"
placement="bottom"
fade={false}
delay={{ show: 0, hide: 0 }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
className="sf-metadata-tooltip"
>
{isDir ? gettext('Open folder') : gettext('Open file')}
</UncontrolledTooltip>
</>
);
};
FileNameOperationBtn.propTypes = {
column: PropTypes.object,
record: PropTypes.object,
};
export default FileNameOperationBtn;

2
frontend/src/pages/file-history-old/history-item.js
View File

@ -122,7 +122,7 @@ class MoreMenu extends React.PureComponent {
aria-expanded={this.state.dropdownOpen}
>
</DropdownToggle>
<DropdownMenu className="drop-list" right={true}>
<DropdownMenu className="drop-list">
{index !== 0 && <a href="#" onClick={onItemRestore}><DropdownItem>{gettext('Restore')}</DropdownItem></a>}
{canDownload && <a href={downloadUrl}><DropdownItem>{gettext('Download')}</DropdownItem></a>}
<a href={viewUrl}><DropdownItem>{gettext('View')}</DropdownItem></a>

5
frontend/src/pages/institution-admin/index.js
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import MediaQuery from 'react-responsive';
import { Modal } from 'reactstrap';
import SidePanel from './side-panel';
@ -29,4 +29,5 @@ export default function Institutions() {
);
}
ReactDom.render(<Institutions />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<Institutions />);

2
frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js
View File

@ -18,7 +18,7 @@ class CollabUsersButton extends React.PureComponent {
render() {
return (
<Dropdown className={this.props.className} isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle}>
<DropdownToggle id={this.props.id}>
<DropdownToggle tag="span" id={this.props.id}>
<i className="iconfont icon-users"></i> {this.props.users.length}
</DropdownToggle>
<DropdownMenu className={'drop-list'}>

4
frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
View File

@ -51,12 +51,12 @@ class MoreMenu extends React.PureComponent {
const isSmall = this.props.isSmallScreen;
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down">
<DropdownToggle id="moreButton" aria-label={gettext('More operations')}>
<DropdownToggle tag="span" id="moreButton" aria-label={gettext('More operations')}>
<Icon symbol="more-vertical" />
<Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
</Tooltip>
</DropdownToggle>
<DropdownMenu className="drop-list" right={true}>
<DropdownMenu className="drop-list">
{(!this.props.readOnly && editorMode === 'rich') &&
<DropdownItem onClick={this.props.onEdit.bind(this, 'plain')}>{gettext('Switch to plain text editor')}</DropdownItem>}
{(!this.props.readOnly && editorMode === 'plain') &&

1
frontend/src/pages/my-libs/mylib-repo-menu.js
View File

@ -221,6 +221,7 @@ class MylibRepoMenu extends React.Component {
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag="span"
className="dropdown-item font-weight-normal rounded-0 d-flex justify-content-between align-items-center pr-2"
onMouseEnter={this.toggleAdvancedMenuShown}
>

2
frontend/src/pages/org-admin/departments/departments-node-dropdown-menu.js
View File

@ -6,7 +6,7 @@ import { gettext } from '../../../utils/constants';
function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers, toggleAddDepartment, toggleAddLibrary }) {
return (
<DropdownMenu
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
>
<DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>

2
frontend/src/pages/org-admin/departments/member-item.js
View File

@ -118,7 +118,7 @@ class DepartmentsV2MembersItem extends React.Component {
aria-label={gettext('More operations')}
data-toggle="dropdown"
/>
<DropdownMenu right={true}>
<DropdownMenu>
<DropdownItem key='delete' onClick={this.toggleDeleteMemberDialog}>{gettext('Delete')}</DropdownItem>
</DropdownMenu>
</Dropdown>

5
frontend/src/pages/org-admin/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Router } from '@gatsbyjs/reach-router';
import { siteRoot, enableMultiADFS } from '../../utils/constants';
import SidePanel from './side-panel';
@ -135,4 +135,5 @@ class Org extends React.Component {
}
}
ReactDom.render(<Org />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<Org />);

10
frontend/src/pages/org-admin/input-item.js
View File

@ -1,5 +1,5 @@
import React, { Component, Fragment } from 'react';
import { Input, InputGroup, InputGroupAddon, Button, Row, Col, Label } from 'reactstrap';
import { Input, InputGroup, Button, Row, Col, Label } from 'reactstrap';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
@ -67,11 +67,9 @@ class OrgSamlConfigInput extends Component {
<Col md="5">
<InputGroup>
<Input type={inputType} value={value} onChange={this.onInputChange} onFocus={this.toggleBtns} onBlur={this.hideBtns}/>
{this.props.domainVerified &&
<InputGroupAddon addonType="append">
<Button color="success" className="border-0">{gettext('Verified')}</Button>
</InputGroupAddon>
}
{this.props.domainVerified && (
<Button color="success" className="border-0">{gettext('Verified')}</Button>
)}
</InputGroup>
{this.props.isCertificate &&
<p className="small text-secondary mt-1">

22
frontend/src/pages/org-admin/org-saml-config.js
View File

@ -1,5 +1,5 @@
import React, { Fragment, Component } from 'react';
import { Row, Col, Label, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { Row, Col, Label, Button, Input, InputGroup } from 'reactstrap';
import copy from 'copy-to-clipboard';
import MainPanelTopbar from './main-panel-topbar';
import toaster from '../../components/toast';
@ -114,9 +114,7 @@ class OrgSAMLConfig extends Component {
<Col md="5">
<InputGroup>
<Input type="text" readOnly={true} value={entityID} />
<InputGroupAddon addonType="append">
<Button color="primary" onClick={this.onCopyValue.bind(this, entityID)} className="border-0">{gettext('Copy')}</Button>
</InputGroupAddon>
<Button color="primary" onClick={this.onCopyValue.bind(this, entityID)} className="border-0">{gettext('Copy')}</Button>
</InputGroup>
</Col>
</Row>
@ -128,9 +126,7 @@ class OrgSAMLConfig extends Component {
<Col md="5">
<InputGroup>
<Input type="text" readOnly={true} value={acsURL} />
<InputGroupAddon addonType="append">
<Button color="primary" onClick={this.onCopyValue.bind(this, acsURL)} className="border-0">{gettext('Copy')}</Button>
</InputGroupAddon>
<Button color="primary" onClick={this.onCopyValue.bind(this, acsURL)} className="border-0">{gettext('Copy')}</Button>
</InputGroup>
</Col>
</Row>
@ -142,9 +138,7 @@ class OrgSAMLConfig extends Component {
<Col md="5">
<InputGroup>
<Input type="text" readOnly={true} value={serviceURL} />
<InputGroupAddon addonType="append">
<Button color="primary" onClick={this.onCopyValue.bind(this, serviceURL)} className="border-0">{gettext('Copy')}</Button>
</InputGroupAddon>
<Button color="primary" onClick={this.onCopyValue.bind(this, serviceURL)} className="border-0">{gettext('Copy')}</Button>
</InputGroup>
</Col>
</Row>
@ -156,9 +150,7 @@ class OrgSAMLConfig extends Component {
<Col md="5">
<InputGroup>
<Input type="text" readOnly={true} value={logoutURL} />
<InputGroupAddon addonType="append">
<Button color="primary" onClick={this.onCopyValue.bind(this, logoutURL)} className="border-0">{gettext('Copy')}</Button>
</InputGroupAddon>
<Button color="primary" onClick={this.onCopyValue.bind(this, logoutURL)} className="border-0">{gettext('Copy')}</Button>
</InputGroup>
</Col>
</Row>
@ -204,9 +196,7 @@ class OrgSAMLConfig extends Component {
<InputGroup>
<Input type="text" readOnly={true} value={dnsTxt}/>
{(dnsTxt && !domainVerified) &&
<InputGroupAddon addonType="append">
<Button color="primary" onClick={this.onCopyValue.bind(this, dnsTxt)} className="border-0">{gettext('Copy')}</Button>
</InputGroupAddon>
<Button color="primary" onClick={this.onCopyValue.bind(this, dnsTxt)} className="border-0">{gettext('Copy')}</Button>
}
</InputGroup>
{(dnsTxt && !domainVerified) &&

6
frontend/src/pages/org-admin/web-settings/web-settings.js
View File

@ -8,7 +8,7 @@ import MainPanelTopbar from '../main-panel-topbar';
import Section from './section';
import InputItem from './input-item';
import FileItem from './file-item';
import { InputGroupAddon, InputGroupText } from 'reactstrap';
import { InputGroupText } from 'reactstrap';
import '../../../css/system-admin-web-settings.css';
import CheckboxItem from '../../sys-admin/web-settings/checkbox-item';
@ -192,9 +192,7 @@ class OrgWebSettings extends Component {
value={user_default_quota}
helpTip={gettext('Tip: 0 means default limit, the unit is MB')}
inputAddon={
<InputGroupAddon addonType="append">
<InputGroupText>MB</InputGroupText>
</InputGroupAddon>
<InputGroupText>MB</InputGroupText>
}
valueFixed={1}
/>

5
frontend/src/pages/plain-markdown-editor/index.js
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import isHotkey from 'is-hotkey';
import PropTypes from 'prop-types';
import { processor } from '@seafile/seafile-editor';
@ -262,4 +262,5 @@ PlainMarkdownEditor.propTypes = propTypes;
export default PlainMarkdownEditor;
ReactDom.render(<PlainMarkdownEditor />, document.getElementById('root'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<PlainMarkdownEditor />);

2
frontend/src/pages/repo-wiki-mode/side-panel.js
View File

@ -171,7 +171,7 @@ class SidePanel extends Component {
aria-expanded={this.state.isHeaderMenuShow}
onClick={this.onDropdownToggleClick}
/>
<DropdownMenu right>
<DropdownMenu>
<DropdownItem onClick={this.onAddFolderToggle.bind(this, 'root')}>{gettext('New Folder')}</DropdownItem>
<DropdownItem onClick={this.onAddFileToggle.bind(this, 'root')}>{gettext('New File')}</DropdownItem>
</DropdownMenu>

5
frontend/src/pages/sdoc-revision/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Button } from 'reactstrap';
import { DiffViewer } from '@seafile/sdoc-editor';
import { gettext } from '../../utils/constants';
@ -133,4 +133,5 @@ class SdocRevision extends React.Component {
}
}
ReactDom.render(<SdocRevision />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SdocRevision />);

9
frontend/src/pages/sdoc/sdoc-file-history/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import i18n from '../../../_i18n/i18n-sdoc-editor';
import { UncontrolledTooltip } from 'reactstrap';
@ -436,8 +436,9 @@ class SdocFileHistory extends React.Component {
}
}
ReactDom.render(
const root = createRoot(document.getElementById('wrapper'));
root.render(
<I18nextProvider i18n={ i18n } >
<SdocFileHistory />
</I18nextProvider>,
document.getElementById('wrapper'));
</I18nextProvider>
);

8
frontend/src/pages/sdoc/sdoc-published-revision/index.js
View File

@ -1,5 +1,5 @@
import React, { Suspense } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';
import { PublishedRevisionViewer } from '@seafile/sdoc-editor';
import i18n from '../../../_i18n/i18n-sdoc-editor';
@ -45,11 +45,11 @@ window.seafile = {
revisionId,
};
ReactDom.render(
const root = createRoot(document.getElementById('wrapper'));
root.render(
<I18nextProvider i18n={ i18n } >
<Suspense fallback={<Loading />}>
<PublishedRevisionViewer />
</Suspense>
</I18nextProvider>,
document.getElementById('wrapper')
</I18nextProvider>
);

2
frontend/src/pages/sys-admin/departments/departments-node-dropdown-menu.js
View File

@ -6,7 +6,7 @@ import { gettext } from '../../../utils/constants';
function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers, toggleAddDepartment, toggleAddLibrary }) {
return (
<DropdownMenu
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
>
<DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>

2
frontend/src/pages/sys-admin/departments/member-item.js
View File

@ -119,7 +119,7 @@ class MemberItem extends React.Component {
aria-label={gettext('More operations')}
data-toggle="dropdown"
/>
<DropdownMenu right={true}>
<DropdownMenu>
<DropdownItem onClick={this.toggleDeleteMemberDialog}>{gettext('Delete')}</DropdownItem>
</DropdownMenu>
</Dropdown>

2
frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js
View File

@ -123,7 +123,7 @@ class DingtalkDepartmentsTreeNode extends Component {
aria-expanded={this.state.dropdownOpen}
>
</DropdownToggle>
<DropdownMenu className="drop-list" right={true}>
<DropdownMenu className="drop-list">
<DropdownItem
onClick={this.importDepartmentDialogToggle.bind(this, department)}
id={department.id}

14
frontend/src/pages/sys-admin/index.js
View File

@ -1,8 +1,8 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import MediaQuery from 'react-responsive';
import { Modal } from 'reactstrap';
import { Router } from '@gatsbyjs/reach-router';
import { globalHistory, LocationProvider, Router } from '@gatsbyjs/reach-router';
import { I18nextProvider } from 'react-i18next';
import { siteRoot } from '../../utils/constants';
import { Utils } from '../../utils/utils';
@ -287,9 +287,11 @@ class SysAdmin extends React.Component {
}
}
ReactDom.render(
const root = createRoot(document.getElementById('wrapper'));
root.render(
<I18nextProvider value={i18n}>
<SysAdmin />
</I18nextProvider>,
document.getElementById('wrapper')
<LocationProvider history={globalHistory}>
<SysAdmin />
</LocationProvider>
</I18nextProvider>
);

4
frontend/src/pages/sys-admin/users/users-filter-bar.js
View File

@ -56,7 +56,7 @@ class UsersFilterBar extends Component {
<div className="users-filter-bar mt-4 mb-2 d-flex">
<Dropdown isOpen={this.state.isStatusOpen} toggle={this.toggleStatusDropdown}>
<DropdownToggle
tag="div"
tag="span"
data-toggle="dropdown"
aria-expanded={this.state.isStatusOpen}
className="users-filter-bar-dropdown-toggle"
@ -78,7 +78,7 @@ class UsersFilterBar extends Component {
</Dropdown>
<Dropdown isOpen={this.state.isRoleOpen} toggle={this.toggleRoleDropdown} className="ml-4">
<DropdownToggle
tag="div"
tag="span"
data-toggle="dropdown"
aria-expanded={this.state.isRoleOpen}
className="users-filter-bar-dropdown-toggle"

2
frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js
View File

@ -123,7 +123,7 @@ class WorkWeixinDepartmentsTreeNode extends Component {
aria-expanded={this.state.dropdownOpen}
>
</DropdownToggle>
<DropdownMenu className="drop-list" right={true}>
<DropdownMenu className="drop-list">
<DropdownItem
onClick={this.importDepartmentDialogToggle.bind(this, department)}
id={department.id}

5
frontend/src/pages/upload-link/index.js
View File

@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext } from '../../utils/constants';
@ -71,4 +71,5 @@ class SharedUploadLink extends React.Component {
}
}
ReactDom.render(<SharedUploadLink />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedUploadLink />);

2
frontend/src/pages/upload-link/upload-progress-dialog.js
View File

@ -63,7 +63,7 @@ class UploadProgressDialog extends React.Component {
<Fragment>
<div className="text-center">
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
<DropdownToggle color="primary" caret onKeyDown={this.onDropdownToggleKeyDown}>{gettext('Upload')}</DropdownToggle>
<DropdownToggle tag="span" color="primary" caret onKeyDown={this.onDropdownToggleKeyDown}>{gettext('Upload')}</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.props.onFileUpload} onKeyDown={this.onMenuItemKeyDown}>{gettext('Upload Files')}</DropdownItem>
<DropdownItem onClick={this.props.onFolderUpload} onKeyDown={this.onMenuItemKeyDown}>{gettext('Upload Folder')}</DropdownItem>

2
frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
View File

@ -97,7 +97,7 @@ export default class PageDropdownMenu extends Component {
<DropdownMenu
className="page-operation-dropdown-menu dtable-dropdown-menu large"
flip={false}
modifiers={{ preventOverflow: { boundariesElement: document.body } }}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
>
<DropdownItem onClick={this.handleCopyLink}>

6
frontend/src/repo-folder-trash.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import PropTypes from 'prop-types';
import { navigate } from '@gatsbyjs/reach-router';
import dayjs from 'dayjs';
@ -442,4 +442,6 @@ FolderItem.propTypes = {
renderFolder: PropTypes.func.isRequired,
};
ReactDom.render(<RepoFolderTrash />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<RepoFolderTrash />);

5
frontend/src/repo-history.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import PropTypes from 'prop-types';
import { navigate } from '@gatsbyjs/reach-router';
import dayjs from 'dayjs';
@ -345,4 +345,5 @@ Item.propTypes = {
item: PropTypes.object.isRequired,
};
ReactDom.render(<RepoHistory />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<RepoHistory />);

5
frontend/src/repo-snapshot.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import PropTypes from 'prop-types';
import { navigate } from '@gatsbyjs/reach-router';
import { Utils } from './utils/utils';
@ -319,4 +319,5 @@ FolderItem.propTypes = {
renderFolder: PropTypes.func.isRequired,
};
ReactDom.render(<RepoSnapshot />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<RepoSnapshot />);

5
frontend/src/settings.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import MediaQuery from 'react-responsive';
import { Modal } from 'reactstrap';
import { Utils } from './utils/utils';
@ -210,4 +210,5 @@ class Settings extends React.Component {
}
}
ReactDom.render(<Settings />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<Settings />);

5
frontend/src/shared-dir-view.js
View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import MD5 from 'MD5';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Button, Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip } from 'reactstrap';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
@ -1015,4 +1015,5 @@ GridItem.propTypes = {
showImagePopup: PropTypes.func,
};
ReactDom.render(<SharedDirView />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedDirView />);

5
frontend/src/shared-file-view-audio.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
import AudioPlayer from './components/audio-player';
@ -38,4 +38,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewAudio />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewAudio />);

5
frontend/src/shared-file-view-document.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { seafileAPI } from './utils/seafile-api';
import { gettext, mediaUrl } from './utils/constants';
import SharedFileView from './components/shared-file-view/shared-file-view';
@ -103,4 +103,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewDocument />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewDocument />);

5
frontend/src/shared-file-view-image.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
import { gettext } from './utils/constants';
@ -51,4 +51,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewImage />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewImage />);

5
frontend/src/shared-file-view-markdown.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { MarkdownViewer } from '@seafile/seafile-editor';
import { seafileAPI } from './utils/seafile-api';
import { Utils } from './utils/utils';
@ -87,4 +87,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewMarkdown />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewMarkdown />);

5
frontend/src/shared-file-view-pdf.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
import PDFViewer from './components/pdf-viewer';
@ -28,4 +28,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewPDF />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewPDF />);

9
frontend/src/shared-file-view-sdoc.js
View File

@ -1,5 +1,5 @@
import React, { Suspense } from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { SimpleViewer } from '@seafile/sdoc-editor';
import { I18nextProvider } from 'react-i18next';
import i18n from './_i18n/i18n-sdoc-editor';
@ -44,11 +44,12 @@ window.seafile = {
document.getElementById('favicon').href = fileIcon;
})();
ReactDom.render(
const root = createRoot(document.getElementById('wrapper'));
root.render(
<I18nextProvider i18n={ i18n } >
<Suspense fallback={<Loading />}>
<SimpleViewer />
</Suspense>
</I18nextProvider>,
document.getElementById('wrapper')
</I18nextProvider>
);

5
frontend/src/shared-file-view-spreadsheet.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { seafileAPI } from './utils/seafile-api';
import { siteRoot, gettext } from './utils/constants';
import SharedFileView from './components/shared-file-view/shared-file-view';
@ -105,4 +105,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewSpreadsheet />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewSpreadsheet />);

6
frontend/src/shared-file-view-svg.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
@ -29,4 +29,6 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewSVG />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewSVG />);

5
frontend/src/shared-file-view-text.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
import SeafileCodeMirror from './components/seafile-codemirror';
@ -27,4 +27,5 @@ class SharedFileViewText extends React.Component {
}
}
ReactDom.render(<SharedFileViewText />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewText />);

5
frontend/src/shared-file-view-unknown.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
@ -19,4 +19,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewImage />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewImage />);

5
frontend/src/shared-file-view-video.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import SharedFileView from './components/shared-file-view/shared-file-view';
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
import VideoPlayer from './components/video-player';
@ -40,4 +40,5 @@ class FileContent extends React.Component {
}
}
ReactDom.render(<SharedFileViewImage />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<SharedFileViewImage />);

8
frontend/src/subscription.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
import SideNav from './components/user-settings/side-nav';
import Account from './components/common/account';
@ -66,7 +66,5 @@ class UserSubscription extends React.Component {
}
}
ReactDOM.render(
<UserSubscription />,
document.getElementById('wrapper')
);
const root = createRoot(document.getElementById('wrapper'));
root.render(<UserSubscription />);

2
frontend/src/tag/components/tag-view-name/all-tags-operation-toolbar.js
View File

@ -44,7 +44,7 @@ const AllTagsOperationToolbar = ({ children }) => {
<div className="dir-operation">
<Dropdown isOpen={isMenuOpen} toggle={toggleMenuOpen}>
<DropdownToggle
tag="div"
tag="i"
role="button"
className="path-item"
onClick={toggleMenuOpen}

5
frontend/src/tc-accept.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Button } from 'reactstrap';
import { gettext } from './utils/constants';
import Logo from './components/logo';
@ -48,4 +48,5 @@ class TCAccept extends React.Component {
}
}
ReactDom.render(<TCAccept />, document.getElementById('wrapper'));
const root = createRoot(document.getElementById('wrapper'));
root.render(<TCAccept />);

Some files were not shown because too many files have changed in this diff Show More