List Pair

The List Pair component helps organize data by label and value.

Props
Name
Type
Description
Required
Default
copyable
boolean
Copy the unbolded text to the right (including markdown).
​
labelCopyable
boolean
Copy the bolded text to the left (including markdown).
false
label
string
The bolded left hand text.
​
onValueCopy
function
Executes the provided function when the value is copied.
null
onLabelCopy
function
Executes the provided function when the label is copied.
​
style
+Urgency
Background color of the component.
​
value
string
The unbolded left hand text. Markdown compatible.
​
Note: Types marked with + are Olive LDK enums
Examples
4 separate List Pair components with different style prop values and a markdown link
Javascript
React
import { whisper } from '@oliveai/ldk';
import {
  Whisper,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
​
await whisper.create({
  label: 'List Pair',
  components: [
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: true,
      label: 'Label None Not Copyable',
      labelCopyable: false,
      onValueCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.None,
      value: 'Value None Copyable [Link](https://docs.oliveai.dev/)',
    },
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: true,
      label: 'Label Error Copyable',
      labelCopyable: true,
      onLabelCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.Error,
      value: 'Value Error Copyable [Link](https://docs.oliveai.dev/)',
    },
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: true,
      label: 'Label Success Not Copyable',
      labelCopyable: false,
      onValueCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.Success,
      value: 'Value Success Copyable [Link](https://docs.oliveai.dev/)',
    },
    {
      type: whisper.WhisperComponentType.ListPair,
      copyable: false,
      label: 'Label Warning Copyable',
      labelCopyable: true,
      onLabelCopy: (error, value) => {
        console.log('Copied: ', value);
      },
      style: whisper.Urgency.Warning,
      value: 'Value Warning Not Copyable [Link](https://docs.oliveai.dev/)',
    },
  ],
});
import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
import { Urgency } from '@oliveai/ldk/dist/whisper/types';
​
const TestListPair = () => {
  return (
    <oh-whisper label="List Pair">
      <oh-list-pair
        copyable={true}
        labelCopyable={false}
        label="Label None Not Copyable"
        onValueCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.None}
        value="Value None Copyable [Link](https://docs.oliveai.dev/)"
      />
      <oh-list-pair
        copyable={true}
        labelCopyable={true}
        label="Label Error Copyable"
        onLabelCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.Error}
        value="Value Error Copyable [Link](https://docs.oliveai.dev/)"
      />
      <oh-list-pair
        copyable={true}
        labelCopyable={false}
        label="Label Success Not Copyable"
        onValueCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.Success}
        value="Value Success Copyable [Link](https://docs.oliveai.dev/)"
      />
      <oh-list-pair
        copyable={false}
        labelCopyable={true}
        label="Label Warning Copyable"
        onLabelCopy={(error, value) => {
          console.log('Copied: ', value);
        }}
        style={Urgency.Warning}
        value="Value Warning Not Copyable [Link](https://docs.oliveai.dev/)"
      />
    </oh-whisper>
  );
};
​
ReactWhisper.renderNewWhisper(<TestListPair />);

Name	Type	Description	Default
`copyable`	`boolean`	Copy the unbolded text to the right (including markdown).
`labelCopyable`	`boolean`	Copy the bolded text to the left (including markdown).	`false`
`label`	`string`	The bolded left hand text.
`onValueCopy`	`function`	Executes the provided function when the `value` is copied.	`null`
`onLabelCopy`	`function`	Executes the provided function when the `label` is copied.
style	`+Urgency`	Background color of the component.
`value`	`string`	The unbolded left hand text. Markdown compatible.

Whisper Components - Previous

Icon

Next - Whisper Components

Link

Last modified 8mo ago