-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.tsx
97 lines (88 loc) · 3.45 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
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import React, { ReactNode, useMemo, useState } from 'react';
import { findTestDetailsForEnv } from '../../helper/findFailedTestDetails';
import { useGlobalContext } from '../../hooks/GlobalContext';
import { useReportContext } from '../../hooks/ReportContext';
import { ArrowDropDown, ArrowDropUp } from '../../icons';
import Search from '../Search';
import { getEnvironmentDropDownData } from '../Summary/utils';
import EnvironmentContent from './EnvironmentContent';
import {
DropdownMenuContent,
DropdownMenuTrigger,
DropdownRadioItem,
EnvironmentSelectorWrapper,
FilterWrapper
} from './style';
import { EnvironmentData } from './types';
import { filterData } from './utils';
const EnvironmentDropdown: React.FC = () => {
const { environments } = useGlobalContext();
const { environmentName, setEnvironmentName, setFileId, setTestId } = useReportContext();
const envDropdownData = getEnvironmentDropDownData(environments);
// React States
const [query, setQuery] = useState<string>('');
const [isDropDownOpen, setDropdownOpen] = useState(false);
const filteredData = filterData(envDropdownData, query);
const [envData, setEnvData] = useState<EnvironmentData>({} as EnvironmentData);
const defaultDropdownData = envDropdownData.find((data: any) => data.origName == environmentName);
useMemo(() => {
// FIXME: Replace any with it's datatype
envDropdownData.find((data: any) => {
if (data.name == environmentName) {
setEnvData(data);
}
});
}, [environmentName]);
return (
<DropdownMenu.Root onOpenChange={(open) => setDropdownOpen(open)}>
<DropdownMenuTrigger asChild>
<EnvironmentSelectorWrapper>
<EnvironmentContent
name={envData.name || defaultDropdownData.name}
meta={envData.meta || defaultDropdownData.meta}
testResult={envData.testResult || defaultDropdownData.testResult}
isDropdownTrigger
/>
{isDropDownOpen ? <ArrowDropUp /> : <ArrowDropDown />}
</EnvironmentSelectorWrapper>
</DropdownMenuTrigger>
<DropdownMenuContent>
<FilterWrapper>
<Search
placeholder="Search for Environments, OS, Browser, Device"
width={100}
onChange={(event) => setQuery((event.target as HTMLInputElement).value)}
/>
</FilterWrapper>
<DropdownMenu.RadioGroup
value={environmentName}
onValueChange={(envName) => {
const { fileIndex, testIndex } = findTestDetailsForEnv(environments, envName);
setFileId(fileIndex);
setTestId(testIndex);
setEnvironmentName(envName);
}}>
{filteredData.map(({ name, origName, meta, testResult }, index) => (
<DropdownRadioItemContent key={index} value={origName}>
<EnvironmentContent name={name} meta={meta} testResult={testResult} />
</DropdownRadioItemContent>
))}
</DropdownMenu.RadioGroup>
</DropdownMenuContent>
</DropdownMenu.Root>
);
};
type Props = {
children: ReactNode;
value: string;
};
const DropdownRadioItemContent = React.forwardRef<HTMLDivElement, Props>(
({ children, ...props }, forwardedRef) => (
<DropdownRadioItem {...props} ref={forwardedRef}>
{children}
</DropdownRadioItem>
)
);
DropdownRadioItemContent.displayName = 'DropdownRadioItemContent';
export default EnvironmentDropdown;