删除所有console.log输出,优化评查结果的表格的显示,添加新的页码获取逻辑
This commit is contained in:
@@ -93,12 +93,12 @@ export function DateRangePicker({
|
||||
try {
|
||||
// 检查并记录showPicker是否可用
|
||||
const hasShowPicker = typeof inputRef.current.showPicker === 'function';
|
||||
console.log('showPicker API available:', hasShowPicker);
|
||||
// console.log('showPicker API available:', hasShowPicker);
|
||||
|
||||
// 尝试使用showPicker API
|
||||
if (hasShowPicker) {
|
||||
inputRef.current.showPicker();
|
||||
console.log('showPicker called successfully');
|
||||
// console.log('showPicker called successfully');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to show date picker:', error);
|
||||
@@ -236,7 +236,7 @@ export function SimpleDateRangePicker({
|
||||
// 处理日期输入框全局点击
|
||||
const handleWrapperClick = (inputRef: React.RefObject<HTMLInputElement>) => {
|
||||
if (inputRef.current) {
|
||||
console.log('Wrapper clicked, triggering date input');
|
||||
// console.log('Wrapper clicked, triggering date input');
|
||||
// 点击整个包装器区域时,触发输入框点击
|
||||
inputRef.current.focus();
|
||||
inputRef.current.click();
|
||||
@@ -244,12 +244,12 @@ export function SimpleDateRangePicker({
|
||||
try {
|
||||
// 检查并记录showPicker是否可用
|
||||
const hasShowPicker = typeof inputRef.current.showPicker === 'function';
|
||||
console.log('showPicker API available:', hasShowPicker);
|
||||
// console.log('showPicker API available:', hasShowPicker);
|
||||
|
||||
// 尝试使用showPicker API
|
||||
if (hasShowPicker) {
|
||||
inputRef.current.showPicker();
|
||||
console.log('showPicker called successfully');
|
||||
// console.log('showPicker called successfully');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to show date picker:', error);
|
||||
|
||||
@@ -24,6 +24,8 @@ export interface TooltipProps {
|
||||
className?: string; // 自定义类名
|
||||
onVisibleChange?: (visible: boolean) => void; // 显示状态变化回调
|
||||
fixedPlacement?: boolean; // 是否固定显示位置,不自动切换
|
||||
maxHeight?: number | string; // 最大高度,超出将显示滚动条
|
||||
scrollable?: boolean; // 是否可滚动
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -45,7 +47,9 @@ export function Tooltip({
|
||||
maxWidth = 320,
|
||||
className = '',
|
||||
onVisibleChange,
|
||||
fixedPlacement = false // 默认不固定位置
|
||||
fixedPlacement = false, // 默认不固定位置
|
||||
maxHeight = 300, // 默认最大高度300px
|
||||
scrollable = true // 默认允许滚动
|
||||
}: TooltipProps) {
|
||||
// 使用内部状态管理提示框显示状态(非受控模式)
|
||||
const [visible, setVisible] = useState(false);
|
||||
@@ -59,6 +63,7 @@ export function Tooltip({
|
||||
// 引用DOM元素
|
||||
const triggerRef = useRef<HTMLDivElement>(null);
|
||||
const tooltipRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 保存当前实际显示位置
|
||||
const [actualPlacement, setActualPlacement] = useState<TooltipPlacement>(placement);
|
||||
@@ -99,6 +104,17 @@ export function Tooltip({
|
||||
? `${maxWidth}px`
|
||||
: String(maxWidth);
|
||||
|
||||
// 如果内容可滚动,设置最大高度,但仅应用于内容容器而不是整个tooltip
|
||||
if (scrollable && contentRef.current) {
|
||||
contentRef.current.style.maxHeight = typeof maxHeight === 'number'
|
||||
? `${maxHeight}px`
|
||||
: String(maxHeight);
|
||||
|
||||
// 确保只有内容区域显示滚动条,整个tooltip容器不滚动
|
||||
contentRef.current.style.overflowY = 'auto';
|
||||
tooltipRef.current.style.overflow = 'visible';
|
||||
}
|
||||
|
||||
// 计算各个方向的位置
|
||||
let top = 0, left = 0;
|
||||
let arrowTop = 0, arrowLeft = 0;
|
||||
@@ -154,7 +170,7 @@ export function Tooltip({
|
||||
if (top < 0) {
|
||||
if (currentPlacement === 'top') {
|
||||
// 如果上方放不下,切换到下方
|
||||
top = triggerRect.bottom + arrowSize;
|
||||
top = triggerRect.bottom + arrowSize - 8;
|
||||
arrowTop = -arrowSize;
|
||||
|
||||
// 更新实际位置为bottom
|
||||
@@ -347,19 +363,22 @@ export function Tooltip({
|
||||
|
||||
// 渲染提示框内容
|
||||
const renderTooltipContent = () => {
|
||||
// 根据是否启用滚动来确定内容容器类名
|
||||
const contentClassName = scrollable ? 'tooltip-content-inner tooltip-scrollable' : 'tooltip-content-inner';
|
||||
|
||||
if (rich) {
|
||||
return (
|
||||
<div className="tooltip-content">
|
||||
<div className="tooltip-content" ref={contentRef}>
|
||||
{header && <div className="tooltip-header">{header}</div>}
|
||||
<div className="tooltip-body">{content}</div>
|
||||
<div className={contentClassName}>{content}</div>
|
||||
{footer && <div className="tooltip-footer">{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tooltip-content">
|
||||
<div>{content}</div>
|
||||
<div className="tooltip-content" ref={contentRef}>
|
||||
<div className={contentClassName}>{content}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user