haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 18:30:53 +00:00
Code Issues Releases Wiki Activity

refactor(react): replace findDOMNode by ref (#7479)

Browse Source
This commit is contained in:
Jerry Ren
2025-02-18 16:56:37 +08:00
committed by GitHub
parent e242c77202
commit 680006a883
4 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
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';
@@ -35,10 +34,6 @@ class Account extends Component {
this.handleProps();
}
getContainer = () => {
return findDOMNode(this);
};
handleProps = () => {
if (this.state.showInfo) {
this.addEvents();
@@ -61,9 +56,7 @@ class Account extends Component {
handleDocumentClick = (e) => {
if (e && (e.which === 3 || (e.type === 'keyup' && e.which !== Utils.keyCodes.tab))) return;
const container = this.getContainer();
if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === Utils.keyCodes.tab)) {
if (this.accountDOM && this.accountDOM.contains(e.target) && this.accountDOM !== e.target && (e.type !== 'keyup' || e.which === Utils.keyCodes.tab)) {
return;
}
@@ -148,7 +141,7 @@ class Account extends Component {
render() {
return (
<div id="account">
<div id="account" ref={ref => this.accountDOM = ref}>
<a id="my-info" href="#" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label={gettext('View profile and more')}>
{this.renderAvatar()}
</a>

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

@@ -1,5 +1,4 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
class CellMask extends React.PureComponent {
@@ -7,9 +6,8 @@ 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 = findDOMNode(this);
if (dom.style.position === 'fixed') {
dom.style.transform = 'none';
if (this.cellMaskNode && this.cellMaskNode.style.position === 'fixed') {
this.cellMaskNode.style.transform = 'none';
}
}
@@ -27,6 +25,11 @@ class CellMask extends React.PureComponent {
};
};
setNode = (node) => {
this.cellMaskNode = node;
this.props.innerRef && this.props.innerRef(node);
};
render() {
const { width, height, top, left, zIndex, children, innerRef, ...rest } = this.props;
const style = this.getMaskStyle();
@@ -34,7 +37,7 @@ class CellMask extends React.PureComponent {
<div
style={style}
data-test="cell-mask"
ref={innerRef}
ref={this.setNode}
{...rest}
>
{children}

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

@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import { KeyCodes } from '../../../../constants';
import { CellValueType } from './constants';
@@ -105,12 +104,11 @@ class SimpleTextEditor extends Component {
};
getInputNode = () => {
const domNode = findDOMNode(this.input);
if (domNode.tagName === 'INPUT') {
return domNode;
if (!this.input) return null;
if (this.input.tagName === 'INPUT') {
return this.input;
}
return domNode.querySelector('input:not([type=hidden])');
return this.input.querySelector('input:not([type=hidden])');
};
setInputRef = (input) => {

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

@@ -1,5 +1,4 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
class CellMask extends React.PureComponent {
@@ -7,9 +6,8 @@ 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 = findDOMNode(this);
if (dom.style.position === 'fixed') {
dom.style.transform = 'none';
if (this.cellMaskNode && this.cellMaskNode.style.position === 'fixed') {
this.cellMaskNode.style.transform = 'none';
}
}
@@ -27,6 +25,11 @@ class CellMask extends React.PureComponent {
};
};
setNode = (node) => {
this.cellMaskNode = node;
this.props.innerRef && this.props.innerRef(node);
};
render() {
const { width, height, top, left, zIndex, children, innerRef, ...rest } = this.props;
const style = this.getMaskStyle();
@@ -34,7 +37,7 @@ class CellMask extends React.PureComponent {
<div
style={style}
data-test="cell-mask"
ref={innerRef}
ref={this.setNode}
{...rest}
>
{children}