fix(style): tooltip overflow
This commit is contained in:
@@ -1,31 +1,36 @@
|
||||
import { convertFileSize } from '@/utils';
|
||||
import React from 'react';
|
||||
import SimpleBar from 'simplebar-react';
|
||||
import 'simplebar-react/dist/simplebar.min.css';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.file-part-item {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`;
|
||||
|
||||
const FileParts: React.FC<{
|
||||
showSize?: boolean;
|
||||
fileList: any[];
|
||||
}> = ({ fileList, showSize = true }) => {
|
||||
return (
|
||||
<SimpleBar
|
||||
style={{ maxHeight: 200 }}
|
||||
classNames={{ scrollbar: 'scrollbar-handle-light simplebar-scrollbar' }}
|
||||
>
|
||||
<div style={{ padding: 10 }}>
|
||||
{fileList.map((file, index) => {
|
||||
return (
|
||||
<div key={index} className="flex-between m-b-5">
|
||||
<span>
|
||||
{' '}
|
||||
Part {file.part} of {file.total}
|
||||
</span>
|
||||
{showSize && <span>{convertFileSize(file.size)}</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SimpleBar>
|
||||
<Wrapper>
|
||||
{fileList.map((file, index) => {
|
||||
return (
|
||||
<div key={index} className="file-part-item">
|
||||
<span>
|
||||
Part {file.part} of {file.total}
|
||||
</span>
|
||||
{<span>{convertFileSize(file.size)}</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { TooltipOverlayScroller } from '@/components/overlay-scroller';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons';
|
||||
import { Tag, Tooltip } from 'antd';
|
||||
import { Tag } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
@@ -24,13 +25,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
|
||||
}
|
||||
const { parts } = props;
|
||||
return (
|
||||
<Tooltip
|
||||
overlayInnerStyle={{
|
||||
width: 180,
|
||||
padding: 0
|
||||
}}
|
||||
title={<FileParts fileList={parts}></FileParts>}
|
||||
>
|
||||
<TooltipOverlayScroller title={<FileParts fileList={parts}></FileParts>}>
|
||||
<Tag
|
||||
className="tag-item"
|
||||
color="purple"
|
||||
@@ -43,7 +38,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
|
||||
{parts.length} parts
|
||||
</span>
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</TooltipOverlayScroller>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -81,6 +81,10 @@ const options = [
|
||||
{
|
||||
label: '--truncation',
|
||||
value: '--truncation'
|
||||
},
|
||||
{
|
||||
label: '--max-link-num',
|
||||
value: '--max-link-num'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user