@ciptex/race-ui - v2.5.1

Race UI is a library of composable components and functions for creating an extendable and customizable user interface for Twilio Flex cloud-based contact center application platform Instantiating and consuming @twilio/flex-ui.

Classes

• RaceNotifications

Interfaces

• ActivityItem
• ActivitySelectProps
• AddInputProps
• BreadcrumbProps
• BreadcrumbSection
• ButtonWithAlertDialogProps
• CountrySelectProps
• DialpadKeyProps
• DialpadProps
• Message
• MessageConfiguratorProps
• SettingInstanceListProps
• SettingTableProps
• WorkerSelectProps

React Components

ActivitySelect

▸ ActivitySelect(props): Element

Select Component Listing Activities

Parameters

Name	Type	Description
props	ActivitySelectProps	Component properties

Returns

Element

React Component

Example

<ActivitySelect
  labelText="Select Activity"
  value="WAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  onChange={(e) => console.log(e)}
/>

---

AddInput

▸ AddInput(props): Element

Input Component with Add Button

Parameters

Name	Type	Description
props	AddInputProps	Component properties

Returns

Element

React Component

Example

<AddInput
  type="text"
  placeholder="Zendesk Subdomain"
  inputAriaLabel="Add Zendesk Instance"
  onClick={(e) => console.log(e)}
  endAdornment={<Box>.zendesk.com</Box>}
/>

---

Breadcrumb

▸ Breadcrumb(props): Element

Breadcrumb Component

Parameters

Name	Type	Description
props	BreadcrumbProps	Component properties

Returns

Element

React Component

Example

 <Breadcrumb links={[
        { href: '/race-settings/', label: "RACE Admin" },
        { href: '/plugin-web-forms-settings/', label: "RACE Web Forms Plugin" }
    ]}/>

---

ButtonWithAlertDialog

▸ ButtonWithAlertDialog(props): Element

Button With Alert Dialog Component

  <ButtonWithDialog
        onConfirm={onDisable}
        heading="Disable Plugin"
        dialogMessage="Are you sure you want to disable this plugin?"
        onConfirmLabel="Disable"
        disabled={isDisabled}
        loading={isLoading}
        destructive>
        Disable
    </ButtonWithDialog>

Parameters

Name	Type	Description
props	ButtonWithAlertDialogProps	Component properties

Returns

Element

React Component

---

CountrySelect

▸ CountrySelect(props): Element

Country Select Component

Parameters

Name	Type	Description
props	CountrySelectProps	Component properties

Returns

Element

React Component

Example

 <CountrySelect
        onChange={onSelectChange}
        value={conferenceTo}
        selectedCountry={selectedCountryState}
    />

---

Dialpad

▸ Dialpad(props): Element

Dialpad Component

Parameters

Name	Type	Description
props	DialpadProps	Component properties

Returns

Element

React Component

Example

 <Dialpad onClick={(digit) => console.log(digit)} />

---

DialpadKey

▸ DialpadKey(props): Element

DialpadKey Component

Parameters

Name	Type	Description
props	DialpadKeyProps	Component properties

Returns

Element

React Component

Example

 <DialpadKey digit="0" onClick={(digit) => console.log(digit)} />

---

MessageConfigurator

▸ MessageConfigurator(props): Element

Message Configuration Component which options for Say & Play & Twiml

Parameters

Name	Type	Description
props	MessageConfiguratorProps	Component properties

Returns

Element

React Component

Example

<MessageConfigurator
 message={message}
 twiml={true}
 onChange={(message) => console.log(message)}
/>

---

SelectLabel

