Files
flipper/desktop/plugins/public/ui-debugger/components/shared/MultiSelectableDropDownItem.tsx
Luke De Feo 1bffe8bc6b Improve framework event filters
Reviewed By: lblasa

Differential Revision: D48393422

fbshipit-source-id: 18d92b53bd56c100b6d4bb6adc07ede0b4a46732
2023-08-21 04:24:16 -07:00

52 lines
1.1 KiB
TypeScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import React from 'react';
import {Checkbox, Typography} from 'antd';
import {Layout, styled, theme} from 'flipper-plugin';
export function MultiSelectableDropDownItem<T>({
value,
selectedValues,
onSelect,
text,
}: {
value: T;
selectedValues: Set<T>;
onSelect: (value: T, selected: boolean) => void;
text: string;
}) {
const isSelected = selectedValues.has(value);
return (
<StyledMultiSelectDropDownItem
center
padv="small"
gap="small"
onClick={(e) => {
e.stopPropagation();
onSelect(value, !isSelected);
}}>
<Checkbox
checked={isSelected}
onChange={() => {
onSelect(value, !isSelected);
}}
/>
<Typography.Text>{text}</Typography.Text>
</StyledMultiSelectDropDownItem>
);
}
export const StyledMultiSelectDropDownItem = styled(Layout.Horizontal)({
':hover': {
backgroundColor: theme.backgroundWash,
},
height: 32,
});