69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { IconFont } from '@gpustack/core-ui';
|
|
import { Collapse, CollapseProps } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
const CollapseInner = styled(Collapse)`
|
|
.ant-collapse-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px !important;
|
|
padding-inline: 5px !important;
|
|
padding-block: 8px !important;
|
|
border-radius: var(--border-radius-base) !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
&:hover {
|
|
background-color: var(--ant-color-fill-tertiary) !important;
|
|
}
|
|
}
|
|
|
|
.ant-collapse-body {
|
|
padding-inline: 0 !important;
|
|
padding-block: 0 !important;
|
|
}
|
|
.ant-collapse-header-text {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 24px;
|
|
}
|
|
`;
|
|
|
|
const CollapsePanel: React.FC<{
|
|
items: CollapseProps['items'];
|
|
activeKey: string | string[];
|
|
accordion?: boolean;
|
|
defaultActiveKey?: string | string[];
|
|
onChange?: (key: string | string[]) => void;
|
|
styles?: Record<string, React.CSSProperties>;
|
|
}> = ({ items, activeKey, accordion, defaultActiveKey, onChange, styles }) => {
|
|
return (
|
|
<CollapseInner
|
|
expandIconPlacement="start"
|
|
bordered={false}
|
|
ghost
|
|
accordion={accordion}
|
|
activeKey={activeKey}
|
|
defaultActiveKey={defaultActiveKey}
|
|
onChange={onChange}
|
|
destroyOnHidden={false}
|
|
styles={{
|
|
...styles,
|
|
header: {
|
|
backgroundColor: 'var(--ant-collapse-header-bg)'
|
|
}
|
|
}}
|
|
expandIcon={({ isActive }) => (
|
|
<IconFont
|
|
type="icon-down"
|
|
rotate={isActive ? 0 : -90}
|
|
style={{ fontSize: '14px' }}
|
|
></IconFont>
|
|
)}
|
|
items={items}
|
|
></CollapseInner>
|
|
);
|
|
};
|
|
|
|
export default CollapsePanel;
|