LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples

Was this helpful?

  1. Whisper Components

CollapseBox

CollapseBox is a component with children elements that you can expand and collapse.

PreviousChartNextGrid

Last updated 3 years ago

Was this helpful?

Props:

Properties
Description
Required?
Default

children

Array of ChildComponents

undefined

label

String

undefined (but will display More/Less)

open

Boolean

undefined

openDirection

OpenDirection.Top:

Collapse/expand button is on the top and content is on the bottom

OpenDirection.Bottom: Collapse/expand button is on the bottom and content is on the top

undefined

onClick

Callback function that executes when the component is clicked

undefined

previewHeight

Size.None, Size.Small, Size.Medium, Size.Large, Size.ExtraLarge

undefined

Examples

import { whisper } from "@oliveai/ldk"
import { 
  NewWhisper,
  OpenDirection, 
  Size,
  UpdateWhisper,
  Whisper,
  WhisperComponentType 
} from "@oliveai/ldk/dist/whisper"

const collapseBoxExampleConfig = ((collapseBoxLabel: string, isOpen: boolean): NewWhisper | UpdateWhisper => {
  return {
    label: "Collapse Box Example",
    components: [
      {
        type: WhisperComponentType.CollapseBox,
        label: collapseBoxLabel,
        open: isOpen,
        previewHeight: Size.Small,
        openDirection: OpenDirection.Bottom,
        onClick: async (error: Error, params: boolean, whisper: Whisper) => {
          if ( error ) { 
            console.debug(error);
          }
          console.log(`CollapseBox params: ${params}`);
          if (params) {
            whisper.update(collapseBoxExampleConfig("Hide Collapse Box Content", params) as UpdateWhisper);
          } else {
            whisper.update(collapseBoxExampleConfig("Show Collapse Box Content", params) as UpdateWhisper);
          }
        },
        children: [
          {
            type: WhisperComponentType.Markdown,
            body: "Collapse Box Contents 1"
          },
          {
            type: WhisperComponentType.Markdown,
            body: "Collapse Box Contents 2"
          },
          {
            type: WhisperComponentType.Markdown,
            body: "Collapse Box Contents 3"
          },
          {
            type: WhisperComponentType.Markdown,
            body: "Collapse Box Contents 4"
          },
          {
            type: WhisperComponentType.Markdown,
            body: "Collapse Box Contents 5"
          },
        ],
      },
    ]
  }
});

const collapseBoxExample = (async () => {
  await whisper.create(collapseBoxExampleConfig("Hide Collapse Box Content", true) as NewWhisper);
})

collapseBoxExample();
import { React, ReactWhisper } from "@oliveai/ldk"
import { Size, OpenDirection } from "@oliveai/ldk/dist/whisper"

const CollapseBoxExample: React.FunctionComponent<Object> = (props) => { 
  const [ collapseBoxLabel, setCollapseBoxLabel ] = React.useState('Hide Collapse Box Content');
  const [ isOpen, setIsOpen ] = React.useState(true);

  return (
    <oh-whisper label='Collapse Box Example' onClose={ () => {}}>
      <oh-collapse-box
        label={collapseBoxLabel}
        open={isOpen}
        previewHeight={Size.Small}
        openDirection={OpenDirection.Bottom}
        onClick={(error, params) => {
          if (params){
            setCollapseBoxLabel('Hide Collapse Box Content')
          } else {
            setCollapseBoxLabel('Show Collapse Box Content')
          }
          setIsOpen(params)
        }}
        children={
          <>
            <oh-markdown
              body="Collapse Box 1"
            />
            <oh-markdown
              body="Collapse Box 2"
            />
            <oh-markdown
              body="Collapse Box 3"
            />
            <oh-markdown
              body="Collapse Box 4"
            />
            <oh-markdown
              body="Collapse Box 5"
            />
        </>
        }
      />
    </oh-whisper>
  )
}

ReactWhisper.renderNewWhisper(<CollapseBoxExample />);
Expanded
Collapsed