From 285c47ac0a3cb8319da7b4bd98e5254981856a5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= <ygx@192.168.1.4>
Date: Fri, 16 Aug 2024 21:59:37 +0800
Subject: [PATCH] feat: adjust editor position

---
 .../collaborator-editor/delete-collaborator/index.css |  3 ++-
 .../cell-editor/collaborator-editor/index.js          | 11 +++++++++--
 .../editor-container/popup-editor-container.js        |  2 +-
 .../multiple-select-editor/delete-options/index.css   |  6 +++++-
 .../multiple-select-editor/delete-options/index.js    |  2 --
 .../cell-editor/multiple-select-editor/index.js       |  7 ++++++-
 .../cell-editor/single-select-editor/index.js         |  5 ++++-
 .../detail-editor/multiple-select-editor/index.css    |  4 ----
 .../detail-editor/multiple-select-editor/index.js     |  9 ++++++++-
 9 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/delete-collaborator/index.css b/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/delete-collaborator/index.css
index e366ec798e..773e6d51a5 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/delete-collaborator/index.css
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/delete-collaborator/index.css
@@ -55,5 +55,6 @@
 .sf-metadata-delete-collaborator .collaborator .collaborator-remove {
   height: 14px;
   width: 14px;
-  margin-left: 2px;
+  position: relative;
+  left: 2px;
 }
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/index.js
index 1c368df847..31000bc56c 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/index.js
@@ -11,9 +11,11 @@ import DeleteCollaborator from './delete-collaborator';
 import './index.css';
 
 const CollaboratorEditor = forwardRef(({
+  height,
   saveImmediately = false,
   column,
   value: oldValue,
+  editorPosition = { left: 0, top: 0 },
   onCommit,
   onPressTab,
   onClose,
@@ -178,7 +180,8 @@ const CollaboratorEditor = forwardRef(({
     if (editorRef.current) {
       const { bottom } = editorRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        editorRef.current.style.top = `${window.innerHeight - bottom}px`;
+        editorRef.current.style.top = 'unset';
+        editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
       }
     }
     if (editorContainerRef.current && collaboratorItemRef.current) {
@@ -238,8 +241,10 @@ const CollaboratorEditor = forwardRef(({
 
   }, [displayCollaborators, searchValue, value, highlightIndex, onMenuMouseEnter, onMenuMouseLeave, onSelectCollaborator]);
 
+  const isBeyondScreen = editorPosition.left + 300 > window.innerWidth;
+
   return (
-    <div className="sf-metadata-collaborator-editor" style={{ top: -38 }} ref={editorRef}>
+    <div className="sf-metadata-collaborator-editor" style={{ top: -38, left: isBeyondScreen ? 'unset' : 0, right: isBeyondScreen ? -column.width : 'unset' }} ref={editorRef}>
       <DeleteCollaborator value={value} onDelete={onDeleteCollaborator} />
       <div className="sf-metadata-search-collaborator-options">
         <SearchInput placeholder={gettext('Search collaborators')} onKeyDown={onKeyDown} onChange={onChangeSearch} autoFocus={true} className="sf-metadata-search-collaborators" />
@@ -253,8 +258,10 @@ const CollaboratorEditor = forwardRef(({
 
 CollaboratorEditor.propTypes = {
   saveImmediately: PropTypes.bool,
+  height: PropTypes.number,
   column: PropTypes.object,
   value: PropTypes.array,
+  editorPosition: PropTypes.object,
   onCommit: PropTypes.func,
   onClose: PropTypes.func,
   onPressTab: PropTypes.func,
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
index 80d6d00675..2ab9c0f97c 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
@@ -22,7 +22,7 @@ class PopupEditorContainer extends React.Component {
     super(props);
     const { column, width, height, left, top } = this.props;
     let additionalStyles = {};
-    if (column.type === CellType.SINGLE_SELECT) {
+    if (column.type === CellType.SINGLE_SELECT || column.type === CellType.MULTIPLE_SELECT) {
       additionalStyles = { width, height };
     }
     this.state = {
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
index 2f766cefb0..53bab4fa88 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
@@ -10,13 +10,17 @@
 .sf-metadata-delete-select-options .sf-metadata-delete-select-option {
   margin-top: 5px;
   margin-bottom: 5px;
+  margin-right: 10px;
   align-items: center;
+  max-width: 100% !important;
+  overflow: hidden
 }
 
 .sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-delete-select-remove {
   height: 14px;
   width: 14px;
-  margin-left: 2px;
+  position: relative;
+  left: 2px;
 }
 
 .sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-icon-x-01 {
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
index a0d9230812..76c55b6b4e 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
@@ -20,8 +20,6 @@ const DeleteOption = ({ value, options, onDelete }) => {
     return [...selectedOptions, ...invalidOptions];
   }, [options, value]);
 
-  if (displayOptions.length === 0) return null;
-
   return (
     <div className="sf-metadata-delete-select-options">
       {displayOptions.map(option => {
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
index d1c6fb6ce5..34b204e63a 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
@@ -11,9 +11,11 @@ import DeleteOption from './delete-options';
 import './index.css';
 
 const MultipleSelectEditor = forwardRef(({
+  height,
   saveImmediately,
   column,
   value: oldValue,
+  editorPosition = { left: 0, top: 0 },
   onCommit,
   onPressTab,
   modifyColumnData,
@@ -179,7 +181,8 @@ const MultipleSelectEditor = forwardRef(({
     if (editorRef.current) {
       const { bottom } = editorRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
+        editorRef.current.style.top = 'unset';
+        editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
       }
     }
     if (editorContainerRef.current && selectItemRef.current) {
@@ -269,8 +272,10 @@ const MultipleSelectEditor = forwardRef(({
 });
 
 MultipleSelectEditor.propTypes = {
+  height: PropTypes.number,
   column: PropTypes.object,
   value: PropTypes.array,
+  editorPosition: PropTypes.object,
   onCommit: PropTypes.func,
   onPressTab: PropTypes.func,
 };
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
index c4e025bf43..000e9b378c 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
@@ -15,6 +15,7 @@ const SingleSelectEditor = forwardRef(({
   columns,
   record,
   value: oldValue,
+  editorPosition = { left: 0, top: 0 },
   onCommit,
   onPressTab,
   modifyColumnData,
@@ -175,7 +176,8 @@ const SingleSelectEditor = forwardRef(({
     if (editorRef.current) {
       const { bottom } = editorRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
+        editorRef.current.style.top = 'unset';
+        editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
       }
     }
     if (editorContainerRef.current && selectItemRef.current) {
@@ -269,6 +271,7 @@ SingleSelectEditor.propTypes = {
   columns: PropTypes.array,
   record: PropTypes.object,
   value: PropTypes.string,
+  editorPosition: PropTypes.object,
   onCommit: PropTypes.func,
   onPressTab: PropTypes.func,
 };
diff --git a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
index deb896d0cf..6cef818f9f 100644
--- a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
+++ b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
@@ -12,10 +12,6 @@
   padding: 2px 6px;
 }
 
-.sf-metadata-multiple-select-property-detail-editor .sf-metadata-delete-select-options .sf-metadata-delete-select-option {
-  margin-right: 10px;
-}
-
 .sf-metadata-multiple-select-property-editor-popover .sf-metadata-delete-select-options {
   display: none;
 }
diff --git a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
index 5361a8aa17..dbdf235a1a 100644
--- a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
@@ -84,6 +84,13 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
     );
   }, [showEditor, onCommit, record, value, modifyColumnData, fields, field]);
 
+  const isEmpty = useMemo(() => {
+    if (!Array.isArray(value) || value.length === 0) return true;
+    const selectedOptions = options.filter((option) => value.includes(option.id) || value.includes(option.name));
+    const invalidOptionIds = value.filter(optionId => optionId && !options.find(o => o.id === optionId || o.name === optionId));
+    return selectedOptions.length + invalidOptionIds.length === 0;
+  }, [options, value]);
+
   return (
     <div
       className="sf-metadata-property-detail-editor sf-metadata-single-select-property-detail-editor sf-metadata-multiple-select-property-detail-editor"
@@ -91,7 +98,7 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
       ref={ref}
       onClick={openEditor}
     >
-      <DeleteOptions value={value} options={options} onDelete={deleteOption} />
+      {!isEmpty && (<DeleteOptions value={value} options={options} onDelete={deleteOption} />)}
       {renderEditor()}
     </div>
   );