Skip to content

Commit 8706ff9

Browse files
杨国璇杨国璇
杨国璇
authored and
杨国璇
committed
feat: body portal
1 parent d4f0de9 commit 8706ff9

File tree

262 files changed

+10830
-5165
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

262 files changed

+10830
-5165
lines changed

‎package-lock.json

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"main": "./lib/index.js",
55
"dependencies": {
66
"@seafile/react-image-lightbox": "4.0.2",
7-
"@seafile/seafile-calendar": "0.0.24",
7+
"@seafile/seafile-calendar": "0.0.29",
88
"@seafile/seafile-editor": "~2.0.6",
99
"antd-mobile": "2.3.1",
1010
"classnames": "2.3.2",

‎src/BodyPortal/index.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import PropTypes from 'prop-types';
4+
5+
const canUseDOM = !!(
6+
typeof window !== 'undefined' &&
7+
window.document &&
8+
window.document.createElement
9+
);
10+
11+
class BodyPortal extends React.Component {
12+
componentWillUnmount() {
13+
if (this.defaultNode) {
14+
document.body.removeChild(this.defaultNode);
15+
}
16+
this.defaultNode = null;
17+
}
18+
19+
render() {
20+
if (!canUseDOM) {
21+
return null;
22+
}
23+
24+
if (!this.props.node && !this.defaultNode) {
25+
this.defaultNode = document.createElement('div');
26+
document.body.appendChild(this.defaultNode);
27+
}
28+
29+
return ReactDOM.createPortal(
30+
this.props.children,
31+
this.props.node || this.defaultNode,
32+
);
33+
}
34+
}
35+
36+
BodyPortal.propTypes = {
37+
children: PropTypes.node.isRequired,
38+
node: PropTypes.any,
39+
};
40+
41+
export default BodyPortal;

‎src/CheckboxEditor/index.js

Lines changed: 20 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,29 @@
1-
import React, { Component } from 'react';
1+
import React, { forwardRef } from 'react';
22
import PropTypes from 'prop-types';
3-
import classnames from 'classnames';
4-
import SvgIcon from '../SvgIcon';
5-
import { isMobile } from '../utils/utils';
6-
import { KeyCodes, DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
3+
import MediaQuery from 'react-responsive';
4+
import Large from './lg';
5+
import Small from './sm';
76

87
import './index.css';
98

10-
class CheckboxEditor extends Component {
11-
12-
constructor(props) {
13-
super(props);
14-
this.state = {
15-
value: props.value || false,
16-
};
17-
}
18-
19-
componentDidMount() {
20-
document.addEventListener('keydown', this.onKeyDown);
21-
}
22-
23-
componentWillUnmount() {
24-
document.removeEventListener('keydown', this.onKeyDown);
25-
}
26-
27-
componentDidUpdate(prevProps) {
28-
const { value } = this.props;
29-
if (value !== prevProps.value) {
30-
this.setState({ value });
31-
}
32-
}
33-
34-
onKeyDown = (event) => {
35-
const { isEditorShow, readOnly } = this.props;
36-
if (event.keyCode === KeyCodes.Enter && isEditorShow && !readOnly) {
37-
this.setState({ value: !this.state.value });
38-
}
39-
};
40-
41-
getValue = () => {
42-
const { value } = this.state;
43-
return value;
44-
};
45-
46-
updateValue = (value) => {
47-
if (value === this.state.value) {
48-
return;
49-
}
50-
this.setState({ value });
51-
};
52-
53-
onChangeCheckboxValue = (event) => {
54-
if (event) {
55-
event.stopPropagation();
56-
event.nativeEvent.stopImmediatePropagation();
57-
event.persist();
58-
}
59-
const { value } = this.state;
60-
const newValue = !value;
61-
this.setState({ value: newValue }, () => {
62-
if (this.props.onCommit) {
63-
this.props.onCommit(event);
64-
}
65-
});
66-
};
67-
68-
renderIcon = (symbol, color) => {
69-
const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
70-
if (symbol.startsWith('dtable-icon')) {
71-
return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
72-
}
73-
return (<SvgIcon className={className} symbol={symbol} color={color} />);
74-
};
75-
76-
render() {
77-
const { className, style, column } = this.props;
78-
const { value } = this.state;
79-
const checkboxProps = {
80-
...(!isMobile && { onClick: this.onChangeCheckboxValue }),
81-
...(isMobile && { onTouchStart: this.onChangeCheckboxValue }),
82-
};
83-
let checkboxStyle = column?.data?.checkbox_style;
84-
if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
85-
checkboxStyle = DEFAULT_CHECKBOX_MARK_STYLE;
86-
}
87-
return (
88-
<div
89-
className={classnames('dtable-ui-checkbox-editor', className)}
90-
style={style || {}}
91-
{...checkboxProps}
92-
>
93-
{value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)}
94-
</div>
95-
);
96-
}
97-
}
9+
const CheckboxEditor = forwardRef(({ size, ...props }, ref) => {
10+
if (size === 'lg') return (<Large { ...props } />);
11+
if (size === 'sm') return (<Small { ...props } />);
12+
13+
return (
14+
<>
15+
<MediaQuery query="(min-width: 768px)">
16+
<Large { ...props } ref={ref} />
17+
</MediaQuery>
18+
<MediaQuery query="(max-width: 768px)">
19+
<Small { ...props } ref={ref} />
20+
</MediaQuery>
21+
</>
22+
);
23+
});
9824

