forked from cerc-io/snowballtools-base
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import React, { ComponentPropsWithoutRef } from 'react';
|
|
import {
|
|
Overwrite,
|
|
UseMultipleSelectionGetSelectedItemReturnValue,
|
|
} from 'downshift';
|
|
import { SelectValueTheme, selectValueTheme } from './SelectValue.theme';
|
|
import { OmitCommon } from 'types/common';
|
|
import { SelectOption } from 'components/shared/Select';
|
|
import { Button } from 'components/shared/Button';
|
|
import { CrossIcon } from 'components/shared/CustomIcon';
|
|
|
|
type MergedComponentPropsWithoutRef = OmitCommon<
|
|
ComponentPropsWithoutRef<'span'>,
|
|
Omit<
|
|
Overwrite<UseMultipleSelectionGetSelectedItemReturnValue, SelectOption[]>,
|
|
'index' | 'selectedItem'
|
|
>
|
|
>;
|
|
|
|
export interface SelectValueProps
|
|
extends MergedComponentPropsWithoutRef,
|
|
SelectValueTheme {
|
|
/**
|
|
* The option of the select value
|
|
*/
|
|
option: SelectOption;
|
|
/**
|
|
* The function to call when the delete button is clicked
|
|
* @param item
|
|
* @returns none;
|
|
*/
|
|
onDelete?: (item: SelectOption) => void;
|
|
}
|
|
|
|
/**
|
|
* The SelectValue component is used to display the selected value of a select component
|
|
*/
|
|
export const SelectValue = ({
|
|
className,
|
|
size,
|
|
option,
|
|
onDelete,
|
|
...props
|
|
}: SelectValueProps) => {
|
|
const theme = selectValueTheme();
|
|
|
|
return (
|
|
<span {...props} className={theme.wrapper({ className, size })}>
|
|
{option.label}
|
|
<Button
|
|
onClick={() => onDelete?.(option)}
|
|
iconOnly
|
|
variant="unstyled"
|
|
size="xs"
|
|
>
|
|
<CrossIcon className={theme.icon()} />
|
|
</Button>
|
|
</span>
|
|
);
|
|
};
|