55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
import { Button, Popover, Checkbox, Flex } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const ViewButton = ({
|
|
disabled = false,
|
|
items = [],
|
|
visibleState = {},
|
|
updateVisibleState = () => {},
|
|
...buttonProps
|
|
}) => {
|
|
return (
|
|
<Popover
|
|
content={(() => {
|
|
return (
|
|
<Flex vertical>
|
|
<Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
|
|
{items.map((item) => (
|
|
<Checkbox
|
|
checked={visibleState[item.key]}
|
|
key={item.key}
|
|
onChange={(e) => {
|
|
updateVisibleState(item.key, e.target.checked)
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Checkbox>
|
|
))}
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
})()}
|
|
placement='bottomLeft'
|
|
arrow={false}
|
|
>
|
|
<Button disabled={disabled} {...buttonProps}>
|
|
View
|
|
</Button>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
ViewButton.propTypes = {
|
|
disabled: PropTypes.bool,
|
|
items: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
key: PropTypes.string.isRequired,
|
|
label: PropTypes.string.isRequired
|
|
})
|
|
),
|
|
visibleState: PropTypes.object,
|
|
updateVisibleState: PropTypes.func
|
|
}
|
|
|
|
export default ViewButton
|