How to use the @material/list.MDCListFoundation.cssClasses function in @material/list

To help you get started, we’ve selected a few @material/list examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jamesmfriedman / rmwc / src / list / list.tsx View on Github external
getListItemIndex(
    evt: React.FocusEvent | React.KeyboardEvent | React.MouseEvent
  ) {
    let eventTarget = evt.target as HTMLElement | null;
    let index = -1;

    // Find the first ancestor that is a list item or the list.
    while (
      eventTarget &&
      !eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      ) &&
      !eventTarget.classList.contains(MDCListFoundation.cssClasses.ROOT)
    ) {
      eventTarget = eventTarget.parentElement as HTMLLIElement;
    }

    // Get the index of the element if it is a list item.
    if (
      eventTarget &&
      eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      )
    ) {
      index = this.listElements.indexOf(eventTarget as HTMLLIElement);
    }
github jamesmfriedman / rmwc / src / list / list.tsx View on Github external
// Find the first ancestor that is a list item or the list.
    while (
      eventTarget &&
      !eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      ) &&
      !eventTarget.classList.contains(MDCListFoundation.cssClasses.ROOT)
    ) {
      eventTarget = eventTarget.parentElement as HTMLLIElement;
    }

    // Get the index of the element if it is a list item.
    if (
      eventTarget &&
      eventTarget.classList.contains(
        MDCListFoundation.cssClasses.LIST_ITEM_CLASS
      )
    ) {
      index = this.listElements.indexOf(eventTarget as HTMLLIElement);
    }

    return index;
  }
github jamesmfriedman / rmwc / src / list / foundation.tsx View on Github external
const listElements = useCallback((el: Element | null): HTMLLIElement[] => {
    if (el) {
      return [].slice.call(
        el.querySelectorAll(`.${MDCListFoundation.cssClasses.LIST_ITEM_CLASS}`)
      );
    }
    return [];
  }, []);
github jamesmfriedman / rmwc / src / list / foundation.tsx View on Github external
(evt: React.KeyboardEvent & KeyboardEvent) => {
      props.onKeyDown?.(evt);

      const index = getListItemIndex(evt);

      if (index >= 0) {
        foundation.handleKeydown(
          evt,
          evt.target instanceof Element &&
            evt.target.classList.contains(
              MDCListFoundation.cssClasses.LIST_ITEM_CLASS
            ),
          index
        );
      }
    },
    [getListItemIndex, foundation, props.onKeyDown]