61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import AutoTooltip from '@/components/auto-tooltip';
|
|
import { OverlayScroller } from '@/components/overlay-scroller';
|
|
import { Tag } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
const TagInner = styled(Tag)`
|
|
border-radius: 12px;
|
|
margin: 0;
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
`;
|
|
|
|
interface SelectedProps {
|
|
maxHeight?: number;
|
|
selectedList: { key: string; title: string }[];
|
|
onUnselect: (
|
|
key: string,
|
|
newSelectedKeys: { key: string; title: string }[]
|
|
) => void;
|
|
}
|
|
|
|
const SelectedList: React.FC<SelectedProps> = ({
|
|
maxHeight,
|
|
selectedList,
|
|
onUnselect
|
|
}) => {
|
|
const handleOnUnselect = (key: string) => {
|
|
const newSelectedKeys = selectedList.filter((item) => item.key !== key);
|
|
onUnselect(key, newSelectedKeys);
|
|
};
|
|
|
|
return (
|
|
<OverlayScroller maxHeight={maxHeight}>
|
|
<Content>
|
|
{selectedList.map((item) => (
|
|
<AutoTooltip
|
|
title={item.title}
|
|
key={item.key}
|
|
maxWidth={200}
|
|
onClose={(e) => {
|
|
e.preventDefault();
|
|
handleOnUnselect(item.key);
|
|
}}
|
|
closable
|
|
>
|
|
{item.title}
|
|
</AutoTooltip>
|
|
))}
|
|
</Content>
|
|
</OverlayScroller>
|
|
);
|
|
};
|
|
|
|
export default SelectedList;
|