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.18.0.pre.alpha.pagutility1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.19.0.pre.typeahead1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.18.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.17.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.15.0.pre.alpha.dependencies1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.16.0.pre.alpha.paginationrails1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.16.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.16.0.pre.alpha.reactupgrade1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.15.0.pre.alpha.table1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.16.0.pre.alpha.pagination.rails1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.15.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.14.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.13.0.pre.alpha.fontawesome1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.13.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.12.1.pre.alpha.charts1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.12.1.pre.alpha.passphrase1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.12.1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.13.0.pre.alpha.fileupload1 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.12.0 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
playbook_ui-11.11.0.pre.alpha.paginate2 app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx