How to use the @rmwc/base.componentFactory function in @rmwc/base

/** A header for the data table. */
export interface DataTableHeadProps {}

/** A header for the data table. */
export const DataTableHead = componentFactory({
  displayName: 'DataTableHead',
  tag: 'thead',
  classNames: ['rmwc-data-table__head']
});

/** A body for the data table. */
export interface DataTableBodyProps {}

/** A body for the data table. */
export const DataTableBody = componentFactory({
  displayName: 'DataTableBody',
  tag: 'tbody',
  classNames: ['rmwc-data-table__body']
});

/** A row for the data table. */
export interface DataTableRowProps {
  /** Styles the row in a selected state. */
  selected?: boolean;
  /** Styles the row in an activated state. */
  activated?: boolean;
}

/** A row for the data table. */
export const DataTableRow = componentFactory({
  displayName: 'DataTableRow',

/** Align content to the middle of the cell. */
  alignMiddle?: boolean;
  /** Align content to the end of the cell. */
  alignEnd?: boolean;
}

/** The DataTable Component. */
export interface DataTableProps {
  /** The number of rows to affix to the top of the table when scrolling. */
  stickyRows?: number;
  /** The number of columns to affix to the side of the table when scrolling. */
  stickyColumns?: number;
}

/** The DataTable Component. */
export const DataTable = componentFactory({
  displayName: 'DataTable',
  classNames: (props: DataTableProps) => [
    'rmwc-data-table',
    {
      'rmwc-data-table--sticky-columns': !!props.stickyColumns,
      'rmwc-data-table--sticky-columns-1': !!props.stickyColumns,
      'rmwc-data-table--sticky-rows': !!props.stickyRows,
      'rmwc-data-table--sticky-rows-1': !!props.stickyRows
    }
  ],
  consumeProps: ['stickyColumns', 'stickyRows']
});

/** The data table content. */
export interface DataTableContentProps {}

/** A List Component */
export interface ListProps {
  /** Reduces the padding on List items. */
  dense?: boolean;
  /** Gives more space for dual lined list items. */
  twoLine?: boolean;
  /** Makes the list start detail circular for avatars. */
  avatarList?: boolean;
  /** Makes the list non interactive. In addition, you'll have to set `ripple={false}` on the individual ListItems. */
  nonInteractive?: boolean;
  /** A callback for when a list item is interacted with. evt.detail = number */
  onAction?: (evt: ListOnActionEventT) => void;
}

/** A List Component */
const ListRoot = componentFactory({
  displayName: 'ListRoot',
  defaultProps: {
    dense: undefined,
    twoLine: undefined,
    avatarList: undefined,
    nonInteractive: undefined
  },
  classNames: (props: ListProps) => [
    'mdc-list',
    {
      'mdc-list--dense': props.dense,
      'mdc-list--two-line': props.twoLine,
      'mdc-list--avatar-list': props.avatarList,
      'mdc-list--non-interactive': props.nonInteractive
    }
  ],

displayName: 'SnackbarAction',
  tag: Button,
  classNames: ['mdc-snackbar__action'],
  render: (
    {
      action = MDCSnackbarFoundation.strings.REASON_ACTION,
      ...rest
    }: SnackbarActionProps,
    ref: React.Ref,
    Tag: any
  ) => {
    return ;
  }
});

const SnackbarDismiss = componentFactory({
  displayName: 'SnackbarDismiss',
  tag: IconButton,
  classNames: ['mdc-snackbar__dismiss']
});

/** A Snackbar component for notifications. */
export class Snackbar extends FoundationComponent<
  MDCSnackbarFoundation,
  SnackbarProps & DeprecatedSnackbarProps
> {
  static displayName = 'Snackbar';
  static defaultProps = {
    dismissesOnAction: true
  };

  constructor(props: SnackbarProps) {

const TabRoot = withRipple({ surface: false })(
  componentFactory({
    displayName: 'TabRoot',
    tag: 'button',
    classNames: (props: TabProps) => [
      'mdc-tab',
      {
        'mdc-tab--stacked': props.stacked
      }
    ],
    consumeProps: ['stacked']
  })
);

/** A Tab icon. This is an instance of the Icon component. */
const TabIcon = componentFactory({
  displayName: 'TabIcon',
  tag: Icon,
  classNames: ['mdc-tab__icon']
});

/** A Tab component */
export const Tab = withTabBarContext()(
  class extends FoundationComponent<
    MDCTabFoundation,
    TabProps & { contextApi?: TabBarContextT }
  > {
    static displayName = 'TabFoundation';

    _id = randomId('tab');
    private root = this.createElement('root');
    tabIndicator: TabIndicator | null = null;

import * as RMWC from '@rmwc/types';
import * as React from 'react';
import { EventType, SpecificEventListener } from '@material/base/types';
import { MDCFormFieldFoundation } from '@material/form-field';

import { FoundationComponent } from '@rmwc/base';
import { componentFactory } from '@rmwc/base';

/** A FormField component. */
export interface FormFieldProps {
  /** Position the input after the label. */
  alignEnd?: boolean;
}

export const FormFieldRoot = componentFactory({
  displayName: 'FormFieldRoot',
  defaultProps: {
    alignEnd: undefined
  },
  classNames: (props: FormFieldProps) => [
    'mdc-form-field',
    {
      'mdc-form-field--align-end': props.alignEnd
    }
  ],
  consumeProps: ['alignEnd']
});

/** A FormField component. */
export class FormField extends FoundationComponent<
  MDCFormFieldFoundation,

'mdc-snackbar',
    {
      'mdc-snackbar--leading': props.leading,
      'mdc-snackbar--stacked': props.stacked
    }
  ],
  defaultProps: {
    leading: false,
    'aria-live': 'assertive',
    'aria-atomic': true,
    'aria-hidden': true
  },
  consumeProps: ['leading', 'stacked']
});

const SnackbarLabel = componentFactory<{}>({
  displayName: 'SnackbarText',
  classNames: ['mdc-snackbar__label'],
  defaultProps: {
    role: 'status',
    'aria-live': 'polite'
  }
});

const SnackbarActions = componentFactory<{}>({
  displayName: 'SnackbarActions',
  classNames: ['mdc-snackbar__actions']
});

/** A button for a snackbar action. */
export interface SnackbarActionProps extends ButtonProps {
  /** An action returned in evt.detail.reason to the onClose handler. */

surface: false
})(
  componentFactory({
    displayName: 'CardPrimaryAction',
    classNames: ['mdc-card__primary-action']
  })
);

/** Row containing action buttons and/or icons */
export interface CardActionsProps {
  /** Removes the action area’s padding and causes its only child (an mdc-card__action element) to consume 100% of the action area’s width */
  fullBleed?: boolean;
}

/** Row containing action buttons and/or icons */
export const CardActions = componentFactory({
  displayName: 'CardActions',
  tag: 'section',
  classNames: (props: CardActionsProps) => [
    'mdc-card__actions',
    { 'mdc-card__actions--full-bleed': props.fullBleed }
  ],
  consumeProps: ['fullBleed']
});

/** A group of action buttons, displayed on the left side of the card (in LTR), adjacent to CardActionIcons */
export interface CardActionButtonsProps {}

/** A group of action buttons, displayed on the left side of the card (in LTR), adjacent to CardActionIcons */
export const CardActionButtons = componentFactory({
  displayName: 'CardActionButtons',
  classNames: ['mdc-card__action-buttons']

return ;
};

ChipIcon.displayName = 'ChipIcon';

/** A container for multiple chips. */
export interface ChipSetProps {
  /** Creates a choice chipset */
  choice?: boolean;
  /** Creates a filter chipset */
  filter?: boolean;
}

/** A container for multiple chips. */
export const ChipSet = componentFactory({
  displayName: 'ChipSet',
  classNames: (props: ChipSetProps) => [
    'mdc-chip-set',
    {
      'mdc-chip-set--choice': props.choice,
      'mdc-chip-set--filter': props.filter
    }
  ],
  consumeProps: ['filter', 'choice']
});

return this.props.disableInteraction !== nextProps.disableInteraction;
  }

  render() {
    const style = this.props.disableInteraction
      ? { pointerEvents: 'none' }
      : {};
    return <div style="{style">;
  }
}

/** The Dialog title. */
export interface DialogTitleProps {}

/** The Dialog title. */
export const DialogTitle = componentFactory({
  displayName: 'DialogTitle',
  tag: 'h2',
  classNames: ['mdc-dialog__title']
});

/** The Dialog content. */
export interface DialogContentProps {}

/** The Dialog content. */
export const DialogContent = componentFactory({
  displayName: 'DialogContent',
  classNames: ['mdc-dialog__content']
});

/** Actions container for the Dialog. */
export interface DialogActionsProps {}</div>