github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-10-13 03:25:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

commit to enable merge

Browse Source
This commit is contained in:
Amit Fainholts
2022-01-30 11:37:53 +02:00
parent 4e1e552044
commit f4d651812f
7 changed files with 137 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/components/UI/SelectList.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import Checkbox from "./Checkbox"
import Radio from "./Radio";
import './style/SelectList.sass';
@@ -6,6 +6,7 @@ import './style/SelectList.sass';
export interface Props {
valuesListInput;
tableName:string;
checkedValues?:string[];
multiSelect:boolean;
searchValue?:string;
setValues: (newValues)=> void;
@@ -18,9 +19,17 @@ export type ValuesListInput = {
isChecked: boolean;
}[]
const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => {
const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => {
const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
useEffect(() => {
const list = valuesList.map(obj => {
const isValueChecked = checkedValues.some(checkedValueKey => obj.key === checkedValueKey)
return {...obj, isChecked: isValueChecked}
})
setValuesList(list);
},[valuesListInput,checkedValues]);
const toggleValues = (checkedKey) => {
if (!multiSelect){
unToggleAll(checkedKey);
@@ -43,8 +52,9 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
const toggleAll = () => {
const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
const list = valuesList.map((obj) => {
return {...obj, isChecked: true}
return {...obj, isChecked: !isChecked}
})
setValuesList(list);
setValues(list);
@@ -52,7 +62,7 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
<th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === false)}
<th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === true)}
onToggle={toggleAll}/></th>
<th>{tableName}</th>
</tr> :