feat: small screen editor and row-expand

package.json

@@ -4,7 +4,7 @@
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",
-    "@seafile/seafile-calendar": "0.0.24",
+    "@seafile/seafile-calendar": "0.0.29",
     "@seafile/seafile-editor": "~2.0.6",
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",

src/BodyPortal/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+class BodyPortal extends React.Component {
+  componentWillUnmount() {
+    if (this.defaultNode) {
+      document.body.removeChild(this.defaultNode);
+    }
+    this.defaultNode = null;
+  }
+
+  render() {
+    if (!canUseDOM) {
+      return null;
+    }
+
+    if (!this.props.node && !this.defaultNode) {
+      this.defaultNode = document.createElement('div');
+      document.body.appendChild(this.defaultNode);
+    }
+
+    return ReactDOM.createPortal(
+      this.props.children,
+      this.props.node || this.defaultNode,
+    );
+  }
+}
+
+BodyPortal.propTypes = {
+  children: PropTypes.node.isRequired,
+  node: PropTypes.any,
+};
+
+export default BodyPortal;

src/CheckboxEditor/index.js

@@ -1,108 +1,29 @@
-import React, { Component } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import SvgIcon from '../SvgIcon';
-import { isMobile } from '../utils/utils';
-import { KeyCodes, DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
+import MediaQuery from 'react-responsive';
+import PCCheckboxEditor from './pc-editor';
+import MBCheckboxEditor from './mb-editor';
 
 import './index.css';
 
-class CheckboxEditor extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: props.value || false,
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { value } = this.props;
-    if (value !== prevProps.value) {
-      this.setState({ value });
-    }
-  }
-
-  onKeyDown = (event) => {
-    const { isEditorShow, readOnly } = this.props;
-    if (event.keyCode === KeyCodes.Enter && isEditorShow && !readOnly) {
-      this.setState({ value: !this.state.value });
-    }
-  };
-
-  getValue = () => {
-    const { value } = this.state;
-    return value;
-  };
-
-  updateValue = (value) => {
-    if (value === this.state.value) {
-      return;
-    }
-    this.setState({ value });
-  };
-
-  onChangeCheckboxValue = (event) => {
-    if (event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      event.persist();
-    }
-    const { value } = this.state;
-    const newValue = !value;
-    this.setState({ value: newValue }, () => {
-      if (this.props.onCommit) {
-        this.props.onCommit(event);
-      }
-    });
-  };
-
-  renderIcon = (symbol, color) => {
-    const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
-    if (symbol.startsWith('dtable-icon')) {
-      return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
-    }
-    return (<SvgIcon className={className} symbol={symbol} color={color} />);
-  };
-
-  render() {
-    const { className, style, column } = this.props;
-    const { value } = this.state;
-    const checkboxProps = {
-      ...(!isMobile && { onClick: this.onChangeCheckboxValue }),
-      ...(isMobile && { onTouchStart: this.onChangeCheckboxValue }),
-    };
-    let checkboxStyle = column?.data?.checkbox_style;
-    if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
-      checkboxStyle = DEFAULT_CHECKBOX_MARK_STYLE;
-    }
-    return (
-      <div
-        className={classnames('dtable-ui-checkbox-editor', className)}
-        style={style || {}}
-        {...checkboxProps}
-      >
-        {value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)}
-      </div>
-    );
-  }
-}
+const CheckboxEditor = forwardRef(({ isMobile, ...props }, ref) => {
+  if (isMobile === false) return (<PCCheckboxEditor { ...props } ref={ref} />);
+  if (isMobile === true) return (<MBCheckboxEditor { ...props } ref={ref} />);
+
+  return (
+    <>
+      <MediaQuery query="(min-width: 768px)">
+        <PCCheckboxEditor { ...props } ref={ref} />
+      </MediaQuery>
+      <MediaQuery query="(max-width: 768px)">
+        <MBCheckboxEditor { ...props } ref={ref} />
+      </MediaQuery>
+    </>
+  );
+});
 
 CheckboxEditor.propTypes = {
-  isEditorShow: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  column: PropTypes.object,
-  onCommit: PropTypes.func,
+  isMobile: PropTypes.bool,
 };
 
 export default CheckboxEditor;

src/CheckboxEditor/mb-editor.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import SvgIcon from '../SvgIcon';
+import { DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
+
+class MBCheckboxEditor extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value || false,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { value } = this.props;
+    if (value !== prevProps.value) {
+      this.setState({ value });
+    }
+  }
+
+  getValue = () => {
+    const { value } = this.state;
+    return value;
+  };
+
+  updateValue = (value) => {
+    if (value === this.state.value) {
+      return;
+    }
+    this.setState({ value });
+  };
+
+  onChangeCheckboxValue = (event) => {
+    if (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      event.persist();
+    }
+    const { value } = this.state;
+    const newValue = !value;
+    this.setState({ value: newValue }, () => {
+      this.props.onCommit && this.props.onCommit(newValue);
+    });
+  };
+
+  renderIcon = (symbol, color) => {
+    const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
+    if (symbol.startsWith('dtable-icon')) {
+      return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
+    }
+    return (<SvgIcon className={className} symbol={symbol} color={color} />);
+  };
+
+  render() {
+    const { className, style, column } = this.props;
+    const { value } = this.state;
+    let checkboxStyle = column?.data?.checkbox_style;
+    if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
+      checkboxStyle = DEFAULT_CHECKBOX_MARK_STYLE;
+    }
+    return (
+      <div
+        className={classnames('dtable-ui-checkbox-editor', className)}
+        style={style || {}}
+        onClick={this.onChangeCheckboxValue}
+      >
+        {value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)}
+      </div>
+    );
+  }
+}
+
+MBCheckboxEditor.propTypes = {
+  isEditorShow: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  column: PropTypes.object,
+  onCommit: PropTypes.func,
+};
+
+export default MBCheckboxEditor;