Molecules
Last updated
Last updated
Displays a menu of action buttons using a modal.
| Prop Name | Type | Description |
|---|---|---|
actions | Array<ActionsSection> | Collection of ActionSection objects that represents each button |
disabled | boolean (optional) | Does not display the Action Bottom Menu if it's true |
backgroundColor | string (optional) | Color for the background of the sheet |
title | string (optional) | Main title text of the sheet |
onItemPressed | (actionId: string) => void | This method is called on every press of each button. The actionId is provided in the function so the action can be handled from the caller component |
onClosePressed | () => void | This method is called when the ActionBottomMenu is closed |
selectedItemColor | string (optional) | Color for the background of the selected button |
selectedItemIconColor | string (optional) | Color for the icon inside of the selected button |
selectedItems | any (optional) | An object of keys (actionIds) with boolean value to indicate if that action is selected or not. |
menuHeight | number (optional) | Set a different height for the ActionBottomMenu |
ref | ForwardedRef<Modalize> | ActionBottomSheet ref |
<ActionBottomMenu
title={'More'}
actions={EXAMPLE_BOTTOM_MENU_ACTIONS}
ref={actionBottomMenuRef.current[0]}
disabled={isDisabled}
selectedItemColor={theme.color.action.primary[400]}
selectedItemIconColor={theme.color.surface[200]}
selectedItems={{actionA: actionASelected, actionB: actionBSelected}}
onItemPressed={item => demoAction(item)}
onClosePressed={() => actionBottomMenuRef.current[0].current?.close()}
backgroundColor={theme.color.surface[100]}
menuHeight={500}
/>A basic button component that should render nicely on any platform. Supports a minimal level of customization.
| Prop Name | Type | Description |
|---|---|---|
text | string | Text to display inside the button |
iconName | string | Name of the icon in the button |
iconStyle | TextStyle (optional) | Style applied to the icon |
textStyle | TextStyle (optional) | Style applied to the text |
buttonStyle | ViewStyle (optional) | Style applied to the button |
customIcon | JSX.Element (optional) | Custom icon for the button |
event | () => void (optional) | Event called when the button is pressed |
<ActionButton
text={'Example'}
iconName="upload"
event={() => null}
/>Modal that displays information
| Prop Name | Type | Description |
|---|---|---|
sheetRef | React.RefObject | ActionSheetConfirm ref |
titlePrimary | string (optional) | Primary title for the modal |
titleCancel | string (optional) | Cancel title for the modal |
title | string (optional) | Text to display inside the modal as the title |
description | string (optional) | Description message in the component |
modalHeight | number (optional) | Height of the modal |
event | () => void | Event called when the modal is pressed |
<ActionSheetConfirm
sheetRef={actionSheetConfirmRef}
title={cardActionSelected?.title}
description={strings.reissueCard.description.replace(
'$CARD_LAST_FOUR',
cardLastFourDigits,
)}
event={() => {
if (cardActionSelected?.id) {
sendReissueCard(
cardActionSelected.id,
cardActionSelected.analyticsEventName,
);
}
}}
/>Displays a common card that can contain a left component, center component, and right component. It also handles a press event.
It could be displayed without a card, and only display the child elements.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
onPress | () => void | Handler to be called when the user presses the card |
withCard | boolean | If |
cardProps | Omit<CardProps, 'onPress' | 'children'> | Props for the card when |
rowStyles | ViewStyle | Style applied to the rows in the component |
contentStyles | ViewStyle | Style applied to the content in the component |
text | string | Text to be displayed in the base action card |
contentComponent | JSX.Element | Content to be displayed on a View inside the card |
leftIconName | string | Name for the icon shown to the left of the component |
leftComponent | JSX.Element | Component displayed to the left of the base action card |
hideLeftIcon | boolean | If |
rightIconName | string | Name for the icon shown to the right of the component |
rightComponent | JSX.Element | Component displayed to the right of the base action card |
hideRightIcon | boolean | If |
actionCardAnalyticsParams | ParamsTrackAnalytics |
<BaseActionCard
withCard={false}
leftIconName={iconLeft ?? (leftIconComponent ? iconLeft : 'bookmark')}
leftComponent={leftIconComponent}
onPress={event}
contentComponent={renderAccountItem()}
rowStyles={{...rowStyles}}
/>A customizable animated notification pop-up with timing.
| Prop Name | Type | Description |
|---|---|---|
interactable | boolean | If |
onMainAction | () => {} (optional) | Function to be called when the toast notification is pressed |
title | string (optional) | Text to be displayed |
body | string (optional) | Content of the component |
containerStyle | ViewStyle (optional) | Style applied to the container of the component |
childrenLeft | any (optional) | Children to the left of the basic toast notification |
childrenRight | any (optional) | Children to the right of the basic toast notification |
<BasicToastNotication
title={heading ? heading : errorHeading}
body={body}
interactable={false}
childrenLeft={<LeftContent id={id} />}
childrenRight={<RightContent hideNotification={hideNotication} />}
containerStyle={ToastNotificationStyle(theme).container}
/>Tab bar on the top of the screen that lets the user switch between different routes by tapping the tabs or swiping horizontally.
| Prop Name | Type | Description |
|---|---|---|
event | (value?: string) => void | Even called when |
data | Data for the top tabs |
| Prop Name | Type | Description |
|---|---|---|
value | string | Value of the tab item |
active | boolean (optional) | If |
id | string | ID of each tab item |
<CustomTopTabs event={() => {}} data={EXAMPLE_DATA_CUSTOM_TOP_TABS} />Component that renders date and time.
| Prop Name | Type | Description |
|---|---|---|
onPress | () => void | Handler to be called when the date picker is pressed |
isOpen | boolean | If |
selectedDate | Date | The date selected in the date picker |
label | string (optional) | Label text for the date picker |
shownDate | string (optional) | The date displayed in the date picker |
withShadow | boolean (optional) | If |
labelStyle | ViewStyle (optional) | Style applied to the label |
datePickerStyle | ViewStyle (optional) | Style applied to the date picker |
containerStyle | ViewStyle (optional) | Style applied to the container |
disabled | boolean (optional) | If |
error | string (optional) | Error message when there is one |
primary | boolean (optional) | If |
onError | (error: string | null) => void (optional) | Handler to be called when an error occurs |
<DatePicker
isOpen={isDatePickerOpen}
onPress={() => setIsDatePickerOpen(true)}
label={strings.enterBirthDate.birthDateInputLabel}
containerStyle={editOnboardingInfoScreenStyles.marginBottom}
selectedDate={currentSelectedDate.current}
shownDate={valueDate}
error={birthDateInputError}
onError={setBirthDateInputError}
onConfirm={date => {
const formattedDate = dateFormatter(date);
validateDate(formattedDate);
setValueDate(formattedDate);
currentSelectedDate.current = date;
setIsDatePickerOpen(false);
}}
onCancel={() => {
setIsDatePickerOpen(false);
}}
/>Displays a list of options to select one.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
label | string | Label text displayed on the dropdown |
labelRight | string | Label text displayed to the right of the component |
containerStyle | ViewStyle | Style applied to the container |
labelStyle | TextStyle | Style applied to the label |
rowTextStyle | TextStyle | Style applied to the row |
withSuccess | boolean | If |
withError | boolean | If |
disabled | boolean | If |
primary | boolean | If |
iconStyles | TextStyle | Style applied to the icon |
<Dropdown
label={strings.componentsDemo.dropdownDefaultDefaultValue}
data={['Java', 'C#']}
defaultValueByIndex={0}
onSelect={() => {}}
buttonTextAfterSelection={(selectedItem, _index) => {
return selectedItem;
}}
rowTextForSelection={(selectedItem, _index) => {
return selectedItem;
}}
containerStyle={componentsDemoStyles.marginBottom}
/>Renders web error content in a native view.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
title | string | Text displayed as the title of the error web view |
subtitle | string | Subtitle of the error web view |
icon | string | Icon in the component |
<ErrorWebView title='Error example' />Displays a global loading indicator.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
backgroundColor | string | Background color for the global loader |
containerStyle | ViewStyle | Style applied to the container of the component |
<GlobalLoader
backgroundColor={'blue'}
containerStyle={webViewLayoutStyles().globalLoader}
/>Header component, that consists of an icon to the left, a title, a subtitle and a JSX element to the right.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
iconLeft | string | Icon located to the left of the Header List |
title | string | Text displayed as the title |
subTitle | string | Text displayed as the subtitle |
rightIcon | string | Name of the icon that goes to the right |
event | () => void | Handler called when the accessory to the right is pressed |
iconStyle | TextStyle | Style applied to the icon |
titleStyles | TextStyle | Style applied to the title |
accessoryRight | JSX.Element | Element located to the right of the Header List |
<HeaderList
title={strings.componentsDemo.headerListTitle}
accessoryRight={
<Switch
onValueChange={setIsDisabled}
value={isDisabled}
style={componentsDemoStyles.marginBottom}
/>
}
/>A card component that contains an icon, a title and some text.
| Prop Name | Type | Description |
|---|---|---|
CustomIcon | React.FC<SvgProps> | |
iconName | string | |
iconSize | number | |
title | string | |
text | string | |
event | () => void | |
containerStyles | ViewStyle | |
backgroundColor | string | |
iconColor | string | |
titleStyles | TextStyle | |
textStyle | TextStyle | |
analyticsParamListActionCard | ParamsTrackAnalytics |
<ListActionCard
iconName="info"
title={strings.componentsDemo.actionCardTitle}
text={strings.componentsDemo.actionCardText}
event={() => {}}
/>Component used for header layout.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
title | string | Text displayed as title for the main layout header |
titleProps | HeadingProps | Props for the title displayed |
titleContainerStyle | ViewStyle | Style applied to the title container |
leftIcon | string | Icon located to the left of the component |
leftIconPres | () => void | Handler called when the left icon is pressed |
hideLeftIcon | boolean | If |
rightIcon | string | Icon located to the right of the component |
rightIconPress | () => void | Handler called when the right icon is pressed |
containerStyle | ViewStyle | Style applied to the container |
<MainLayoutHeader
leftIcon="user"
leftIconPres={() => dispatch(DrawerActions.openDrawer())}
rightIcon={isCloseButton ? 'x' : undefined}
rightIconPress={
isCloseButton ? () => dispatch(DrawerActions.closeDrawer()) : undefined
}
title={title ?? customerFullName}
titleContainerStyle={
title === undefined ? headerWithMenuStyles.titleContainer : {}
}
/>Component used for the Main Menu.
All props are required.
| Prop Name | Type | Description |
|---|---|---|
leftIcon | string | Name for the icon that goes to the left of the card menu item. |
description | string | Title or description that tells the user where it will redirect. |
event | () => void | Event that will happen when the item is pressed. |
<MenuItem
leftIcon={iconName}
description={itemTitle}
event={onPress}
/>A way to present content above an enclosing view.
| Prop Name | Type | Description |
|---|---|---|
isOpen | boolean | If |
onDismiss | () => void | Function called when the modal is dismissed |
cardStyle | ViewStyle (optional) | Style applied to the card |
backdropStyle | ViewStyle (optional) | Style applied to the backdrop |
containerStyle | ViewStyle (optional) | Style applied to the container |
children | JSX.Element | JSX.Element[] (optional) | Children of the component |
<Modal
isOpen={isActionModalOpen}
onDismiss={() => setIsActionModalOpen(false)}>
<View>
<BodyText type="s3">
{strings.componentsDemo.actionIdLabel} {actionId}
</BodyText>
</View>
</Modal>Group that contains various of Radio Button component.
| Prop Name | Type | Description |
|---|---|---|
radioButtons | OptionRadioButton[] | Array of radio buttons |
containerStyle | ViewStyle (optional) | Style applied to the container |
radioButtonStyle | ViewStyle (optional) | Style applied to each radio button |
textStyle | TextStyle (optional) | Style applied to the text |
onPress | ({id, text}: OptionRadioButton) => void | Function called when the radio buttons are clicked |
<RadioButtonsGroup
radioButtons={EXAMPLE_RADIO_BUTTONS}
onPress={radioButtonSelected}
/>Input component used for searching a value
These props extend the InputProps.
| Prop Name | Type | Description |
|---|---|---|
initialSearchValue | string (optional) | Initial value for the input |
onQueryChanged | (text: string) => void | Function called when the query has been changed |
currentQuery | string | Current query in the input |
<SearchInput
containerStyle={styles.separator}
placeholder={'Search'}
initialSearchValue={''}
onQueryChanged={requestAfterSearchQueryChanged}
currentQuery={queryValue}
/>Component to display an svg image as background.
All props are optional.
| Prop Name | Type | Description |
|---|---|---|
children | React.ReactNode | Children of the component |
stylesBackground | ViewStyle | Style applied to the svg background |
<SVGBackground
children={background}
stylesBackground={stylesBackground}
/>
