1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-22 16:56:57 +00:00

refactor: metadata columns (#6516)

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇 2024-08-08 22:17:47 +08:00 committed by GitHub
parent 1f42fecb83
commit fdd5e6dbf9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 12 deletions

View File

@ -8,22 +8,22 @@ import './index.css';
const Detail = ({ children, className }) => { const Detail = ({ children, className }) => {
const [width, setWidth] = useState(300); const [width, setWidth] = useState(300);
const [inResizing, setResizing] = useState(false); const [isResizing, setResizing] = useState(false);
const resizeBarRef = useRef(null); const resizeBarRef = useRef(null);
const dragHandlerRef = useRef(null); const dragHandlerRef = useRef(null);
const onResizeMouseMove = useCallback((e) => { const onResizeMouseMove = useCallback((e) => {
const newWidth = Math.max(Math.min(window.innerWidth - e.clientX, 600), 300); const newWidth = Math.max(Math.min(window.innerWidth - e.clientX, 600), 300);
if (width === newWidth) return; if (width === newWidth) return;
localStorage.setItem('sf_cur_view_detail_width', newWidth);
setWidth(newWidth); setWidth(newWidth);
}, [width]); }, [width]);
const onResizeMouseUp = useCallback(() => { const onResizeMouseUp = useCallback(() => {
window.removeEventListener('mousemove', onResizeMouseMove); window.removeEventListener('mousemove', onResizeMouseMove);
window.removeEventListener('mouseup', onResizeMouseUp); window.removeEventListener('mouseup', onResizeMouseUp);
inResizing && setResizing(false); isResizing && setResizing(false);
localStorage.setItem('sf_cur_view_detail_width', width); }, [isResizing, onResizeMouseMove]);
}, [width, inResizing, onResizeMouseMove]);
const onResizeMouseDown = useCallback(() => { const onResizeMouseDown = useCallback(() => {
window.addEventListener('mouseup', onResizeMouseUp); window.addEventListener('mouseup', onResizeMouseUp);
@ -55,8 +55,6 @@ const Detail = ({ children, className }) => {
'cur-view-detail-large': width > 400 'cur-view-detail-large': width > 400
})} })}
style={{ width }} style={{ width }}
// onMouseMove={inResizing ? onResizeMouseMove : null}
// onMouseUp={onResizeMouseUp}
> >
{children} {children}
<ResizeBar <ResizeBar

View File

@ -103,10 +103,10 @@ const ColumnTypes = ({
{displayColumns.length > 0 && ( {displayColumns.length > 0 && (
<div className="select-column-wrapper"> <div className="select-column-wrapper">
<div className="select-column-list"> <div className="select-column-list">
{basicsColumns.length > 0 && ( {predefinedColumns.length > 0 && (
<> <>
<div className="select-column-title">{gettext('Basic')}</div> <div className="select-column-title">{gettext('Predefined properties')}</div>
{basicsColumns.map(item => { {predefinedColumns.map(item => {
return ( return (
<div <div
className={classnames('select-column-item text-truncate', { 'active': item.key === column.key })} 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> <div className="select-column-title">{gettext('Custom properties')}</div>
{predefinedColumns.map(item => { {basicsColumns.map(item => {
return ( return (
<div <div
className={classnames('select-column-item text-truncate', { 'active': item.key === column.key })} className={classnames('select-column-item text-truncate', { 'active': item.key === column.key })}