feat:允许PC表格重置
This commit is contained in:
@@ -1,10 +1,11 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
import { TrashIcon } from './Icons';
|
import { TrashIcon } from './Icons';
|
||||||
|
|
||||||
export default function ConfirmModal({ title, message, onConfirm, onCancel, confirmText = "确定删除" }) {
|
export default function ConfirmModal({ title, message, onConfirm, onCancel, confirmText = "确定删除" }) {
|
||||||
return (
|
const content = (
|
||||||
<motion.div
|
<motion.div
|
||||||
className="modal-overlay"
|
className="modal-overlay"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
@@ -40,4 +41,6 @@ export default function ConfirmModal({ title, message, onConfirm, onCancel, conf
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
if (typeof document === 'undefined') return null;
|
||||||
|
return createPortal(content, document.body);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -77,6 +77,13 @@ export function RefreshIcon(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function ResetIcon(props) {
|
||||||
|
return (
|
||||||
|
<svg t="1772152323013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4796" width="16" height="16"><path fill="currentColor" d="M864 512a352 352 0 0 0-600.96-248.96c-15.744 15.872-40.704 42.88-63.232 67.648H320a32 32 0 1 1 0 64H128a31.872 31.872 0 0 1-32-32v-192a32 32 0 1 1 64 0v108.672c20.544-22.528 42.688-46.4 57.856-61.504a416 416 0 1 1 0 588.288 32 32 0 1 1 45.248-45.248A352 352 0 0 0 864 512z" p-id="4797"></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function ChevronIcon(props) {
|
export function ChevronIcon(props) {
|
||||||
return (
|
return (
|
||||||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||||
|
|||||||
@@ -7,7 +7,8 @@ import {
|
|||||||
getCoreRowModel,
|
getCoreRowModel,
|
||||||
useReactTable,
|
useReactTable,
|
||||||
} from '@tanstack/react-table';
|
} from '@tanstack/react-table';
|
||||||
import { ExitIcon, SettingsIcon, StarIcon, TrashIcon } from './Icons';
|
import ConfirmModal from './ConfirmModal';
|
||||||
|
import { ExitIcon, ResetIcon, SettingsIcon, StarIcon, TrashIcon } from './Icons';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* PC 端基金列表表格组件(基于 @tanstack/react-table)
|
* PC 端基金列表表格组件(基于 @tanstack/react-table)
|
||||||
@@ -82,6 +83,12 @@ export default function PcFundTable({
|
|||||||
}
|
}
|
||||||
return stored;
|
return stored;
|
||||||
});
|
});
|
||||||
|
const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
|
||||||
|
const handleResetSizing = () => {
|
||||||
|
setColumnSizing({});
|
||||||
|
persistColumnSizing({});
|
||||||
|
setResetConfirmOpen(false);
|
||||||
|
};
|
||||||
const onRemoveFundRef = useRef(onRemoveFund);
|
const onRemoveFundRef = useRef(onRemoveFund);
|
||||||
const onToggleFavoriteRef = useRef(onToggleFavorite);
|
const onToggleFavoriteRef = useRef(onToggleFavorite);
|
||||||
const onRemoveFromGroupRef = useRef(onRemoveFromGroup);
|
const onRemoveFromGroupRef = useRef(onRemoveFromGroup);
|
||||||
@@ -330,7 +337,22 @@ export default function PcFundTable({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'actions',
|
id: 'actions',
|
||||||
header: '操作',
|
header: () => (
|
||||||
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
|
||||||
|
<span>操作</span>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation?.();
|
||||||
|
setResetConfirmOpen(true);
|
||||||
|
}}
|
||||||
|
title="重置列宽"
|
||||||
|
style={{ border: 'none', width: '24px', height: '24px', backgroundColor: 'transparent', color: 'var(--text)' }}
|
||||||
|
>
|
||||||
|
<ResetIcon width="14" height="14" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
size: 80,
|
size: 80,
|
||||||
minSize: 80,
|
minSize: 80,
|
||||||
maxSize: 80,
|
maxSize: 80,
|
||||||
@@ -598,6 +620,15 @@ export default function PcFundTable({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{resetConfirmOpen && (
|
||||||
|
<ConfirmModal
|
||||||
|
title="重置列宽"
|
||||||
|
message="是否重置表格列宽为默认值?"
|
||||||
|
onConfirm={handleResetSizing}
|
||||||
|
onCancel={() => setResetConfirmOpen(false)}
|
||||||
|
confirmText="重置"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user