jialin
6 months ago
parent
f9469a1ea3
commit
bd6c689d91
@ -0,0 +1,34 @@
|
||||
import useOverlayScroller from '@/hooks/use-overlay-scroller';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div<{ $maxHeight?: number }>`
|
||||
max-height: ${({ $maxHeight }) =>
|
||||
typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
padding-inline: 10px;
|
||||
`;
|
||||
|
||||
const OverlayScroller: React.FC<any> = ({ children, maxHeight, theme }) => {
|
||||
const scroller = React.useRef<any>(null);
|
||||
const { initialize } = useOverlayScroller({
|
||||
options: {
|
||||
theme: theme || 'os-theme-light'
|
||||
}
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (scroller.current) {
|
||||
initialize(scroller.current);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Wrapper ref={scroller} $maxHeight={maxHeight || '100%'} hidden={false}>
|
||||
{children}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default OverlayScroller;
|
||||
@ -0,0 +1,72 @@
|
||||
import AlertBlockInfo from '@/components/alert-info/block';
|
||||
import { isArray } from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface CompatibilityAlertProps {
|
||||
warningStatus: {
|
||||
show: boolean;
|
||||
title?: string;
|
||||
isHtml?: boolean;
|
||||
message: string | string[];
|
||||
};
|
||||
}
|
||||
|
||||
const DivWrapper = styled.div`
|
||||
padding-inline: 12px;
|
||||
`;
|
||||
|
||||
const MessageWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--font-size-small);
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
|
||||
const { warningStatus } = props;
|
||||
const { title, show, message, isHtml } = warningStatus;
|
||||
|
||||
const renderMessage = useMemo(() => {
|
||||
if (!message || !show) {
|
||||
return '';
|
||||
}
|
||||
if (isHtml) {
|
||||
return (
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: message as string
|
||||
}}
|
||||
></span>
|
||||
);
|
||||
}
|
||||
if (typeof message === 'string') {
|
||||
return message;
|
||||
}
|
||||
if (isArray(message)) {
|
||||
return (
|
||||
<MessageWrapper>
|
||||
{message.map((item, index) => (
|
||||
<div key={index}>{item}</div>
|
||||
))}
|
||||
</MessageWrapper>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}, [message, show]);
|
||||
|
||||
return (
|
||||
show && (
|
||||
<DivWrapper>
|
||||
<AlertBlockInfo
|
||||
ellipsis={false}
|
||||
message={renderMessage}
|
||||
title={title}
|
||||
type="warning"
|
||||
></AlertBlockInfo>
|
||||
</DivWrapper>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default CompatibilityAlert;
|
||||
@ -0,0 +1,80 @@
|
||||
import OverlayScroller from '@/components/overlay-scroller';
|
||||
import { WarningOutlined } from '@ant-design/icons';
|
||||
import { Tag, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { EvaluateResult } from '../config/types';
|
||||
|
||||
interface IncompatiableInfoProps {
|
||||
data?: EvaluateResult;
|
||||
}
|
||||
|
||||
const CompatibleTag = styled(Tag)`
|
||||
border-radius: 4px;
|
||||
margin-right: 0;
|
||||
`;
|
||||
|
||||
const IncompatibleInfo = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
ul {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-small);
|
||||
padding: 0;
|
||||
padding-left: 16px;
|
||||
color: var(--color-white-secondary);
|
||||
list-style: none;
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
li::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
left: -14px;
|
||||
top: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-white-secondary);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const SMTitle = styled.div<{ $isTitle?: boolean }>`
|
||||
font-weight: ${(props) => (props.$isTitle ? 'bold' : 'normal')};
|
||||
font-size: var(--font-size-small);
|
||||
`;
|
||||
const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
|
||||
const { data } = props;
|
||||
if (data?.compatible) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Tooltip
|
||||
overlayInnerStyle={{ paddingInline: 0 }}
|
||||
title={
|
||||
<OverlayScroller maxHeight={200}>
|
||||
<IncompatibleInfo>
|
||||
<SMTitle $isTitle={!!data?.scheduling_messages?.length}>
|
||||
{data?.compatibility_messages}
|
||||
</SMTitle>
|
||||
{!!data?.scheduling_messages?.length && (
|
||||
<ul>
|
||||
{data?.scheduling_messages.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</IncompatibleInfo>
|
||||
</OverlayScroller>
|
||||
}
|
||||
>
|
||||
<CompatibleTag icon={<WarningOutlined />} color="warning">
|
||||
Incompatible
|
||||
</CompatibleTag>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default IncompatiableInfo;
|
||||
Loading…
Reference in new issue