Molecules

List of Molecules

Displays a menu of action buttons using a modal.

<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}
/>

Action Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

Action Sheet Confirm

Modal that displays information

<ActionSheetConfirm
   sheetRef={actionSheetConfirmRef}
   title={cardActionSelected?.title}
   description={strings.reissueCard.description.replace(
      '$CARD_LAST_FOUR',
       cardLastFourDigits,
   )}
   event={() => {
     if (cardActionSelected?.id) {
       sendReissueCard(
          cardActionSelected.id,
          cardActionSelected.analyticsEventName,
       );
     }
    }}
/>

Base Action Card

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.

<BaseActionCard
   withCard={false}
   leftIconName={iconLeft ?? (leftIconComponent ? iconLeft : 'bookmark')}
   leftComponent={leftIconComponent}
   onPress={event}
   contentComponent={renderAccountItem()}
   rowStyles={{...rowStyles}}
/>

Basic Toast Notification

A customizable animated notification pop-up with timing.

<BasicToastNotication
   title={heading ? heading : errorHeading}
   body={body}
   interactable={false}
   childrenLeft={<LeftContent id={id} />}
   childrenRight={<RightContent hideNotification={hideNotication} />}
   containerStyle={ToastNotificationStyle(theme).container}
/>

Custom Top Tabs

Tab bar on the top of the screen that lets the user switch between different routes by tapping the tabs or swiping horizontally.

Date Picker

Component that renders date and time.

<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.

<Dropdown
   label={strings.componentsDemo.dropdownDefaultDefaultValue}
   data={['Java', 'C#']}
   defaultValueByIndex={0}
   onSelect={() => {}}
   buttonTextAfterSelection={(selectedItem, _index) => {
      return selectedItem;
   }}
   rowTextForSelection={(selectedItem, _index) => {
      return selectedItem;
   }}
   containerStyle={componentsDemoStyles.marginBottom}
/>

Error Web View

Renders web error content in a native view.

Global Loader

Displays a global loading indicator.

Header List

Header component, that consists of an icon to the left, a title, a subtitle and a JSX element to the right.

<HeaderList
   title={strings.componentsDemo.headerListTitle}
   accessoryRight={
     <Switch
       onValueChange={setIsDisabled}
       value={isDisabled}
       style={componentsDemoStyles.marginBottom}
     />
   }
/>

List Action Card

A card component that contains an icon, a title and some text.

Main Layout Header

Component used for header layout.

<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.

A way to present content above an enclosing view.

<Modal
   isOpen={isActionModalOpen}
   onDismiss={() => setIsActionModalOpen(false)}>
   <View>
     <BodyText type="s3">
       {strings.componentsDemo.actionIdLabel} {actionId}
     </BodyText>
    </View>
</Modal>

Radio Buttons Group

Group that contains various of Radio Button component.

Search Input

Input component used for searching a value

SVG Background

Component to display an svg image as background.

PreviousAtoms NextOrganisms

Last updated 2 years ago

Molecules

Action Bottom Menu

Action Button

Action Sheet Confirm

Base Action Card

Basic Toast Notification

Custom Top Tabs

CustomTabsProps

CustomTabItem

Date Picker

Error Web View

Global Loader

Header List

List Action Card

Main Layout Header

Menu Item

Radio Buttons Group

Search Input

SVG Background

hashtagAction Bottom Menu

hashtagAction Button

hashtagAction Sheet Confirm

hashtagBase Action Card

hashtagBasic Toast Notification

hashtagCustom Top Tabs

hashtagCustomTabsProps

hashtagCustomTabItem

hashtagDate Picker

hashtagDropdown

hashtagError Web View

hashtagGlobal Loader

hashtagHeader List

hashtagList Action Card

hashtagMain Layout Header

hashtagMenu Item

hashtagModal

hashtagRadio Buttons Group

hashtagSearch Input

hashtagSVG Background

Action Bottom Menu

Action Button

Action Sheet Confirm

Base Action Card

Basic Toast Notification

Custom Top Tabs

CustomTabsProps

CustomTabItem

Date Picker

Dropdown

Error Web View

Global Loader

Header List

List Action Card

Main Layout Header

Menu Item

Modal

Radio Buttons Group

Search Input

SVG Background