forked from apache/superset
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.tsx
118 lines (104 loc) · 3.21 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import cx from 'classnames';
import { styled, useTheme } from '@superset-ui/core';
import { Dropdown, Menu } from 'src/common/components';
import Icon from 'src/components/Icon';
export interface OptionProps {
value: string;
label: string;
className?: string;
}
export type OnChangeHandler = (key: React.Key) => void;
export type RenderElementHandler = (option: OptionProps) => JSX.Element;
export interface PopoverDropdownProps {
id: string;
options: OptionProps[];
onChange: OnChangeHandler;
value: string;
renderButton?: RenderElementHandler;
renderOption?: RenderElementHandler;
}
interface HandleSelectProps {
key: React.Key;
}
const MenuItem = styled(Menu.Item)`
&.ant-menu-item {
height: auto;
line-height: 1.4;
padding-top: ${({ theme }) => theme.gridUnit}px;
padding-bottom: ${({ theme }) => theme.gridUnit}px;
margin-top: 0;
margin-bottom: 0;
&:not(:last-child) {
margin-bottom: 0;
}
&:hover {
background: ${({ theme }) => theme.colors.grayscale.light3};
}
&.active {
font-weight: ${({ theme }) => theme.typography.weights.bold};
background: ${({ theme }) => theme.colors.grayscale.light2};
}
}
&.ant-menu-item-selected {
color: unset;
}
`;
const PopoverDropdown = (props: PopoverDropdownProps) => {
const {
value,
options,
onChange,
renderButton = (option: OptionProps) => option.label,
renderOption = (option: OptionProps) => (
<div className={option.className}>{option.label}</div>
),
} = props;
const theme = useTheme();
const selected = options.find(opt => opt.value === value);
return (
<Dropdown
trigger={['click']}
overlayStyle={{ zIndex: theme.zIndex.max }}
overlay={
<Menu onClick={({ key }: HandleSelectProps) => onChange(key)}>
{options.map(option => (
<MenuItem
id="menu-item"
key={option.value}
className={cx('dropdown-item', {
active: option.value === value,
})}
>
{renderOption(option)}
</MenuItem>
))}
</Menu>
}
>
<div role="button" css={{ display: 'flex', alignItems: 'center' }}>
{selected && renderButton(selected)}
<Icon name="caret-down" css={{ marginTop: theme.gridUnit }} />
</div>
</Dropdown>
);
};
export default PopoverDropdown;