CEC-4564: add trie select component (#404)
* add TrieSelect * setup menu button * CEC-4564: add trie select component * CEC-4564: fix selectall bool check * update tests
This commit is contained in:
Tristan Timblin
@@ -339,57 +339,78 @@ exports[`Render Render 1`] = `
|
||||
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root MuiFormControl-fullWidth"
|
||||
class="MuiBox-root MuiBox-root-0"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
id="select-can-signals-label"
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled Mui-disabled"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
Select CAN signals
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
class="MuiButton-label"
|
||||
>
|
||||
|
||||
*
|
||||
Select CAN Signals
|
||||
</span>
|
||||
</button>
|
||||
<label
|
||||
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||
>
|
||||
Select All 0
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="MuiCollapse-root MuiCollapse-hidden"
|
||||
style="min-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
|
||||
inputvariant="outlined"
|
||||
class="MuiCollapse-wrapper"
|
||||
>
|
||||
<div
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="select-can-signals-label select-can-signals"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
|
||||
id="select-can-signals"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="MuiCollapse-wrapperInner"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
class="MuiSelect-nativeInput"
|
||||
required=""
|
||||
tabindex="-1"
|
||||
value=""
|
||||
/>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSelect-icon"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M7 10l5 5 5-5z"
|
||||
<ul
|
||||
class="MuiList-root MuiList-padding"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="makeStyles-chipList-0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import DateFnsUtils from '@date-io/date-fns';
|
||||
import { Button, Checkbox, Chip, CircularProgress, FormControl, FormControlLabel, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
|
||||
import { Button, Checkbox, CircularProgress, FormControlLabel, Grid } from "@material-ui/core";
|
||||
import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
@@ -7,6 +7,7 @@ import { CANSignalsExportProvider, useCANSignalsExportContext } from "../../Cont
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { TrieSelect } from '../../Controls/TrieSelect';
|
||||
|
||||
const MainForm = ({ id }) => {
|
||||
const classes = useStyles();
|
||||
@@ -72,27 +73,19 @@ const MainForm = ({ id }) => {
|
||||
setSelectedEndDate(value);
|
||||
};
|
||||
|
||||
const handleSelectedItemsChange = (event) => {
|
||||
const { value } = event.target;
|
||||
if (value.some(item => item === "Select All")) {
|
||||
setSelectAllCanSignals(true);
|
||||
if (selectedCanSignals.length === canSignals.length) {
|
||||
setSelectedCanSignals([]);
|
||||
} else {
|
||||
setSelectedCanSignals(canSignals.map(signal => signal.signal_name));
|
||||
}
|
||||
} else {
|
||||
setSelectAllCanSignals(false);
|
||||
setSelectedCanSignals(value);
|
||||
}
|
||||
};
|
||||
|
||||
const displayTimeAsGMT = (date) => {
|
||||
return gmtTimezone
|
||||
? date.toLocaleString("en-US", {timeZone: "Etc/GMT"})
|
||||
? date.toLocaleString("en-US", { timeZone: "Etc/GMT" })
|
||||
: date;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (canSignals.length === selectedCanSignals.length) {
|
||||
setSelectAllCanSignals(true);
|
||||
} else {
|
||||
setSelectAllCanSignals(false);
|
||||
}
|
||||
}, [canSignals, selectedCanSignals, setSelectAllCanSignals]);
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
@@ -175,36 +168,12 @@ const MainForm = ({ id }) => {
|
||||
</MuiPickersUtilsProvider>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth required>
|
||||
<InputLabel id="select-can-signals-label">Select CAN signals</InputLabel>
|
||||
<Select
|
||||
labelId="select-can-signals-label"
|
||||
id="select-can-signals"
|
||||
multiple
|
||||
value={selectedCanSignals}
|
||||
onChange={handleSelectedItemsChange}
|
||||
fullWidth
|
||||
inputvariant="outlined"
|
||||
renderValue={(selected) => (
|
||||
<div className={classes.chips}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} className={classes.chip} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<MenuItem value="Select All">
|
||||
<Checkbox checked={selectedCanSignals.length === canSignals.length} />
|
||||
<ListItemText primary="Select All" />
|
||||
</MenuItem>
|
||||
{canSignals.map((signal) => (
|
||||
<MenuItem key={signal.signal_name} value={signal.signal_name}>
|
||||
<Checkbox checked={selectedCanSignals.indexOf(signal.signal_name) > -1} />
|
||||
<ListItemText primary={signal.signal_name} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TrieSelect
|
||||
label="Select CAN Signals"
|
||||
classification="Signals"
|
||||
options={canSignals.map((signal => signal.signal_name))}
|
||||
onChange={setSelectedCanSignals}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user