+ state: DataTableState = {
+ isSelected: false,
+ isLoaded: false,
+ };
+
+ componentDidMount(): void {
+ this.initializeCheckedList([]);
+ // If table is initialized loaded but empty
+ // isLoaded won't be set true by componentDidUpdate later
+ // So we set it to true here
+ if (!this.props.working) {
+ this.setState({ isLoaded: true });
+ }
+ }
+
+ componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
+ 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);
+ else setCheckedListOnStore({});
+ }
+ if (prevProps.currentRoute !== this.props.currentRoute) {
+ this.initializeCheckedList([]);
+ }
+ if (singleSelected && singleSelected !== isExactlyOneSelected(prevProps.checkedList)) {
+ this.props.setSelectedUuid(singleSelected);
+ }
+ if (!singleSelected && !!currentRouteUuid && !this.isAnySelected()) {
+ this.props.setSelectedUuid(currentRouteUuid);
+ }
+ if (!singleSelected && this.isAnySelected()) {
+ this.props.setSelectedUuid(null);
+ }
+ if(prevProps.working === true && this.props.working === false) {
+ this.setState({ isLoaded: true });
+ }
+ if((this.props.items.length > 0) && !this.state.isLoaded) {
+ this.setState({ isLoaded: true });
+ }
+ }
+
+ componentWillUnmount(): void {
+ this.initializeCheckedList([]);
+ }
+
+ checkBoxColumn: DataColumn<any, any> = {
+ name: "checkBoxColumn",
+ selected: true,
+ configurable: false,
+ filters: createTree(),
+ render: uuid => {
+ const { classes, checkedList } = this.props;
+ return (
+ <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>
+ );
+ },
+ };
+
+ multiselectOptions: DataTableMultiselectOption[] = [
+ { name: "All", fn: list => this.handleSelectAll(list) },
+ { name: "None", fn: list => this.handleSelectNone(list) },
+ { name: "Invert", fn: list => this.handleInvertSelect(list) },
+ ];
+
+ initializeCheckedList = (uuids: any[]): void => {
+ const newCheckedList = { ...this.props.checkedList };
+
+ 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];
+ }
+ }
+ this.props.setCheckedListOnStore(newCheckedList);
+ };
+
+ isAllSelected = (list: TCheckedList): boolean => {
+ for (const key in list) {
+ if (list[key] === false) return false;
+ }
+ return true;
+ };
+
+ isAnySelected = (): boolean => {
+ const { checkedList } = this.props;
+ if (!Object.keys(checkedList).length) return false;
+ for (const key in checkedList) {
+ if (checkedList[key] === true) return true;
+ }
+ return false;
+ };
+
+ handleSelectOne = (uuid: string): void => {
+ const { checkedList } = this.props;
+ const newCheckedList = { ...checkedList };
+ newCheckedList[uuid] = !checkedList[uuid];
+ this.setState({ isSelected: this.isAllSelected(newCheckedList) });
+ this.props.setCheckedListOnStore(newCheckedList);
+ };
+
+ handleSelectorSelect = (): void => {
+ const { checkedList } = this.props;
+ const { isSelected } = this.state;
+ isSelected ? this.handleSelectNone(checkedList) : this.handleSelectAll(checkedList);
+ };
+
+ handleSelectAll = (list: TCheckedList): void => {
+ if (Object.keys(list).length) {
+ const newCheckedList = { ...list };
+ for (const key in newCheckedList) {
+ newCheckedList[key] = true;
+ }
+ this.setState({ isSelected: true });
+ this.props.setCheckedListOnStore(newCheckedList);
+ }
+ };
+
+ handleSelectNone = (list: TCheckedList): void => {
+ const newCheckedList = { ...list };
+ for (const key in newCheckedList) {
+ newCheckedList[key] = false;
+ }
+ this.setState({ isSelected: false });
+ this.props.setCheckedListOnStore(newCheckedList);
+ };
+
+ handleInvertSelect = (list: TCheckedList): void => {
+ if (Object.keys(list).length) {
+ const newCheckedList = { ...list };
+ for (const key in newCheckedList) {
+ newCheckedList[key] = !list[key];
+ }
+ this.setState({ isSelected: this.isAllSelected(newCheckedList) });
+ this.props.setCheckedListOnStore(newCheckedList);
+ }
+ };
+