Sha256: aae113c1815716144c91dcc4d9c727ff4ebaf7c74cd158dc615f179512f5de14

Contents?: true

Size: 1.03 KB

Versions: 50

Compression:

Stored size: 1.03 KB

Contents

import classnames from 'classnames'
import React, { useContext } from 'react'
import AnimateHeight from 'react-animate-height'
import { buildCss } from '../../utilities/props'
import { globalProps } from '../../utilities/globalProps'

import CollapsibleContext from '../context'

export type CollapsibleContentProps = {
  children?: React.ReactNode[] | React.ReactNode | string,
  className?: string,
  padding?: string,
}

const CollapsibleContent = ({
  children,
  className,
  padding = 'md',
  ...props
}: CollapsibleContentProps) => {
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
  const contentCSS = buildCss('pb_collapsible_content_kit')
  const contentSpacing = globalProps(props, { padding })

  return (
    <div className={classnames(contentCSS, className, contentSpacing)}>
      <AnimateHeight
          duration={300}
          height={context.collapsed ? 0 : 'auto'}
          id="bottom-section"
      >
        {children}
      </AnimateHeight>
    </div>
  )
}

export default CollapsibleContent

Version data entries

50 entries across 50 versions & 1 rubygems

Version Path
playbook_ui-11.11.0.pre.alpha.dialog2 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.11.0.pre.alpha.paginate1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.11.0.pre.alpha.renderer1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.11.0.pre.alpha.dialog1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.11.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.10.0.pre.alpha.pre.bold1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.10.0.pre.alpha.pagination1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.10.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.9.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.9.0.pre.alpha.fileupload1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.8.1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.8.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.7.0.pre.alpha.table1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.7.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.6.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.5.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.7.0.pre.alpha.pre.guagechart1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.6.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.5.0.pre.alpha.datepicker1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.6.0.pre.alpha.rubocopperf1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx