ui/Group

Provides a component that renders a group of components given a set of data.

Import Usage

import Group from '@enact/ui/Group';

Members

Group   Component

A component that supports selection of its child items via configurable properties and events.

Selected item is managed by ui/Changeableui/Changeable.Changeable.

Import Usage

import Group from '@enact/ui/Group';

Extends: ui/Groupui/Group.GroupBase
Wrapped with: ui/Groupui/Group.GroupDecorator

Properties

Required Property •  childComponent

StringComponent

Component type to repeat. This can be a React component or a string describing a DOM node (e.g. 'div')

---

Required Property •  children

Array(String)Array(any)

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. https://reacthttps://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key for more information.

---

childProp

String

The property on each childComponent that receives the data in children

Default: 'children'

---

childSelect

String

The name of the event that triggers activation.

Default: 'onClick'

---

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Groupui/Group.Group, the ref prop is forwarded to this component as componentRef.

---

indexProp

String

The property on each childComponent that receives the index of the item

Default: 'data-index'

---

itemProps

Object

An object containing properties to be passed to each child.

---

onSelect

Function

Callback method to be invoked when an item is activated.

---

select

String

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.

Default: 'single'

---

selected

NumberArray

The index(es) of the currently activated item.

---

selectedEventProp

String

The key that will hold the value in the event passed to onSelect.

Default: 'data'

---

selectedProp

String

The name of the DOM property that represents the selected state.

Default: 'data-selected'

GroupBase   Component

A stateless component that supports selection of its child items via configurable properties and events.

Import Usage

import {GroupBase} from '@enact/ui/Group';

GroupDecorator   Higher-Order Component

A higher-order component that adds behavior to ui/Groupui/Group.GroupBase.

Import Usage

import {GroupDecorator} from '@enact/ui/Group';

Includes: ui/ForwardRefui/ForwardRef.ForwardRef
Includes: ui/Changeableui/Changeable.Changeable