Links

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