Access redom component from dom element

[data-handler]

Is it considered bad practice to reference a redom component using the dom element '__redom_view'?

Is there a better / preferred way to do this?

[pakastin]

It's what RE:DOM uses internally as well, so i wouldn't say it's bad practice 🤷‍♂️

[pakastin]

Having said that, i have never found myself needing to use that so one might ask why you need it? 🤔

[data-handler]

Great. Thank you.

[data-handler]

I'm probably over-complicating things, but I'll try to explain. No doubt there's a better way to do this..

I am toggling the visibility of buttons in a table cell when the mouse enters / leaves the parent row.

When the mouse enters the row, I add the class 'hover', and when the mouse leaves, I remove the class hover.

I listen to row click events in the table controller.

When the edit button in the cell is clicked, I show an overlay and a dialog for the user to perform an action but the mouseleave event is not triggered because of the overlay. I therefore want to call the 'removeHoverClass' function on the row component from the controller.

I could just do clickedRow.classList.remove('hover'), but that feels like it is breaking encapsulation. Like I say, probably over-complicating it.

Bet you wish you hadn't asked now 😆

TableCell class:

export default class {
    constructor() {
        this.el = el('td');
    }

    update = (data) => {
        if (data.text) {
            this.el.textContent = data.text;
        }

        if (data.children) {
            setChildren(this.el, data.children);
        }

        if (data.classList) {
            this.el.classList.add(...data.classList);
        }
    };
}

TableRow class:

export default class {
    constructor() {
        this.el = el('tr');
        this.cells = list(this.el, TableCell);
    }

    update = (data) => {
        this.el.id = data.code;

        this.cells.update([
            { text: data.code },
           // ...other cells
            { children: [
                el('span', data.status),
                new MaterialTextButton('', 'edit'),
                new MaterialTextButton('', 'folder_open')
            ], classList: ['action', 'edit'] }
        ]);
    };

    onmount = () => {
        this.el.addEventListener('mouseenter', this.addHoverClass);
        this.el.addEventListener('mouseleave', this.removeHoverClass);
    };

    onunmount = () => {
        this.el.removeEventListener('mouseenter', this.addHoverClass);
        this.el.removeEventListener('mouseleave', this.removeHoverClass);
    };

    addHoverClass = () => this.el.classList.add('hover');

    removeHoverClass = () => this.el.classList.remove('hover');
}

Table class:

export default class {
    constructor() {
        this.el = el('table',
             el('thead',
                 el('tr',
                     el('th', 'Code'),
                     // ...other header cells
                 )
             ),
             this.body = el('tbody')
       );

      this.rows = list(this.body, TableRow, 'code');
    }

    update = (data) => this.rows.update(data);    
}

TableController class:

export default class {
    constructor() {
        this.view = new Table();
        this.view.onmount = this.onmount;
        this.view.onunmount = this.onunmount;
    }

    onmount = () => {
        this.view.tableBodyElement.addEventListener('click', this.handleTableBodyClick);
    };

    onunmount = () => {
        this.view.tableBodyElement.removeEventListener('click', this.handleTableBodyClick);
    };

    handleTableBodyClick = (e) => {
        const clickedElement = e.target;
        const clickedCell = clickedElement.closest('td');
        const clickedRow = clickedCell.closest('tr');
        const rowComponent = clickedRow.__redom_view;

        this.view.update(this.data);

        if (clickedCell.classList.contains('edit')) {
            rowComponent.removeHoverClass(); 
            // Above is why I want to access the component, rather than
            // doing: clickedRow.classList.remove('hover');
       
           // Additional code removed for brevity
        }
    };

    // Additional code removed for brevity
}

[pakastin]

Ok, so you want to have single event listener instead of multiple ones – makes sense 👍 I would just create listener for every row for simplicity, but there's no right or wrong here.