import { CellGroup } from '@uhg-abyss/mobile';

Type Inheritance

When creating a CellGroup of type radio, checkbox, or toggle, it is important to use the type prop. Once a type prop is assigned to a CellGroup, every child will inherit the group's type and have access to all necessary providers preventing errors.

Below, you can see a few examples of type inheritance within CellGroup. Notice how Cell does not have the type prop, inheriting it from the CellGroup.

Toggle Switch CellGroup

Cells of type toggle contain the content of the cell with a ToggleSwitch on the right side. Toggle Cells will return a boolean of the selected value onChange.

Radio Group

Cells of type radio are required to be wrapped in a CellGroup with type radio. Reference the Type Inheritance section above for more information.

Radio Cells contain the content of the cell with a radio button on the right side, and return the selected value onChange.

Radio CellGroup requires the onChange and value props.

Checkbox Group

Cells of type checkbox are required to be wrapped in a CellGroup with type checkbox, reference the Type Inheritance section above for more information.

Checkbox Cells contain the content of the cell, with a checkbox on the right side.

Checkbox Cells works the same as a standard Checkbox Group, returning the selected cell values.

selectAll is a prop that can exist inside a Cell in a Checkbox CellGroup. This prop creates a select all checkbox that will select/deselect the entire checkbox list.

Checkbox CellGroup's require the onChange and value props.

isDisabled

isDisabled is a prop available for type radio, checkbox, and toggle.

When isDisabled is present in CellGroup, the entire group is disabled and cannot be modified. However, if isDisabled is present in Cell, only that cell is disabled and cannot be modified.

CategoryHeader

CategoryHeader is a section header component used to divide CellGroups into categories. It supports a title text, an optional pressable info icon, or an optional trailing link.

import { CategoryHeader } from '@uhg-abyss/mobile';

CellGroup Props

Name	Type	Default	Required	Description
children	React.ReactNode | undefined	-	-	Child cells in CellGroup
isDisabled	boolean | undefined	false	-	Flag to disable all cells in the cell group
onChange	(value: any) => void | undefined	-	-	Called fired when CellGroup value is triggered to change. Required for radio and checkbox types
type	'default' | 'radio' | 'toggle' | 'checkbox' | undefined	'default'	-	The type of cell group
value	string[] | string | undefined	-	-	Value passed to CellGroup, defining defaults for radio, and checkbox. It can also be used to define value shown on the right side of an un-pressable cell

CategoryHeader Props

Name	Type	Default	Required	Description
link	React.ReactNode | undefined	-	-	Trailing link displayed on the right side of the title.
onInfoIconPress	() => void | undefined	-	-	Callback fired when the info icon is pressed. When provided an info icon displays next to the title text.
text	string	-		The title text displayed in the section header.

It is the responsibility of consuming teams to make sure all components within CellGroup are accessible.

CellGroup Classes

V2	V1	Status
-	cell-group-checkbox-group	Removed
-	cell-group-radio-group	Removed
-	cell-group-root	Removed

CellGroup Props

V2	V1	Status
children	children	Unchanged
-	data	Removed
-	fullBorder	Removed
-	hideBorderAll	Removed
-	hideBorderBottom	Removed
-	hideBorderTop	Removed
isDisabled	isDisabled	Unchanged
-	onAddCell	Removed
onChange	onChange	Unchanged
-	onRemoveCell	Removed
-	setData	Removed
-	title	Removed
type	type	Modified
value	value	Unchanged