69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { Button, ITagProps, Menu, MenuItem, Popover, Position, Tag } from "@blueprintjs/core";
|
|
import { IconNames } from "@blueprintjs/icons";
|
|
import React, { MouseEvent } from "react";
|
|
import styled from "styled-components";
|
|
import { INSTANCE_TYPES } from "../../constants";
|
|
import { getSearchFilterDisplayValue, SearchFilter } from "../../searchFilters";
|
|
import { getTypeDisplayString } from "../../util";
|
|
|
|
const SearchFilterContainer = styled.div`
|
|
margin: 10px 0 0 0;
|
|
`;
|
|
const TagContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-items: flex-start;
|
|
margin-bottom: 5px;
|
|
`;
|
|
const StyledTag = styled(Tag)`
|
|
margin-left: 5px;
|
|
`;
|
|
|
|
interface SearchFiltersProps {
|
|
selectedFilters: SearchFilter[];
|
|
selectFilter: (filter: SearchFilter) => void;
|
|
deselectFilter: (e: MouseEvent<HTMLButtonElement>, props: ITagProps) => void;
|
|
}
|
|
const SearchFilters: React.FC<SearchFiltersProps> = ({ selectedFilters, selectFilter, deselectFilter }) => {
|
|
const hasInstanceTypeFilter = selectedFilters.some((sf) => sf.field === "type");
|
|
|
|
const handleSelectInstanceType = (e: MouseEvent<HTMLElement>) => {
|
|
const field = "type";
|
|
const relation = "eq";
|
|
const value = e.currentTarget.innerText.toLowerCase().replace(" ", "");
|
|
const filter: SearchFilter = {
|
|
displayValue: getSearchFilterDisplayValue(field, relation, value),
|
|
field,
|
|
relation,
|
|
value,
|
|
};
|
|
selectFilter(filter);
|
|
};
|
|
const renderMenu = () => (
|
|
<Menu>
|
|
<MenuItem icon={IconNames.SYMBOL_CIRCLE} text="Instance type" disabled={hasInstanceTypeFilter}>
|
|
{INSTANCE_TYPES.map((t) => (
|
|
<MenuItem key={t} text={getTypeDisplayString(t)} onClick={handleSelectInstanceType} />
|
|
))}
|
|
</MenuItem>
|
|
</Menu>
|
|
);
|
|
return (
|
|
<SearchFilterContainer>
|
|
<TagContainer>
|
|
{selectedFilters.map((filter) => (
|
|
<StyledTag key={filter.displayValue} minimal onRemove={deselectFilter}>
|
|
{filter.displayValue}
|
|
</StyledTag>
|
|
))}
|
|
</TagContainer>
|
|
<Popover autoFocus={false} content={renderMenu()} position={Position.BOTTOM}>
|
|
<Button minimal icon={IconNames.FILTER}>
|
|
Add filter
|
|
</Button>
|
|
</Popover>
|
|
</SearchFilterContainer>
|
|
);
|
|
};
|
|
export default SearchFilters;
|