getDirectChildren

Returns the list of components that are direct descendants of the given parent instance. It helps when working with nested components that declare themselves as children.

TIP

If you need to only check if an instance is a direct descendant of another instance, prefer the isDirectChild helper function which will return a boolean directly.

Usage

import { Base, getDirectChildren } from '@studiometa/js-toolkit';
import Child from './Child.js';

class Parent extends Base {
  static config = {
    name: 'Parent',
    components: {
      Child,
      Parent, // Useful for recursive components only
    },
  };

  onChildClick({ target, event }) {
    const directChildren = getDirectChildren(this, 'Parent', 'Child');

    if (directChildren.includes(target)) {
      event.preventDefault();
    }
  }
}

Parameters

• parentInstance (Base): the target element
• parentName (string): the name of the recursive parent as specified in the config.components object.
• childrenName (string): the name of the children components as specified in the config.components object.

Return value

• Base[]: a list of the direct child components corresponding to the given childrenName