@enact/ui/Group/Group.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/Group

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import * as React from "react";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface GroupBaseProps {}
/**
 * A stateless component that supports selection of its child items via configurable
properties and events.
 */

export class GroupBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, GroupBaseProps>
> {}

export interface GroupProps
  extends Omit<Merge<GroupBaseProps, GroupDecoratorProps>, "componentRef"> {
  /**
 * Component type to repeat. This can be a React component or a string describing a DOM
node (e.g.  `'div'` )
 */
  childComponent: string | React.ComponentType;
  /**
 * An array of data to be mapped onto the  `childComponent` .
 * 
 * This supports two data types. If an array of strings is provided, the strings will be
used in the generated  `childComponent`  as the content (i.e. passed as  `children` ). If
an array of objects is provided, each object will be spread onto the generated
 `childComponent`  with no interpretation. You'll be responsible for setting properties
like  `disabled` ,  `className` , and setting the content using  `children` .
 * 
 * NOTE: When providing an array of objects be sure a unique  `key`  is assigned to each
item.    for more
information.
 */
  children: string[] | { key: number | string; [propName: string]: any }[];
  /**
   * The property on each  `childComponent`  that receives the data in  `children`
   */
  childProp?: string;
  /**
   * The name of the event that triggers activation.
   */
  childSelect?: string;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
   * The property on each  `childComponent`  that receives the index of the item
   */
  indexProp?: string;
  /**
   * An object containing properties to be passed to each child.
   */
  itemProps?: object;
  /**
   * Callback method to be invoked when an item is activated.
   */
  onSelect?: Function;
  /**
 * Selection mode for the group
 * *  `single`  - Allows for 0 or 1 item to be selected. The selected item may be deselected.
 * *  `radio`  - Allows for 0 or 1 item to be selected. The selected item may only be
deselected by selecting another item.
 * *  `multiple`  - Allows 0 to  _n_  items to be selected. Each item may be selected or
deselected.
 */
  select?: string;
  /**
   * The index(es) of the currently activated item.
   */
  selected?: number | Array<any>;
  /**
   * The key that will hold the value in the event passed to  `onSelect` .
   */
  selectedEventProp?: string;
  /**
   * The name of the DOM property that represents the selected state.
   */
  selectedProp?: string;
}
/**
 * A component that supports selection of its child items via configurable properties and
events.
 * 
 * Selected item is managed by   .
 */

export class Group extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, GroupProps>
> {}

export interface GroupDecoratorProps
  extends Merge<ui_ForwardRef_ForwardRefProps, ui_Changeable_ChangeableProps> {}
export function GroupDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & GroupDecoratorProps>;

export default Group;