import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
import { createTree } from "models/tree";
import { DataTableMultiselectOption } from "../data-table-multiselect-popover/data-table-multiselect-popover";
+import { isExactlyOneSelected } from "store/multiselect/multiselect-actions";
export type DataColumns<I, R> = Array<DataColumn<I, R>>;
working?: boolean;
defaultViewIcon?: IconType;
defaultViewMessages?: string[];
- currentItemUuid?: string;
- currentRoute?: string;
toggleMSToolbar: (isVisible: boolean) => void;
setCheckedListOnStore: (checkedList: TCheckedList) => void;
+ currentRoute?: string;
+ currentRouteUuid: string;
checkedList: TCheckedList;
+ selectedResourceUuid: string;
+ setSelectedUuid: (uuid: string) => void;
}
type CssRules =
| "noItemsInfo"
| "checkBoxHead"
| "checkBoxCell"
+ | "clickBox"
| "checkBox"
| "firstTableCell"
| "tableCell"
checkBoxHead: {
padding: "0",
display: "flex",
+ width: '2rem',
+ height: "1.5rem",
+ paddingLeft: '0.9rem',
+ marginRight: '0.5rem'
},
checkBoxCell: {
padding: "0",
- paddingLeft: "10px",
+ },
+ clickBox: {
+ display: 'flex',
+ width: '1.6rem',
+ height: "1.5rem",
+ paddingLeft: '0.35rem',
+ paddingTop: '0.1rem',
+ marginLeft: '0.5rem',
+ cursor: "pointer",
},
checkBox: {
cursor: "pointer",
}
componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
- const { items, setCheckedListOnStore } = this.props;
+ const { items, currentRouteUuid, setCheckedListOnStore } = this.props;
const { isSelected } = this.state;
+ const singleSelected = isExactlyOneSelected(this.props.checkedList);
if (prevProps.items !== items) {
if (isSelected === true) this.setState({ isSelected: false });
if (items.length) this.initializeCheckedList(items);
if (prevProps.currentRoute !== this.props.currentRoute) {
this.initializeCheckedList([])
}
+ if (singleSelected && singleSelected !== isExactlyOneSelected(prevProps.checkedList)) {
+ this.props.setSelectedUuid(singleSelected);
+ }
+ if (!singleSelected && !!currentRouteUuid) {
+ this.props.setSelectedUuid(currentRouteUuid);
+ }
}
componentWillUnmount(): void {
render: uuid => {
const { classes, checkedList } = this.props;
return (
- <input
- data-cy={`multiselect-checkbox-${uuid}`}
- type="checkbox"
- name={uuid}
- className={classes.checkBox}
- checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
- onChange={() => this.handleSelectOne(uuid)}
- onDoubleClick={ev => ev.stopPropagation()}></input>
+ <div
+ className={classes.clickBox}
+ onClick={(ev) => {
+ ev.stopPropagation()
+ this.handleSelectOne(uuid)
+ }}
+ onDoubleClick={(ev) => ev.stopPropagation()}
+ >
+ <input
+ data-cy={`multiselect-checkbox-${uuid}`}
+ type='checkbox'
+ name={uuid}
+ className={classes.checkBox}
+ checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
+ onChange={() => this.handleSelectOne(uuid)}
+ onDoubleClick={(ev) => ev.stopPropagation()}
+ ></input>
+ </div>
);
},
};
initializeCheckedList = (uuids: any[]): void => {
const newCheckedList = { ...this.props.checkedList };
- uuids.forEach(uuid => {
- if (!newCheckedList.hasOwnProperty(uuid)) {
- newCheckedList[uuid] = false;
+ if(Object.keys(newCheckedList).length === 0){
+ for(const uuid of uuids){
+ newCheckedList[uuid] = false
}
- });
+ }
+
for (const key in newCheckedList) {
if (!uuids.includes(key)) {
delete newCheckedList[key];
);
renderBodyRow = (item: any, index: number) => {
- const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid, currentRoute } = this.props;
+ const { onRowClick, onRowDoubleClick, extractKey, classes, selectedResourceUuid, currentRoute } = this.props;
return (
<TableRow
data-cy={'data-table-row'}
onClick={event => onRowClick && onRowClick(event, item)}
onContextMenu={this.handleRowContextMenu(item)}
onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}
- selected={item === currentItemUuid}>
+ selected={item === selectedResourceUuid}>
{this.mapVisibleColumns((column, index) => (
<TableCell
key={column.key || index}