mirror of
https://github.com/haiwen/seahub.git
synced 2025-08-22 08:47:22 +00:00
refactor: metadata columns (#6516)
Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
parent
1f42fecb83
commit
fdd5e6dbf9
@ -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
|
||||||
|
@ -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 })}
|
||||||
|
Loading…
Reference in New Issue
Block a user