Merge pull request #296 from seatable/fix-row-expand-editor

YangGuoXuan-0503 · web-flow · commit e65970b94b61 · 2025-03-15T10:18:22.000+08:00
fix: row expand editor
diff --git a/src/RowExpandDialog/index.js b/src/RowExpandDialog/index.js
@@ -69,7 +69,7 @@ const RowExpandDialog = forwardRef(({
     if (readonly || !column || !column.editable || NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[column.type]) return false;
     if (column.type === CellType.IMAGE || column.type === CellType.FILE) return Boolean(uploadFile);
     return true;
-  }, [isSaving, uploadFile]);
+  }, [readonly, isSaving, uploadFile]);
 
   const initRowData = useCallback(() => {
     setLoading(true);
@@ -82,7 +82,7 @@ const RowExpandDialog = forwardRef(({
     isChangedRef.current = isInsertingRow && Object.keys(defaultRow).length > 0;
     setColumns(validColumns);
     setLoading(false);
-  }, [isInsertingRow, checkEditable]);
+  }, [isInsertingRow, defaultColumns, defaultRow, checkEditable]);
 
   const toggle = useCallback(() => {
     if (isSaving) return;
diff --git a/src/RowExpandEditor/RowExpandCollaboratorEditor/index.js b/src/RowExpandEditor/RowExpandCollaboratorEditor/index.js
@@ -92,7 +92,7 @@ class RowExpandCollaboratorEditor extends React.Component {
   };
 
   hideSelect = (event) => {
-    if (!this.state.showCollaboratorSelect || !event.target || event.target.tagName.toUpperCase() === 'INPUT') {
+    if (!this.state.showCollaboratorSelect || !event.target) {
       return;
     }
     const editor = document.querySelector('.dtable-ui-collaborator-editor-container');
diff --git a/src/RowExpandEditor/RowExpandDepartmentEditor/index.js b/src/RowExpandEditor/RowExpandDepartmentEditor/index.js
@@ -4,9 +4,7 @@ import classnames from 'classnames';
 import { useClickOutside } from '../../hooks';
 import DepartmentSingleSelectFormatter from '../../DepartmentSingleSelectFormatter';
 import { KeyCodes } from '../../constants';
-import { getLocale } from '../../lang';
 import DepartmentSingleSelect from '../../Department-editor/department-single-select';
-import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../Department-editor/constants';
 
 function RowExpandDepartmentEditor(props) {
   const { row, column, valueKey, departments, userDepartmentIdsMap, isEditorFocus, columnIndex } = props;
@@ -35,7 +33,7 @@ function RowExpandDepartmentEditor(props) {
   }, [row]);
 
   function hideDropDownMenu(event) {
-    if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
+    if (!event.target) return;
     toggleDepartmentSelect(false);
   }
 
diff --git a/src/RowExpandEditor/RowExpandGeolocationEditor/index.js b/src/RowExpandEditor/RowExpandGeolocationEditor/index.js
@@ -61,7 +61,7 @@ class RowExpandGeolocationEditor extends React.Component {
   hideEditor = (event) => {
     if (
       !this.state.isShowEditor
-      || !event.target || event.target.tagName.toUpperCase() === 'INPUT'
+      || !event.target
       || this.editorContainer.contains(event.target)
     ) return;
     if (this.state.isShowEditor && this.geoEditor.getLargeEditorState()) return;
diff --git a/src/RowExpandEditor/RowExpandMultipleSelectEditor/index.js b/src/RowExpandEditor/RowExpandMultipleSelectEditor/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { getColumnOptions } from 'dtable-utils';
 import classnames from 'classnames';
 import { KeyCodes, DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS } from '../../constants';
 import MultipleSelectEditor from '../../MultipleSelectEditor';
 import { getLocale } from '../../lang';
+import ObjectUtils from '../../utils/object-utils';
 
 import './index.css';
 
@@ -26,8 +28,8 @@ class RowExpandMultipleSelectEditor extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { value } = nextProps;
-    if (value !== this.props.value) {
+    const { value, column } = nextProps;
+    if (value !== this.props.value || !ObjectUtils.isSameObject(column, this.props.column)) {
       this.options = this.getOptions(nextProps);
       this.setState({ value });
     }
@@ -69,7 +71,7 @@ class RowExpandMultipleSelectEditor extends React.Component {
   };
 
   hideDropDownMenu = (event) => {
-    if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
+    if (!event.target) return;
     if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
       const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
       if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
@@ -80,7 +82,8 @@ class RowExpandMultipleSelectEditor extends React.Component {
   onToggleSelect = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    this.props.updateTabIndex(this.props.columnIndex);
+    const { updateTabIndex, columnIndex } = this.props;
+    updateTabIndex && updateTabIndex(columnIndex);
     this.toggleSingleSelect(true);
   };
 
@@ -89,7 +92,8 @@ class RowExpandMultipleSelectEditor extends React.Component {
   };
 
   onFocus = () => {
-    this.props.updateTabIndex(this.props.columnIndex);
+    const { updateTabIndex, columnIndex } = this.props;
+    updateTabIndex && updateTabIndex(columnIndex);
   };
 
   onChange = (option) => {
@@ -148,7 +152,7 @@ class RowExpandMultipleSelectEditor extends React.Component {
   };
 
   renderOptions = () => {
-    const { isEditorFocus } = this.props;
+    const { isEditorFocus, classNamePrefix, placeholder } = this.props;
     const options = this.getMultipleSelectList();
 
     return (
@@ -157,15 +161,16 @@ class RowExpandMultipleSelectEditor extends React.Component {
         onFocus={this.onFocus}
         onClick={this.onToggleSelect}
         ref={ref => this.multipleSelectOptionsRef = ref}
-        className={classnames('dtable-ui dtable-ui-row-expand-select-editor custom-select', { 'focus': isEditorFocus })}
+        className={classnames('dtable-ui dtable-ui-row-expand-select-editor custom-select', { 'focus': isEditorFocus, [`${classNamePrefix}-select-editor`]: classNamePrefix })}
       >
-        <div className="dtable-ui-row-expand-select-editor-inner">
-          <div>
+        <div className={classnames('dtable-ui-row-expand-select-editor-inner', { [`${classNamePrefix}-select-editor-inner`]: classNamePrefix })}>
+          <div className={classnames('', { [`${classNamePrefix}-select-editor-inner-container`]: classNamePrefix })}>
             {options.length > 0 &&
-              <div className="dtable-ui-row-expand-select-options">
+              <div className={classnames('dtable-ui-row-expand-select-options', { [`${classNamePrefix}-select-editor-options`]: classNamePrefix })}>
                 {options}
               </div>
             }
+            {options.length === 0 && placeholder && (<>{placeholder}</>)}
           </div>
           <i aria-hidden="true" className="dtable-font dtable-icon-down3"></i>
         </div>
@@ -174,7 +179,7 @@ class RowExpandMultipleSelectEditor extends React.Component {
   };
 
   render() {
-    const { column, isSupportNewOption, onAddNewOption } = this.props;
+    const { column, isSupportNewOption, onAddNewOption, classNamePrefix } = this.props;
     const { showSelectPopover, value } = this.state;
     return (
       <div className="position-relative w-100" ref={ref => this.ref = ref}>
@@ -188,6 +193,7 @@ class RowExpandMultipleSelectEditor extends React.Component {
             value={value}
             valueKey={this.key}
             target={this.targetRef}
+            classNamePrefix={classNamePrefix}
             onCommit={this.onChange}
             isSupportNewOption={isSupportNewOption}
             onAddNewOption={onAddNewOption}
@@ -200,4 +206,19 @@ class RowExpandMultipleSelectEditor extends React.Component {
 
 }
 
+RowExpandMultipleSelectEditor.propTypes = {
+  column: PropTypes.object,
+  value: PropTypes.array,
+  valueKey: PropTypes.string,
+  isSupportNewOption: PropTypes.bool,
+  onAddNewOption: PropTypes.func,
+  isEditorFocus: PropTypes.bool,
+  classNamePrefix: PropTypes.string,
+  placeholder: PropTypes.any,
+  columnIndex: PropTypes.number,
+  updateTabIndex: PropTypes.func,
+  onEditorOpen: PropTypes.func,
+  onEditorClose: PropTypes.func,
+};
+
 export default RowExpandMultipleSelectEditor;
diff --git a/src/RowExpandEditor/RowExpandSingleSelectorEditor/index.js b/src/RowExpandEditor/RowExpandSingleSelectorEditor/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { getColumnOptions } from 'dtable-utils';
 import { KeyCodes, DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS } from '../../constants';
 import classnames from 'classnames';
 import SingleSelectEditor from '../../SingleSelectEditor';
 import { getLocale } from '../../lang';
+import ObjectUtils from '../../utils/object-utils';
 
 import './index.css';
 
@@ -27,8 +29,8 @@ class RowExpandSingleSelectEditor extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { value } = nextProps;
-    if (value !== this.props.value) {
+    const { value, column } = nextProps;
+    if (value !== this.props.value || !ObjectUtils.isSameObject(column, this.props.column)) {
       this.options = this.getOptions(nextProps);
       this.setState({ value, showSelectPopover: false });
     }
@@ -87,8 +89,8 @@ class RowExpandSingleSelectEditor extends React.Component {
   };
 
   hideDropDownMenu = (event) => {
-    if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
-    if (!this.singleSelectContainer.contains(event.target) && this.state.showSelectPopover) {
+    if (!event.target) return;
+    if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
       const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
       if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
       this.toggleSingleSelect(false);
@@ -116,7 +118,7 @@ class RowExpandSingleSelectEditor extends React.Component {
   };
 
   renderOption = () => {
-    const { isEditorFocus } = this.props;
+    const { isEditorFocus, classNamePrefix, placeholder } = this.props;
     const { value } = this.state;
     const option = this.options.find(o => o[this.key] === value);
     const optionStyle = option ?
@@ -130,15 +132,16 @@ class RowExpandSingleSelectEditor extends React.Component {
         onFocus={this.onFocus}
         onClick={this.onToggleSelect}
         ref={ref => this.selectRef = ref}
-        className={classnames('dtable-ui dtable-ui-row-expand-select-editor custom-select', { 'focus': isEditorFocus })}
+        className={classnames('dtable-ui dtable-ui-row-expand-select-editor custom-select', { 'focus': isEditorFocus, [`${classNamePrefix}-select-editor`]: classNamePrefix })}
       >
-        <div className="dtable-ui-row-expand-select-editor-inner">
-          <div>
+        <div className={classnames('dtable-ui-row-expand-select-editor-inner', { [`${classNamePrefix}-select-editor-inner`]: classNamePrefix })}>
+          <div className={classnames('', { [`${classNamePrefix}-select-editor-inner-container`]: classNamePrefix })}>
             {value && (
               <div className="dtable-ui-select-option" style={optionStyle} title={optionName}>
                 {optionName}
               </div>
             )}
+            {!value && placeholder && (<>{placeholder}</>)}
           </div>
           <i aria-hidden="true" className="dtable-font dtable-icon-down3"></i>
         </div>
@@ -147,10 +150,10 @@ class RowExpandSingleSelectEditor extends React.Component {
   };
 
   render() {
-    const { isSupportNewOption, onAddNewOption, column } = this.props;
+    const { isSupportNewOption, onAddNewOption, column, classNamePrefix } = this.props;
     const { showSelectPopover, value } = this.state;
     return (
-      <div className="position-relative w-100" ref={ref => this.singleSelectContainer = ref}>
+      <div className="position-relative w-100" ref={ref => this.ref = ref}>
         {this.renderOption()}
         <span ref={ref => this.targetRef = ref}></span>
         {showSelectPopover && (
@@ -161,6 +164,7 @@ class RowExpandSingleSelectEditor extends React.Component {
             value={value}
             valueKey={this.key}
             target={this.targetRef}
+            classNamePrefix={classNamePrefix}
             onCommit={this.onChange}
             isSupportNewOption={isSupportNewOption}
             onAddNewOption={onAddNewOption}
@@ -173,4 +177,19 @@ class RowExpandSingleSelectEditor extends React.Component {
 
 }
 
+RowExpandSingleSelectEditor.propTypes = {
+  column: PropTypes.object,
+  value: PropTypes.array,
+  valueKey: PropTypes.string,
+  isSupportNewOption: PropTypes.bool,
+  onAddNewOption: PropTypes.func,
+  isEditorFocus: PropTypes.bool,
+  classNamePrefix: PropTypes.string,
+  placeholder: PropTypes.any,
+  columnIndex: PropTypes.number,
+  updateTabIndex: PropTypes.func,
+  onEditorOpen: PropTypes.func,
+  onEditorClose: PropTypes.func,
+};
+
 export default RowExpandSingleSelectEditor;
diff --git a/src/RowExpandEditor/RowExpandUrlEditor/index.js b/src/RowExpandEditor/RowExpandUrlEditor/index.js
@@ -12,7 +12,7 @@ class RowExpandUrlEditor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: props.value,
+      value: props.value || '',
     };
     this.inputRef = React.createRef();
   }
diff --git a/src/select-editor/pc-select-editor/index.js b/src/select-editor/pc-select-editor/index.js
@@ -204,7 +204,7 @@ class PCSelectEditor extends React.Component {
   };
 
   render() {
-    const { isInModal, className, value, column, valueKey, isSupportNewOption, target } = this.props;
+    const { isInModal, className, value, column, valueKey, isSupportNewOption, target, classNamePrefix } = this.props;
     const { searchValue, highlightIndex } = this.state;
 
     // maxWidth = single-selects-container's width - single-selects-container's padding-left and padding-right - single-select-container's padding-left - single-select-check-icon's width - The gap between the single-select-check-icon and single-select-name or scroll's width
@@ -213,7 +213,7 @@ class PCSelectEditor extends React.Component {
     let maxWidth = isInModal ? 250 : column?.width > 200 ? column.width - 62 : 138;
 
     const dom = (
-      <div className={classnames('dtable-ui-editor-container dtable-ui-select-editor-container', className)} ref={ref => this.ref = ref}>
+      <div className={classnames('dtable-ui-editor-container dtable-ui-select-editor-container', className, { [`${classNamePrefix}-select-editor-container`]: classNamePrefix })} ref={ref => this.ref = ref}>
         <div className="select-options-search">
           <DtableSearchInput
             placeholder={getLocale('Search_option')}
@@ -264,7 +264,7 @@ class PCSelectEditor extends React.Component {
             target={target}
             hideArrow={true}
             fade={false}
-            className="dtable-ui dtable-ui-row-expand-select-editor-popover"
+            className={classnames('dtable-ui dtable-ui-row-expand-select-editor-popover', { [`${classNamePrefix}-select-editor-popover`]: classNamePrefix })}
           >
             {dom}
           </Popover>

Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ class RowExpandCollaboratorEditor extends React.Component {`
`92`	`92`	`};`
`93`	`93`
`94`	`94`	`hideSelect = (event) => {`
`95`		`- if (!this.state.showCollaboratorSelect \|\| !event.target \|\| event.target.tagName.toUpperCase() === 'INPUT') {`
	`95`	`+ if (!this.state.showCollaboratorSelect \|\| !event.target) {`
`96`	`96`	`return;`
`97`	`97`	`}`
`98`	`98`	`const editor = document.querySelector('.dtable-ui-collaborator-editor-container');`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ class RowExpandUrlEditor extends React.Component {`
`12`	`12`	`constructor(props) {`
`13`	`13`	`super(props);`
`14`	`14`	`this.state = {`
`15`		`- value: props.value,`
	`15`	`+ value: props.value \|\| '',`
`16`	`16`	`};`
`17`	`17`	`this.inputRef = React.createRef();`
`18`	`18`	`}`