CollapseBox

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

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

Expanded

Collapsed

TypeScript

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();

React

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 />);