9925
CheckboxEditor.propTypes = {
100-
isEditorShow: PropTypes.bool,
101-
className: PropTypes.string,
102-
style: PropTypes.object,
103-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
104-
column: PropTypes.object,
105-
onCommit: PropTypes.func,
26+
size: PropTypes.oneOf(['lg', 'sm']),
10627
};
10728

10829
export default CheckboxEditor;

‎src/CheckboxEditor/lg.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
4+
import SvgIcon from '../SvgIcon';
5+
import { KeyCodes, DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
6+
7+
class Large extends Component {
8+
9+
constructor(props) {
10+
super(props);
11+
this.state = {
12+
value: props.value || false,
13+
};
14+
}
15+
16+
componentDidMount() {
17+
document.addEventListener('keydown', this.onKeyDown);
18+
}
19+
20+
componentWillUnmount() {
21+
document.removeEventListener('keydown', this.onKeyDown);
22+
}
23+
24+
componentDidUpdate(prevProps) {
25+
const { value } = this.props;
26+
if (value !== prevProps.value) {
27+
this.setState({ value });
28+
}
29+
}
30+
31+
onKeyDown = (event) => {
32+
const { isEditorShow, readOnly } = this.props;
33+
if (event.keyCode === KeyCodes.Enter && isEditorShow && !readOnly) {
34+
this.setState({ value: !this.state.value });
35+
}
36+
};
37+
38+
getValue = () => {
39+
const { value } = this.state;
40+
return value;
41+
};
42+
43+
updateValue = (value) => {
44+
if (value === this.state.value) {
45+
return;
46+
}
47+
this.setState({ value });
48+
};
49+
50+
onChangeCheckboxValue = (event) => {
51+
if (event) {
52+
event.stopPropagation();
53+
event.nativeEvent.stopImmediatePropagation();
54+
event.persist();
55+
}
56+
const { value } = this.state;
57+
const newValue = !value;
58+
this.setState({ value: newValue }, () => {
59+
if (this.props.onCommit) {
60+
this.props.onCommit(event);
61+
}
62+
});
63+
};
64+
65+
renderIcon = (symbol, color) => {
66+
const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
67+
if (symbol.startsWith('dtable-icon')) {
68+
return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
69+
}
70+
return (<SvgIcon className={className} symbol={symbol} color={color} />);
71+
};
72+
73+
render() {
74+
const { className, style, column } = this.props;
75+
const { value } = this.state;
76+
let checkboxStyle = column?.data?.checkbox_style;
77+
if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
78+
checkboxStyle = DEFAULT_CHECKBOX_MARK_STYLE;
79+
}
80+
return (
81+
<div
82+
className={classnames('dtable-ui-checkbox-editor', className)}
83+
style={style || {}}
84+
onClick={this.onChangeCheckboxValue}
85+
>
86+
{value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)}
87+
</div>
88+
);
89+
}
90+
}
91+
92+
Large.propTypes = {
93+
isEditorShow: PropTypes.bool,
94+
className: PropTypes.string,
95+
style: PropTypes.object,
96+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
97+
column: PropTypes.object,
98+
onCommit: PropTypes.func,
99+
};
100+
101+
export default Large;

0 commit comments

Comments
 (0)