2019-04-23 14:31:20 +00:00
|
|
|
// @flow
|
2020-06-20 20:59:15 +00:00
|
|
|
import { CheckmarkIcon } from "outline-icons";
|
2020-08-09 05:53:59 +00:00
|
|
|
import * as React from "react";
|
2021-01-14 06:00:25 +00:00
|
|
|
import { MenuItem } from "reakit/Menu";
|
2020-06-20 20:59:15 +00:00
|
|
|
import styled from "styled-components";
|
2020-07-10 05:33:07 +00:00
|
|
|
import Flex from "components/Flex";
|
2020-08-09 05:53:59 +00:00
|
|
|
import HelpText from "components/HelpText";
|
2019-04-23 14:31:20 +00:00
|
|
|
|
2021-01-14 06:00:25 +00:00
|
|
|
type Props = {|
|
2019-04-23 14:31:20 +00:00
|
|
|
label: string,
|
|
|
|
note?: string,
|
|
|
|
onSelect: () => void,
|
|
|
|
active: boolean,
|
2021-01-14 06:00:25 +00:00
|
|
|
|};
|
2019-04-23 14:31:20 +00:00
|
|
|
|
2021-01-14 06:00:25 +00:00
|
|
|
const FilterOption = ({ label, note, onSelect, active, ...rest }: Props) => {
|
2019-04-23 14:31:20 +00:00
|
|
|
return (
|
2021-01-14 06:00:25 +00:00
|
|
|
<MenuItem onClick={active ? undefined : onSelect} {...rest}>
|
|
|
|
{(props) => (
|
|
|
|
<ListItem>
|
|
|
|
<Button active={active} {...props}>
|
|
|
|
<Flex align="center" justify="space-between">
|
|
|
|
<span>
|
|
|
|
{label}
|
|
|
|
{note && <Description small>{note}</Description>}
|
|
|
|
</span>
|
|
|
|
{active && <Checkmark />}
|
|
|
|
</Flex>
|
|
|
|
</Button>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
</MenuItem>
|
2019-04-23 14:31:20 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-01-14 06:00:25 +00:00
|
|
|
const Description = styled(HelpText)`
|
|
|
|
margin-bottom: 0;
|
|
|
|
`;
|
|
|
|
|
2019-04-23 14:31:20 +00:00
|
|
|
const Checkmark = styled(CheckmarkIcon)`
|
|
|
|
flex-shrink: 0;
|
|
|
|
padding-left: 4px;
|
2020-08-09 01:53:11 +00:00
|
|
|
fill: ${(props) => props.theme.text};
|
2019-04-23 14:31:20 +00:00
|
|
|
`;
|
|
|
|
|
2021-01-14 06:00:25 +00:00
|
|
|
const Button = styled.button`
|
2019-04-23 14:31:20 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
font-size: 15px;
|
|
|
|
padding: 4px 8px;
|
2021-01-14 06:00:25 +00:00
|
|
|
margin: 0;
|
|
|
|
border: 0;
|
|
|
|
background: none;
|
2020-08-09 01:53:11 +00:00
|
|
|
color: ${(props) => props.theme.text};
|
2021-01-14 06:00:25 +00:00
|
|
|
text-align: left;
|
|
|
|
font-weight: ${(props) => (props.active ? "600" : "normal")};
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
2019-04-23 14:31:20 +00:00
|
|
|
min-height: 32px;
|
|
|
|
|
|
|
|
${HelpText} {
|
|
|
|
font-weight: normal;
|
2019-04-24 03:30:40 +00:00
|
|
|
user-select: none;
|
2019-04-23 14:31:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2020-08-09 01:53:11 +00:00
|
|
|
background: ${(props) => props.theme.listItemHoverBackground};
|
2019-04-23 14:31:20 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
const ListItem = styled("li")`
|
2019-04-23 14:31:20 +00:00
|
|
|
list-style: none;
|
2021-01-14 06:00:25 +00:00
|
|
|
max-width: 250px;
|
2019-04-23 14:31:20 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export default FilterOption;
|