70 lines
1.7 KiB
JavaScript
70 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import { Flex, IconButton } from "theme-ui";
|
|
|
|
import AddIcon from "../icons/AddIcon";
|
|
import SelectMultipleIcon from "../icons/SelectMultipleIcon";
|
|
import SelectSingleIcon from "../icons/SelectSingleIcon";
|
|
|
|
import Search from "./Search";
|
|
import RadioIconButton from "./RadioIconButton";
|
|
|
|
function FilterBar({
|
|
onFocus,
|
|
search,
|
|
onSearchChange,
|
|
selectMode,
|
|
onSelectModeChange,
|
|
onAdd,
|
|
addTitle,
|
|
}) {
|
|
return (
|
|
<Flex
|
|
bg="muted"
|
|
sx={{
|
|
border: "1px solid",
|
|
borderColor: "text",
|
|
borderRadius: "4px",
|
|
alignItems: "center",
|
|
":focus-within": {
|
|
outline: "1px auto",
|
|
outlineColor: "primary",
|
|
outlineOffset: "0px",
|
|
},
|
|
}}
|
|
onFocus={onFocus}
|
|
>
|
|
<Search value={search} onChange={onSearchChange} />
|
|
<Flex
|
|
mr={1}
|
|
px={1}
|
|
sx={{
|
|
borderRight: "1px solid",
|
|
borderColor: "text",
|
|
height: "36px",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<RadioIconButton
|
|
title="Select Single"
|
|
onClick={() => onSelectModeChange("single")}
|
|
isSelected={selectMode === "single"}
|
|
>
|
|
<SelectSingleIcon />
|
|
</RadioIconButton>
|
|
<RadioIconButton
|
|
title="Select Multiple"
|
|
onClick={() => onSelectModeChange("multiple")}
|
|
isSelected={selectMode === "multiple" || selectMode === "range"}
|
|
>
|
|
<SelectMultipleIcon />
|
|
</RadioIconButton>
|
|
</Flex>
|
|
<IconButton onClick={onAdd} aria-label={addTitle} title={addTitle} mr={1}>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default FilterBar;
|