From fdd5e6dbf922351dbc9fd008aabe75f9edfcfa7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?=
 <37972689+YangGuoXuan-0503@users.noreply.github.com>
Date: Thu, 8 Aug 2024 22:17:47 +0800
Subject: [PATCH] refactor: metadata columns (#6516)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
---
 .../components/dirent-detail/detail/detail/index.js  | 10 ++++------
 .../column-popover/type/column-types/index.js        | 12 ++++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/dirent-detail/detail/detail/index.js b/frontend/src/components/dirent-detail/detail/detail/index.js
index 18afeb695e..7804ceedf0 100644
--- a/frontend/src/components/dirent-detail/detail/detail/index.js
+++ b/frontend/src/components/dirent-detail/detail/detail/index.js
@@ -8,22 +8,22 @@ import './index.css';
 
 const Detail = ({ children, className }) => {
   const [width, setWidth] = useState(300);
-  const [inResizing, setResizing] = useState(false);
+  const [isResizing, setResizing] = useState(false);
   const resizeBarRef = useRef(null);
   const dragHandlerRef = useRef(null);
 
   const onResizeMouseMove = useCallback((e) => {
     const newWidth = Math.max(Math.min(window.innerWidth - e.clientX, 600), 300);
     if (width === newWidth) return;
+    localStorage.setItem('sf_cur_view_detail_width', newWidth);
     setWidth(newWidth);
   }, [width]);
 
   const onResizeMouseUp = useCallback(() => {
     window.removeEventListener('mousemove', onResizeMouseMove);
     window.removeEventListener('mouseup', onResizeMouseUp);
-    inResizing && setResizing(false);
-    localStorage.setItem('sf_cur_view_detail_width', width);
-  }, [width, inResizing, onResizeMouseMove]);
+    isResizing && setResizing(false);
+  }, [isResizing, onResizeMouseMove]);
 
   const onResizeMouseDown = useCallback(() => {
     window.addEventListener('mouseup', onResizeMouseUp);
@@ -55,8 +55,6 @@ const Detail = ({ children, className }) => {
         'cur-view-detail-large': width > 400
       })}
       style={{ width }}
-      // onMouseMove={inResizing ? onResizeMouseMove : null}
-      // onMouseUp={onResizeMouseUp}
     >
       {children}
       <ResizeBar
diff --git a/frontend/src/metadata/metadata-view/components/popover/column-popover/type/column-types/index.js b/frontend/src/metadata/metadata-view/components/popover/column-popover/type/column-types/index.js
index 07c567672f..50e2270cba 100644
--- a/frontend/src/metadata/metadata-view/components/popover/column-popover/type/column-types/index.js
+++ b/frontend/src/metadata/metadata-view/components/popover/column-popover/type/column-types/index.js
@@ -103,10 +103,10 @@ const ColumnTypes = ({
         {displayColumns.length > 0 && (
           <div className="select-column-wrapper">
             <div className="select-column-list">
-              {basicsColumns.length > 0 && (
+              {predefinedColumns.length > 0 && (
                 <>
-                  <div className="select-column-title">{gettext('Basic')}</div>
-                  {basicsColumns.map(item => {
+                  <div className="select-column-title">{gettext('Predefined properties')}</div>
+                  {predefinedColumns.map(item => {
                     return (
                       <div
                         className={classnames('select-column-item text-truncate', { 'active': item.key === column.key })}
@@ -120,10 +120,10 @@ const ColumnTypes = ({
                   })}
                 </>
               )}
-              {predefinedColumns.length > 0 && (
+              {basicsColumns.length > 0 && (
                 <>
-                  <div className="select-column-title">{gettext('Predefined')}</div>
-                  {predefinedColumns.map(item => {
+                  <div className="select-column-title">{gettext('Custom properties')}</div>
+                  {basicsColumns.map(item => {
                     return (
                       <div
                         className={classnames('select-column-item text-truncate', { 'active': item.key === column.key })}