▸ SelectLabel(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

 <SettingsFormControl>
     <SelectLabel>Type *</SelectLabel>
     <Select required name="type" value={content.type} onChange={handleChange}>
        <MenuItem hidden disabled value="">Select content type</MenuItem>
        <MenuItem value="text">Text</MenuItem>
      </Select>
 </SettingsFormControl>

Deprecated

---

SettingInstanceList

▸ SettingInstanceList(props): Element

Settings List Component

Parameters

Name	Type	Description
props	SettingInstanceListProps	Component properties

Returns

Element

React Component

Example

<SettingInstanceList
        ariaLabel="Web Forms"
        list={forms}
        onClick={(item) => console.log(item)}
        onDelete={(item) => console.log(item)}
/>

---

SettingTable

▸ SettingTable(props): Element

Settings Table Component

Parameters

Name	Type	Description
props	SettingTableProps	Component properties

Returns

Element

React Component

Example

<SettingTable
    ariaLabel="Web Forms"
    list={forms}
    onClick={(item) => console.log(item)}
    onDelete={(item) => console.log(item)}
/>

---

SettingsButtonContainer

▸ SettingsButtonContainer(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

 <SettingsButtonContainer>
   <SettingsButton roundCorners={false} onClick={onDelete} type="button">Remove</SettingsButton>
   <SettingsPrimaryButton roundCorners={false} type="submit">Save</SettingsPrimaryButton>
 </SettingsButtonContainer>

Deprecated

---

SettingsContainer

▸ SettingsContainer(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

<SettingsContainer>
     ...My Settings Page
</SettingsContainer>

Deprecated

---

SettingsForm

▸ SettingsForm(props): Element

Parameters

Name	Type	Description
props	DetailedHTMLProps<HTMLAttributes<HTMLFormElement>, HTMLFormElement>	Component properties

Returns

Element

React Component

Example

 <SettingsContainer>
   <SettingsOuterContainer>
     <SettingsForm>
     </SettingsForm>
   </SettingsOuterContainer>
 </SettingsContainer>

Deprecated

---

SettingsFormControl

▸ SettingsFormControl(props): Element

Parameters

Name	Type	Description
props	FormControlProps	Component properties

Returns

Element

React Component

Example

 <SettingsFormControl>
      <SettingsTextField required name="name" onChange={handleChange} value={content.name} label="Content Name" />
 </SettingsFormControl>

---

SettingsInnerContainer

▸ SettingsInnerContainer(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

 <SettingsContainer>
   <SettingsOuterContainer>
     <SettingsInnerContainer>
     </SettingsInnerContainer>
   </SettingsOuterContainer>
 </SettingsContainer>

Deprecated

---

SettingsOuterContainer

▸ SettingsOuterContainer(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

 <SettingsContainer>
   <SettingsOuterContainer>
     <SettingsForm>
     </SettingsForm>
   </SettingsOuterContainer>
 </SettingsContainer>

Deprecated

---

SettingsSection

▸ SettingsSection(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

<SettingsSection>
     ...My Section Content
</SettingsSection>

---

SettingsSubtitle

▸ SettingsSubtitle(props): Element

Parameters

Name	Type	Description
props	BoxProps	Component properties

Returns

Element

React Component

Example

<SettingsSubtitle>My Settings Section</SettingsSubtitle>

Deprecated

---

SettingsTextField

▸ SettingsTextField(props): Element

Parameters

Name	Type	Description
props	TextFieldProps	Component properties

Returns

Element

React Component

Example

 <SettingsTextField
   required
   name="name"
   onChange={(e) => console.log(e)}
   value={content.name}
   label="Content Name"
 />

---

TaskDataDisplay

▸ TaskDataDisplay(props): Element

Task Data Display Component

Parameters

Name	Type	Description
props	TaskContextProps	Component properties

Returns

Element

React Component

Example

 <TaskDataDisplay task={task} />

---

WorkerSelect

▸ WorkerSelect(props): Element

Select Component Listing Workers

Parameters

Name	Type	Description
props	WorkerSelectProps	Component properties

Returns

Element

React Component

Example

<WorkerSelect
  labelText="Select Worker"
  value="WAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  onChange={(e) => console.log(e)}
/>

React Hooks

useTheme

▸ useTheme(): Object

React Hook for Exposing Flex Theme

const MyComponent = () => {
    const { theme } = useTheme();
    ...Component Code
}

Returns

Object

Flex Theme Object

Name	Type
theme	RaceTheme

See

FlexTheme