How to use @rmwc/base - 10 common examples

strategyToUse === 'custom'
        ? render || providerRender
        : rendererFromMap || null;

    if (!renderToUse) {
      console.error(
        `Icon: rendering not implemented for ${String(strategyToUse)}.`
      );
      return null;
    }

    const rendered = renderToUse({
      ...rest,
      ...optionsRest,
      content: contentToUse,
      className: classNames(
        'rmwc-icon',
        basenameToUse,
        rest.className,
        optionsRest.className,
        iconClassName,
        {
          [`rmwc-icon--size-${size || ''}`]: !!size
        }
      )
    });

    // Unwrap double layered icons...
    if (
      rendered.props.children &&
      rendered.props.children.type &&
      ['Avatar', 'Icon'].includes(rendered.props.children.type.displayName)

// This flag really determines a lot
    // is surfaceIsRoot is true, then the surface props are spread
    // to the underlying component, otherwise the only place they
    // can be picked up is by the context consumer
    const surfaceIsRoot = !surface || !unbounded;

    const unboundedProp = unbounded
      ? { 'data-mdc-ripple-is-unbounded': true }
      : {};

    const rippleSurfaceProps = surfaceIsRoot
      ? this.surface.props({ style: child.props.style })
      : {};

    let finalClassNames = classNames(
      className,
      rippleSurfaceProps.className,
      child.props.className,
      {
        'mdc-ripple-surface':
          typeof surface === 'boolean' ? surface : surface === undefined,
        'mdc-ripple-surface--primary': primary,
        'mdc-ripple-surface--accent': accent
      }
    );

    // Fixes a ripple artifact issue
    // that is caused when clicking a button disables it
    // https://codesandbox.io/s/842vo56019
    if (rest.disabled) {
      finalClassNames = finalClassNames.replace(

}
      )
    });

    // Unwrap double layered icons...
    if (
      rendered.props.children &&
      rendered.props.children.type &&
      ['Avatar', 'Icon'].includes(rendered.props.children.type.displayName)
    ) {
      return React.cloneElement(rendered.props.children, {
        ...rendered.props.children.props,
        ...rendered.props,
        // prevents an infinite loop
        children: rendered.props.children.props.children,
        className: classNames(
          rendered.props.className,
          rendered.props.children.props.className
        )
      });
    }

    return rendered;
  }
);

handleClick(evt: React.MouseEvent) {
    this.props.onClick && this.props.onClick(evt);
    // fixes an issue with nested span element on list items
    const el = closest(evt.target, '.mdc-list-item');
    el && this.foundation.handleItemAction(el);
  }

componentDidMount() {
    if (this.root.ref) {
      const anchor = closest(
        this.root.ref,
        `.${MDCMenuSurfaceFoundation.cssClasses.ANCHOR}`
      );
      anchor && (this.anchorElement = anchor);
    }
    // this has to be run AFTER we try to get our anchor
    super.componentDidMount();
  }

(evt: React.MouseEvent) => {
      props.onClick?.(evt);
      // fixes an issue with nested span element on list items
      const el = closest(evt.target, '.mdc-list-item');
      el && foundation.handleItemAction(el);
    },
    [foundation, props.onClick]

const handleSurfaceClick = (evt: React.MouseEvent | MouseEvent) => {
    if (evt.target instanceof Element) {
      let el = evt.target;

      const button = closest(el, '.mdc-button') as Element;
      if (button) {
        el = button;
      }

      if (
        props.dismissesOnAction &&
        el.classList.contains('mdc-snackbar__action')
      ) {
        foundation.handleActionButtonClick(
          evt as MouseEvent,
          // @ts-ignore
          el.dataset.mdcSnackbarAction
        );
      } else if (el.classList.contains('mdc-snackbar__dismiss')) {
        foundation.handleActionIconClick(evt as MouseEvent);
      }

handleSurfaceClick(evt: React.MouseEvent | MouseEvent) {
    if (evt.target instanceof Element) {
      let el = evt.target;
      const button = closest(el, '.mdc-button') as Element;
      if (button) {
        el = button;
      }

      if (
        this.props.dismissesOnAction &&
        el.classList.contains('mdc-snackbar__action')
      ) {
        this.foundation.handleActionButtonClick(
          evt as MouseEvent,
          // @ts-ignore
          el.dataset.mdcSnackbarAction
        );
      } else if (el.classList.contains('mdc-snackbar__dismiss')) {
        this.foundation.handleActionIconClick(evt as MouseEvent);
      }

handleClick(evt: React.MouseEvent) {
    this.props.onClick && this.props.onClick(evt);

    const index = this.getListItemIndex(evt);

    // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
    const toggleCheckbox = !matches(
      evt.target as HTMLElement,
      MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
    );

    this.foundation.handleClick(index, toggleCheckbox);
  }

(evt: React.MouseEvent) => {
      props.onClick?.(evt);

      const index = getListItemIndex(evt);

      // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
      const toggleCheckbox = !matches(
        evt.target as HTMLElement,
        MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
      );

      foundation.handleClick(index, toggleCheckbox);
    },
    [getListItemIndex, foundation, props.onClick]