@@ -0,0 +1,144 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { IconButton, MenuItem } from '@material-ui/core';
+import Menu from '@material-ui/core/Menu';
+import TextField from '@material-ui/core/TextField';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import SettingsIcon from '@material-ui/icons/Settings';
+
+const CustomTextField = withStyles((theme) => ({
+ root: {
+ margin: '0 8px 12px 8px',
+ '& label.Mui-focused': {
+ margin: '0 2px',
+ color: theme.palette.text.secondary,
+ },
+ '& .MuiInput-underline::before': {
+ borderBottomColor: theme.palette.divider,
+ },
+ '& .MuiInput-underline::after': {
+ borderBottomColor: theme.palette.divider,
+ },
+ },
+}))(TextField);
+
+const ITEM_HEIGHT = 48;
+
+const useStyles = makeStyles((theme) => ({
+ element: {
+ ...theme.typography.body2,
+ color: theme.palette.text.secondary,
+ padding: theme.spacing(0, 1),
+ fontWeight: 400,
+ textDecoration: 'none',
+ display: 'flex',
+ background: 'none',
+ border: 'none',
+ },
+ labelsheader: {
+ display: 'flex',
+ flexDirection: 'row',
+ },
+}));
+
+export type FilterMenuItem<T> = {
+ render: (item: T) => React.ReactNode;
+};
+
+type FilterDropdownProps<T> = {
+ items?: FilterMenuItem<T>[];
+ hasFilter?: boolean;
+ onFilterChange: (filter: string) => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+function FilterDropdown<T>({
+ items,
+ hasFilter,
+ onFilterChange,
+}: FilterDropdownProps<T>) {
+ const buttonRef = useRef<HTMLButtonElement>(null);
+ const searchRef = useRef<HTMLButtonElement>(null);
+ const classes = useStyles({ active: false });
+
+ const [open, setOpen] = useState(false);
+ const [filter, setFilter] = useState<string>('');
+
+ useEffect(() => {
+ searchRef && searchRef.current && searchRef.current.focus();
+ }, [filter]);
+
+ /*function sortBySelection(x: FilterMenuItem, y: FilterMenuItem) {
+ if (x.isSelected() === y.isSelected()) {
+ return 0;
+ } else if (x.isSelected()) {
+ return -1;
+ } else {
+ return 1;
+ }
+ }
+
+ const sortedItems = items.sort(sortBySelection);*/
+
+ return (
+ <>
+ <div className={classes.labelsheader}>
+ Labels
+ <IconButton
+ ref={buttonRef}
+ onClick={() => setOpen(!open)}
+ className={classes.element}
+ >
+ <SettingsIcon fontSize={'small'} />
+ </IconButton>
+ </div>
+
+ <Menu
+ getContentAnchorEl={null}
+ ref={searchRef}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
+ open={open}
+ onClose={() => {
+ setOpen(false);
+ //const selectedLabels = dropdown
+ // .map(([key]) => (itemActive(key) ? key : ''))
+ // .filter((entry) => entry !== '');
+ //onClose(selectedLabels);
+ }}
+ onExited={() => setFilter('')}
+ anchorEl={buttonRef.current}
+ PaperProps={{
+ style: {
+ maxHeight: ITEM_HEIGHT * 4.5,
+ width: '25ch',
+ },
+ }}
+ >
+ {hasFilter && (
+ <CustomTextField
+ onChange={(e) => {
+ const { value } = e.target;
+ setFilter(value);
+ onFilterChange(value);
+ }}
+ onKeyDown={(e) => e.stopPropagation()}
+ value={filter}
+ label={`Filter Labels`}
+ />
+ )}
+ {items &&
+ items.map((item, index) => {
+ return <MenuItem key={index}>{item}</MenuItem>;
+ })}
+ </Menu>
+ </>
+ );
+}
+
+export default FilterDropdown;
@@ -224,8 +224,6 @@ function LabelMenu({ bug }: Props) {
? selectedLabels.filter((label) => label !== key)
: selectedLabels.concat([key]);
setSelectedLabels(labels);
- console.log('toggle (selected)');
- console.log(labels);
}
function diff(oldState: string[], newState: string[]) {
@@ -238,13 +236,7 @@ function LabelMenu({ bug }: Props) {
}
const changeBugLabels = (selectedLabels: string[]) => {
- console.log('CBL');
- console.log('selected labels');
- console.log(selectedLabels);
- console.log('buglabels');
- console.log(bugLabelNames);
const labels = diff(bugLabelNames, selectedLabels);
- console.log(labels);
if (labels.added.length > 0 || labels.removed.length > 0) {
setLabelMutation({
variables: {
@@ -267,7 +259,6 @@ function LabelMenu({ bug }: Props) {
awaitRefetchQueries: true,
})
.then((res) => {
- console.log(res);
setSelectedLabels(selectedLabels);
setBugLabelNames(selectedLabels);
})
@@ -279,9 +270,7 @@ function LabelMenu({ bug }: Props) {
return selectedLabels.includes(key);
}
- //TODO label wont removed, if a filter hides it!
function createNewLabel(name: string) {
- console.log('CREATE NEW LABEL: ' + name);
changeBugLabels(selectedLabels.concat([name]));
}